@elementor/editor-components 3.35.0-425 → 3.35.0-426

package/dist/index.mjs

@@ -17,7 +17,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __27 } from "@wordpress/i18n";
+import { __ as __28 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -110,7 +110,7 @@ var slice = createSlice({
   reducers: {
     add: (state, { payload }) => {
       if (Array.isArray(payload)) {
-        state.data = [...state.data, ...payload];
+        state.data = [...payload, ...state.data];
       } else {
         state.data.unshift(payload);
       }
@@ -1693,7 +1693,7 @@ import { useState as useState6 } from "react";
 import { getAngieSdk } from "@elementor/editor-mcp";
 import { AIIcon, ComponentsIcon as ComponentsIcon2 } from "@elementor/icons";
 import { Box as Box11, Button as Button4, Divider as Divider3, Link as Link3, List as List3, Stack as Stack10, Typography as Typography9 } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 
 // src/store/actions/rename-component.ts
 import { getV1DocumentsManager as getV1DocumentsManager4, setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
@@ -2071,19 +2071,23 @@ import {
   Typography as Typography8,
   usePopupState as usePopupState3
 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 
 // src/store/actions/archive-component.ts
 import { setDocumentModifiedStatus as setDocumentModifiedStatus4 } from "@elementor/editor-documents";
-import { __getStore as getStore } from "@elementor/store";
-var archiveComponent = (componentId) => {
-  const store = getStore();
-  const dispatch18 = store?.dispatch;
-  if (!dispatch18) {
-    return;
-  }
-  dispatch18(slice.actions.archive(componentId));
+import { notify } from "@elementor/editor-notifications";
+import { __dispatch as dispatch9 } from "@elementor/store";
+import { __ as __15 } from "@wordpress/i18n";
+var successNotification = (componentId, componentName) => ({
+  type: "success",
+  /* translators: %s: component name */
+  message: __15("Successfully deleted component %s", "elementor").replace("%s", componentName),
+  id: `success-archived-components-notification-${componentId}`
+});
+var archiveComponent = (componentId, componentName) => {
+  dispatch9(slice.actions.archive(componentId));
   setDocumentModifiedStatus4(true);
+  notify(successNotification(componentId, componentName));
 };
 
 // src/store/actions/load-components-assets.ts
@@ -2121,7 +2125,7 @@ var getComponentIds = async (elements) => {
 };
 
 // src/store/actions/load-components-overridable-props.ts
-import { __dispatch as dispatch9, __getState as getState12 } from "@elementor/store";
+import { __dispatch as dispatch10, __getState as getState12 } from "@elementor/store";
 function loadComponentsOverridableProps(componentIds) {
   if (!componentIds.length) {
     return;
@@ -2137,7 +2141,7 @@ async function loadComponentOverrides(componentId) {
   if (!overridableProps) {
     return;
   }
-  dispatch9(
+  dispatch10(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps
@@ -2146,7 +2150,7 @@ async function loadComponentOverrides(componentId) {
 }
 
 // src/store/actions/load-components-styles.ts
-import { __dispatch as dispatch10, __getState as getState13 } from "@elementor/store";
+import { __dispatch as dispatch11, __getState as getState13 } from "@elementor/store";
 async function loadComponentsStyles(componentIds) {
   if (!componentIds.length) {
     return;
@@ -2169,7 +2173,7 @@ function addStyles(data) {
   const styles = Object.fromEntries(
     data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
   );
-  dispatch10(slice.actions.addStyles(styles));
+  dispatch11(slice.actions.addStyles(styles));
 }
 function extractStyles(element) {
   return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
@@ -2199,14 +2203,14 @@ import { __getState as getState14 } from "@elementor/store";
 
 // src/components/create-component-form/utils/component-form-schema.ts
 import { z } from "@elementor/schema";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
-var baseComponentSchema = z.string().trim().max(MAX_NAME_LENGTH, __15("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var baseComponentSchema = z.string().trim().max(MAX_NAME_LENGTH, __16("Component name is too long. Please keep it under 50 characters.", "elementor"));
 var createBaseComponentSchema = (existingNames) => {
   return z.object({
     componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
-      message: __15("Component name already exists", "elementor")
+      message: __16("Component name already exists", "elementor")
     })
   });
 };
@@ -2214,9 +2218,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: __15("Component name is required.", "elementor")
+      message: __16("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: __15("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: __16("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -2342,7 +2346,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
     if (!component.id) {
       throw new Error("Component ID is required");
     }
-    archiveComponent(component.id);
+    archiveComponent(component.id, component.name);
   };
   return /* @__PURE__ */ React14.createElement(Stack8, null, /* @__PURE__ */ React14.createElement(
     WarningInfotip,
@@ -2425,9 +2429,9 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           openEditMode();
         }
       },
-      __16("Rename", "elementor")
+      __17("Rename", "elementor")
     ),
-    /* @__PURE__ */ React14.createElement(MenuListItem3, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, /* @__PURE__ */ React14.createElement(Typography8, { variant: "caption", sx: { color: "error.light" } }, __16("Archive", "elementor")))
+    /* @__PURE__ */ React14.createElement(MenuListItem3, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, /* @__PURE__ */ React14.createElement(Typography8, { variant: "caption", sx: { color: "error.light" } }, __17("Delete", "elementor")))
   ));
 };
 var addComponentToPage = (model) => {
@@ -2546,7 +2550,7 @@ var EmptyState = () => {
     const sdk = getAngieSdk();
     if (sdk.isAngieReady()) {
       sdk.triggerAngie({
-        prompt: __17(
+        prompt: __18(
           "Create a [hero/testimonial/product card/CTA/feature] component for my [business type]. Include [describe what you want]",
           "elementor"
         ),
@@ -2566,7 +2570,7 @@ var EmptyState = () => {
       gap: 2,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React16.createElement(Stack10, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __17("No components yet", "elementor")), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, __17("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React16.createElement("br", null), __17("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React16.createElement(Stack10, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __18("No components yet", "elementor")), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, __18("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React16.createElement("br", null), __18("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React16.createElement(
       Link3,
       {
         href: LEARN_MORE_URL,
@@ -2575,13 +2579,13 @@ var EmptyState = () => {
         variant: "caption",
         color: "info.main"
       },
-      __17("Learn more about components", "elementor")
+      __18("Learn more about components", "elementor")
     )),
     /* @__PURE__ */ React16.createElement(Divider3, { sx: { width: "100%" } }),
-    /* @__PURE__ */ React16.createElement(Stack10, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __17("Create your first one:", "elementor")), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, __17(
+    /* @__PURE__ */ React16.createElement(Stack10, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __18("Create your first one:", "elementor")), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, __18(
       'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
       "elementor"
-    )), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "secondary" }, __17("Or", "elementor")), /* @__PURE__ */ React16.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React16.createElement(
+    )), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "secondary" }, __18("Or", "elementor")), /* @__PURE__ */ React16.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React16.createElement(
       Button4,
       {
         color: "secondary",
@@ -2590,7 +2594,7 @@ var EmptyState = () => {
         onClick: handleCreateWithAI,
         endIcon: /* @__PURE__ */ React16.createElement(AIIcon, null)
       },
-      __17("Create component with AI", "elementor")
+      __18("Create component with AI", "elementor")
     )))
   );
 };
@@ -2614,7 +2618,7 @@ var EmptySearchResult = () => {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, __17("Sorry, nothing matched", "elementor")),
+      /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, __18("Sorry, nothing matched", "elementor")),
       searchValue && /* @__PURE__ */ React16.createElement(
         Typography9,
         {
@@ -2642,8 +2646,8 @@ var EmptySearchResult = () => {
         /* @__PURE__ */ React16.createElement("span", null, "\u201D.")
       )
     ),
-    /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "inherit" }, __17("Try something else.", "elementor")),
-    /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(Link3, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __17("Clear & try again", "elementor")))
+    /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "inherit" }, __18("Try something else.", "elementor")),
+    /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(Link3, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __18("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -2675,23 +2679,23 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 import * as React18 from "react";
 import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef5, useState as useState8 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
-import { notify as notify2 } from "@elementor/editor-notifications";
+import { notify as notify3 } from "@elementor/editor-notifications";
 import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
-import { StarIcon } from "@elementor/icons";
+import { ComponentsIcon as ComponentsIcon3 } from "@elementor/icons";
 import { __getState as getState15 } from "@elementor/store";
-import { Alert as Alert2, Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Snackbar, Stack as Stack11, TextField as TextField3, Typography as Typography10 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import { Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Stack as Stack11, TextField as TextField3, Typography as Typography10 } from "@elementor/ui";
+import { __ as __20 } from "@wordpress/i18n";
 
 // src/prevent-non-atomic-nesting.ts
 import { isAtomicWidget } from "@elementor/editor-canvas";
 import { getAllDescendants as getAllDescendants2, getElementType } from "@elementor/editor-elements";
-import { notify } from "@elementor/editor-notifications";
+import { notify as notify2 } from "@elementor/editor-notifications";
 import { blockCommand } from "@elementor/editor-v1-adapters";
-import { __getStore as getStore2 } from "@elementor/store";
-import { __ as __18 } from "@wordpress/i18n";
+import { __getStore as getStore } from "@elementor/store";
+import { __ as __19 } from "@wordpress/i18n";
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: __18("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: __19("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -2709,7 +2713,7 @@ function initNonAtomicNestingPrevention() {
   });
 }
 function isEditingComponent() {
-  const state = getStore2()?.getState();
+  const state = getStore()?.getState();
   if (!state) {
     return false;
   }
@@ -2730,7 +2734,7 @@ function blockNonAtomicCreate(args) {
   if (isElementAtomic(elementType)) {
     return false;
   }
-  notify(NON_ATOMIC_ELEMENT_ALERT);
+  notify2(NON_ATOMIC_ELEMENT_ALERT);
   return true;
 }
 function blockNonAtomicMove(args) {
@@ -2746,7 +2750,7 @@ function blockNonAtomicMove(args) {
     return allElements.some((element) => !isAtomicWidget(element));
   });
   if (hasNonAtomicElement) {
-    notify(NON_ATOMIC_ELEMENT_ALERT);
+    notify2(NON_ATOMIC_ELEMENT_ALERT);
   }
   return hasNonAtomicElement;
 }
@@ -2764,7 +2768,7 @@ function blockNonAtomicPaste(args) {
   }
   const hasNonAtomicElement = hasNonAtomicElementsInTree(data.clipboard.elements);
   if (hasNonAtomicElement) {
-    notify(NON_ATOMIC_ELEMENT_ALERT);
+    notify2(NON_ATOMIC_ELEMENT_ALERT);
   }
   return hasNonAtomicElement;
 }
@@ -2798,18 +2802,18 @@ function findNonAtomicElementsInElement(element) {
 
 // src/store/actions/create-unpublished-component.ts
 import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
-import { __dispatch as dispatch11 } from "@elementor/store";
+import { __dispatch as dispatch12 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId3 } from "@elementor/utils";
 async function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
   const generatedUid = uid ?? generateUniqueId3("component");
   const componentBase = { uid: generatedUid, name, overridableProps };
-  dispatch11(
+  dispatch12(
     slice.actions.addUnpublished({
       ...componentBase,
       elements: [element]
     })
   );
-  dispatch11(slice.actions.addCreatedThisSession(generatedUid));
+  dispatch12(slice.actions.addCreatedThisSession(generatedUid));
   const componentInstance = await replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
@@ -2903,16 +2907,15 @@ function countNestedElements(container) {
 function CreateComponentForm() {
   const [element, setElement] = useState8(null);
   const [anchorPosition, setAnchorPosition] = useState8();
-  const [resultNotification, setResultNotification] = useState8(null);
   const eventData = useRef5(null);
   useEffect2(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
       const nonAtomicElements = findNonAtomicElementsInElement(event.detail.element);
       if (nonAtomicElements.length > 0) {
-        notify2({
+        notify3({
           type: "default",
-          message: __19(
+          message: __20(
             "Components require atomic elements only. Remove widgets to create this component.",
             "elementor"
           ),
@@ -2949,19 +2952,18 @@ function CreateComponentForm() {
       } else {
         throw new Error("Failed to find published component");
       }
-      setResultNotification({
-        show: true,
-        // Translators: %1$s: Component name, %2$s: Component UID
-        message: __19("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
-        type: "success"
+      notify3({
+        type: "success",
+        message: __20("Component created successfully.", "elementor"),
+        id: `component-saved-successfully-${uid}`
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = __19("Failed to save component. Please try again.", "elementor");
-      setResultNotification({
-        show: true,
+      const errorMessage = __20("Failed to create component. Please try again.", "elementor");
+      notify3({
+        type: "error",
         message: errorMessage,
-        type: "error"
+        id: "component-save-failed"
       });
     }
   };
@@ -2992,15 +2994,7 @@ function CreateComponentForm() {
         closePopup: cancelSave
       }
     )
-  ), /* @__PURE__ */ React18.createElement(Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React18.createElement(
-    Alert2,
-    {
-      onClose: () => setResultNotification(null),
-      severity: resultNotification?.type,
-      sx: { width: "100%" }
-    },
-    resultNotification?.message
-  )));
+  ));
 }
 var FONT_SIZE = "tiny";
 var Form2 = ({
@@ -3028,10 +3022,10 @@ var Form2 = ({
     }
   };
   const texts = {
-    heading: __19("Save as a component", "elementor"),
-    name: __19("Name", "elementor"),
-    cancel: __19("Cancel", "elementor"),
-    create: __19("Create", "elementor")
+    heading: __20("Create component", "elementor"),
+    name: __20("Name", "elementor"),
+    cancel: __20("Cancel", "elementor"),
+    create: __20("Create", "elementor")
   };
   const nameInputId = "component-name";
   return /* @__PURE__ */ React18.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React18.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React18.createElement(
@@ -3043,7 +3037,7 @@ var Form2 = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__PURE__ */ React18.createElement(StarIcon, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React18.createElement(ComponentsIcon3, { fontSize: FONT_SIZE }),
     /* @__PURE__ */ React18.createElement(Typography10, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
   ), /* @__PURE__ */ React18.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React18.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(FormLabel2, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React18.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(
     TextField3,
@@ -3070,24 +3064,24 @@ import { throttle as throttle2 } from "@elementor/utils";
 
 // src/store/actions/update-current-component.ts
 import { setDocumentModifiedStatus as setDocumentModifiedStatus6 } from "@elementor/editor-documents";
-import { __getStore as getStore3 } from "@elementor/store";
+import { __getStore as getStore2 } from "@elementor/store";
 function updateCurrentComponent({
   path,
   currentComponentId
 }) {
-  const dispatch18 = getStore3()?.dispatch;
-  if (!dispatch18) {
+  const dispatch19 = getStore2()?.dispatch;
+  if (!dispatch19) {
     return;
   }
-  dispatch18(slice.actions.setPath(path));
-  dispatch18(slice.actions.setCurrentComponentId(currentComponentId));
+  dispatch19(slice.actions.setPath(path));
+  dispatch19(slice.actions.setCurrentComponentId(currentComponentId));
 }
 
 // src/components/edit-component/component-modal.tsx
 import * as React19 from "react";
 import { useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
-import { __ as __20 } from "@wordpress/i18n";
+import { __ as __21 } from "@wordpress/i18n";
 
 // src/hooks/use-canvas-document.ts
 import { getCanvasIframeDocument } from "@elementor/editor-canvas";
@@ -3209,7 +3203,7 @@ function Backdrop({ canvas, element, onClose }) {
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": __20("Exit component editing mode", "elementor")
+      "aria-label": __21("Exit component editing mode", "elementor")
     }
   );
 }
@@ -3346,18 +3340,18 @@ import * as React21 from "react";
 import { closeDialog, openDialog } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
 import { Box as Box12, Button as Button6, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack12, Typography as Typography11 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
+import { __ as __22 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
     component: /* @__PURE__ */ React21.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __21("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React21.createElement(Box12, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React21.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React21.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React21.createElement(Typography11, { variant: "subtitle1" }, content))), /* @__PURE__ */ React21.createElement(DialogContent, null, /* @__PURE__ */ React21.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React21.createElement(Typography11, { variant: "body2" }, __21(
+  const content = __22("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React21.createElement(Box12, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React21.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React21.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React21.createElement(Typography11, { variant: "subtitle1" }, content))), /* @__PURE__ */ React21.createElement(DialogContent, null, /* @__PURE__ */ React21.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React21.createElement(Typography11, { variant: "body2" }, __22(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React21.createElement(DialogActions, null, /* @__PURE__ */ React21.createElement(Button6, { color: "secondary", variant: "contained", onClick: closeDialog }, __21("Close", "elementor"))))));
+  )), /* @__PURE__ */ React21.createElement(DialogActions, null, /* @__PURE__ */ React21.createElement(Button6, { color: "secondary", variant: "contained", onClick: closeDialog }, __22("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
@@ -3366,9 +3360,9 @@ import { ControlAdornmentsProvider } from "@elementor/editor-controls";
 import { getFieldIndicators } from "@elementor/editor-editing-panel";
 import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
 import { PanelBody as PanelBody2, PanelHeader as PanelHeader2, PanelHeaderTitle as PanelHeaderTitle2 } from "@elementor/editor-panels";
-import { ComponentsIcon as ComponentsIcon3, PencilIcon as PencilIcon2 } from "@elementor/icons";
+import { ComponentsIcon as ComponentsIcon4, PencilIcon as PencilIcon2 } from "@elementor/icons";
 import { IconButton as IconButton6, Stack as Stack17, Tooltip as Tooltip4 } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 
 // src/hooks/use-component-instance-settings.ts
 import { useElement } from "@elementor/editor-editing-panel";
@@ -3437,7 +3431,7 @@ function useComponentInstanceSettings() {
 import * as React22 from "react";
 import { ComponentPropListIcon as ComponentPropListIcon4, PencilIcon } from "@elementor/icons";
 import { Button as Button7, Stack as Stack13, Typography as Typography12 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
   return /* @__PURE__ */ React22.createElement(
     Stack13,
@@ -3450,12 +3444,12 @@ var EmptyState2 = ({ onEditComponent }) => {
       gap: 1.5
     },
     /* @__PURE__ */ React22.createElement(ComponentPropListIcon4, { fontSize: "large" }),
-    /* @__PURE__ */ React22.createElement(Typography12, { align: "center", variant: "subtitle2" }, __22("No properties yet", "elementor")),
-    /* @__PURE__ */ React22.createElement(Typography12, { align: "center", variant: "caption", maxWidth: "170px" }, __22(
+    /* @__PURE__ */ React22.createElement(Typography12, { align: "center", variant: "subtitle2" }, __23("No properties yet", "elementor")),
+    /* @__PURE__ */ React22.createElement(Typography12, { align: "center", variant: "caption", maxWidth: "170px" }, __23(
       "Edit the component to add properties, manage them or update the design across all instances.",
       "elementor"
     )),
-    /* @__PURE__ */ React22.createElement(Button7, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React22.createElement(PencilIcon, { fontSize: "small" }), __22("Edit component", "elementor"))
+    /* @__PURE__ */ React22.createElement(Button7, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React22.createElement(PencilIcon, { fontSize: "small" }), __23("Edit component", "elementor"))
   );
 };
 
@@ -3508,7 +3502,7 @@ function getControlsByBind(controls) {
 }
 
 // src/store/actions/update-overridable-prop.ts
-import { __dispatch as dispatch12, __getState as getState16 } from "@elementor/store";
+import { __dispatch as dispatch13, __getState as getState16 } from "@elementor/store";
 function updateOverridableProp(componentId, propValue, originPropFields) {
   const overridableProps = selectOverridableProps(getState16(), componentId);
   if (!overridableProps) {
@@ -3534,7 +3528,7 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
       }
     }
   };
-  dispatch12(
+  dispatch13(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: newOverridableProps
@@ -3733,12 +3727,12 @@ function InstanceEditingPanel() {
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = __23("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = __24("Edit %s", "elementor").replace("%s", component.name);
   const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React26.createElement(Stack17, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React26.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React26.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React26.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React26.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React26.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React26.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React26.createElement(PanelBody2, null, /* @__PURE__ */ React26.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React26.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React26.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React26.createElement(Stack17, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React26.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React26.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React26.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React26.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React26.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React26.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React26.createElement(PanelBody2, null, /* @__PURE__ */ React26.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React26.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React26.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React26.createElement(
     OverridePropsGroup,
     {
       key: group.id,
@@ -3819,10 +3813,10 @@ import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { useElement as useElement3 } from "@elementor/editor-editing-panel";
 import { getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Popover4, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __25 } from "@wordpress/i18n";
+import { __ as __26 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
-import { __dispatch as dispatch13, __getState as getState17 } from "@elementor/store";
+import { __dispatch as dispatch14, __getState as getState17 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId4 } from "@elementor/utils";
 function setOverridableProp({
   componentId,
@@ -3873,7 +3867,7 @@ function setOverridableProp({
   if (isChangingGroups) {
     groups = removePropFromGroup(groups, existingOverridableProp.groupId, overridableProp.overrideKey);
   }
-  dispatch13(
+  dispatch14(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -3890,7 +3884,7 @@ import * as React29 from "react";
 import { forwardRef as forwardRef2 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
 import { Box as Box14, styled as styled4 } from "@elementor/ui";
-import { __ as __24 } from "@wordpress/i18n";
+import { __ as __25 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
 var IconContainer = styled4(Box14)`
 	pointer-events: none;
@@ -3950,7 +3944,7 @@ var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @_
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? __24("Overridable property", "elementor") : __24("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? __25("Overridable property", "elementor") : __25("Make prop overridable", "elementor")
   },
   isOverridable ? /* @__PURE__ */ React29.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React29.createElement(PlusIcon, { fontSize: SIZE2 })
 )));
@@ -4021,7 +4015,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(Tooltip5, { placement: "top", title: __25("Override Property", "elementor") }, /* @__PURE__ */ React30.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(Tooltip5, { placement: "top", title: __26("Override Property", "elementor") }, /* @__PURE__ */ React30.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React30.createElement(
     Popover4,
     {
       disableScrollLock: true,
@@ -4471,24 +4465,24 @@ function initMcp() {
 
 // src/populate-store.ts
 import { useEffect as useEffect6 } from "react";
-import { __dispatch as dispatch14 } from "@elementor/store";
+import { __dispatch as dispatch15 } from "@elementor/store";
 function PopulateStore() {
   useEffect6(() => {
-    dispatch14(loadComponents());
+    dispatch15(loadComponents());
   }, []);
   return null;
 }
 
 // src/prevent-circular-nesting.ts
 import { getAllDescendants as getAllDescendants4 } from "@elementor/editor-elements";
-import { notify as notify3 } from "@elementor/editor-notifications";
+import { notify as notify4 } from "@elementor/editor-notifications";
 import { blockCommand as blockCommand2 } from "@elementor/editor-v1-adapters";
 import { __getState as getState19 } from "@elementor/store";
-import { __ as __26 } from "@wordpress/i18n";
+import { __ as __27 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: __26("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: __27("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -4565,7 +4559,7 @@ function blockCircularCreate(args) {
   }
   const isBlocked = wouldCreateCircularNesting(componentId);
   if (isBlocked) {
-    notify3(COMPONENT_CIRCULAR_NESTING_ALERT);
+    notify4(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return isBlocked;
 }
@@ -4585,7 +4579,7 @@ function blockCircularMove(args) {
     });
   });
   if (hasCircularComponent) {
-    notify3(COMPONENT_CIRCULAR_NESTING_ALERT);
+    notify4(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return hasCircularComponent;
 }
@@ -4601,16 +4595,16 @@ function blockCircularPaste(args) {
   const allComponentIds = extractComponentIdsFromElements(data.clipboard.elements);
   const hasCircularComponent = allComponentIds.some(wouldCreateCircularNesting);
   if (hasCircularComponent) {
-    notify3(COMPONENT_CIRCULAR_NESTING_ALERT);
+    notify4(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return hasCircularComponent;
 }
 
 // src/store/actions/remove-component-styles.ts
-import { __dispatch as dispatch15 } from "@elementor/store";
+import { __dispatch as dispatch16 } from "@elementor/store";
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  dispatch15(slice.actions.removeStyles({ id: id2 }));
+  dispatch16(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
@@ -4637,7 +4631,7 @@ var componentsStylesProvider = createStylesProvider({
 
 // src/sync/create-components-before-save.ts
 import { updateElementSettings as updateElementSettings3 } from "@elementor/editor-elements";
-import { __dispatch as dispatch16, __getState as getState21 } from "@elementor/store";
+import { __dispatch as dispatch17, __getState as getState21 } from "@elementor/store";
 async function createComponentsBeforeSave({
   elements,
   status
@@ -4649,7 +4643,7 @@ async function createComponentsBeforeSave({
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    dispatch16(
+    dispatch17(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -4659,7 +4653,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    dispatch16(slice.actions.resetUnpublished());
+    dispatch17(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -4734,18 +4728,13 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 };
 
 // src/sync/update-archived-component-before-save.ts
-import { notify as notify4 } from "@elementor/editor-notifications";
+import { notify as notify5 } from "@elementor/editor-notifications";
 import { __getState as getState23 } from "@elementor/store";
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
   id: "failed-archived-components-notification"
 });
-var successNotification = (message) => ({
-  type: "success",
-  message: `Successfully archived components: ${message}`,
-  id: "success-archived-components-notification"
-});
 var updateArchivedComponentBeforeSave = async () => {
   try {
     const archivedComponents = selectArchivedComponents(getState23());
@@ -4756,12 +4745,8 @@ var updateArchivedComponentBeforeSave = async () => {
       archivedComponents.map((component) => component.id)
     );
     const failedIds = result.failedIds.join(", ");
-    const successIds = result.successIds.join(", ");
     if (failedIds) {
-      notify4(failedNotification(failedIds));
-    }
-    if (successIds) {
-      notify4(successNotification(successIds));
+      notify5(failedNotification(failedIds));
     }
   } catch (error) {
     throw new Error(`Failed to update archived components: ${error}`);
@@ -4769,7 +4754,7 @@ var updateArchivedComponentBeforeSave = async () => {
 };
 
 // src/sync/update-component-title-before-save.ts
-import { __dispatch as dispatch17, __getState as getState24 } from "@elementor/store";
+import { __dispatch as dispatch18, __getState as getState24 } from "@elementor/store";
 var updateComponentTitleBeforeSave = async () => {
   const updatedComponentNames = selectUpdatedComponentNames(getState24());
   if (!updatedComponentNames.length) {
@@ -4777,7 +4762,7 @@ var updateComponentTitleBeforeSave = async () => {
   }
   const result = await apiClient.updateComponentTitle(updatedComponentNames);
   if (result.failedIds.length === 0) {
-    dispatch17(slice.actions.cleanUpdatedComponentNames());
+    dispatch18(slice.actions.cleanUpdatedComponentNames());
   }
 };
 
@@ -4829,7 +4814,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __27("Components", "elementor"),
+    label: __28("Components", "elementor"),
     component: Components,
     position: 1
   });