@elementor/editor-components 3.35.0-481 → 3.35.0-483

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_panels5 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
 var import_store80 = require("@elementor/store");
-var import_i18n31 = require("@wordpress/i18n");
+var import_i18n30 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -733,59 +733,9 @@ function deleteOverridableGroup({ componentId, groupId }) {
 // src/store/actions/delete-overridable-prop.ts
 var import_store15 = require("@elementor/store");
 
-// src/utils/revert-element-overridable-setting.ts
+// src/utils/revert-overridable-settings.ts
 var import_editor_elements2 = require("@elementor/editor-elements");
 
-// src/prop-types/component-instance-override-prop-type.ts
-var import_editor_props = require("@elementor/editor-props");
-var import_schema = require("@elementor/schema");
-var componentInstanceOverridePropTypeUtil = (0, import_editor_props.createPropUtils)(
-  "override",
-  import_schema.z.object({
-    override_key: import_schema.z.string(),
-    override_value: import_schema.z.unknown(),
-    schema_source: import_schema.z.object({
-      type: import_schema.z.literal("component"),
-      id: import_schema.z.number()
-    })
-  })
-);
-
-// src/prop-types/component-instance-overrides-prop-type.ts
-var import_editor_props3 = require("@elementor/editor-props");
-var import_schema3 = require("@elementor/schema");
-
-// src/prop-types/component-overridable-prop-type.ts
-var import_editor_props2 = require("@elementor/editor-props");
-var import_schema2 = require("@elementor/schema");
-var componentOverridablePropTypeUtil = (0, import_editor_props2.createPropUtils)(
-  "overridable",
-  import_schema2.z.object({
-    override_key: import_schema2.z.string(),
-    origin_value: import_schema2.z.object({
-      $$type: import_schema2.z.string(),
-      value: import_schema2.z.unknown()
-    }).nullable()
-  })
-);
-
-// src/prop-types/component-instance-overrides-prop-type.ts
-var componentInstanceOverridesPropTypeUtil = (0, import_editor_props3.createPropUtils)(
-  "overrides",
-  import_schema3.z.array(import_schema3.z.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([])
-);
-
-// src/prop-types/component-instance-prop-type.ts
-var import_editor_props4 = require("@elementor/editor-props");
-var import_schema4 = require("@elementor/schema");
-var componentInstancePropTypeUtil = (0, import_editor_props4.createPropUtils)(
-  "component-instance",
-  import_schema4.z.object({
-    component_id: import_editor_props4.numberPropTypeUtil.schema,
-    overrides: import_schema4.z.optional(componentInstanceOverridesPropTypeUtil.schema)
-  })
-);
-
 // src/create-component-type.ts
 var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_documents3 = require("@elementor/editor-documents");
@@ -1028,19 +978,69 @@ function createComponentModel() {
   });
 }
 
+// src/prop-types/component-instance-override-prop-type.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_schema = require("@elementor/schema");
+var componentInstanceOverridePropTypeUtil = (0, import_editor_props.createPropUtils)(
+  "override",
+  import_schema.z.object({
+    override_key: import_schema.z.string(),
+    override_value: import_schema.z.unknown(),
+    schema_source: import_schema.z.object({
+      type: import_schema.z.literal("component"),
+      id: import_schema.z.number()
+    })
+  })
+);
+
+// src/prop-types/component-instance-overrides-prop-type.ts
+var import_editor_props3 = require("@elementor/editor-props");
+var import_schema3 = require("@elementor/schema");
+
+// src/prop-types/component-overridable-prop-type.ts
+var import_editor_props2 = require("@elementor/editor-props");
+var import_schema2 = require("@elementor/schema");
+var componentOverridablePropTypeUtil = (0, import_editor_props2.createPropUtils)(
+  "overridable",
+  import_schema2.z.object({
+    override_key: import_schema2.z.string(),
+    origin_value: import_schema2.z.object({
+      $$type: import_schema2.z.string(),
+      value: import_schema2.z.unknown()
+    }).nullable()
+  })
+);
+
+// src/prop-types/component-instance-overrides-prop-type.ts
+var componentInstanceOverridesPropTypeUtil = (0, import_editor_props3.createPropUtils)(
+  "overrides",
+  import_schema3.z.array(import_schema3.z.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([])
+);
+
+// src/prop-types/component-instance-prop-type.ts
+var import_editor_props4 = require("@elementor/editor-props");
+var import_schema4 = require("@elementor/schema");
+var componentInstancePropTypeUtil = (0, import_editor_props4.createPropUtils)(
+  "component-instance",
+  import_schema4.z.object({
+    component_id: import_editor_props4.numberPropTypeUtil.schema,
+    overrides: import_schema4.z.optional(componentInstanceOverridesPropTypeUtil.schema)
+  })
+);
+
 // src/utils/is-component-instance.ts
 function isComponentInstance(elementModel) {
   return [elementModel.widgetType, elementModel.elType].includes(COMPONENT_WIDGET_TYPE);
 }
 
-// src/utils/revert-element-overridable-setting.ts
+// src/utils/revert-overridable-settings.ts
 function revertElementOverridableSetting(elementId, settingKey, originValue, overrideKey) {
   const container = (0, import_editor_elements2.getContainer)(elementId);
   if (!container) {
     return;
   }
   if (isComponentInstance(container.model.toJSON())) {
-    revertComponentInstanceSetting(elementId, overrideKey);
+    revertComponentInstanceOverridableSetting(elementId, overrideKey);
     return;
   }
   (0, import_editor_elements2.updateElementSettings)({
@@ -1049,17 +1049,17 @@ function revertElementOverridableSetting(elementId, settingKey, originValue, ove
     withHistory: false
   });
 }
-function revertComponentInstanceSetting(elementId, overrideKey) {
+function revertComponentInstanceOverridableSetting(elementId, overrideKey) {
   const setting = (0, import_editor_elements2.getElementSetting)(elementId, "component_instance");
   const componentInstance = componentInstancePropTypeUtil.extract(setting);
   const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance?.overrides);
-  if (!overrides) {
+  if (!overrides?.length) {
     return;
   }
-  const updatedOverrides = getUpdatedComponentInstanceOverrides(overrides, overrideKey);
+  const revertedOverrides = revertComponentInstanceOverrides(overrides, overrideKey);
   const updatedSetting = componentInstancePropTypeUtil.create({
     ...componentInstance,
-    overrides: componentInstanceOverridesPropTypeUtil.create(updatedOverrides)
+    overrides: componentInstanceOverridesPropTypeUtil.create(revertedOverrides)
   });
   (0, import_editor_elements2.updateElementSettings)({
     id: elementId,
@@ -1067,22 +1067,103 @@ function revertComponentInstanceSetting(elementId, overrideKey) {
     withHistory: false
   });
 }
-function getUpdatedComponentInstanceOverrides(overrides, overrideKey) {
+function revertComponentInstanceOverrides(overrides, filterByKey) {
   return overrides.map((item) => {
-    const isOverridable = componentOverridablePropTypeUtil.isValid(item);
-    if (!isOverridable) {
+    if (!componentOverridablePropTypeUtil.isValid(item)) {
       return item;
     }
-    const isOriginValueOverride2 = componentInstanceOverridePropTypeUtil.isValid(item.value.origin_value);
-    if (!isOriginValueOverride2) {
+    if (!componentInstanceOverridePropTypeUtil.isValid(item.value.origin_value)) {
       return null;
     }
-    if (item.value.override_key !== overrideKey) {
+    if (filterByKey && item.value.override_key !== filterByKey) {
       return item;
     }
     return item.value.origin_value;
   }).filter((item) => item !== null);
 }
+function revertOverridablePropsFromSettings(settings) {
+  let hasChanges = false;
+  const revertedSettings = {};
+  for (const [key, value] of Object.entries(settings)) {
+    if (componentOverridablePropTypeUtil.isValid(value)) {
+      revertedSettings[key] = value.value.origin_value;
+      hasChanges = true;
+    } else {
+      revertedSettings[key] = value;
+    }
+  }
+  return { hasChanges, settings: revertedSettings };
+}
+function revertAllOverridablesInElementData(elementData) {
+  const revertedElement = { ...elementData };
+  if (isComponentInstance({ widgetType: elementData.widgetType, elType: elementData.elType })) {
+    revertedElement.settings = revertComponentInstanceSettings(elementData.settings);
+  } else if (revertedElement.settings) {
+    const { settings } = revertOverridablePropsFromSettings(revertedElement.settings);
+    revertedElement.settings = settings;
+  }
+  if (revertedElement.elements) {
+    revertedElement.elements = revertedElement.elements.map(revertAllOverridablesInElementData);
+  }
+  return revertedElement;
+}
+function revertComponentInstanceSettings(settings) {
+  if (!settings?.component_instance) {
+    return settings;
+  }
+  const componentInstance = componentInstancePropTypeUtil.extract(settings.component_instance);
+  const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance?.overrides);
+  if (!overrides?.length) {
+    return settings;
+  }
+  const revertedOverrides = revertComponentInstanceOverrides(overrides);
+  return {
+    ...settings,
+    component_instance: componentInstancePropTypeUtil.create({
+      ...componentInstance,
+      overrides: componentInstanceOverridesPropTypeUtil.create(revertedOverrides)
+    })
+  };
+}
+function revertAllOverridablesInContainer(container) {
+  (0, import_editor_elements2.getAllDescendants)(container).forEach((element) => {
+    if (element.model.get("widgetType") === COMPONENT_WIDGET_TYPE) {
+      revertComponentInstanceOverridesInElement(element);
+    } else {
+      revertElementSettings(element);
+    }
+  });
+}
+function revertComponentInstanceOverridesInElement(element) {
+  const settings = element.settings?.toJSON() ?? {};
+  const componentInstance = componentInstancePropTypeUtil.extract(settings.component_instance);
+  const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance?.overrides);
+  if (!overrides?.length) {
+    return;
+  }
+  const revertedOverrides = revertComponentInstanceOverrides(overrides);
+  const updatedSetting = componentInstancePropTypeUtil.create({
+    ...componentInstance,
+    overrides: componentInstanceOverridesPropTypeUtil.create(revertedOverrides)
+  });
+  (0, import_editor_elements2.updateElementSettings)({
+    id: element.id,
+    props: { component_instance: updatedSetting },
+    withHistory: false
+  });
+}
+function revertElementSettings(element) {
+  const settings = element.settings?.toJSON() ?? {};
+  const { hasChanges, settings: revertedSettings } = revertOverridablePropsFromSettings(settings);
+  if (!hasChanges) {
+    return;
+  }
+  (0, import_editor_elements2.updateElementSettings)({
+    id: element.id,
+    props: revertedSettings,
+    withHistory: false
+  });
+}
 
 // src/store/actions/delete-overridable-prop.ts
 function deleteOverridableProp({ componentId, propKey, source }) {
@@ -2119,7 +2200,7 @@ function getComponentName() {
 }
 
 // src/components/components-tab/components.tsx
-var React19 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_editor_ui10 = require("@elementor/editor-ui");
 
 // src/hooks/use-components.ts
@@ -2190,12 +2271,10 @@ var ComponentSearch = () => {
 };
 
 // src/components/components-tab/components-list.tsx
-var React17 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_editor_mcp = require("@elementor/editor-mcp");
+var React16 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
-var import_ui15 = require("@elementor/ui");
-var import_i18n20 = require("@wordpress/i18n");
+var import_ui14 = require("@elementor/ui");
+var import_i18n19 = require("@wordpress/i18n");
 
 // src/hooks/use-components-permissions.ts
 var import_editor_current_user2 = require("@elementor/editor-current-user");
@@ -2243,60 +2322,25 @@ function findComponentInstancesByUid(documentContainer, componentUid) {
   });
 }
 
-// src/components/components-tab/angie-promotion-modal.tsx
-var React13 = __toESM(require("react"));
-var import_ui12 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
-var ANGIE_INSTALL_URL = "/wp-admin/plugin-install.php?tab=plugin-information&plugin=angie";
-var PLACEHOLDER_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/components-angie-promo.svg";
-var AngiePromotionModal = ({ children, open, onClose }) => {
-  return /* @__PURE__ */ React13.createElement(import_ui12.Infotip, { placement: "right-end", arrow: true, content: /* @__PURE__ */ React13.createElement(AngiePromotionCard, { onClose }), open }, children);
-};
-function AngiePromotionCard({ onClose }) {
-  const handleCtaClick = () => {
-    window.open(ANGIE_INSTALL_URL, "_blank");
-    onClose();
-  };
-  return /* @__PURE__ */ React13.createElement(import_ui12.ClickAwayListener, { disableReactTree: true, mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onClose }, /* @__PURE__ */ React13.createElement(import_ui12.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
-    import_ui12.CardHeader,
-    {
-      title: (0, import_i18n15.__)("Add new component with AI", "elementor"),
-      titleTypographyProps: { variant: "subtitle2" },
-      action: /* @__PURE__ */ React13.createElement(import_ui12.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
-    }
-  ), /* @__PURE__ */ React13.createElement(
-    import_ui12.CardMedia,
-    {
-      component: "img",
-      image: PLACEHOLDER_IMAGE_URL,
-      alt: "",
-      sx: { width: "100%", aspectRatio: "16 / 9" }
-    }
-  ), /* @__PURE__ */ React13.createElement(import_ui12.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n15.__)(
-    "Angie our AI assistant can easily create new components and save you the hassle of doing it yourself",
-    "elementor"
-  ))), /* @__PURE__ */ React13.createElement(import_ui12.CardActions, { sx: { justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(import_ui12.Button, { size: "medium", variant: "contained", color: "accent", onClick: handleCtaClick }, (0, import_i18n15.__)("Get Angie", "elementor")))));
-}
-
 // src/components/components-tab/components-item.tsx
-var React15 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_react8 = require("react");
 var import_editor_canvas5 = require("@elementor/editor-canvas");
 var import_editor_elements8 = require("@elementor/editor-elements");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
-var import_ui13 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
+var import_ui12 = require("@elementor/ui");
+var import_i18n18 = require("@wordpress/i18n");
 
 // src/store/actions/archive-component.ts
 var import_editor_documents8 = require("@elementor/editor-documents");
 var import_editor_notifications = require("@elementor/editor-notifications");
 var import_store35 = require("@elementor/store");
-var import_i18n16 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 var successNotification = (componentId, componentName) => ({
   type: "success",
   /* translators: %s: component name */
-  message: (0, import_i18n16.__)("Successfully deleted component %s", "elementor").replace("%s", componentName),
+  message: (0, import_i18n15.__)("Successfully deleted component %s", "elementor").replace("%s", componentName),
   id: `success-archived-components-notification-${componentId}`
 });
 var archiveComponent = (componentId, componentName) => {
@@ -2429,14 +2473,14 @@ var import_store41 = require("@elementor/store");
 
 // src/components/create-component-form/utils/component-form-schema.ts
 var import_schema5 = require("@elementor/schema");
-var import_i18n17 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
-var baseComponentSchema = import_schema5.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n17.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var baseComponentSchema = import_schema5.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n16.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
 var createBaseComponentSchema = (existingNames) => {
   return import_schema5.z.object({
     componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
-      message: (0, import_i18n17.__)("Component name already exists", "elementor")
+      message: (0, import_i18n16.__)("Component name already exists", "elementor")
     })
   });
 };
@@ -2444,9 +2488,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: (0, import_i18n17.__)("Component name is required.", "elementor")
+      message: (0, import_i18n16.__)("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: (0, import_i18n17.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: (0, import_i18n16.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -2537,14 +2581,14 @@ var createComponentModel2 = (component) => {
 };
 
 // src/components/components-tab/delete-confirmation-dialog.tsx
-var React14 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_editor_ui7 = require("@elementor/editor-ui");
-var import_i18n18 = require("@wordpress/i18n");
+var import_i18n17 = require("@wordpress/i18n");
 function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
-  return /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n18.__)("Delete this component?", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n18.__)(
+  return /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n17.__)("Delete this component?", "elementor")), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n17.__)(
     "Existing instances on your pages will remain functional. You will no longer find this component in your list.",
     "elementor"
-  ))), /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose, onConfirm }));
+  ))), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose, onConfirm }));
 }
 
 // src/components/components-tab/components-item.tsx
@@ -2565,7 +2609,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
     validation: validateComponentTitle
   });
   const componentModel = createComponentModel2(component);
-  const popupState = (0, import_ui13.usePopupState)({
+  const popupState = (0, import_ui12.usePopupState)({
     variant: "popover",
     disableAutoFocus: true
   });
@@ -2590,7 +2634,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
   const handleDeleteDialogClose = () => {
     setIsDeleteDialogOpen(false);
   };
-  return /* @__PURE__ */ React15.createElement(import_ui13.Stack, null, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React14.createElement(import_ui12.Stack, null, /* @__PURE__ */ React14.createElement(
     import_editor_ui8.WarningInfotip,
     {
       open: Boolean(error),
@@ -2599,8 +2643,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
       width: itemRef.current?.getBoundingClientRect().width,
       offset: [0, -15]
     },
-    /* @__PURE__ */ React15.createElement(
-      import_ui13.ListItemButton,
+    /* @__PURE__ */ React14.createElement(
+      import_ui12.ListItemButton,
       {
         draggable: true,
         onDragStart: (event) => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel, event),
@@ -2618,8 +2662,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           gap: 1
         }
       },
-      /* @__PURE__ */ React15.createElement(
-        import_ui13.Box,
+      /* @__PURE__ */ React14.createElement(
+        import_ui12.Box,
         {
           display: "flex",
           alignItems: "center",
@@ -2628,31 +2672,31 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           flexGrow: 1,
           onClick: handleClick
         },
-        /* @__PURE__ */ React15.createElement(import_ui13.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React15.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
-        /* @__PURE__ */ React15.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React15.createElement(import_ui13.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React15.createElement(
+        /* @__PURE__ */ React14.createElement(import_ui12.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React14.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
+        /* @__PURE__ */ React14.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React14.createElement(import_ui12.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React14.createElement(
           import_editor_ui8.EditableField,
           {
             ref: editableRef,
-            as: import_ui13.Typography,
+            as: import_ui12.Typography,
             variant: "caption",
             ...getEditableProps()
           }
-        ) : /* @__PURE__ */ React15.createElement(
+        ) : /* @__PURE__ */ React14.createElement(
           import_editor_ui8.EllipsisWithTooltip,
           {
             title: component.name,
-            as: import_ui13.Typography,
+            as: import_ui12.Typography,
             variant: "caption",
             color: "text.primary"
           }
         )))
       ),
-      shouldShowActions && /* @__PURE__ */ React15.createElement(import_ui13.IconButton, { size: "tiny", ...(0, import_ui13.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
+      shouldShowActions && /* @__PURE__ */ React14.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React14.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
     )
-  ), shouldShowActions && /* @__PURE__ */ React15.createElement(
-    import_ui13.Menu,
+  ), shouldShowActions && /* @__PURE__ */ React14.createElement(
+    import_ui12.Menu,
     {
-      ...(0, import_ui13.bindMenu)(popupState),
+      ...(0, import_ui12.bindMenu)(popupState),
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "right"
@@ -2662,7 +2706,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
         horizontal: "right"
       }
     },
-    canRename && /* @__PURE__ */ React15.createElement(
+    canRename && /* @__PURE__ */ React14.createElement(
       import_editor_ui8.MenuListItem,
       {
         sx: { minWidth: "160px" },
@@ -2672,18 +2716,18 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           openEditMode();
         }
       },
-      (0, import_i18n19.__)("Rename", "elementor")
+      (0, import_i18n18.__)("Rename", "elementor")
     ),
-    canDelete && /* @__PURE__ */ React15.createElement(
+    canDelete && /* @__PURE__ */ React14.createElement(
       import_editor_ui8.MenuListItem,
       {
         sx: { minWidth: "160px" },
         primaryTypographyProps: { variant: "caption", color: "error.light" },
         onClick: handleDeleteClick
       },
-      (0, import_i18n19.__)("Delete", "elementor")
+      (0, import_i18n18.__)("Delete", "elementor")
     )
-  ), /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React14.createElement(
     DeleteConfirmationDialog,
     {
       open: isDeleteDialogOpen,
@@ -2711,7 +2755,7 @@ var validateComponentTitle = (newTitle) => {
   }
   return result.errorMessage;
 };
-var Indicator = (0, import_ui13.styled)(import_ui13.Box, {
+var Indicator = (0, import_ui12.styled)(import_ui12.Box, {
   shouldForwardProp: (prop) => prop !== "isActive" && prop !== "isError"
 })(({ theme, isActive, isError }) => ({
   display: "flex",
@@ -2734,13 +2778,13 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
 };
 
 // src/components/components-tab/loading-components.tsx
-var React16 = __toESM(require("react"));
-var import_ui14 = require("@elementor/ui");
+var React15 = __toESM(require("react"));
+var import_ui13 = require("@elementor/ui");
 var ROWS_COUNT = 6;
 var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
 var LoadingComponents = () => {
-  return /* @__PURE__ */ React16.createElement(
-    import_ui14.Stack,
+  return /* @__PURE__ */ React15.createElement(
+    import_ui13.Stack,
     {
       "aria-label": "Loading components",
       gap: 1,
@@ -2761,14 +2805,14 @@ var LoadingComponents = () => {
         }
       }
     },
-    rows.map((row) => /* @__PURE__ */ React16.createElement(
-      import_ui14.ListItemButton,
+    rows.map((row) => /* @__PURE__ */ React15.createElement(
+      import_ui13.ListItemButton,
       {
         key: row,
         sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
         shape: "rounded"
       },
-      /* @__PURE__ */ React16.createElement(import_ui14.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React16.createElement(import_ui14.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React16.createElement(import_ui14.Skeleton, { variant: "text", width: "100%", height: "36px" }))
+      /* @__PURE__ */ React15.createElement(import_ui13.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React15.createElement(import_ui13.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React15.createElement(import_ui13.Skeleton, { variant: "text", width: "100%", height: "36px" }))
     ))
   );
 };
@@ -2782,16 +2826,16 @@ var SUBTITLE_OVERRIDE_SX = {
 function ComponentsList() {
   const { components, isLoading, searchValue } = useFilteredComponents();
   if (isLoading) {
-    return /* @__PURE__ */ React17.createElement(LoadingComponents, null);
+    return /* @__PURE__ */ React16.createElement(LoadingComponents, null);
   }
   const isEmpty = !components || components.length === 0;
   if (isEmpty) {
     if (searchValue.length > 0) {
-      return /* @__PURE__ */ React17.createElement(EmptySearchResult, null);
+      return /* @__PURE__ */ React16.createElement(EmptySearchResult, null);
     }
-    return /* @__PURE__ */ React17.createElement(EmptyState, null);
+    return /* @__PURE__ */ React16.createElement(EmptyState, null);
   }
-  return /* @__PURE__ */ React17.createElement(import_ui15.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React16.createElement(import_ui14.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React16.createElement(
     ComponentItem,
     {
       key: component.uid,
@@ -2803,24 +2847,9 @@ function ComponentsList() {
   )));
 }
 var EmptyState = () => {
-  const [isAngieModalOpen, setIsAngieModalOpen] = (0, import_react9.useState)(false);
   const { canCreate } = useComponentsPermissions();
-  const handleCreateWithAI = () => {
-    const sdk = (0, import_editor_mcp.getAngieSdk)();
-    if (sdk.isAngieReady()) {
-      sdk.triggerAngie({
-        prompt: (0, import_i18n20.__)(
-          "Create a [hero/testimonial/product card/CTA/feature] component for my [business type]. Include [describe what you want]",
-          "elementor"
-        ),
-        context: { source: "components-panel-empty-state" }
-      });
-    } else {
-      setIsAngieModalOpen(true);
-    }
-  };
-  return /* @__PURE__ */ React17.createElement(
-    import_ui15.Stack,
+  return /* @__PURE__ */ React16.createElement(
+    import_ui14.Stack,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -2829,11 +2858,11 @@ var EmptyState = () => {
       gap: 2,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n20.__)("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n20.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), canCreate ? (0, import_i18n20.__)("Create once, use everywhere.", "elementor") : (0, import_i18n20.__)(
+    /* @__PURE__ */ React16.createElement(import_ui14.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n19.__)("No components yet", "elementor")), /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n19.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React16.createElement("br", null), canCreate ? (0, import_i18n19.__)("Create once, use everywhere.", "elementor") : (0, import_i18n19.__)(
       "With your current role, you cannot create components. Contact an administrator to create one.",
       "elementor"
-    )), /* @__PURE__ */ React17.createElement(
-      import_ui15.Link,
+    )), /* @__PURE__ */ React16.createElement(
+      import_ui14.Link,
       {
         href: LEARN_MORE_URL,
         target: "_blank",
@@ -2841,37 +2870,27 @@ var EmptyState = () => {
         variant: "caption",
         color: "info.main"
       },
-      (0, import_i18n20.__)("Learn more about components", "elementor")
+      (0, import_i18n19.__)("Learn more about components", "elementor")
     )),
-    canCreate && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui15.Divider, { sx: { width: "100%" } }), /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(
-      import_ui15.Typography,
+    canCreate && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_ui14.Divider, { sx: { width: "100%" } }), /* @__PURE__ */ React16.createElement(import_ui14.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React16.createElement(
+      import_ui14.Typography,
       {
         align: "center",
         variant: "subtitle2",
         color: "text.secondary",
         sx: SUBTITLE_OVERRIDE_SX
       },
-      (0, import_i18n20.__)("Create your first one:", "elementor")
-    ), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n20.__)(
+      (0, import_i18n19.__)("Create your first one:", "elementor")
+    ), /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n19.__)(
       'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
       "elementor"
-    )), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary" }, (0, import_i18n20.__)("Or", "elementor")), /* @__PURE__ */ React17.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React17.createElement(
-      import_ui15.Button,
-      {
-        color: "secondary",
-        variant: "outlined",
-        size: "small",
-        onClick: handleCreateWithAI,
-        endIcon: /* @__PURE__ */ React17.createElement(import_icons10.AIIcon, null)
-      },
-      (0, import_i18n20.__)("Create component with AI", "elementor")
     ))))
   );
 };
 var EmptySearchResult = () => {
   const { searchValue, clearSearch } = useSearch();
-  return /* @__PURE__ */ React17.createElement(
-    import_ui15.Stack,
+  return /* @__PURE__ */ React16.createElement(
+    import_ui14.Stack,
     {
       color: "text.secondary",
       pt: 5,
@@ -2880,17 +2899,17 @@ var EmptySearchResult = () => {
       overflow: "hidden",
       justifySelf: "center"
     },
-    /* @__PURE__ */ React17.createElement(import_icons10.ComponentsIcon, null),
-    /* @__PURE__ */ React17.createElement(
-      import_ui15.Box,
+    /* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, null),
+    /* @__PURE__ */ React16.createElement(
+      import_ui14.Box,
       {
         sx: {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n20.__)("Sorry, nothing matched", "elementor")),
-      searchValue && /* @__PURE__ */ React17.createElement(
-        import_ui15.Typography,
+      /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n19.__)("Sorry, nothing matched", "elementor")),
+      searchValue && /* @__PURE__ */ React16.createElement(
+        import_ui14.Typography,
         {
           variant: "subtitle2",
           color: "inherit",
@@ -2901,8 +2920,8 @@ var EmptySearchResult = () => {
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React17.createElement("span", null, "\u201C"),
-        /* @__PURE__ */ React17.createElement(
+        /* @__PURE__ */ React16.createElement("span", null, "\u201C"),
+        /* @__PURE__ */ React16.createElement(
           "span",
           {
             style: {
@@ -2913,11 +2932,11 @@ var EmptySearchResult = () => {
           },
           searchValue
         ),
-        /* @__PURE__ */ React17.createElement("span", null, "\u201D.")
+        /* @__PURE__ */ React16.createElement("span", null, "\u201D.")
       )
     ),
-    /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n20.__)("Try something else.", "elementor")),
-    /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React17.createElement(import_ui15.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n20.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n19.__)("Try something else.", "elementor")),
+    /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(import_ui14.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n19.__)("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -2933,12 +2952,12 @@ var useFilteredComponents = () => {
 };
 
 // src/components/components-tab/components-pro-notification.tsx
-var React18 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_editor_ui9 = require("@elementor/editor-ui");
-var import_ui16 = require("@elementor/ui");
-var import_i18n21 = require("@wordpress/i18n");
+var import_ui15 = require("@elementor/ui");
+var import_i18n20 = require("@wordpress/i18n");
 function ComponentsProNotification() {
-  return /* @__PURE__ */ React18.createElement(import_ui16.Box, { sx: { px: 2 } }, /* @__PURE__ */ React18.createElement(import_editor_ui9.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.__)(
+  return /* @__PURE__ */ React17.createElement(import_ui15.Box, { sx: { px: 2 } }, /* @__PURE__ */ React17.createElement(import_editor_ui9.InfoAlert, null, /* @__PURE__ */ React17.createElement(import_ui15.Typography, { variant: "caption", component: "span" }, /* @__PURE__ */ React17.createElement(import_ui15.Typography, { variant: "caption", component: "span", fontWeight: "bold" }, (0, import_i18n20.__)("Try Components for free:", "elementor")), " ", (0, import_i18n20.__)(
     "Soon Components will be part of the Pro subscription, but what you create now will remain on your site.",
     "elementor"
   ))));
@@ -2948,10 +2967,10 @@ function ComponentsProNotification() {
 var ComponentsContent = () => {
   const { components, isLoading } = useComponents();
   const hasComponents = !isLoading && components.length > 0;
-  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));
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, hasComponents && /* @__PURE__ */ React18.createElement(ComponentSearch, null), hasComponents && !isProUser() && /* @__PURE__ */ React18.createElement(ComponentsProNotification, null), /* @__PURE__ */ React18.createElement(ComponentsList, null));
 };
 var Components = () => {
-  return /* @__PURE__ */ React19.createElement(import_editor_ui10.ThemeProvider, null, /* @__PURE__ */ React19.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React19.createElement(ComponentsContent, null)));
+  return /* @__PURE__ */ React18.createElement(import_editor_ui10.ThemeProvider, null, /* @__PURE__ */ React18.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React18.createElement(ComponentsContent, null)));
 };
 
 // src/components/consts.ts
@@ -2959,22 +2978,22 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 var OVERRIDABLE_PROP_REPLACEMENT_ID = "overridable-prop";
 
 // src/components/create-component-form/create-component-form.tsx
-var React20 = __toESM(require("react"));
-var import_react11 = require("react");
+var React19 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
 var import_store47 = require("@elementor/store");
-var import_ui17 = require("@elementor/ui");
-var import_i18n23 = require("@wordpress/i18n");
+var import_ui16 = require("@elementor/ui");
+var import_i18n22 = require("@wordpress/i18n");
 
 // src/prevent-non-atomic-nesting.ts
 var import_editor_canvas6 = require("@elementor/editor-canvas");
 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_i18n22 = require("@wordpress/i18n");
+var import_i18n21 = require("@wordpress/i18n");
 
 // src/utils/is-editing-component.ts
 var import_store43 = require("@elementor/store");
@@ -2989,7 +3008,7 @@ function isEditingComponent() {
 // src/prevent-non-atomic-nesting.ts
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: (0, import_i18n22.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: (0, import_i18n21.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -3101,10 +3120,11 @@ async function createUnpublishedComponent({
 }) {
   const generatedUid = uid ?? (0, import_utils4.generateUniqueId)("component");
   const componentBase = { uid: generatedUid, name };
+  const elementDataWithOverridablesReverted = revertAllOverridablesInElementData(element);
   (0, import_store45.__dispatch)(
     slice.actions.addUnpublished({
       ...componentBase,
-      elements: [element],
+      elements: [elementDataWithOverridablesReverted],
       overridableProps
     })
   );
@@ -3122,11 +3142,11 @@ async function createUnpublishedComponent({
 }
 
 // src/components/create-component-form/hooks/use-form.ts
-var import_react10 = require("react");
+var import_react9 = require("react");
 var useForm = (initialValues) => {
-  const [values, setValues] = (0, import_react10.useState)(initialValues);
-  const [errors, setErrors] = (0, import_react10.useState)({});
-  const isValid = (0, import_react10.useMemo)(() => {
+  const [values, setValues] = (0, import_react9.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react9.useState)({});
+  const isValid = (0, import_react9.useMemo)(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
   const handleChange = (e, field, validationSchema) => {
@@ -3201,17 +3221,17 @@ function countNestedElements(container) {
 
 // src/components/create-component-form/create-component-form.tsx
 function CreateComponentForm() {
-  const [element, setElement] = (0, import_react11.useState)(null);
-  const [anchorPosition, setAnchorPosition] = (0, import_react11.useState)();
-  const eventData = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const [element, setElement] = (0, import_react10.useState)(null);
+  const [anchorPosition, setAnchorPosition] = (0, import_react10.useState)();
+  const eventData = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     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) {
         (0, import_editor_notifications3.notify)({
           type: "default",
-          message: (0, import_i18n23.__)(
+          message: (0, import_i18n22.__)(
             "Components require atomic elements only. Remove widgets to create this component.",
             "elementor"
           ),
@@ -3252,12 +3272,12 @@ function CreateComponentForm() {
       }
       (0, import_editor_notifications3.notify)({
         type: "success",
-        message: (0, import_i18n23.__)("Component created successfully.", "elementor"),
+        message: (0, import_i18n22.__)("Component created successfully.", "elementor"),
         id: `component-saved-successfully-${uid}`
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = (0, import_i18n23.__)("Failed to create component. Please try again.", "elementor");
+      const errorMessage = (0, import_i18n22.__)("Failed to create component. Please try again.", "elementor");
       (0, import_editor_notifications3.notify)({
         type: "error",
         message: errorMessage,
@@ -3277,15 +3297,15 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React20.createElement(import_editor_ui11.ThemeProvider, null, /* @__PURE__ */ React20.createElement(
-    import_ui17.Popover,
+  return /* @__PURE__ */ React19.createElement(import_editor_ui11.ThemeProvider, null, /* @__PURE__ */ React19.createElement(
+    import_ui16.Popover,
     {
       open: element !== null,
       onClose: cancelSave,
       anchorReference: "anchorPosition",
       anchorPosition
     },
-    element !== null && /* @__PURE__ */ React20.createElement(
+    element !== null && /* @__PURE__ */ React19.createElement(
       Form2,
       {
         initialValues: { componentName: element.elementLabel },
@@ -3303,14 +3323,14 @@ var Form2 = ({
 }) => {
   const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
   const { components } = useComponents();
-  const existingComponentNames = (0, import_react11.useMemo)(() => {
+  const existingComponentNames = (0, import_react10.useMemo)(() => {
     return components?.map((component) => component.name) ?? [];
   }, [components]);
-  const changeValidationSchema = (0, import_react11.useMemo)(
+  const changeValidationSchema = (0, import_react10.useMemo)(
     () => createBaseComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
-  const submitValidationSchema = (0, import_react11.useMemo)(
+  const submitValidationSchema = (0, import_react10.useMemo)(
     () => createSubmitComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
@@ -3321,14 +3341,14 @@ var Form2 = ({
     }
   };
   const texts = {
-    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")
+    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")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React20.createElement(import_editor_ui11.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React20.createElement(import_ui17.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
-    import_ui17.Stack,
+  return /* @__PURE__ */ React19.createElement(import_editor_ui11.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
+    import_ui16.Stack,
     {
       direction: "row",
       alignItems: "center",
@@ -3336,10 +3356,10 @@ var Form2 = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__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,
+    /* @__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,
     {
       id: nameInputId,
       size: FONT_SIZE,
@@ -3350,12 +3370,12 @@ var Form2 = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__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))));
+  ))), /* @__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))));
 };
 
 // src/components/edit-component/edit-component.tsx
-var React22 = __toESM(require("react"));
-var import_react14 = require("react");
+var React21 = __toESM(require("react"));
+var import_react13 = require("react");
 var import_editor_documents11 = require("@elementor/editor-documents");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_store51 = require("@elementor/store");
@@ -3377,10 +3397,10 @@ function updateCurrentComponent({
 }
 
 // src/components/edit-component/component-modal.tsx
-var React21 = __toESM(require("react"));
-var import_react13 = require("react");
+var React20 = __toESM(require("react"));
+var import_react12 = require("react");
 var import_react_dom = require("react-dom");
-var import_i18n24 = require("@wordpress/i18n");
+var import_i18n23 = require("@wordpress/i18n");
 
 // src/hooks/use-canvas-document.ts
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
@@ -3389,10 +3409,10 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-element-rect.ts
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_utils5 = require("@elementor/utils");
 function useElementRect(element) {
-  const [rect, setRect] = (0, import_react12.useState)(new DOMRect(0, 0, 0, 0));
+  const [rect, setRect] = (0, import_react11.useState)(new DOMRect(0, 0, 0, 0));
   const onChange = (0, import_utils5.throttle)(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
@@ -3403,7 +3423,7 @@ function useElementRect(element) {
   useScrollListener({ element, onChange });
   useResizeListener({ element, onChange });
   useMutationsListener({ element, onChange });
-  (0, import_react12.useEffect)(
+  (0, import_react11.useEffect)(
     () => () => {
       onChange.cancel();
     },
@@ -3412,7 +3432,7 @@ function useElementRect(element) {
   return rect;
 }
 function useScrollListener({ element, onChange }) {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -3424,7 +3444,7 @@ function useScrollListener({ element, onChange }) {
   }, [element, onChange]);
 }
 function useResizeListener({ element, onChange }) {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -3439,7 +3459,7 @@ function useResizeListener({ element, onChange }) {
   }, [element, onChange]);
 }
 function useMutationsListener({ element, onChange }) {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -3454,7 +3474,7 @@ function useMutationsListener({ element, onChange }) {
 // src/components/edit-component/component-modal.tsx
 function ComponentModal({ topLevelElementDom, onClose }) {
   const canvasDocument = useCanvasDocument();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const handleEsc = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -3469,7 +3489,7 @@ function ComponentModal({ topLevelElementDom, onClose }) {
     return null;
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(BlockEditPage, null), /* @__PURE__ */ React21.createElement(Backdrop, { canvas: canvasDocument, element: topLevelElementDom, onClose })),
+    /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(BlockEditPage, null), /* @__PURE__ */ React20.createElement(Backdrop, { canvas: canvasDocument, element: topLevelElementDom, onClose })),
     canvasDocument.body
   );
 }
@@ -3498,7 +3518,7 @@ function Backdrop({
       onClose();
     }
   };
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "div",
     {
       style: backdropStyle,
@@ -3506,7 +3526,7 @@ function Backdrop({
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": (0, import_i18n24.__)("Exit component editing mode", "elementor")
+      "aria-label": (0, import_i18n23.__)("Exit component editing mode", "elementor")
     }
   );
 }
@@ -3546,7 +3566,7 @@ function BlockEditPage() {
 		}
 	}
 	`;
-  return /* @__PURE__ */ React21.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
+  return /* @__PURE__ */ React20.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
 }
 
 // src/components/edit-component/edit-component.tsx
@@ -3559,13 +3579,13 @@ function EditComponent() {
   if (!currentComponentId) {
     return null;
   }
-  return /* @__PURE__ */ React22.createElement(ComponentModal, { topLevelElementDom, onClose });
+  return /* @__PURE__ */ React21.createElement(ComponentModal, { topLevelElementDom, onClose });
 }
 function useHandleDocumentSwitches() {
   const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
   const currentComponentId = useCurrentComponentId();
   const path = (0, import_store51.__useSelector)(selectPath);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/open"), () => {
       const nextDocument = documentsManager.getCurrent();
       if (nextDocument.id === currentComponentId) {
@@ -3618,11 +3638,11 @@ function getInstanceTitle(instanceId, path) {
 }
 function useComponentDOMElement(id2) {
   const { componentContainerDomElement, topLevelElementDom } = getComponentDOMElements(id2);
-  const [currentElementDom, setCurrentElementDom] = (0, import_react14.useState)(topLevelElementDom);
-  (0, import_react14.useEffect)(() => {
+  const [currentElementDom, setCurrentElementDom] = (0, import_react13.useState)(topLevelElementDom);
+  (0, import_react13.useEffect)(() => {
     setCurrentElementDom(topLevelElementDom);
   }, [topLevelElementDom]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!componentContainerDomElement) {
       return;
     }
@@ -3650,34 +3670,34 @@ function getComponentDOMElements(id2) {
 }
 
 // src/components/in-edit-mode.tsx
-var React23 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons12 = require("@elementor/icons");
-var import_ui18 = require("@elementor/ui");
-var import_i18n25 = require("@wordpress/i18n");
+var import_ui17 = require("@elementor/ui");
+var import_i18n24 = require("@wordpress/i18n");
 var openEditModeDialog = (lockedBy) => {
   (0, import_editor_ui12.openDialog)({
-    component: /* @__PURE__ */ React23.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React22.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  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.__)(
+  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.__)(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React23.createElement(import_ui18.DialogActions, null, /* @__PURE__ */ React23.createElement(import_ui18.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui12.closeDialog }, (0, import_i18n25.__)("Close", "elementor"))))));
+  )), /* @__PURE__ */ React22.createElement(import_ui17.DialogActions, null, /* @__PURE__ */ React22.createElement(import_ui17.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui12.closeDialog }, (0, import_i18n24.__)("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-var React29 = __toESM(require("react"));
+var React28 = __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_panels4 = require("@elementor/editor-panels");
 var import_editor_ui14 = require("@elementor/editor-ui");
 var import_icons14 = require("@elementor/icons");
-var import_ui23 = require("@elementor/ui");
-var import_i18n27 = require("@wordpress/i18n");
+var import_ui22 = require("@elementor/ui");
+var import_i18n26 = require("@wordpress/i18n");
 
 // src/hooks/use-component-instance-settings.ts
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
@@ -3689,21 +3709,21 @@ function useComponentInstanceSettings() {
 }
 
 // src/components/instance-editing-panel/empty-state.tsx
-var React24 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
-var import_ui19 = require("@elementor/ui");
-var import_i18n26 = require("@wordpress/i18n");
+var import_ui18 = require("@elementor/ui");
+var import_i18n25 = require("@wordpress/i18n");
 var EmptyState2 = ({ onEditComponent }) => {
   const { canEdit } = useComponentsPermissions();
-  const message = canEdit ? (0, import_i18n26.__)(
+  const message = canEdit ? (0, import_i18n25.__)(
     "Edit the component to add properties, manage them or update the design across all instances.",
     "elementor"
-  ) : (0, import_i18n26.__)(
+  ) : (0, import_i18n25.__)(
     "With your current role, you cannot edit this component. Contact an administrator to add properties.",
     "elementor"
   );
-  return /* @__PURE__ */ React24.createElement(
-    import_ui19.Stack,
+  return /* @__PURE__ */ React23.createElement(
+    import_ui18.Stack,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -3712,26 +3732,26 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__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"))
+    /* @__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"))
   );
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-var React28 = __toESM(require("react"));
-var import_react16 = require("react");
+var React27 = __toESM(require("react"));
+var import_react15 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui13 = require("@elementor/editor-ui");
-var import_ui22 = require("@elementor/ui");
+var import_ui21 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-var React27 = __toESM(require("react"));
+var React26 = __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_ui21 = require("@elementor/ui");
+var import_ui20 = require("@elementor/ui");
 
 // src/hooks/use-controls-by-widget-type.ts
 var import_editor_elements12 = require("@elementor/editor-elements");
@@ -3765,14 +3785,14 @@ function getControlsByBind(controls) {
 }
 
 // src/provider/overridable-prop-context.tsx
-var React25 = __toESM(require("react"));
-var import_react15 = require("react");
-var OverridablePropContext = (0, import_react15.createContext)(null);
+var React24 = __toESM(require("react"));
+var import_react14 = require("react");
+var OverridablePropContext = (0, import_react14.createContext)(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React25.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
-var useOverridablePropValue = () => (0, import_react15.useContext)(OverridablePropContext)?.value;
-var useComponentInstanceElement = () => (0, import_react15.useContext)(OverridablePropContext)?.componentInstanceElement;
+var useOverridablePropValue = () => (0, import_react14.useContext)(OverridablePropContext)?.value;
+var useComponentInstanceElement = () => (0, import_react14.useContext)(OverridablePropContext)?.componentInstanceElement;
 
 // src/store/actions/update-overridable-prop.ts
 var import_store53 = require("@elementor/store");
@@ -3863,11 +3883,11 @@ function getPropType({ widgetType, propKey }) {
 }
 
 // src/components/control-label.tsx
-var React26 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_editor_controls2 = require("@elementor/editor-controls");
-var import_ui20 = require("@elementor/ui");
+var import_ui19 = require("@elementor/ui");
 var ControlLabel = ({ children, ...props }) => {
-  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));
+  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));
 };
 
 // src/components/errors.ts
@@ -3879,7 +3899,7 @@ var OverrideControlInnerElementNotFoundError = (0, import_utils7.createError)({
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 function OverridePropControl({ overridableProp, overrides }) {
-  return /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React27.createElement(OverrideControl, { overridableProp, overrides }));
+  return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
 }
 function OverrideControl({ overridableProp, overrides }) {
   const componentInstanceElement = (0, import_editor_editing_panel3.useElement)();
@@ -3950,13 +3970,13 @@ function OverrideControl({ overridableProp, overrides }) {
   if (!elementType) {
     return null;
   }
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React26.createElement(
     OverridablePropProvider,
     {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__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(
+    /* @__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(
       import_editor_controls3.PropProvider,
       {
         propType: propTypeSchema,
@@ -3966,7 +3986,7 @@ function OverrideControl({ overridableProp, overrides }) {
           return false;
         }
       },
-      /* @__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 }))))
+      /* @__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 }))))
     )))
   );
 }
@@ -4030,7 +4050,7 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React26.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);
@@ -4057,12 +4077,12 @@ function OverridePropsGroup({ group, props, overrides }) {
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id2 = (0, import_react16.useId)();
+  const id2 = (0, import_react15.useId)();
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React28.createElement(import_ui22.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React28.createElement(
-    import_ui22.ListItemButton,
+  return /* @__PURE__ */ React27.createElement(import_ui21.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React27.createElement(
+    import_ui21.ListItemButton,
     {
       id: labelId,
       "aria-controls": contentId,
@@ -4071,16 +4091,16 @@ function OverridePropsGroup({ group, props, overrides }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React28.createElement(
-      import_ui22.ListItemText,
+    /* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React27.createElement(
+      import_ui21.ListItemText,
       {
         secondary: title,
         secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React28.createElement(import_editor_ui13.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(
+    /* @__PURE__ */ React27.createElement(import_editor_ui13.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(
     OverridePropControl,
     {
       key: overrideKey,
@@ -4102,23 +4122,23 @@ function InstanceEditingPanel() {
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = (0, import_i18n27.__)("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = (0, import_i18n26.__)("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__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_editor_panels4.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_ui14.EllipsisWithTooltip, { title: component.name, as: import_editor_panels4.PanelHeaderTitle, sx: { flexGrow: 1 } }), 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_panels4.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(
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(import_editor_panels4.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_ui14.EllipsisWithTooltip, { title: component.name, as: import_editor_panels4.PanelHeaderTitle, sx: { flexGrow: 1 } }), 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_panels4.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(
     OverridePropsGroup,
     {
       group,
       props: overridableProps.props,
       overrides
     }
-  ), /* @__PURE__ */ React29.createElement(import_ui23.Divider, null)))))));
+  ), /* @__PURE__ */ React28.createElement(import_ui22.Divider, null)))))));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
-var React30 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 function OverridablePropControl({
@@ -4163,7 +4183,7 @@ function OverridablePropControl({
   });
   const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React30.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React29.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React29.createElement(
     import_editor_controls5.PropProvider,
     {
       ...propContext,
@@ -4174,7 +4194,7 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React30.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
+    /* @__PURE__ */ React29.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React29.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React29.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
   ));
 }
 function ControlWithReplacements({
@@ -4184,18 +4204,18 @@ function ControlWithReplacements({
   const { ControlToRender, isReplaced } = (0, import_editor_controls5.useControlReplacement)(OriginalControl2);
   if (isReplaced) {
     const ReplacementControl = ControlToRender;
-    return /* @__PURE__ */ React30.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
+    return /* @__PURE__ */ React29.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
   }
-  return /* @__PURE__ */ React30.createElement(OriginalControl2, { ...props });
+  return /* @__PURE__ */ React29.createElement(OriginalControl2, { ...props });
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-var React32 = __toESM(require("react"));
+var React31 = __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_ui25 = require("@elementor/ui");
-var import_i18n29 = require("@wordpress/i18n");
+var import_ui24 = require("@elementor/ui");
+var import_i18n28 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
 var import_store58 = require("@elementor/store");
@@ -4276,13 +4296,13 @@ function setOverridableProp({
 }
 
 // src/components/overridable-props/indicator.tsx
-var React31 = __toESM(require("react"));
-var import_react17 = require("react");
+var React30 = __toESM(require("react"));
+var import_react16 = require("react");
 var import_icons15 = require("@elementor/icons");
-var import_ui24 = require("@elementor/ui");
-var import_i18n28 = require("@wordpress/i18n");
+var import_ui23 = require("@elementor/ui");
+var import_i18n27 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
-var IconContainer = (0, import_ui24.styled)(import_ui24.Box)`
+var IconContainer = (0, import_ui23.styled)(import_ui23.Box)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -4299,7 +4319,7 @@ var IconContainer = (0, import_ui24.styled)(import_ui24.Box)`
 		stroke-width: 2px;
 	}
 `;
-var Content = (0, import_ui24.styled)(import_ui24.Box)`
+var Content = (0, import_ui23.styled)(import_ui23.Box)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -4336,13 +4356,13 @@ var Content = (0, import_ui24.styled)(import_ui24.Box)`
 		}
 	}
 `;
-var Indicator2 = (0, import_react17.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React31.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React31.createElement(
+var Indicator2 = (0, import_react16.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React30.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React30.createElement(
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? (0, import_i18n28.__)("Overridable property", "elementor") : (0, import_i18n28.__)("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? (0, import_i18n27.__)("Overridable property", "elementor") : (0, import_i18n27.__)("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React31.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React31.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
+  isOverridable ? /* @__PURE__ */ React30.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React30.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
@@ -4366,7 +4386,7 @@ function OverridablePropIndicator() {
   if (!isPropAllowed(propType) || !componentId || !overridableProps) {
     return null;
   }
-  return /* @__PURE__ */ React32.createElement(Content2, { componentId, overridableProps });
+  return /* @__PURE__ */ React31.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
@@ -4380,11 +4400,11 @@ function Content2({ componentId, overridableProps }) {
     componentOverridablePropTypeUtil
   );
   const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
-  const popupState = (0, import_ui25.usePopupState)({
+  const popupState = (0, import_ui24.usePopupState)({
     variant: "popover"
   });
-  const triggerProps = (0, import_ui25.bindTrigger)(popupState);
-  const popoverProps = (0, import_ui25.bindPopover)(popupState);
+  const triggerProps = (0, import_ui24.bindTrigger)(popupState);
+  const popoverProps = (0, import_ui24.bindPopover)(popupState);
   const { elType } = (0, import_editor_elements16.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
   const handleSubmit = ({ label, group }) => {
     const propTypeDefault = propType.default ?? {};
@@ -4412,8 +4432,8 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  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,
+  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,
     {
       disableScrollLock: true,
       anchorOrigin: {
@@ -4429,7 +4449,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React31.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -4448,12 +4468,12 @@ function isPropAllowed(propType) {
 }
 
 // src/mcp/index.ts
-var import_editor_mcp3 = require("@elementor/editor-mcp");
+var import_editor_mcp2 = require("@elementor/editor-mcp");
 
 // src/mcp/save-as-component-tool.ts
 var import_editor_canvas7 = require("@elementor/editor-canvas");
 var import_editor_elements17 = require("@elementor/editor-elements");
-var import_editor_mcp2 = require("@elementor/editor-mcp");
+var import_editor_mcp = require("@elementor/editor-mcp");
 var import_http_client2 = require("@elementor/http-client");
 var import_schema6 = require("@elementor/schema");
 var import_utils9 = require("@elementor/utils");
@@ -4626,7 +4646,7 @@ function getValidElementTypes() {
   }, []);
 }
 var generatePrompt = () => {
-  const saveAsComponentPrompt = (0, import_editor_mcp2.toolPrompts)("save-as-component");
+  const saveAsComponentPrompt = (0, import_editor_mcp.toolPrompts)("save-as-component");
   saveAsComponentPrompt.description(`
 Save an existing element as a reusable component in the Elementor editor.
 
@@ -4770,7 +4790,7 @@ Component with overridable properties:
   return saveAsComponentPrompt.prompt();
 };
 var initSaveAsComponentTool = () => {
-  return (0, import_editor_mcp2.getMCPByDomain)("components").addTool({
+  return (0, import_editor_mcp.getMCPByDomain)("components").addTool({
     name: "save-as-component",
     schema: InputSchema,
     outputSchema: OutputSchema,
@@ -4781,7 +4801,7 @@ var initSaveAsComponentTool = () => {
 
 // src/mcp/index.ts
 function initMcp() {
-  const { setMCPDescription } = (0, import_editor_mcp3.getMCPByDomain)("components");
+  const { setMCPDescription } = (0, import_editor_mcp2.getMCPByDomain)("components");
   setMCPDescription(
     `Elementor Editor Components MCP - Tools for creating and managing reusable components. 
         Components are reusable blocks of content that can be used multiple times across the pages, its a widget which contains a set of elements and styles.`
@@ -4790,10 +4810,10 @@ function initMcp() {
 }
 
 // src/populate-store.ts
-var import_react18 = require("react");
+var import_react17 = require("react");
 var import_store63 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     (0, import_store63.__dispatch)(loadComponents());
   }, []);
   return null;
@@ -4804,11 +4824,11 @@ var import_editor_elements18 = require("@elementor/editor-elements");
 var import_editor_notifications4 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 var import_store64 = require("@elementor/store");
-var import_i18n30 = require("@wordpress/i18n");
+var import_i18n29 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: (0, import_i18n30.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: (0, import_i18n29.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -5347,6 +5367,44 @@ function hasOverrides(settings) {
   return !!overridesValue?.length;
 }
 
+// src/sync/revert-overridables-on-copy-or-duplicate.ts
+var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
+function initRevertOverridablesOnCopyOrDuplicate() {
+  (0, import_editor_v1_adapters13.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
+    if (!isEditingComponent()) {
+      return;
+    }
+    revertOverridablesForDuplicatedElements(result);
+  });
+  (0, import_editor_v1_adapters13.registerDataHook)("after", "document/elements/copy", (args) => {
+    if (!isEditingComponent()) {
+      return;
+    }
+    revertOverridablesInStorage(args.storageKey ?? "clipboard");
+  });
+}
+function revertOverridablesForDuplicatedElements(duplicatedElements) {
+  const containers = Array.isArray(duplicatedElements) ? duplicatedElements : [duplicatedElements];
+  containers.forEach((container) => {
+    revertAllOverridablesInContainer(container);
+  });
+}
+function revertOverridablesInStorage(storageKey) {
+  const storage = window.elementorCommon?.storage;
+  if (!storage) {
+    return;
+  }
+  const storageData = storage.get(storageKey);
+  if (!storageData?.elements?.length) {
+    return;
+  }
+  const elementsDataWithOverridablesReverted = storageData.elements.map(revertAllOverridablesInElementData);
+  storage.set(storageKey, {
+    ...storageData,
+    elements: elementsDataWithOverridablesReverted
+  });
+}
+
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
@@ -5356,18 +5414,18 @@ function init() {
     COMPONENT_WIDGET_TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
-  (0, import_editor_v1_adapters13.registerDataHook)("dependency", "editor/documents/close", (args) => {
+  (0, import_editor_v1_adapters14.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_adapters13.registerDataHook)("after", "preview/drop", onElementDrop);
+  (0, import_editor_v1_adapters14.registerDataHook)("after", "preview/drop", onElementDrop);
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n31.__)("Components", "elementor"),
+    label: (0, import_i18n30.__)("Components", "elementor"),
     component: Components,
     position: 1
   });
@@ -5387,7 +5445,7 @@ function init() {
     id: "component-panel-header",
     component: ComponentPanelHeader
   });
-  (0, import_editor_v1_adapters13.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+  (0, import_editor_v1_adapters14.registerDataHook)("after", "editor/documents/attach-preview", async () => {
     const { id: id2, config } = (0, import_editor_documents13.getV1CurrentDocument)();
     if (id2) {
       removeComponentStyles(id2);
@@ -5420,6 +5478,7 @@ function init() {
   initNonAtomicNestingPrevention();
   initLoadComponentDataAfterInstanceAdded();
   initHandleComponentEditModeContainer();
+  initRevertOverridablesOnCopyOrDuplicate();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {