@mattisvensson/strapi-plugin-webatlas 0.2.5 → 0.3.0

package/dist/_chunks/{index-ChOgKZGK.mjs → index-DkhJl5mF.mjs}

@@ -4,9 +4,10 @@ import { Dialog, Typography, Button, Modal, Flex, SingleSelect, SingleSelectOpti
 import { useFetchClient, Layouts } from "@strapi/strapi/admin";
 import { useState, useEffect, createContext, useRef, useContext, useReducer, useCallback, useMemo, forwardRef } from "react";
 import { createPortal } from "react-dom";
-import { u as useApi, d as debounce, a as duplicateCheck, t as transformToUrl, U as URLInfo } from "./index-yLrZAFVv.mjs";
+import { u as useApi, g as getTranslation, d as debounce, a as duplicateCheck, t as transformToUrl, U as URLInfo } from "./index-D981K4TK.mjs";
+import { useIntl } from "react-intl";
 import { C as Center, E as EmptyBox } from "./EmptyBox-7D4LrvdH.mjs";
-import { c as commonjsGlobal, _ as _baseConvert } from "./_baseConvert-CDjccxdO.mjs";
+import { c as commonjsGlobal, _ as _baseConvert } from "./_baseConvert-C2SW1VHq.mjs";
 import { MeasuringStrategy, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
 import { arrayMove, useSortable, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -51,6 +52,7 @@ function Delete({ variant, item, fetchNavigations }) {
   const itemName = useRef(variant === "NavDelete" ? item.name : item.route.title);
   const closeModalState = useRef(variant === "NavDelete" ? "NavOverview" : "");
   const { setModalType } = useContext(ModalContext);
+  const { formatMessage } = useIntl();
   const handleDelete = async () => {
     try {
       if (variant === "NavDelete") await deleteNavigation(item.documentId);
@@ -63,20 +65,44 @@ function Delete({ variant, item, fetchNavigations }) {
   };
   return /* @__PURE__ */ jsx(Dialog.Root, { defaultOpen: true, onClose: () => setModalType(closeModalState.current), children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
     /* @__PURE__ */ jsxs(Dialog.Header, { children: [
-      'Delete "',
+      formatMessage({
+        id: getTranslation("delete"),
+        defaultMessage: "Delete"
+      }),
+      ': "',
       itemName.current,
       '"?'
     ] }),
-    /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs(Typography, { textAlign: "center", children: [
-      "Are you sure you want to delete the navigation ",
-      variant === "ItemDelete" && "item",
-      ' "',
-      /* @__PURE__ */ jsx("span", { style: { fontWeight: "bold" }, children: itemName.current }),
-      '"? This can not be undone.'
-    ] }) }),
+    /* @__PURE__ */ jsxs(Dialog.Body, { children: [
+      /* @__PURE__ */ jsxs(Typography, { textAlign: "center", children: [
+        formatMessage({
+          id: getTranslation("modal.delete.message.start"),
+          defaultMessage: "You are about to delete the following"
+        }),
+        " ",
+        variant === "ItemDelete" ? formatMessage({
+          id: getTranslation("modal.delete.message.navItem"),
+          defaultMessage: "navigation item"
+        }) : formatMessage({
+          id: getTranslation("modal.delete.message.navigation"),
+          defaultMessage: "navigation"
+        })
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { textAlign: "center", fontWeight: "bold", style: { marginTop: 8, marginBottom: 8, fontSize: 20 }, children: itemName.current }),
+      /* @__PURE__ */ jsx(Typography, { textAlign: "center", children: formatMessage({
+        id: getTranslation("modal.delete.message.end"),
+        defaultMessage: "This can not be undone. Are you sure?"
+      }) })
+    ] }),
     /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
-      /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { onClick: () => setModalType(closeModalState.current), variant: "tertiary", children: "No, keep" }) }),
-      /* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(Button, { variant: "danger-light", onClick: () => handleDelete(), startIcon: /* @__PURE__ */ jsx(Trash, {}), children: "Yes, delete" }) })
+      /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { onClick: () => setModalType(closeModalState.current), variant: "tertiary", children: formatMessage({
+        id: getTranslation("modal.delete.cancelText"),
+        defaultMessage: "No, keep"
+      }) }) }),
+      /* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(Button, { variant: "danger-light", onClick: () => handleDelete(), startIcon: /* @__PURE__ */ jsx(Trash, {}), children: formatMessage({
+        id: getTranslation("modal.delete.confirmText"),
+        defaultMessage: "Yes, delete"
+      }) }) })
     ] })
   ] }) });
 }
@@ -92,9 +118,11 @@ function NavModal({
   loading,
   modalToOpen,
   footer,
-  currentModalType = null
+  currentModalType = null,
+  currentModalMode = "create"
 }) {
   const { setModalType } = useContext(ModalContext);
+  const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsxs(Modal.Root, { open: true, onOpenChange: () => setModalType(""), children: [
     triggerText && /* @__PURE__ */ jsx(Modal.Trigger, { children: /* @__PURE__ */ jsx(Button, { variant: triggerVariant, children: triggerText }) }),
     /* @__PURE__ */ jsxs(Modal.Content, { children: [
@@ -111,16 +139,25 @@ function NavModal({
             /* @__PURE__ */ jsx(Modal.Footer, { children: footer ? footer : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Modal.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", type: "button", children: closeText }) }),
               /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-                currentModalType && /* @__PURE__ */ jsxs(
+                currentModalType && currentModalMode === "create" && /* @__PURE__ */ jsxs(
                   SingleSelect,
                   {
                     onChange: (value) => setModalType(value),
                     placeholder: "Choose item type",
                     value: currentModalType || "",
                     children: [
-                      /* @__PURE__ */ jsx(SingleSelectOption, { value: "ItemCreate", children: "Internal item" }),
-                      /* @__PURE__ */ jsx(SingleSelectOption, { value: "WrapperCreate", children: "Wrapper item" }),
-                      /* @__PURE__ */ jsx(SingleSelectOption, { value: "ExternalCreate", children: "External item" })
+                      /* @__PURE__ */ jsx(SingleSelectOption, { value: "ItemCreate", children: formatMessage({
+                        id: getTranslation("modal.navModal.internalItem"),
+                        defaultMessage: "Internal item"
+                      }) }),
+                      /* @__PURE__ */ jsx(SingleSelectOption, { value: "WrapperCreate", children: formatMessage({
+                        id: getTranslation("modal.navModal.wrapperItem"),
+                        defaultMessage: "Wrapper item"
+                      }) }),
+                      /* @__PURE__ */ jsx(SingleSelectOption, { value: "ExternalCreate", children: formatMessage({
+                        id: getTranslation("modal.navModal.externalItem"),
+                        defaultMessage: "External item"
+                      }) })
                     ]
                   }
                 ),
@@ -140,6 +177,7 @@ function NavCreate() {
   const [name, setName] = useState("");
   const [isActive, setIsActive] = useState(true);
   const [loading, setLoading] = useState(false);
+  const { formatMessage } = useIntl();
   const createNavigation = async () => {
     setLoading(true);
     try {
@@ -155,14 +193,17 @@ function NavCreate() {
   return /* @__PURE__ */ jsx(
     NavModal,
     {
-      confirmText: "Create",
-      closeText: "Cancel",
-      titleText: "Create new navigation",
-      loadingText: "Creating",
+      confirmText: formatMessage({ id: getTranslation("modal.navCreate.confirmText"), defaultMessage: "Create" }),
+      closeText: formatMessage({ id: getTranslation("modal.navCreate.closeText"), defaultMessage: "Cancel" }),
+      titleText: formatMessage({ id: getTranslation("modal.navCreate.titleText"), defaultMessage: "Create new navigation" }),
+      loadingText: formatMessage({ id: getTranslation("modal.navCreate.loadingText"), defaultMessage: "Creating" }),
       onConfirm: createNavigation,
       loading,
       children: /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: /* @__PURE__ */ jsx(Grid.Item, { col: 12, s: 12, children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-        /* @__PURE__ */ jsx(Field.Label, { children: "Name" }),
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+          id: getTranslation("modal.nameField.label"),
+          defaultMessage: "Name"
+        }) }),
         /* @__PURE__ */ jsx(
           Field.Input,
           {
@@ -181,6 +222,7 @@ function NavEdit({ item, fetchNavigations }) {
   const [visible, setVisible] = useState(item.visible);
   const [loading, setLoading] = useState(false);
   const { updateNavigation } = useApi();
+  const { formatMessage } = useIntl();
   const updateNav = async () => {
     setLoading(true);
     try {
@@ -196,20 +238,29 @@ function NavEdit({ item, fetchNavigations }) {
   return /* @__PURE__ */ jsx(
     NavModal,
     {
-      confirmText: "Create",
-      closeText: "Cancel",
-      titleText: `Edit navigation: ${item.name}`,
-      loadingText: "Creating",
+      confirmText: formatMessage({ id: getTranslation("modal.navEdit.confirmText"), defaultMessage: "Create" }),
+      closeText: formatMessage({ id: getTranslation("modal.navEdit.closeText"), defaultMessage: "Cancel" }),
+      titleText: formatMessage({ id: getTranslation("modal.navEdit.titleText"), defaultMessage: "Edit navigation:" }) + " " + item.name,
+      loadingText: formatMessage({ id: getTranslation("modal.navEdit.loadingText"), defaultMessage: "Updating" }),
       onConfirm: updateNav,
       loading,
       modalToOpen: "NavOverview",
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { onClick: () => setModalType("NavOverview"), variant: "tertiary", children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { children: "Update" })
+        /* @__PURE__ */ jsx(Button, { onClick: () => setModalType("NavOverview"), variant: "tertiary", children: formatMessage({
+          id: getTranslation("modal.navEdit.closeText"),
+          defaultMessage: "Cancel"
+        }) }),
+        /* @__PURE__ */ jsx(Button, { children: formatMessage({
+          id: getTranslation("modal.navEdit.confirmText"),
+          defaultMessage: "Update"
+        }) })
       ] }),
       children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
         /* @__PURE__ */ jsx(Grid.Item, { s: 12, m: 6, children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-          /* @__PURE__ */ jsx(Field.Label, { children: "Name" }),
+          /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+            id: getTranslation("modal.nameField.label"),
+            defaultMessage: "Name"
+          }) }),
           /* @__PURE__ */ jsx(
             Field.Input,
             {
@@ -220,8 +271,25 @@ function NavEdit({ item, fetchNavigations }) {
           )
         ] }) }) }),
         /* @__PURE__ */ jsx(Grid.Item, { s: 12, m: 6, children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-          /* @__PURE__ */ jsx(Field.Label, { children: "Active" }),
-          /* @__PURE__ */ jsx(Toggle, { onLabel: "Yes", offLabel: "No", checked: visible, onChange: () => setVisible((prev) => !prev) })
+          /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+            id: getTranslation("modal.activeField.label"),
+            defaultMessage: "Active"
+          }) }),
+          /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              onLabel: formatMessage({
+                id: getTranslation("modal.activeField.onLabel"),
+                defaultMessage: "Yes"
+              }),
+              offLabel: formatMessage({
+                id: getTranslation("modal.activeField.offLabel"),
+                defaultMessage: "No"
+              }),
+              checked: visible,
+              onChange: () => setVisible((prev) => !prev)
+            }
+          )
         ] }) }) })
       ] })
     }
@@ -230,6 +298,7 @@ function NavEdit({ item, fetchNavigations }) {
 function NavOverview({ navigations, setActionItem }) {
   const { setModalType } = useContext(ModalContext);
   const { selectedNavigation, setSelectedNavigation } = useContext(SelectedNavigationContext);
+  const { formatMessage } = useIntl();
   const handleSelect = (nav) => {
     setSelectedNavigation(nav);
     setModalType("");
@@ -245,18 +314,48 @@ function NavOverview({ navigations, setActionItem }) {
   return /* @__PURE__ */ jsx(
     NavModal,
     {
-      confirmText: "Create new",
-      closeText: "Cancel",
-      titleText: "Navigation overview",
-      loadingText: "Creating",
+      confirmText: formatMessage({
+        id: getTranslation("modal.navOverview.confirmText"),
+        defaultMessage: "New navigation"
+      }),
+      closeText: formatMessage({
+        id: getTranslation("modal.navOverview.closeText"),
+        defaultMessage: "Cancel"
+      }),
+      titleText: formatMessage({
+        id: getTranslation("modal.navOverview.titleText"),
+        defaultMessage: "Navigation overview"
+      }),
+      loadingText: formatMessage({
+        id: getTranslation("modal.navOverview.loadingText"),
+        defaultMessage: "Creating"
+      }),
       modalToOpen: "NavCreate",
       children: navigations.length > 0 ? navigations.map((nav, index) => /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
           /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: nav.name }),
           /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-            /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Trash, {}), variant: "danger-light", onClick: () => handleDelete(nav), children: "Delete" }),
-            /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Pencil, {}), variant: "secondary", onClick: () => handleEdit(nav), children: "Edit" }),
-            /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Check, {}), variant: "primary", onClick: () => handleSelect(nav), disabled: selectedNavigation ? selectedNavigation.slug === nav.slug : false, children: "Select" })
+            /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Trash, {}), variant: "danger-light", onClick: () => handleDelete(nav), children: formatMessage({
+              id: getTranslation("delete"),
+              defaultMessage: "Delete"
+            }) }),
+            /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Pencil, {}), variant: "secondary", onClick: () => handleEdit(nav), children: formatMessage({
+              id: getTranslation("edit"),
+              defaultMessage: "Edit"
+            }) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                startIcon: /* @__PURE__ */ jsx(Check, {}),
+                variant: "primary",
+                onClick: () => handleSelect(nav),
+                disabled: selectedNavigation ? selectedNavigation.slug === nav.slug : false,
+                children: formatMessage({
+                  id: getTranslation("select"),
+                  defaultMessage: "Select"
+                })
+              }
+            )
           ] })
         ] }, `box-${nav.slug}`),
         navigations.length - 1 !== index && /* @__PURE__ */ jsx(
@@ -267,7 +366,10 @@ function NavOverview({ navigations, setActionItem }) {
             children: /* @__PURE__ */ jsx(Divider, {})
           }
         )
-      ] }, nav.id)) : /* @__PURE__ */ jsx(Center, { height: 100, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: "No navigations available." }) })
+      ] }, nav.id)) : /* @__PURE__ */ jsx(Center, { height: 100, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: formatMessage({
+        id: getTranslation("navigation.page.emptyNavigation"),
+        defaultMessage: "You have no navigations yet..."
+      }) }) })
     }
   );
 }
@@ -3523,6 +3625,7 @@ function ExternalItemComponent({
   selectedNavigation,
   parentDocumentId
 }) {
+  const { formatMessage } = useIntl();
   useEffect(() => {
     if (variant !== "ExternalEdit" || !item) return;
     dispatchItemState({ type: "SET_TITLE", payload: item.route.title });
@@ -3558,20 +3661,27 @@ function ExternalItemComponent({
   return /* @__PURE__ */ jsx(
     NavModal,
     {
-      confirmText: variant === "ExternalCreate" ? "Add" : "Save",
-      closeText: "Cancel",
-      titleText: variant === "ExternalCreate" ? "Create new external item" : `Edit external route "${navItemState.title}"`,
-      loadingText: variant === "ExternalCreate" ? "Adding" : "Saving",
+      confirmText: variant === "ExternalCreate" ? formatMessage({ id: getTranslation("add"), defaultMessage: "Add" }) : formatMessage({ id: getTranslation("save"), defaultMessage: "Save" }),
+      closeText: formatMessage({ id: getTranslation("cancel"), defaultMessage: "Cancel" }),
+      titleText: variant === "ExternalCreate" ? formatMessage({ id: getTranslation("modal.externalItem.titleText.create"), defaultMessage: "Create new external item" }) : formatMessage({ id: getTranslation("modal.externalItem.titleText.edit"), defaultMessage: `Edit external route "${navItemState.title}"` }),
+      loadingText: variant === "ExternalCreate" ? formatMessage({ id: getTranslation("modal.externalItem.loadingText.create"), defaultMessage: "Adding" }) : formatMessage({ id: getTranslation("modal.externalItem.loadingText.edit"), defaultMessage: "Saving" }),
       onConfirm: addItem,
       modalToOpen: "",
       currentModalType: "ExternalCreate",
+      currentModalMode: variant === "ExternalCreate" ? "create" : "edit",
       children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 8, children: [
         /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-          /* @__PURE__ */ jsx(Field.Label, { children: "Title" }),
+          /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+            id: getTranslation("modal.item.titleField.label"),
+            defaultMessage: "Title"
+          }) }),
           /* @__PURE__ */ jsx(
             Field.Input,
             {
-              placeholder: "e.g. About us",
+              placeholder: formatMessage({
+                id: getTranslation("modal.item.titleField.placeholder"),
+                defaultMessage: "e.g. About us"
+              }),
               name: "title",
               value: navItemState.title || "",
               onChange: (e) => dispatchItemState({ type: "SET_TITLE", payload: e.target.value }),
@@ -3580,13 +3690,18 @@ function ExternalItemComponent({
           )
         ] }) }) }),
         /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-          /* @__PURE__ */ jsx(Field.Label, { children: "Path" }),
+          /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+            id: getTranslation("modal.item.routeField.label"),
+            defaultMessage: "Path"
+          }) }),
           /* @__PURE__ */ jsx(
             Field.Input,
             {
               required: true,
-              placeholder: "https://example.com",
-              label: "Path",
+              placeholder: formatMessage({
+                id: getTranslation("modal.externalItem.routeField.placeholder"),
+                defaultMessage: "e.g. https://example.com"
+              }),
               name: "slug",
               value: path?.value || "",
               onChange: (e) => dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: e.target.value })
@@ -3624,6 +3739,7 @@ function ItemCreateComponent({
   parentId
 }) {
   const [loading, setLoading] = useState(false);
+  const { formatMessage } = useIntl();
   useEffect(() => {
     if (!entities) return;
     setAvailableEntities(entities);
@@ -3687,10 +3803,10 @@ function ItemCreateComponent({
   return /* @__PURE__ */ jsxs(
     NavModal,
     {
-      confirmText: "Add",
-      closeText: "Cancel",
-      titleText: "Add new navigation item",
-      loadingText: "Creating",
+      confirmText: formatMessage({ id: getTranslation("add"), defaultMessage: "Add" }),
+      closeText: formatMessage({ id: getTranslation("cancel"), defaultMessage: "Cancel" }),
+      titleText: formatMessage({ id: getTranslation("modal.internalItem.titleText.create"), defaultMessage: "Add new navigation item" }),
+      loadingText: formatMessage({ id: getTranslation("modal.internalItem.loadingText.create"), defaultMessage: "Creating" }),
       onConfirm: addItem,
       loading,
       modalToOpen: "",
@@ -3698,12 +3814,18 @@ function ItemCreateComponent({
       children: [
         /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
           /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-            /* @__PURE__ */ jsx(Field.Label, { children: "Content Type" }),
+            /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+              id: getTranslation("modal.internalItem.contentType.label"),
+              defaultMessage: "Content Type"
+            }) }),
             /* @__PURE__ */ jsx(
               SingleSelect,
               {
                 value: selectedContentType ? selectedContentType.label : "",
-                placeholder: "Select a content type",
+                placeholder: formatMessage({
+                  id: getTranslation("modal.internalItem.contentType.placeholder"),
+                  defaultMessage: "Select a content type"
+                }),
                 onChange: (value) => {
                   const [contentType] = availableEntities.filter((group) => group.label === value);
                   if (contentType) {
@@ -3717,12 +3839,18 @@ function ItemCreateComponent({
             )
           ] }) }) }),
           /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-            /* @__PURE__ */ jsx(Field.Label, { children: "Entity" }),
+            /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+              id: getTranslation("modal.internalItem.entity.label"),
+              defaultMessage: "Entity"
+            }) }),
             /* @__PURE__ */ jsx(
               SingleSelect,
               {
                 value: selectedEntity ? selectedEntity.id : "",
-                placeholder: "Select a entity",
+                placeholder: formatMessage({
+                  id: getTranslation("modal.internalItem.entity.placeholder"),
+                  defaultMessage: "Select an entity"
+                }),
                 onChange: (value) => {
                   const flatEntities = availableEntities.flatMap((group) => group.entities);
                   const route = flatEntities.find((route2) => route2.id === Number(value));
@@ -3744,11 +3872,17 @@ function ItemCreateComponent({
           /* @__PURE__ */ jsx(Box, { paddingBottom: 6, paddingTop: 6, children: /* @__PURE__ */ jsx(Divider, {}) }),
           /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, paddingBottom: 6, children: [
             /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, alignItems: "baseline", children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-              /* @__PURE__ */ jsx(Field.Label, { children: "Title" }),
+              /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+                id: getTranslation("modal.item.titleField.label"),
+                defaultMessage: "Title"
+              }) }),
               /* @__PURE__ */ jsx(
                 Field.Input,
                 {
-                  placeholder: "e.g. About us",
+                  placeholder: formatMessage({
+                    id: getTranslation("modal.item.titleField.placeholder"),
+                    defaultMessage: "e.g. About us"
+                  }),
                   name: "title",
                   value: navItemState.title || "",
                   onChange: (e) => dispatchItemState({ type: "SET_TITLE", payload: e.target.value }),
@@ -3758,13 +3892,18 @@ function ItemCreateComponent({
             ] }) }) }),
             /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
               /* @__PURE__ */ jsxs(Field.Root, { children: [
-                /* @__PURE__ */ jsx(Field.Label, { children: "Path" }),
+                /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+                  id: getTranslation("modal.item.routeField.label"),
+                  defaultMessage: "Route"
+                }) }),
                 /* @__PURE__ */ jsx(
                   Field.Input,
                   {
                     required: true,
-                    placeholder: "about/",
-                    label: "Path",
+                    placeholder: formatMessage({
+                      id: getTranslation("modal.item.routeField.placeholder"),
+                      defaultMessage: "e.g. about/"
+                    }),
                     name: "slug",
                     value: path?.value || "",
                     onChange: (e) => dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: e.target.value }),
@@ -9282,6 +9421,7 @@ function ItemEditComponent({
   debouncedCheckUrl,
   setModalType
 }) {
+  const { formatMessage } = useIntl();
   useEffect(() => {
     dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: item.route.fullPath });
     dispatchItemState({ type: "SET_TITLE", payload: item.route.title });
@@ -9340,17 +9480,21 @@ function ItemEditComponent({
   return /* @__PURE__ */ jsxs(
     NavModal,
     {
-      confirmText: "Save",
-      closeText: "Cancel",
-      titleText: `Edit ${selectedContentType.label} "${item.route.title}"`,
-      loadingText: "Saving",
+      confirmText: formatMessage({ id: getTranslation("save"), defaultMessage: "Save" }),
+      closeText: formatMessage({ id: getTranslation("cancel"), defaultMessage: "Cancel" }),
+      titleText: `${formatMessage({ id: getTranslation("edit"), defaultMessage: "Edit" })} ${selectedContentType.label} "${item.route.title}"`,
+      loadingText: formatMessage({ id: getTranslation("modal.internalItem.loadingText.edit"), defaultMessage: "Saving" }),
       onConfirm: updateItem,
       modalToOpen: "",
       currentModalType: "ItemCreate",
+      currentModalMode: "edit",
       children: [
         /* @__PURE__ */ jsxs(Grid.Root, { gap: 8, children: [
           /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-            /* @__PURE__ */ jsx(Field.Label, { children: "Content Type" }),
+            /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+              id: getTranslation("modal.internalItem.contentType.label"),
+              defaultMessage: "Content Type"
+            }) }),
             /* @__PURE__ */ jsx(
               Field.Input,
               {
@@ -9360,7 +9504,10 @@ function ItemEditComponent({
             )
           ] }) }) }),
           /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-            /* @__PURE__ */ jsx(Field.Label, { children: "Entity" }),
+            /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+              id: getTranslation("modal.internalItem.entity.label"),
+              defaultMessage: "Entity"
+            }) }),
             /* @__PURE__ */ jsx(
               Field.Input,
               {
@@ -9373,11 +9520,18 @@ function ItemEditComponent({
         /* @__PURE__ */ jsx(Box, { paddingBottom: 6, paddingTop: 6, children: /* @__PURE__ */ jsx(Divider, {}) }),
         /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 8, paddingBottom: 6, children: [
           /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, alignItems: "baseline", children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-            /* @__PURE__ */ jsx(Field.Label, { children: "Title" }),
+            /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+              id: getTranslation("modal.item.titleField.label"),
+              defaultMessage: "Title"
+            }) }),
             /* @__PURE__ */ jsx(
               Field.Input,
               {
-                placeholder: "e.g. About us",
+                placeholder: formatMessage({
+                  id: getTranslation("modal.item.titleField.placeholder"),
+                  defaultMessage: "e.g. About us"
+                }),
+                name: "title",
                 value: navItemState.title || "",
                 onChange: (e) => dispatchItemState({ type: "SET_TITLE", payload: e.target.value }),
                 required: true
@@ -9386,11 +9540,17 @@ function ItemEditComponent({
           ] }) }) }),
           /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
             /* @__PURE__ */ jsxs(Field.Root, { children: [
-              /* @__PURE__ */ jsx(Field.Label, { children: "Path" }),
+              /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+                id: getTranslation("modal.item.routeField.label"),
+                defaultMessage: "Route"
+              }) }),
               /* @__PURE__ */ jsx(
                 Field.Input,
                 {
-                  placeholder: "about/",
+                  placeholder: formatMessage({
+                    id: getTranslation("modal.item.routeField.placeholder"),
+                    defaultMessage: "e.g. about/"
+                  }),
                   value: path.value || "",
                   onChange: (e) => handlePathChange(e.target.value),
                   onBlur: (e) => {
@@ -9422,6 +9582,7 @@ function WrapperItemComponent({
   selectedNavigation,
   parentDocumentId
 }) {
+  const { formatMessage } = useIntl();
   useEffect(() => {
     if (variant !== "WrapperEdit" || !item) return;
     dispatchItemState({ type: "SET_TITLE", payload: item.route.title });
@@ -9457,19 +9618,26 @@ function WrapperItemComponent({
   return /* @__PURE__ */ jsx(
     NavModal,
     {
-      confirmText: variant === "WrapperCreate" ? "Add" : "Save",
-      closeText: "Cancel",
-      titleText: variant === "WrapperCreate" ? "Create new wrapper item" : `Edit wrapper item "${navItemState.title}"`,
-      loadingText: variant === "WrapperCreate" ? "Adding" : "Saving",
+      confirmText: variant === "WrapperCreate" ? formatMessage({ id: getTranslation("add"), defaultMessage: "Add" }) : formatMessage({ id: getTranslation("save"), defaultMessage: "Save" }),
+      closeText: formatMessage({ id: getTranslation("cancel"), defaultMessage: "Cancel" }),
+      titleText: variant === "WrapperCreate" ? formatMessage({ id: getTranslation("modal.wrapperItem.titleText.create"), defaultMessage: "Create new wrapper item" }) : formatMessage({ id: getTranslation("modal.wrapperItem.titleText.edit"), defaultMessage: "Edit wrapper item:" }) + ` "${navItemState.title}"`,
+      loadingText: variant === "WrapperCreate" ? formatMessage({ id: getTranslation("modal.wrapperItem.loadingText.create"), defaultMessage: "Adding" }) : formatMessage({ id: getTranslation("modal.wrapperItem.loadingText.edit"), defaultMessage: "Saving" }),
       onConfirm: addItem,
       modalToOpen: "",
       currentModalType: "WrapperCreate",
+      currentModalMode: variant === "WrapperCreate" ? "create" : "edit",
       children: /* @__PURE__ */ jsx(Grid.Root, { gap: 8, children: /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-        /* @__PURE__ */ jsx(Field.Label, { children: "Title" }),
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+          id: getTranslation("modal.wrapperItem.titleField.label"),
+          defaultMessage: "Title"
+        }) }),
         /* @__PURE__ */ jsx(
           Field.Input,
           {
-            placeholder: "e.g. About us",
+            placeholder: formatMessage({
+              id: getTranslation("modal.wrapperItem.titleField.placeholder"),
+              defaultMessage: "e.g. About us"
+            }),
             name: "title",
             value: navItemState.title || "",
             onChange: (e) => dispatchItemState({ type: "SET_TITLE", payload: e.target.value }),
@@ -9484,13 +9652,20 @@ const WrapperItem = withModalSharedLogic(WrapperItemComponent);
 function Header({ navigations }) {
   const { setModalType } = useContext(ModalContext);
   const { selectedNavigation, setSelectedNavigation } = useContext(SelectedNavigationContext);
+  const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
-    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setModalType("NavOverview"), children: "Manage" }),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setModalType("NavOverview"), children: formatMessage({
+      id: getTranslation("manage"),
+      defaultMessage: "Manage"
+    }) }),
     /* @__PURE__ */ jsx(
       SingleSelect,
       {
         value: selectedNavigation ? selectedNavigation.slug : "",
-        placeholder: "Select Navigation",
+        placeholder: formatMessage({
+          id: getTranslation("navigation.page.selectNavigation"),
+          defaultMessage: "Select Navigation"
+        }),
         onChange: (value) => {
           const navItem = navigations.find((nav) => nav.slug === value);
           if (navItem) {
@@ -9560,6 +9735,7 @@ const RouteItem = forwardRef(({ item, setParentId, setActionItem, ghost, depth,
   if (!item || !item.route) return null;
   const { setModalType } = useContext(ModalContext);
   const { get } = useFetchClient();
+  const { formatMessage } = useIntl();
   const [itemStatus, setItemStatus] = useState({
     status: "published",
     variant: "primary",
@@ -9672,9 +9848,18 @@ const RouteItem = forwardRef(({ item, setParentId, setActionItem, ghost, depth,
             /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 4, children: [
               type === "internal" && /* @__PURE__ */ jsx(Status, { variant: itemStatus.variant, size: "S", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: itemStatus.textColor, children: itemStatus.status }) }),
               /* @__PURE__ */ jsxs(SimpleMenu, { label: "Notifications", tag: IconButton, icon: /* @__PURE__ */ jsx(More, {}), children: [
-                /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleEdit(), children: "Edit" }),
-                /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleAddChildren(), children: "Add children" }),
-                /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleDelete(), children: /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "Delete" }) })
+                /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleEdit(), children: formatMessage({
+                  id: getTranslation("edit"),
+                  defaultMessage: "Edit"
+                }) }),
+                /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleAddChildren(), children: formatMessage({
+                  id: getTranslation("navigation.page.navItem.addChildren"),
+                  defaultMessage: "Add children"
+                }) }),
+                /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleDelete(), children: /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: formatMessage({
+                  id: getTranslation("delete"),
+                  defaultMessage: "Delete"
+                }) }) })
               ] })
             ] })
           ] })
@@ -9729,6 +9914,7 @@ const Navigation = () => {
   const [activeId, setActiveId] = useState(null);
   const [overId, setOverId] = useState(null);
   const [offsetLeft, setOffsetLeft] = useState(0);
+  const { formatMessage } = useIntl();
   if (!navigations) return null;
   useEffect(() => {
     if (modalType === "NavOverview" || modalType === "") {
@@ -9841,21 +10027,33 @@ const Navigation = () => {
       /* @__PURE__ */ jsx(
         Layouts.Header,
         {
-          title: "Navigation",
-          subtitle: "Manage your navigation settings here",
+          title: formatMessage({
+            id: getTranslation("navigation.page.title"),
+            defaultMessage: "Navigation"
+          }) + (selectedNavigation ? `: ${selectedNavigation.name}` : ""),
+          subtitle: /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: selectedNavigation ? `ID: ${selectedNavigation.id} | DocumentID : ${selectedNavigation.documentId}` : formatMessage({
+            id: getTranslation("navigation.page.subtitle.noNavigationSelected"),
+            defaultMessage: "No navigation selected"
+          }) }),
           primaryAction: /* @__PURE__ */ jsx(Header, { navigations })
         }
       ),
       /* @__PURE__ */ jsxs(Layouts.Content, { children: [
-        /* @__PURE__ */ jsxs(Flex, { gap: 4, paddingBottom: 6, justifyContent: "flex-end", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: () => setModalType("ItemCreate"), children: "New Item" }),
+        selectedNavigation && /* @__PURE__ */ jsxs(Flex, { gap: 4, paddingBottom: 6, justifyContent: "flex-end", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: () => setModalType("ItemCreate"), children: formatMessage({
+            id: getTranslation("navigation.page.newItemButton"),
+            defaultMessage: "New Item"
+          }) }),
           /* @__PURE__ */ jsx(
             Button,
             {
               startIcon: /* @__PURE__ */ jsx(Check, {}),
               onClick: () => saveOrder(),
               disabled: JSON.stringify(navigationItems) === JSON.stringify(initialNavigationItems),
-              children: "Save"
+              children: formatMessage({
+                id: getTranslation("save"),
+                defaultMessage: "Save"
+              })
             }
           )
         ] }),
@@ -9896,12 +10094,21 @@ const Navigation = () => {
           }
         ) }),
         navigations?.length === 0 && /* @__PURE__ */ jsxs(Center, { height: 400, children: [
-          /* @__PURE__ */ jsx(EmptyBox, { msg: "You have no navigations yet..." }),
-          /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => setModalType("NavCreate"), children: "Create new Navigation" })
+          /* @__PURE__ */ jsx(EmptyBox, { msg: formatMessage({
+            id: getTranslation("navigation.page.emptyNavigation"),
+            defaultMessage: "You have no navigations yet..."
+          }) }),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => setModalType("NavCreate"), children: formatMessage({
+            id: getTranslation("navigation.page.createNewNavigation"),
+            defaultMessage: "Create new navigation"
+          }) })
         ] }),
         navigationItems?.length === 0 && /* @__PURE__ */ jsxs(Center, { height: 400, children: [
           /* @__PURE__ */ jsx(EmptyBox, { msg: "Your navigation is empty..." }),
-          /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => setModalType("ItemCreate"), children: "Create new item" })
+          /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => setModalType("ItemCreate"), children: formatMessage({
+            id: getTranslation("navigation.page.createNewItem"),
+            defaultMessage: "Create new item"
+          }) })
         ] })
       ] })
     ] }),
@@ -9921,4 +10128,4 @@ const Navigation = () => {
 export {
   Navigation as default
 };
-//# sourceMappingURL=index-ChOgKZGK.mjs.map
+//# sourceMappingURL=index-DkhJl5mF.mjs.map