@elementor/editor-components 3.35.0-480 → 3.35.0-482

package/dist/index.js

@@ -40,9 +40,9 @@ var import_editor_canvas8 = require("@elementor/editor-canvas");
 var import_editor_documents13 = require("@elementor/editor-documents");
 var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
-var import_editor_panels4 = require("@elementor/editor-panels");
+var import_editor_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");
 
@@ -380,6 +380,8 @@ var componentOverrideTransformer = (0, import_editor_canvas3.createTransformer)(
 var React10 = __toESM(require("react"));
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_documents6 = require("@elementor/editor-documents");
+var import_editor_panels3 = require("@elementor/editor-panels");
+var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
 var import_store29 = require("@elementor/store");
 var import_ui10 = require("@elementor/ui");
@@ -731,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");
@@ -1026,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)({
@@ -1047,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,
@@ -1065,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 }) {
@@ -1671,14 +1754,18 @@ function PropertiesGroup({
         import_ui6.Box,
         {
           sx: {
-            flex: 1,
             height: 28,
             display: "flex",
             alignItems: "center",
             border: 2,
             borderColor: "text.secondary",
             borderRadius: 1,
-            pl: 0.5
+            pl: 0.5,
+            flexGrow: 1,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            width: "100%"
           }
         },
         /* @__PURE__ */ React6.createElement(
@@ -1693,12 +1780,13 @@ function PropertiesGroup({
           }
         )
       ) : /* @__PURE__ */ React6.createElement(
-        import_ui6.Typography,
+        import_editor_ui3.EllipsisWithTooltip,
         {
+          title: group.label,
+          as: import_ui6.Typography,
           variant: "caption",
           sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
-        },
-        group.label
+        }
       ), /* @__PURE__ */ React6.createElement(
         import_ui6.IconButton,
         {
@@ -2075,24 +2163,22 @@ var ComponentPanelHeader = () => {
       properties_count: overridablePropsCount
     });
   };
-  return /* @__PURE__ */ React10.createElement(import_ui10.Box, null, /* @__PURE__ */ React10.createElement(
-    import_ui10.Stack,
+  return /* @__PURE__ */ React10.createElement(import_ui10.Box, null, /* @__PURE__ */ React10.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React10.createElement(import_ui10.Tooltip, { title: (0, import_i18n13.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n13.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_icons7.ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(import_icons7.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(
+    import_editor_ui6.EllipsisWithTooltip,
     {
-      direction: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
-    },
-    /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Tooltip, { title: (0, import_i18n13.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n13.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_icons7.ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(import_icons7.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(import_ui10.Typography, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
-    /* @__PURE__ */ React10.createElement(
-      ComponentsBadge,
-      {
-        overridablePropsCount,
-        ref: anchorRef,
-        onClick: handleOpenPropertiesPanel
-      }
-    )
-  ), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(
+      title: componentName,
+      as: import_ui10.Typography,
+      variant: "caption",
+      sx: { fontWeight: 500, flexGrow: 1 }
+    }
+  ), /* @__PURE__ */ React10.createElement(
+    ComponentsBadge,
+    {
+      overridablePropsCount,
+      ref: anchorRef,
+      onClick: handleOpenPropertiesPanel
+    }
+  )), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(
     ComponentIntroduction,
     {
       anchorRef,
@@ -2115,7 +2201,7 @@ function getComponentName() {
 
 // src/components/components-tab/components.tsx
 var React19 = __toESM(require("react"));
-var import_editor_ui9 = require("@elementor/editor-ui");
+var import_editor_ui10 = require("@elementor/editor-ui");
 
 // src/hooks/use-components.ts
 var import_store31 = require("@elementor/store");
@@ -2278,7 +2364,7 @@ var React15 = __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_ui7 = require("@elementor/editor-ui");
+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");
@@ -2533,13 +2619,13 @@ var createComponentModel2 = (component) => {
 
 // src/components/components-tab/delete-confirmation-dialog.tsx
 var React14 = __toESM(require("react"));
-var import_editor_ui6 = require("@elementor/editor-ui");
+var import_editor_ui7 = require("@elementor/editor-ui");
 var import_i18n18 = require("@wordpress/i18n");
 function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
-  return /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Title, null, (0, import_i18n18.__)("Delete this component?", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.ContentText, null, (0, import_i18n18.__)(
+  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.__)(
     "Existing instances on your pages will remain functional. You will no longer find this component in your list.",
     "elementor"
-  ))), /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Actions, { onClose, onConfirm }));
+  ))), /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose, onConfirm }));
 }
 
 // src/components/components-tab/components-item.tsx
@@ -2554,7 +2640,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
     openEditMode,
     error,
     getProps: getEditableProps
-  } = (0, import_editor_ui7.useEditable)({
+  } = (0, import_editor_ui8.useEditable)({
     value: component.name,
     onSubmit: renameComponent2,
     validation: validateComponentTitle
@@ -2586,7 +2672,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
     setIsDeleteDialogOpen(false);
   };
   return /* @__PURE__ */ React15.createElement(import_ui13.Stack, null, /* @__PURE__ */ React15.createElement(
-    import_editor_ui7.WarningInfotip,
+    import_editor_ui8.WarningInfotip,
     {
       open: Boolean(error),
       text: error ?? "",
@@ -2625,7 +2711,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
         },
         /* @__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(
-          import_editor_ui7.EditableField,
+          import_editor_ui8.EditableField,
           {
             ref: editableRef,
             as: import_ui13.Typography,
@@ -2633,7 +2719,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
             ...getEditableProps()
           }
         ) : /* @__PURE__ */ React15.createElement(
-          import_editor_ui7.EllipsisWithTooltip,
+          import_editor_ui8.EllipsisWithTooltip,
           {
             title: component.name,
             as: import_ui13.Typography,
@@ -2658,7 +2744,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
       }
     },
     canRename && /* @__PURE__ */ React15.createElement(
-      import_editor_ui7.MenuListItem,
+      import_editor_ui8.MenuListItem,
       {
         sx: { minWidth: "160px" },
         primaryTypographyProps: { variant: "caption", color: "text.primary" },
@@ -2670,7 +2756,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
       (0, import_i18n19.__)("Rename", "elementor")
     ),
     canDelete && /* @__PURE__ */ React15.createElement(
-      import_editor_ui7.MenuListItem,
+      import_editor_ui8.MenuListItem,
       {
         sx: { minWidth: "160px" },
         primaryTypographyProps: { variant: "caption", color: "error.light" },
@@ -2929,11 +3015,11 @@ var useFilteredComponents = () => {
 
 // src/components/components-tab/components-pro-notification.tsx
 var React18 = __toESM(require("react"));
-var import_editor_ui8 = require("@elementor/editor-ui");
+var import_editor_ui9 = require("@elementor/editor-ui");
 var import_ui16 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
 function ComponentsProNotification() {
-  return /* @__PURE__ */ React18.createElement(import_ui16.Box, { sx: { px: 2 } }, /* @__PURE__ */ React18.createElement(import_editor_ui8.InfoAlert, null, /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", component: "span" }, /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", component: "span", fontWeight: "bold" }, (0, import_i18n21.__)("Try Components for free:", "elementor")), " ", (0, import_i18n21.__)(
+  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.__)(
     "Soon Components will be part of the Pro subscription, but what you create now will remain on your site.",
     "elementor"
   ))));
@@ -2946,7 +3032,7 @@ var ComponentsContent = () => {
   return /* @__PURE__ */ React19.createElement(React19.Fragment, null, hasComponents && /* @__PURE__ */ React19.createElement(ComponentSearch, null), hasComponents && !isProUser() && /* @__PURE__ */ React19.createElement(ComponentsProNotification, null), /* @__PURE__ */ React19.createElement(ComponentsList, null));
 };
 var Components = () => {
-  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ThemeProvider, null, /* @__PURE__ */ React19.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React19.createElement(ComponentsContent, null)));
+  return /* @__PURE__ */ React19.createElement(import_editor_ui10.ThemeProvider, null, /* @__PURE__ */ React19.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React19.createElement(ComponentsContent, null)));
 };
 
 // src/components/consts.ts
@@ -2958,7 +3044,7 @@ var React20 = __toESM(require("react"));
 var import_react11 = require("react");
 var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
-var import_editor_ui10 = require("@elementor/editor-ui");
+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");
@@ -3096,10 +3182,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
     })
   );
@@ -3272,7 +3359,7 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React20.createElement(import_editor_ui10.ThemeProvider, null, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React20.createElement(import_editor_ui11.ThemeProvider, null, /* @__PURE__ */ React20.createElement(
     import_ui17.Popover,
     {
       open: element !== null,
@@ -3322,7 +3409,7 @@ var Form2 = ({
     create: (0, import_i18n23.__)("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React20.createElement(import_editor_ui10.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React20.createElement(import_ui17.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
+  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,
     {
       direction: "row",
@@ -3646,12 +3733,12 @@ function getComponentDOMElements(id2) {
 
 // src/components/in-edit-mode.tsx
 var React23 = __toESM(require("react"));
-var import_editor_ui11 = require("@elementor/editor-ui");
+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 openEditModeDialog = (lockedBy) => {
-  (0, import_editor_ui11.openDialog)({
+  (0, import_editor_ui12.openDialog)({
     component: /* @__PURE__ */ React23.createElement(EditModeDialog, { lockedBy })
   });
 };
@@ -3660,7 +3747,7 @@ var EditModeDialog = ({ lockedBy }) => {
   return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui18.DialogHeader, { logo: false }, /* @__PURE__ */ React23.createElement(import_ui18.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(import_ui18.Icon, { color: "secondary" }, /* @__PURE__ */ React23.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React23.createElement(import_ui18.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React23.createElement(import_ui18.DialogContent, null, /* @__PURE__ */ React23.createElement(import_ui18.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React23.createElement(import_ui18.Typography, { variant: "body2" }, (0, import_i18n25.__)(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React23.createElement(import_ui18.DialogActions, null, /* @__PURE__ */ React23.createElement(import_ui18.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui11.closeDialog }, (0, import_i18n25.__)("Close", "elementor"))))));
+  )), /* @__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"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
@@ -3668,8 +3755,8 @@ var React29 = __toESM(require("react"));
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_elements15 = require("@elementor/editor-elements");
-var import_editor_panels3 = require("@elementor/editor-panels");
-var import_editor_ui13 = require("@elementor/editor-ui");
+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");
@@ -3718,7 +3805,7 @@ var EmptyState2 = ({ onEditComponent }) => {
 var React28 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
-var import_editor_ui12 = require("@elementor/editor-ui");
+var import_editor_ui13 = require("@elementor/editor-ui");
 var import_ui22 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-prop-control.tsx
@@ -4074,7 +4161,7 @@ function OverridePropsGroup({ group, props, overrides }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React28.createElement(import_editor_ui12.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+    /* @__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(
     OverridePropControl,
     {
@@ -4102,7 +4189,7 @@ function InstanceEditingPanel() {
   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_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React29.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React29.createElement(import_editor_ui13.EllipsisWithTooltip, { title: component.name, as: import_editor_panels3.PanelHeaderTitle, 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_panels3.PanelBody, null, /* @__PURE__ */ React29.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React29.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React29.createElement(import_ui23.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id }, /* @__PURE__ */ React29.createElement(
+  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(
     OverridePropsGroup,
     {
       group,
@@ -5342,23 +5429,61 @@ 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);
   (0, import_store80.__registerSlice)(slice);
-  (0, import_editor_panels4.__registerPanel)(panel);
+  (0, import_editor_panels5.__registerPanel)(panel);
   (0, import_editor_canvas8.registerElementType)(
     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",
@@ -5382,7 +5507,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);
@@ -5415,6 +5540,7 @@ function init() {
   initNonAtomicNestingPrevention();
   initLoadComponentDataAfterInstanceAdded();
   initHandleComponentEditModeContainer();
+  initRevertOverridablesOnCopyOrDuplicate();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {