@elementor/editor-components 3.35.0-460 → 3.35.0-462

package/dist/index.js

@@ -42,9 +42,9 @@ var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_panels4 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_store80 = require("@elementor/store");
-var import_i18n30 = require("@wordpress/i18n");
+var import_i18n31 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -1690,8 +1690,8 @@ function getComponentName() {
 }
 
 // src/components/components-tab/components.tsx
-var React18 = __toESM(require("react"));
-var import_editor_ui8 = require("@elementor/editor-ui");
+var React19 = __toESM(require("react"));
+var import_editor_ui9 = require("@elementor/editor-ui");
 
 // src/hooks/use-components.ts
 var import_store27 = require("@elementor/store");
@@ -1701,6 +1701,17 @@ var useComponents = () => {
   return { components, isLoading };
 };
 
+// src/utils/is-pro-user.ts
+function isProUser() {
+  const extendedWindow = window;
+  const hasPro = extendedWindow.elementor?.helpers?.hasPro?.() ?? false;
+  if (!hasPro) {
+    return false;
+  }
+  const isProActive = extendedWindow.elementorPro?.config?.isActive ?? false;
+  return isProActive;
+}
+
 // src/components/components-tab/component-search.tsx
 var React12 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
@@ -2761,14 +2772,26 @@ var useFilteredComponents = () => {
   };
 };
 
+// src/components/components-tab/components-pro-notification.tsx
+var React18 = __toESM(require("react"));
+var import_editor_ui8 = require("@elementor/editor-ui");
+var import_ui16 = require("@elementor/ui");
+var import_i18n21 = require("@wordpress/i18n");
+function ComponentsProNotification() {
+  return /* @__PURE__ */ React18.createElement(import_ui16.Box, { sx: { px: 2 } }, /* @__PURE__ */ React18.createElement(import_editor_ui8.InfoAlert, null, /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", component: "span" }, /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", component: "span", fontWeight: "bold" }, (0, import_i18n21.__)("Try Components for free:", "elementor")), " ", (0, import_i18n21.__)(
+    "Soon Components will be part of the Pro subscription, but what you create now will remain on your site.",
+    "elementor"
+  ))));
+}
+
 // src/components/components-tab/components.tsx
 var ComponentsContent = () => {
   const { components, isLoading } = useComponents();
   const hasComponents = !isLoading && components.length > 0;
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, hasComponents && /* @__PURE__ */ React18.createElement(ComponentSearch, null), /* @__PURE__ */ React18.createElement(ComponentsList, null));
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, hasComponents && /* @__PURE__ */ React19.createElement(ComponentSearch, null), hasComponents && !isProUser() && /* @__PURE__ */ React19.createElement(ComponentsProNotification, null), /* @__PURE__ */ React19.createElement(ComponentsList, null));
 };
 var Components = () => {
-  return /* @__PURE__ */ React18.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React18.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React18.createElement(ComponentsContent, null)));
+  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ThemeProvider, null, /* @__PURE__ */ React19.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React19.createElement(ComponentsContent, null)));
 };
 
 // src/components/consts.ts
@@ -2776,15 +2799,15 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 var OVERRIDABLE_PROP_REPLACEMENT_ID = "overridable-prop";
 
 // src/components/create-component-form/create-component-form.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_react11 = require("react");
 var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
-var import_editor_ui9 = require("@elementor/editor-ui");
+var import_editor_ui10 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
 var import_store47 = require("@elementor/store");
-var import_ui16 = require("@elementor/ui");
-var import_i18n22 = require("@wordpress/i18n");
+var import_ui17 = require("@elementor/ui");
+var import_i18n23 = require("@wordpress/i18n");
 
 // src/prevent-non-atomic-nesting.ts
 var import_editor_canvas6 = require("@elementor/editor-canvas");
@@ -2792,10 +2815,10 @@ var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_notifications2 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_store43 = require("@elementor/store");
-var import_i18n21 = require("@wordpress/i18n");
+var import_i18n22 = require("@wordpress/i18n");
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: (0, import_i18n21.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: (0, import_i18n22.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -3015,7 +3038,7 @@ function CreateComponentForm() {
       if (nonAtomicElements.length > 0) {
         (0, import_editor_notifications3.notify)({
           type: "default",
-          message: (0, import_i18n22.__)(
+          message: (0, import_i18n23.__)(
             "Components require atomic elements only. Remove widgets to create this component.",
             "elementor"
           ),
@@ -3054,12 +3077,12 @@ function CreateComponentForm() {
       }
       (0, import_editor_notifications3.notify)({
         type: "success",
-        message: (0, import_i18n22.__)("Component created successfully.", "elementor"),
+        message: (0, import_i18n23.__)("Component created successfully.", "elementor"),
         id: `component-saved-successfully-${uid}`
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = (0, import_i18n22.__)("Failed to create component. Please try again.", "elementor");
+      const errorMessage = (0, import_i18n23.__)("Failed to create component. Please try again.", "elementor");
       (0, import_editor_notifications3.notify)({
         type: "error",
         message: errorMessage,
@@ -3078,15 +3101,15 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ThemeProvider, null, /* @__PURE__ */ React19.createElement(
-    import_ui16.Popover,
+  return /* @__PURE__ */ React20.createElement(import_editor_ui10.ThemeProvider, null, /* @__PURE__ */ React20.createElement(
+    import_ui17.Popover,
     {
       open: element !== null,
       onClose: cancelSave,
       anchorReference: "anchorPosition",
       anchorPosition
     },
-    element !== null && /* @__PURE__ */ React19.createElement(
+    element !== null && /* @__PURE__ */ React20.createElement(
       Form2,
       {
         initialValues: { componentName: element.elementLabel },
@@ -3122,14 +3145,14 @@ var Form2 = ({
     }
   };
   const texts = {
-    heading: (0, import_i18n22.__)("Create component", "elementor"),
-    name: (0, import_i18n22.__)("Name", "elementor"),
-    cancel: (0, import_i18n22.__)("Cancel", "elementor"),
-    create: (0, import_i18n22.__)("Create", "elementor")
+    heading: (0, import_i18n23.__)("Create component", "elementor"),
+    name: (0, import_i18n23.__)("Name", "elementor"),
+    cancel: (0, import_i18n23.__)("Cancel", "elementor"),
+    create: (0, import_i18n23.__)("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React19.createElement(import_editor_ui9.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
-    import_ui16.Stack,
+  return /* @__PURE__ */ React20.createElement(import_editor_ui10.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React20.createElement(import_ui17.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
+    import_ui17.Stack,
     {
       direction: "row",
       alignItems: "center",
@@ -3137,10 +3160,10 @@ var Form2 = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__PURE__ */ React19.createElement(import_icons11.ComponentsIcon, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React19.createElement(import_ui16.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
-  ), /* @__PURE__ */ React19.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(import_ui16.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React19.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
-    import_ui16.TextField,
+    /* @__PURE__ */ React20.createElement(import_icons11.ComponentsIcon, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React20.createElement(import_ui17.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
+  ), /* @__PURE__ */ React20.createElement(import_ui17.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React20.createElement(import_ui17.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(import_ui17.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React20.createElement(import_ui17.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
+    import_ui17.TextField,
     {
       id: nameInputId,
       size: FONT_SIZE,
@@ -3151,11 +3174,11 @@ var Form2 = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React19.createElement(import_ui16.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui16.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React19.createElement(import_ui16.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
+  ))), /* @__PURE__ */ React20.createElement(import_ui17.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React20.createElement(import_ui17.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React20.createElement(import_ui17.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
 };
 
 // src/components/edit-component/edit-component.tsx
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var import_react14 = require("react");
 var import_editor_documents11 = require("@elementor/editor-documents");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
@@ -3178,10 +3201,10 @@ function updateCurrentComponent({
 }
 
 // src/components/edit-component/component-modal.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_react_dom = require("react-dom");
-var import_i18n23 = require("@wordpress/i18n");
+var import_i18n24 = require("@wordpress/i18n");
 
 // src/hooks/use-canvas-document.ts
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
@@ -3270,7 +3293,7 @@ function ComponentModal({ element, onClose }) {
     return null;
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(BlockEditPage, null), /* @__PURE__ */ React20.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
+    /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(BlockEditPage, null), /* @__PURE__ */ React21.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
     canvasDocument.body
   );
 }
@@ -3294,7 +3317,7 @@ function Backdrop({ canvas, element, onClose }) {
       onClose();
     }
   };
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(
     "div",
     {
       style: backdropStyle,
@@ -3302,7 +3325,7 @@ function Backdrop({ canvas, element, onClose }) {
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": (0, import_i18n23.__)("Exit component editing mode", "elementor")
+      "aria-label": (0, import_i18n24.__)("Exit component editing mode", "elementor")
     }
   );
 }
@@ -3346,7 +3369,7 @@ function BlockEditPage() {
 		}
 	}
 	`;
-  return /* @__PURE__ */ React20.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
+  return /* @__PURE__ */ React21.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
 }
 
 // src/components/edit-component/edit-component.tsx
@@ -3359,7 +3382,7 @@ function EditComponent() {
   if (!elementDom) {
     return null;
   }
-  return /* @__PURE__ */ React21.createElement(ComponentModal, { element: elementDom, onClose });
+  return /* @__PURE__ */ React22.createElement(ComponentModal, { element: elementDom, onClose });
 }
 function useHandleDocumentSwitches() {
   const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
@@ -3429,34 +3452,34 @@ function getComponentDOMElement(id2) {
 }
 
 // src/components/in-edit-mode.tsx
-var React22 = __toESM(require("react"));
-var import_editor_ui10 = require("@elementor/editor-ui");
+var React23 = __toESM(require("react"));
+var import_editor_ui11 = require("@elementor/editor-ui");
 var import_icons12 = require("@elementor/icons");
-var import_ui17 = require("@elementor/ui");
-var import_i18n24 = require("@wordpress/i18n");
+var import_ui18 = require("@elementor/ui");
+var import_i18n25 = require("@wordpress/i18n");
 var openEditModeDialog = (lockedBy) => {
-  (0, import_editor_ui10.openDialog)({
-    component: /* @__PURE__ */ React22.createElement(EditModeDialog, { lockedBy })
+  (0, import_editor_ui11.openDialog)({
+    component: /* @__PURE__ */ React23.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = (0, import_i18n24.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui17.DialogHeader, { logo: false }, /* @__PURE__ */ React22.createElement(import_ui17.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(import_ui17.Icon, { color: "secondary" }, /* @__PURE__ */ React22.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React22.createElement(import_ui17.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React22.createElement(import_ui17.DialogContent, null, /* @__PURE__ */ React22.createElement(import_ui17.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React22.createElement(import_ui17.Typography, { variant: "body2" }, (0, import_i18n24.__)(
+  const content = (0, import_i18n25.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui18.DialogHeader, { logo: false }, /* @__PURE__ */ React23.createElement(import_ui18.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(import_ui18.Icon, { color: "secondary" }, /* @__PURE__ */ React23.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React23.createElement(import_ui18.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React23.createElement(import_ui18.DialogContent, null, /* @__PURE__ */ React23.createElement(import_ui18.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React23.createElement(import_ui18.Typography, { variant: "body2" }, (0, import_i18n25.__)(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React22.createElement(import_ui17.DialogActions, null, /* @__PURE__ */ React22.createElement(import_ui17.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui10.closeDialog }, (0, import_i18n24.__)("Close", "elementor"))))));
+  )), /* @__PURE__ */ React23.createElement(import_ui18.DialogActions, null, /* @__PURE__ */ React23.createElement(import_ui18.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui11.closeDialog }, (0, import_i18n25.__)("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-var React28 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_elements15 = require("@elementor/editor-elements");
 var import_editor_panels3 = require("@elementor/editor-panels");
-var import_editor_ui12 = require("@elementor/editor-ui");
+var import_editor_ui13 = require("@elementor/editor-ui");
 var import_icons14 = require("@elementor/icons");
-var import_ui22 = require("@elementor/ui");
-var import_i18n26 = require("@wordpress/i18n");
+var import_ui23 = require("@elementor/ui");
+var import_i18n27 = require("@wordpress/i18n");
 
 // src/hooks/use-component-instance-settings.ts
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
@@ -3522,21 +3545,21 @@ function useComponentInstanceSettings() {
 }
 
 // src/components/instance-editing-panel/empty-state.tsx
-var React23 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
-var import_ui18 = require("@elementor/ui");
-var import_i18n25 = require("@wordpress/i18n");
+var import_ui19 = require("@elementor/ui");
+var import_i18n26 = require("@wordpress/i18n");
 var EmptyState2 = ({ onEditComponent }) => {
   const { canEdit } = useComponentsPermissions();
-  const message = canEdit ? (0, import_i18n25.__)(
+  const message = canEdit ? (0, import_i18n26.__)(
     "Edit the component to add properties, manage them or update the design across all instances.",
     "elementor"
-  ) : (0, import_i18n25.__)(
+  ) : (0, import_i18n26.__)(
     "With your current role, you cannot edit this component. Contact an administrator to add properties.",
     "elementor"
   );
-  return /* @__PURE__ */ React23.createElement(
-    import_ui18.Stack,
+  return /* @__PURE__ */ React24.createElement(
+    import_ui19.Stack,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -3545,26 +3568,26 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__PURE__ */ React23.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n25.__)("No properties yet", "elementor")),
-    /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
-    canEdit && /* @__PURE__ */ React23.createElement(import_ui18.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n25.__)("Edit component", "elementor"))
+    /* @__PURE__ */ React24.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React24.createElement(import_ui19.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n26.__)("No properties yet", "elementor")),
+    /* @__PURE__ */ React24.createElement(import_ui19.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && /* @__PURE__ */ React24.createElement(import_ui19.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React24.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n26.__)("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-var React27 = __toESM(require("react"));
+var React28 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
-var import_editor_ui11 = require("@elementor/editor-ui");
-var import_ui21 = require("@elementor/ui");
+var import_editor_ui12 = require("@elementor/editor-ui");
+var import_ui22 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-var React26 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_editor_controls3 = require("@elementor/editor-controls");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 var import_editor_elements14 = require("@elementor/editor-elements");
-var import_ui20 = require("@elementor/ui");
+var import_ui21 = require("@elementor/ui");
 
 // src/hooks/use-controls-by-widget-type.ts
 var import_editor_elements12 = require("@elementor/editor-elements");
@@ -3598,11 +3621,11 @@ function getControlsByBind(controls) {
 }
 
 // src/provider/overridable-prop-context.tsx
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_react15 = require("react");
 var OverridablePropContext = (0, import_react15.createContext)(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React25.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => (0, import_react15.useContext)(OverridablePropContext)?.value;
 var useComponentInstanceElement = () => (0, import_react15.useContext)(OverridablePropContext)?.componentInstanceElement;
@@ -3696,11 +3719,11 @@ function getPropType({ widgetType, propKey }) {
 }
 
 // src/components/control-label.tsx
-var React25 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var import_editor_controls2 = require("@elementor/editor-controls");
-var import_ui19 = require("@elementor/ui");
+var import_ui20 = require("@elementor/ui");
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React25.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React25.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React25.createElement(import_editor_controls2.ControlAdornments, null));
+  return /* @__PURE__ */ React26.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React26.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React26.createElement(import_editor_controls2.ControlAdornments, null));
 };
 
 // src/components/errors.ts
@@ -3712,7 +3735,7 @@ var OverrideControlInnerElementNotFoundError = (0, import_utils7.createError)({
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 function OverridePropControl({ overridableProp, overrides }) {
-  return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
+  return /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React27.createElement(OverrideControl, { overridableProp, overrides }));
 }
 function OverrideControl({ overridableProp, overrides }) {
   const componentInstanceElement = (0, import_editor_editing_panel3.useElement)();
@@ -3783,13 +3806,13 @@ function OverrideControl({ overridableProp, overrides }) {
   if (!elementType) {
     return null;
   }
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     OverridablePropProvider,
     {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.ElementProvider, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.ElementProvider, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React27.createElement(
       import_editor_controls3.PropProvider,
       {
         propType: propTypeSchema,
@@ -3799,7 +3822,7 @@ function OverrideControl({ overridableProp, overrides }) {
           return false;
         }
       },
-      /* @__PURE__ */ React26.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React26.createElement(import_editor_controls3.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React26.createElement(import_ui20.Stack, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React26.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React26.createElement(OriginalControl, { control, controlProps }))))
+      /* @__PURE__ */ React27.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React27.createElement(import_editor_controls3.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React27.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React27.createElement(OriginalControl, { control, controlProps }))))
     )))
   );
 }
@@ -3863,7 +3886,7 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.BaseControl, { type: value.type, props: controlProps });
 }
 function getControlLayout(control) {
   return control.value.meta?.layout || import_editor_editing_panel3.controlsRegistry.getLayout(control.value.type);
@@ -3894,8 +3917,8 @@ function OverridePropsGroup({ group, props, overrides }) {
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React27.createElement(import_ui21.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React27.createElement(
-    import_ui21.ListItemButton,
+  return /* @__PURE__ */ React28.createElement(import_ui22.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React28.createElement(
+    import_ui22.ListItemButton,
     {
       id: labelId,
       "aria-controls": contentId,
@@ -3904,16 +3927,16 @@ function OverridePropsGroup({ group, props, overrides }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React27.createElement(
-      import_ui21.ListItemText,
+    /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React28.createElement(
+      import_ui22.ListItemText,
       {
         secondary: title,
         secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React27.createElement(import_editor_ui11.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React27.createElement(import_ui21.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(import_editor_ui12.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React28.createElement(import_ui22.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React28.createElement(
     OverridePropControl,
     {
       key: overrideKey,
@@ -3935,23 +3958,23 @@ function InstanceEditingPanel() {
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = (0, import_i18n26.__)("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = (0, import_i18n27.__)("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__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(import_editor_ui12.EllipsisWithTooltip, { title: component.name, as: import_editor_panels3.PanelHeaderTitle }), canEdit && /* @__PURE__ */ React28.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React28.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(import_editor_panels3.PanelBody, null, /* @__PURE__ */ React28.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id }, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React29.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React29.createElement(import_editor_ui13.EllipsisWithTooltip, { title: component.name, as: import_editor_panels3.PanelHeaderTitle }), canEdit && /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { title: panelTitle }, /* @__PURE__ */ React29.createElement(import_ui23.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React29.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React29.createElement(import_editor_panels3.PanelBody, null, /* @__PURE__ */ React29.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React29.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React29.createElement(import_ui23.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id }, /* @__PURE__ */ React29.createElement(
     OverridePropsGroup,
     {
       group,
       props: overridableProps.props,
       overrides
     }
-  ), /* @__PURE__ */ React28.createElement(import_ui22.Divider, null)))))));
+  ), /* @__PURE__ */ React29.createElement(import_ui23.Divider, null)))))));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
-var React29 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 function OverridablePropControl({
@@ -3997,7 +4020,7 @@ function OverridablePropControl({
   });
   const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React29.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React30.createElement(
     import_editor_controls5.PropProvider,
     {
       ...propContext,
@@ -4008,17 +4031,17 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React29.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React29.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React29.createElement(Control, { ...props })))
+    /* @__PURE__ */ React30.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(Control, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-var React31 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
 var import_editor_elements16 = require("@elementor/editor-elements");
-var import_ui24 = require("@elementor/ui");
-var import_i18n28 = require("@wordpress/i18n");
+var import_ui25 = require("@elementor/ui");
+var import_i18n29 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
 var import_store58 = require("@elementor/store");
@@ -4085,13 +4108,13 @@ function setOverridableProp({
 }
 
 // src/components/overridable-props/indicator.tsx
-var React30 = __toESM(require("react"));
+var React31 = __toESM(require("react"));
 var import_react17 = require("react");
 var import_icons15 = require("@elementor/icons");
-var import_ui23 = require("@elementor/ui");
-var import_i18n27 = require("@wordpress/i18n");
+var import_ui24 = require("@elementor/ui");
+var import_i18n28 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
-var IconContainer = (0, import_ui23.styled)(import_ui23.Box)`
+var IconContainer = (0, import_ui24.styled)(import_ui24.Box)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -4108,7 +4131,7 @@ var IconContainer = (0, import_ui23.styled)(import_ui23.Box)`
 		stroke-width: 2px;
 	}
 `;
-var Content = (0, import_ui23.styled)(import_ui23.Box)`
+var Content = (0, import_ui24.styled)(import_ui24.Box)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -4145,13 +4168,13 @@ var Content = (0, import_ui23.styled)(import_ui23.Box)`
 		}
 	}
 `;
-var Indicator2 = (0, import_react17.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React30.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React30.createElement(
+var Indicator2 = (0, import_react17.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React31.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React31.createElement(
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? (0, import_i18n27.__)("Overridable property", "elementor") : (0, import_i18n27.__)("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? (0, import_i18n28.__)("Overridable property", "elementor") : (0, import_i18n28.__)("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React30.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React30.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
+  isOverridable ? /* @__PURE__ */ React31.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React31.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
@@ -4175,7 +4198,7 @@ function OverridablePropIndicator() {
   if (!isPropAllowed(propType) || !componentId || !overridableProps) {
     return null;
   }
-  return /* @__PURE__ */ React31.createElement(Content2, { componentId, overridableProps });
+  return /* @__PURE__ */ React32.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
@@ -4189,11 +4212,11 @@ function Content2({ componentId, overridableProps }) {
     componentOverridablePropTypeUtil
   );
   const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
-  const popupState = (0, import_ui24.usePopupState)({
+  const popupState = (0, import_ui25.usePopupState)({
     variant: "popover"
   });
-  const triggerProps = (0, import_ui24.bindTrigger)(popupState);
-  const popoverProps = (0, import_ui24.bindPopover)(popupState);
+  const triggerProps = (0, import_ui25.bindTrigger)(popupState);
+  const popoverProps = (0, import_ui25.bindPopover)(popupState);
   const { elType } = (0, import_editor_elements16.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
   const handleSubmit = ({ label, group }) => {
     const propTypeDefault = propType.default ?? {};
@@ -4220,8 +4243,8 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n28.__)("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
-    import_ui24.Popover,
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(import_ui25.Tooltip, { placement: "top", title: (0, import_i18n29.__)("Override Property", "elementor") }, /* @__PURE__ */ React32.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React32.createElement(
+    import_ui25.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: {
@@ -4237,7 +4260,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -4255,150 +4278,16 @@ function isPropAllowed(propType) {
   return propType.meta.overridable !== false;
 }
 
-// src/hooks/cleanup-overridable-props-on-delete.ts
-var import_editor_elements17 = require("@elementor/editor-elements");
-var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
-var import_store63 = require("@elementor/store");
-function initCleanupOverridablePropsOnDelete() {
-  (0, import_editor_v1_adapters8.registerDataHook)("dependency", "document/elements/delete", (args) => {
-    const state = (0, import_store63.__getState)();
-    if (!state) {
-      return true;
-    }
-    const currentComponentId = selectCurrentComponentId(state);
-    if (!currentComponentId) {
-      return true;
-    }
-    const overridableProps = selectOverridableProps(state, currentComponentId);
-    if (!overridableProps || Object.keys(overridableProps.props).length === 0) {
-      return true;
-    }
-    const containers = args.containers ?? (args.container ? [args.container] : []);
-    if (containers.length === 0) {
-      return true;
-    }
-    const deletedElementIds = collectDeletedElementIds(containers);
-    if (deletedElementIds.length === 0) {
-      return true;
-    }
-    const propKeysToDelete = Object.entries(overridableProps.props).filter(([, prop]) => deletedElementIds.includes(prop.elementId)).map(([propKey]) => propKey);
-    if (propKeysToDelete.length === 0) {
-      return true;
-    }
-    const remainingProps = Object.fromEntries(
-      Object.entries(overridableProps.props).filter(([propKey]) => !propKeysToDelete.includes(propKey))
-    );
-    let updatedGroups = overridableProps.groups;
-    for (const propKey of propKeysToDelete) {
-      updatedGroups = removePropFromAllGroups(updatedGroups, propKey);
-    }
-    (0, import_store63.__dispatch)(
-      slice.actions.setOverridableProps({
-        componentId: currentComponentId,
-        overridableProps: {
-          ...overridableProps,
-          props: remainingProps,
-          groups: updatedGroups
-        }
-      })
-    );
-    return true;
-  });
-}
-function collectDeletedElementIds(containers) {
-  const elementIds = containers.filter(Boolean).flatMap((container) => [container, ...(0, import_editor_elements17.getAllDescendants)(container)]).map((element) => element.model?.get?.("id") ?? element.id).filter((id2) => Boolean(id2));
-  return elementIds;
-}
-
-// src/hooks/regenerate-override-keys.ts
-var import_editor_elements18 = require("@elementor/editor-elements");
-var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
-var import_utils9 = require("@elementor/utils");
-function initRegenerateOverrideKeys() {
-  (0, import_editor_v1_adapters9.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
-    regenerateOverrideKeysForContainers(result);
-  });
-  (0, import_editor_v1_adapters9.registerDataHook)("after", "document/elements/paste", (_args, result) => {
-    regenerateOverrideKeysForContainers(result);
-  });
-  (0, import_editor_v1_adapters9.registerDataHook)("after", "document/elements/import", (_args, result) => {
-    regenerateOverrideKeysForContainers(result);
-  });
-}
-function regenerateOverrideKeysForContainers(result) {
-  const containers = Array.isArray(result) ? result : [result];
-  containers.forEach((container) => {
-    regenerateOverrideKeysRecursive(container.id);
-  });
-}
-function regenerateOverrideKeysRecursive(elementId) {
-  const container = (0, import_editor_elements18.getContainer)(elementId);
-  if (!container) {
-    return;
-  }
-  (0, import_editor_elements18.getAllDescendants)(container).forEach(regenerateOverrideKeys);
-}
-function regenerateOverrideKeys(element) {
-  if (!isComponentInstance(element.model.toJSON())) {
-    return;
-  }
-  const settings = element.settings?.toJSON() ?? {};
-  if (!hasOverrides(settings)) {
-    return;
-  }
-  const componentInstance = settings.component_instance;
-  const overrides = componentInstance.value.overrides;
-  const newOverrides = overrides.value.map((override) => {
-    if (!componentInstanceOverridePropTypeUtil.isValid(override)) {
-      return override;
-    }
-    return {
-      ...override,
-      value: {
-        ...override.value,
-        override_key: (0, import_utils9.generateUniqueId)("prop")
-      }
-    };
-  });
-  const newComponentInstance = {
-    ...componentInstance,
-    value: {
-      ...componentInstance.value,
-      overrides: {
-        ...overrides,
-        value: newOverrides
-      }
-    }
-  };
-  (0, import_editor_elements18.updateElementSettings)({
-    id: element.id,
-    props: { component_instance: newComponentInstance },
-    withHistory: false
-  });
-}
-function hasOverrides(settings) {
-  if (!componentInstancePropTypeUtil.isValid(settings?.component_instance)) {
-    return false;
-  }
-  const componentInstance = componentInstancePropTypeUtil.extract(settings?.component_instance);
-  const overrides = componentInstance?.overrides;
-  if (!componentInstanceOverridesPropTypeUtil.isValid(overrides)) {
-    return false;
-  }
-  const overridesValue = overrides?.value;
-  return !!overridesValue?.length;
-}
-
 // src/mcp/index.ts
 var import_editor_mcp3 = require("@elementor/editor-mcp");
 
 // src/mcp/save-as-component-tool.ts
 var import_editor_canvas7 = require("@elementor/editor-canvas");
-var import_editor_elements19 = require("@elementor/editor-elements");
+var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_mcp2 = require("@elementor/editor-mcp");
 var import_http_client2 = require("@elementor/http-client");
 var import_schema6 = require("@elementor/schema");
-var import_utils10 = require("@elementor/utils");
+var import_utils9 = require("@elementor/utils");
 var InputSchema = {
   element_id: import_schema6.z.string().describe(
     'The unique identifier of the element to save as a component. Use the "list-elements" tool to find available element IDs in the current document.'
@@ -4432,7 +4321,7 @@ var ERROR_MESSAGES3 = {
 var handleSaveAsComponent = async (params) => {
   const { element_id: elementId, component_name: componentName, overridable_props: overridablePropsInput } = params;
   const validElementTypes = getValidElementTypes();
-  const container = (0, import_editor_elements19.getContainer)(elementId);
+  const container = (0, import_editor_elements17.getContainer)(elementId);
   if (!container) {
     throw new Error(ERROR_MESSAGES3.ELEMENT_NOT_FOUND);
   }
@@ -4448,7 +4337,7 @@ var handleSaveAsComponent = async (params) => {
   if (overridableProps) {
     updateElementDataWithOverridableProps(element, overridableProps);
   }
-  const uid = (0, import_utils10.generateUniqueId)("component");
+  const uid = (0, import_utils9.generateUniqueId)("component");
   try {
     await apiClient.validate({
       items: [
@@ -4470,7 +4359,7 @@ var handleSaveAsComponent = async (params) => {
 };
 function enrichOverridableProps(input, rootElement) {
   const enrichedProps = {};
-  const defaultGroupId = (0, import_utils10.generateUniqueId)("group");
+  const defaultGroupId = (0, import_utils9.generateUniqueId)("group");
   Object.entries(input.props).forEach(([, prop]) => {
     const { elementId, propKey, label } = prop;
     const element = findElementById(rootElement, elementId);
@@ -4479,7 +4368,7 @@ function enrichOverridableProps(input, rootElement) {
     }
     const elType = element.elType;
     const widgetType = element.widgetType || element.elType;
-    const elementType = (0, import_editor_elements19.getElementType)(widgetType);
+    const elementType = (0, import_editor_elements17.getElementType)(widgetType);
     if (!elementType) {
       throw new Error(
         `Element type "${widgetType}" is not atomic or does not have a settings schema. Cannot expose property "${propKey}" for element "${elementId}".`
@@ -4491,7 +4380,7 @@ function enrichOverridableProps(input, rootElement) {
         `Property "${propKey}" does not exist in element "${elementId}" (type: ${widgetType}). Available properties: ${availableProps}`
       );
     }
-    const overrideKey = (0, import_utils10.generateUniqueId)("prop");
+    const overrideKey = (0, import_utils9.generateUniqueId)("prop");
     const originValue = element.settings?.[propKey] ? element.settings[propKey] : elementType.propsSchema[propKey].default ?? null;
     enrichedProps[overrideKey] = {
       overrideKey,
@@ -4548,7 +4437,7 @@ function findElementById(root, targetId) {
   return null;
 }
 function getValidElementTypes() {
-  const types = (0, import_editor_elements19.getWidgetsCache)();
+  const types = (0, import_editor_elements17.getWidgetsCache)();
   if (!types) {
     return [];
   }
@@ -4726,36 +4615,36 @@ function initMcp() {
 
 // src/populate-store.ts
 var import_react18 = require("react");
-var import_store65 = require("@elementor/store");
+var import_store63 = require("@elementor/store");
 function PopulateStore() {
   (0, import_react18.useEffect)(() => {
-    (0, import_store65.__dispatch)(loadComponents());
+    (0, import_store63.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/prevent-circular-nesting.ts
-var import_editor_elements20 = require("@elementor/editor-elements");
+var import_editor_elements18 = require("@elementor/editor-elements");
 var import_editor_notifications4 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
-var import_store66 = require("@elementor/store");
-var import_i18n29 = require("@wordpress/i18n");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_store64 = require("@elementor/store");
+var import_i18n30 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: (0, import_i18n29.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: (0, import_i18n30.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
-  (0, import_editor_v1_adapters10.blockCommand)({
+  (0, import_editor_v1_adapters8.blockCommand)({
     command: "document/elements/create",
     condition: blockCircularCreate
   });
-  (0, import_editor_v1_adapters10.blockCommand)({
+  (0, import_editor_v1_adapters8.blockCommand)({
     command: "document/elements/move",
     condition: blockCircularMove
   });
-  (0, import_editor_v1_adapters10.blockCommand)({
+  (0, import_editor_v1_adapters8.blockCommand)({
     command: "document/elements/paste",
     condition: blockCircularPaste
   });
@@ -4764,7 +4653,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = (0, import_store66.__getState)();
+  const state = (0, import_store64.__getState)();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -4830,7 +4719,7 @@ function blockCircularMove(args) {
     if (!container) {
       return false;
     }
-    const allElements = (0, import_editor_elements20.getAllDescendants)(container);
+    const allElements = (0, import_editor_elements18.getAllDescendants)(container);
     return allElements.some((element) => {
       const componentId = extractComponentIdFromContainer(element);
       if (componentId === null) {
@@ -4862,19 +4751,19 @@ function blockCircularPaste(args) {
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store68 = require("@elementor/store");
+var import_store66 = require("@elementor/store");
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  (0, import_store68.__dispatch)(slice.actions.removeStyles({ id: id2 }));
+  (0, import_store66.__dispatch)(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store70 = require("@elementor/store");
+var import_store68 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store70.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store68.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -4882,29 +4771,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store70.__getState)());
+      return selectFlatStyles((0, import_store68.__getState)());
     },
     get: (id2) => {
-      return selectFlatStyles((0, import_store70.__getState)()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles((0, import_store68.__getState)()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
-var import_editor_elements21 = require("@elementor/editor-elements");
-var import_store72 = require("@elementor/store");
+var import_editor_elements19 = require("@elementor/editor-elements");
+var import_store70 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store72.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store70.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store72.__dispatch)(
+    (0, import_store70.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -4914,7 +4803,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store72.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store70.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -4959,7 +4848,7 @@ function shouldUpdateElement(element, uidToComponentId) {
   return { shouldUpdate: false, newComponentId: null };
 }
 function updateElementComponentId(elementId, componentId) {
-  (0, import_editor_elements21.updateElementSettings)({
+  (0, import_editor_elements19.updateElementSettings)({
     id: elementId,
     props: {
       component_instance: {
@@ -4974,7 +4863,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-var import_store74 = require("@elementor/store");
+var import_store72 = require("@elementor/store");
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -4982,7 +4871,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps((0, import_store74.__getState)(), currentDocument.id);
+  const overridableProps = selectOverridableProps((0, import_store72.__getState)(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -4990,7 +4879,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 var import_editor_notifications5 = require("@elementor/editor-notifications");
-var import_store76 = require("@elementor/store");
+var import_store74 = require("@elementor/store");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -4998,7 +4887,7 @@ var failedNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedThisSession((0, import_store76.__getState)());
+    const archivedComponents = selectArchivedThisSession((0, import_store74.__getState)());
     if (!archivedComponents.length) {
       return;
     }
@@ -5013,15 +4902,15 @@ var updateArchivedComponentBeforeSave = async () => {
 };
 
 // src/sync/update-component-title-before-save.ts
-var import_store78 = require("@elementor/store");
+var import_store76 = require("@elementor/store");
 var updateComponentTitleBeforeSave = async () => {
-  const updatedComponentNames = selectUpdatedComponentNames((0, import_store78.__getState)());
+  const updatedComponentNames = selectUpdatedComponentNames((0, import_store76.__getState)());
   if (!updatedComponentNames.length) {
     return;
   }
   const result = await apiClient.updateComponentTitle(updatedComponentNames);
   if (result.failedIds.length === 0) {
-    (0, import_store78.__dispatch)(slice.actions.cleanUpdatedComponentNames());
+    (0, import_store76.__dispatch)(slice.actions.cleanUpdatedComponentNames());
   }
 };
 
@@ -5053,6 +4942,155 @@ var beforeSave = ({ container, status }) => {
   ]);
 };
 
+// src/sync/cleanup-overridable-props-on-delete.ts
+var import_editor_elements20 = require("@elementor/editor-elements");
+var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
+var import_store78 = require("@elementor/store");
+function initCleanupOverridablePropsOnDelete() {
+  (0, import_editor_v1_adapters9.registerDataHook)("dependency", "document/elements/delete", (args) => {
+    const state = (0, import_store78.__getState)();
+    if (!state) {
+      return true;
+    }
+    const currentComponentId = selectCurrentComponentId(state);
+    if (!currentComponentId) {
+      return true;
+    }
+    const overridableProps = selectOverridableProps(state, currentComponentId);
+    if (!overridableProps || Object.keys(overridableProps.props).length === 0) {
+      return true;
+    }
+    const containers = args.containers ?? (args.container ? [args.container] : []);
+    if (containers.length === 0) {
+      return true;
+    }
+    const deletedElementIds = collectDeletedElementIds(containers);
+    if (deletedElementIds.length === 0) {
+      return true;
+    }
+    const propKeysToDelete = Object.entries(overridableProps.props).filter(([, prop]) => deletedElementIds.includes(prop.elementId)).map(([propKey]) => propKey);
+    if (propKeysToDelete.length === 0) {
+      return true;
+    }
+    const remainingProps = Object.fromEntries(
+      Object.entries(overridableProps.props).filter(([propKey]) => !propKeysToDelete.includes(propKey))
+    );
+    let updatedGroups = overridableProps.groups;
+    for (const propKey of propKeysToDelete) {
+      updatedGroups = removePropFromAllGroups(updatedGroups, propKey);
+    }
+    (0, import_store78.__dispatch)(
+      slice.actions.setOverridableProps({
+        componentId: currentComponentId,
+        overridableProps: {
+          ...overridableProps,
+          props: remainingProps,
+          groups: updatedGroups
+        }
+      })
+    );
+    return true;
+  });
+}
+function collectDeletedElementIds(containers) {
+  const elementIds = containers.filter(Boolean).flatMap((container) => [container, ...(0, import_editor_elements20.getAllDescendants)(container)]).map((element) => element.model?.get?.("id") ?? element.id).filter((id2) => Boolean(id2));
+  return elementIds;
+}
+
+// src/sync/load-component-data-after-instance-added.ts
+var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
+function initLoadComponentDataAfterInstanceAdded() {
+  (0, import_editor_v1_adapters10.registerDataHook)("after", "document/elements/paste", (_args, result) => {
+    load(result);
+  });
+  (0, import_editor_v1_adapters10.registerDataHook)("after", "document/elements/import", (_args, result) => {
+    load(result);
+  });
+}
+function load(result) {
+  const containers = Array.isArray(result) ? result : [result];
+  loadComponentsAssets(containers.map((container) => container.model.toJSON()));
+}
+
+// src/sync/regenerate-override-keys.ts
+var import_editor_elements21 = require("@elementor/editor-elements");
+var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
+var import_utils10 = require("@elementor/utils");
+function initRegenerateOverrideKeys() {
+  (0, import_editor_v1_adapters11.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
+    regenerateOverrideKeysForContainers(result);
+  });
+  (0, import_editor_v1_adapters11.registerDataHook)("after", "document/elements/paste", (_args, result) => {
+    regenerateOverrideKeysForContainers(result);
+  });
+  (0, import_editor_v1_adapters11.registerDataHook)("after", "document/elements/import", (_args, result) => {
+    regenerateOverrideKeysForContainers(result);
+  });
+}
+function regenerateOverrideKeysForContainers(result) {
+  const containers = Array.isArray(result) ? result : [result];
+  containers.forEach((container) => {
+    regenerateOverrideKeysRecursive(container.id);
+  });
+}
+function regenerateOverrideKeysRecursive(elementId) {
+  const container = (0, import_editor_elements21.getContainer)(elementId);
+  if (!container) {
+    return;
+  }
+  (0, import_editor_elements21.getAllDescendants)(container).forEach(regenerateOverrideKeys);
+}
+function regenerateOverrideKeys(element) {
+  if (!isComponentInstance(element.model.toJSON())) {
+    return;
+  }
+  const settings = element.settings?.toJSON() ?? {};
+  if (!hasOverrides(settings)) {
+    return;
+  }
+  const componentInstance = settings.component_instance;
+  const overrides = componentInstance.value.overrides;
+  const newOverrides = overrides.value.map((override) => {
+    if (!componentInstanceOverridePropTypeUtil.isValid(override)) {
+      return override;
+    }
+    return {
+      ...override,
+      value: {
+        ...override.value,
+        override_key: (0, import_utils10.generateUniqueId)("prop")
+      }
+    };
+  });
+  const newComponentInstance = {
+    ...componentInstance,
+    value: {
+      ...componentInstance.value,
+      overrides: {
+        ...overrides,
+        value: newOverrides
+      }
+    }
+  };
+  (0, import_editor_elements21.updateElementSettings)({
+    id: element.id,
+    props: { component_instance: newComponentInstance },
+    withHistory: false
+  });
+}
+function hasOverrides(settings) {
+  if (!componentInstancePropTypeUtil.isValid(settings?.component_instance)) {
+    return false;
+  }
+  const componentInstance = componentInstancePropTypeUtil.extract(settings?.component_instance);
+  const overrides = componentInstance?.overrides;
+  if (!componentInstanceOverridesPropTypeUtil.isValid(overrides)) {
+    return false;
+  }
+  const overridesValue = overrides?.value;
+  return !!overridesValue?.length;
+}
+
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
@@ -5062,18 +5100,18 @@ function init() {
     COMPONENT_WIDGET_TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
-  (0, import_editor_v1_adapters11.registerDataHook)("dependency", "editor/documents/close", (args) => {
+  (0, import_editor_v1_adapters12.registerDataHook)("dependency", "editor/documents/close", (args) => {
     const document = (0, import_editor_documents13.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
       args.mode = "autosave";
     }
     return true;
   });
-  (0, import_editor_v1_adapters11.registerDataHook)("after", "preview/drop", onElementDrop);
+  (0, import_editor_v1_adapters12.registerDataHook)("after", "preview/drop", onElementDrop);
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n30.__)("Components", "elementor"),
+    label: (0, import_i18n31.__)("Components", "elementor"),
     component: Components,
     position: 1
   });
@@ -5093,7 +5131,7 @@ function init() {
     id: "component-panel-header",
     component: ComponentPanelHeader
   });
-  (0, import_editor_v1_adapters11.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+  (0, import_editor_v1_adapters12.registerDataHook)("after", "editor/documents/attach-preview", async () => {
     const { id: id2, config } = (0, import_editor_documents13.getV1CurrentDocument)();
     if (id2) {
       removeComponentStyles(id2);
@@ -5124,6 +5162,7 @@ function init() {
   initMcp();
   initCircularNestingPrevention();
   initNonAtomicNestingPrevention();
+  initLoadComponentDataAfterInstanceAdded();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {