@elementor/editor-components 4.0.0-543 → 4.0.0-545

package/dist/index.js

@@ -44,7 +44,7 @@ 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_adapters12 = require("@elementor/editor-v1-adapters");
-var import_store82 = require("@elementor/store");
+var import_store85 = require("@elementor/store");
 var import_i18n31 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
@@ -127,7 +127,8 @@ var initialState = {
   archivedThisSession: [],
   path: [],
   currentComponentId: null,
-  updatedComponentNames: {}
+  updatedComponentNames: {},
+  sanitized: {}
 };
 var SLICE_NAME = "components";
 var slice = (0, import_store2.__createSlice)({
@@ -201,6 +202,17 @@ var slice = (0, import_store2.__createSlice)({
     },
     cleanUpdatedComponentNames: (state) => {
       state.updatedComponentNames = {};
+    },
+    updateComponentSanitizedAttribute: (state, {
+      payload: { componentId, attribute }
+    }) => {
+      if (!state.sanitized[componentId]) {
+        state.sanitized[componentId] = {};
+      }
+      state.sanitized[componentId][attribute] = true;
+    },
+    resetSanitizedComponents: (state) => {
+      state.sanitized = {};
     }
   },
   extraReducers: (builder) => {
@@ -303,6 +315,16 @@ var selectUpdatedComponentNames = (0, import_store2.__createSelector)(
     title
   }))
 );
+var useSanitizedComponents = () => {
+  return (0, import_store2.__useSelector)((state) => state[SLICE_NAME].sanitized);
+};
+var useIsSanitizedComponent = (componentId, key) => {
+  const sanitizedComponents = useSanitizedComponents();
+  if (!componentId) {
+    return false;
+  }
+  return !!sanitizedComponents[componentId]?.[key];
+};
 
 // src/utils/component-document-data.ts
 var import_editor_documents = require("@elementor/editor-documents");
@@ -389,7 +411,7 @@ var import_editor_documents7 = 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_store32 = require("@elementor/store");
 var import_ui10 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 
@@ -468,11 +490,26 @@ function useNavigateBack() {
   }, [path, documentsManager]);
 }
 
+// src/store/actions/delete-overridable-prop.ts
+var import_store11 = require("@elementor/store");
+
+// src/utils/revert-overridable-settings.ts
+var import_editor_elements2 = require("@elementor/editor-elements");
+
+// src/create-component-type.ts
+var import_editor_canvas4 = require("@elementor/editor-canvas");
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_store9 = require("@elementor/store");
+var import_i18n = require("@wordpress/i18n");
+
 // src/utils/tracking.ts
 var import_events = require("@elementor/events");
 var import_store7 = require("@elementor/store");
 var FEATURE_NAME = "Components";
 var trackComponentEvent = ({ action, source, ...data }) => {
+  if (source === "system") {
+    return;
+  }
   const { dispatchEvent, config } = (0, import_events.getMixpanel)();
   if (!config?.names?.components?.[action]) {
     return;
@@ -504,289 +541,47 @@ var onElementDrop = (_args, element) => {
   });
 };
 
-// src/components/component-properties-panel/component-properties-panel.tsx
-var React8 = __toESM(require("react"));
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_ui8 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
-
-// src/components/component-properties-panel/component-properties-panel-content.tsx
-var React7 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_editor_documents6 = require("@elementor/editor-documents");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_icons5 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
-var import_utils2 = require("@elementor/utils");
-var import_i18n10 = require("@wordpress/i18n");
-
-// src/store/actions/add-overridable-group.ts
-var import_store9 = require("@elementor/store");
-function addOverridableGroup({
-  componentId,
-  groupId,
-  label,
-  source
-}) {
-  const currentComponent = selectCurrentComponent((0, import_store9.__getState)());
-  const overridableProps = selectOverridableProps((0, import_store9.__getState)(), componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const newGroup = {
-    id: groupId,
-    label,
-    props: []
-  };
-  (0, import_store9.__dispatch)(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        groups: {
-          ...overridableProps.groups,
-          items: {
-            ...overridableProps.groups.items,
-            [groupId]: newGroup
-          },
-          order: [groupId, ...overridableProps.groups.order]
-        }
-      }
-    })
-  );
-  trackComponentEvent({
-    action: "propertiesGroupCreated",
-    source,
-    component_uid: currentComponent?.uid,
-    group_name: label
+// src/create-component-type.ts
+var COMPONENT_WIDGET_TYPE = "e-component";
+var updateGroups = (groups, config) => {
+  const disableMap = new Map(Object.entries(config.disable ?? {}));
+  const addMap = new Map(Object.entries(config.add ?? {}));
+  return groups.map((group) => {
+    const disabledActions = disableMap.get(group.name) ?? [];
+    const addConfig = addMap.get(group.name);
+    const updatedActions = group.actions.map(
+      (action) => disabledActions.includes(action.name) ? { ...action, isEnabled: () => false } : action
+    );
+    if (addConfig) {
+      updatedActions.splice(addConfig.index, 0, addConfig.action);
+    }
+    return { ...group, actions: updatedActions };
   });
-  return newGroup;
-}
-
-// src/store/actions/delete-overridable-group.ts
-var import_store11 = require("@elementor/store");
-
-// src/store/utils/groups-transformers.ts
-var import_utils = require("@elementor/utils");
-var import_i18n = require("@wordpress/i18n");
-function removePropFromAllGroups(groups, propKey) {
-  return {
-    ...groups,
-    items: Object.fromEntries(
-      Object.entries(groups.items).map(([groupId, group]) => [
-        groupId,
-        {
-          ...group,
-          props: group.props.filter((p) => p !== propKey)
-        }
-      ])
-    )
-  };
-}
-function addPropToGroup(groups, groupId, propKey) {
-  const group = groups.items[groupId];
-  if (!group) {
-    return groups;
-  }
-  if (group.props.includes(propKey)) {
-    return groups;
-  }
-  return {
-    ...groups,
-    items: {
-      ...groups.items,
-      [groupId]: {
-        ...group,
-        props: [...group.props, propKey]
-      }
+};
+function createComponentType(options) {
+  const legacyWindow = window;
+  const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
+  const view = createComponentView({ ...options });
+  return class extends WidgetType {
+    getType() {
+      return options.type;
     }
-  };
-}
-function movePropBetweenGroups(groups, propKey, fromGroupId, toGroupId) {
-  if (fromGroupId === toGroupId) {
-    return groups;
-  }
-  const withoutProp = removePropFromGroup(groups, fromGroupId, propKey);
-  return addPropToGroup(withoutProp, toGroupId, propKey);
-}
-function removePropFromGroup(groups, groupId, propKey) {
-  const group = groups.items[groupId];
-  if (!group) {
-    return groups;
-  }
-  return {
-    ...groups,
-    items: {
-      ...groups.items,
-      [groupId]: {
-        ...group,
-        props: group.props.filter((p) => p !== propKey)
-      }
+    getView() {
+      return view;
     }
-  };
-}
-function resolveOrCreateGroup(groups, requestedGroupId) {
-  if (requestedGroupId && groups.items[requestedGroupId]) {
-    return { groups, groupId: requestedGroupId };
-  }
-  if (!requestedGroupId && groups.order.length > 0) {
-    return { groups, groupId: groups.order[0] };
-  }
-  return createGroup(groups, requestedGroupId);
-}
-function createGroup(groups, groupId, label) {
-  const newGroupId = groupId || (0, import_utils.generateUniqueId)("group");
-  const newLabel = label || (0, import_i18n.__)("Default", "elementor");
-  return {
-    groups: {
-      ...groups,
-      items: {
-        ...groups.items,
-        [newGroupId]: {
-          id: newGroupId,
-          label: newLabel,
-          props: []
-        }
-      },
-      order: [...groups.order, newGroupId]
-    },
-    groupId: newGroupId
-  };
-}
-function removePropsFromState(overridableProps, propsToRemove) {
-  const overrideKeysToRemove = propsToRemove.map((prop) => prop.overrideKey);
-  const remainingProps = Object.fromEntries(
-    Object.entries(overridableProps.props).filter(([, prop]) => !propsToRemove.includes(prop))
-  );
-  const updatedGroupItems = Object.fromEntries(
-    Object.entries(overridableProps.groups.items).map(
-      ([groupId, group]) => [
-        groupId,
-        {
-          ...group,
-          props: group.props.filter((prop) => !overrideKeysToRemove.includes(prop))
-        }
-      ]
-    )
-  );
-  return {
-    props: remainingProps,
-    groups: {
-      items: updatedGroupItems,
-      order: overridableProps.groups.order.filter((groupId) => !overrideKeysToRemove.includes(groupId))
+    getModel() {
+      return createComponentModel();
     }
   };
 }
-function ensureGroupInOrder(groups, groupId) {
-  if (groups.order.includes(groupId)) {
-    return groups;
-  }
-  return {
-    ...groups,
-    order: [...groups.order, groupId]
-  };
-}
-function deleteGroup(groups, groupId) {
-  const { [groupId]: removed, ...remainingItems } = groups.items;
-  return {
-    items: remainingItems,
-    order: groups.order.filter((id2) => id2 !== groupId)
-  };
-}
-function renameGroup(groups, groupId, newLabel) {
-  const group = groups.items[groupId];
-  if (!group) {
-    return groups;
-  }
-  return {
-    ...groups,
-    items: {
-      ...groups.items,
-      [groupId]: {
-        ...group,
-        label: newLabel
-      }
-    }
-  };
-}
-
-// src/store/actions/delete-overridable-group.ts
-function deleteOverridableGroup({ componentId, groupId }) {
-  const overridableProps = selectOverridableProps((0, import_store11.__getState)(), componentId);
-  if (!overridableProps) {
-    return false;
-  }
-  const group = overridableProps.groups.items[groupId];
-  if (!group || group.props.length > 0) {
-    return false;
-  }
-  const updatedGroups = deleteGroup(overridableProps.groups, groupId);
-  (0, import_store11.__dispatch)(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        groups: updatedGroups
-      }
-    })
-  );
-  return true;
-}
-
-// src/store/actions/delete-overridable-prop.ts
-var import_store15 = require("@elementor/store");
-
-// src/utils/revert-overridable-settings.ts
-var import_editor_elements2 = require("@elementor/editor-elements");
-
-// src/create-component-type.ts
-var import_editor_canvas4 = require("@elementor/editor-canvas");
-var import_editor_documents4 = require("@elementor/editor-documents");
-var import_store13 = require("@elementor/store");
-var import_i18n2 = require("@wordpress/i18n");
-var COMPONENT_WIDGET_TYPE = "e-component";
-var updateGroups = (groups, config) => {
-  const disableMap = new Map(Object.entries(config.disable ?? {}));
-  const addMap = new Map(Object.entries(config.add ?? {}));
-  return groups.map((group) => {
-    const disabledActions = disableMap.get(group.name) ?? [];
-    const addConfig = addMap.get(group.name);
-    const updatedActions = group.actions.map(
-      (action) => disabledActions.includes(action.name) ? { ...action, isEnabled: () => false } : action
-    );
-    if (addConfig) {
-      updatedActions.splice(addConfig.index, 0, addConfig.action);
-    }
-    return { ...group, actions: updatedActions };
-  });
-};
-function createComponentType(options) {
-  const legacyWindow = window;
-  const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
-  const view = createComponentView({ ...options });
-  return class extends WidgetType {
-    getType() {
-      return options.type;
-    }
-    getView() {
-      return view;
-    }
-    getModel() {
-      return createComponentModel();
-    }
-  };
-}
-function createComponentView(options) {
-  const legacyWindow = window;
-  return class extends (0, import_editor_canvas4.createTemplatedElementView)(options) {
-    eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
-    #componentRenderContext;
-    isComponentCurrentlyEdited() {
-      const currentDocument = (0, import_editor_documents4.getCurrentDocument)();
-      return currentDocument?.id === this.getComponentId();
+function createComponentView(options) {
+  const legacyWindow = window;
+  return class extends (0, import_editor_canvas4.createTemplatedElementView)(options) {
+    eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
+    #componentRenderContext;
+    isComponentCurrentlyEdited() {
+      const currentDocument = (0, import_editor_documents4.getCurrentDocument)();
+      return currentDocument?.id === this.getComponentId();
     }
     getRenderContext() {
       const namespaceKey = this.getNamespaceKey();
@@ -859,7 +654,7 @@ function createComponentView(options) {
           action: {
             name: "edit component",
             icon: "eicon-edit",
-            title: () => (0, import_i18n2.__)("Edit Component", "elementor"),
+            title: () => (0, import_i18n.__)("Edit Component", "elementor"),
             isEnabled: () => true,
             callback: (_, eventData) => this.editComponent(eventData)
           }
@@ -964,7 +759,7 @@ function createComponentModel() {
       }
       const componentUid = editorSettings?.component_uid;
       if (componentUid) {
-        const component = selectComponentByUid((0, import_store13.__getState)(), componentUid);
+        const component = selectComponentByUid((0, import_store9.__getState)(), componentUid);
         if (component?.name) {
           return component.name;
         }
@@ -1131,85 +926,444 @@ function revertComponentInstanceSettings(settings) {
     })
   };
 }
-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 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/utils/groups-transformers.ts
+var import_utils = require("@elementor/utils");
+var import_i18n2 = require("@wordpress/i18n");
+function removePropFromAllGroups(groups, propKey) {
+  return {
+    ...groups,
+    items: Object.fromEntries(
+      Object.entries(groups.items).map(([groupId, group]) => [
+        groupId,
+        {
+          ...group,
+          props: group.props.filter((p) => p !== propKey)
+        }
+      ])
+    )
+  };
+}
+function addPropToGroup(groups, groupId, propKey) {
+  const group = groups.items[groupId];
+  if (!group) {
+    return groups;
+  }
+  if (group.props.includes(propKey)) {
+    return groups;
+  }
+  return {
+    ...groups,
+    items: {
+      ...groups.items,
+      [groupId]: {
+        ...group,
+        props: [...group.props, propKey]
+      }
+    }
+  };
+}
+function movePropBetweenGroups(groups, propKey, fromGroupId, toGroupId) {
+  if (fromGroupId === toGroupId) {
+    return groups;
+  }
+  const withoutProp = removePropFromGroup(groups, fromGroupId, propKey);
+  return addPropToGroup(withoutProp, toGroupId, propKey);
+}
+function removePropFromGroup(groups, groupId, propKey) {
+  const group = groups.items[groupId];
+  if (!group) {
+    return groups;
+  }
+  return {
+    ...groups,
+    items: {
+      ...groups.items,
+      [groupId]: {
+        ...group,
+        props: group.props.filter((p) => p !== propKey)
+      }
+    }
+  };
+}
+function resolveOrCreateGroup(groups, requestedGroupId) {
+  if (requestedGroupId && groups.items[requestedGroupId]) {
+    return { groups, groupId: requestedGroupId };
+  }
+  if (!requestedGroupId && groups.order.length > 0) {
+    return { groups, groupId: groups.order[0] };
+  }
+  return createGroup(groups, requestedGroupId);
+}
+function createGroup(groups, groupId, label) {
+  const newGroupId = groupId || (0, import_utils.generateUniqueId)("group");
+  const newLabel = label || (0, import_i18n2.__)("Default", "elementor");
+  return {
+    groups: {
+      ...groups,
+      items: {
+        ...groups.items,
+        [newGroupId]: {
+          id: newGroupId,
+          label: newLabel,
+          props: []
+        }
+      },
+      order: [...groups.order, newGroupId]
+    },
+    groupId: newGroupId
+  };
+}
+function removePropsFromState(overridableProps, propsToRemove) {
+  const overrideKeysToRemove = propsToRemove.map((prop) => prop.overrideKey);
+  const remainingProps = Object.fromEntries(
+    Object.entries(overridableProps.props).filter(([, prop]) => !propsToRemove.includes(prop))
+  );
+  const updatedGroupItems = Object.fromEntries(
+    Object.entries(overridableProps.groups.items).map(
+      ([groupId, group]) => [
+        groupId,
+        {
+          ...group,
+          props: group.props.filter((prop) => !overrideKeysToRemove.includes(prop))
+        }
+      ]
+    )
+  );
+  return {
+    props: remainingProps,
+    groups: {
+      items: updatedGroupItems,
+      order: overridableProps.groups.order.filter((groupId) => !overrideKeysToRemove.includes(groupId))
+    }
+  };
+}
+function ensureGroupInOrder(groups, groupId) {
+  if (groups.order.includes(groupId)) {
+    return groups;
+  }
+  return {
+    ...groups,
+    order: [...groups.order, groupId]
+  };
+}
+function deleteGroup(groups, groupId) {
+  const { [groupId]: removed, ...remainingItems } = groups.items;
+  return {
+    items: remainingItems,
+    order: groups.order.filter((id2) => id2 !== groupId)
+  };
+}
+function renameGroup(groups, groupId, newLabel) {
+  const group = groups.items[groupId];
+  if (!group) {
+    return groups;
+  }
+  return {
+    ...groups,
+    items: {
+      ...groups.items,
+      [groupId]: {
+        ...group,
+        label: newLabel
+      }
+    }
+  };
+}
+
+// src/store/actions/delete-overridable-prop.ts
+function deleteOverridableProp({ componentId, propKey, source }) {
+  const overridableProps = selectOverridableProps((0, import_store11.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const prop = overridableProps.props[propKey];
+  if (!prop) {
+    return;
+  }
+  revertElementOverridableSetting(prop.elementId, prop.propKey, prop.originValue, propKey);
+  const { [propKey]: removedProp, ...remainingProps } = overridableProps.props;
+  const updatedGroups = removePropFromAllGroups(overridableProps.groups, propKey);
+  (0, import_store11.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        props: remainingProps,
+        groups: updatedGroups
+      }
+    })
+  );
+  const currentComponent = selectCurrentComponent((0, import_store11.__getState)());
+  trackComponentEvent({
+    action: "propertyRemoved",
+    source,
+    component_uid: currentComponent?.uid,
+    property_id: removedProp.overrideKey,
+    property_path: removedProp.propKey,
+    property_name: removedProp.label,
+    element_type: removedProp.widgetType ?? removedProp.elType
+  });
+}
+
+// src/store/actions/update-component-sanitized-attribute.ts
+var import_store13 = require("@elementor/store");
+function updateComponentSanitizedAttribute(componentId, attribute) {
+  (0, import_store13.__dispatch)(slice.actions.updateComponentSanitizedAttribute({ componentId, attribute }));
+}
+
+// src/utils/filter-valid-overridable-props.ts
+var import_editor_elements3 = require("@elementor/editor-elements");
+
+// src/components/overridable-props/utils/get-overridable-prop.ts
+var import_store15 = require("@elementor/store");
+function getOverridableProp({
+  componentId,
+  overrideKey
+}) {
+  const overridableProps = selectOverridableProps((0, import_store15.__getState)(), componentId);
+  if (!overridableProps) {
+    return void 0;
+  }
+  return overridableProps.props[overrideKey];
+}
+
+// src/utils/overridable-props-utils.ts
+function getMatchingOverride(overrides, overrideKey) {
+  return overrides?.find((override) => {
+    const overridableValue = componentOverridablePropTypeUtil.extract(override);
+    if (overridableValue) {
+      const overrideValue = componentInstanceOverridePropTypeUtil.extract(overridableValue.origin_value);
+      return overrideValue?.override_key === overrideKey;
+    }
+    return override.value.override_key === overrideKey;
+  }) ?? null;
+}
+function extractInnerOverrideInfo(override) {
+  if (!override) {
+    return null;
+  }
+  const overridableValue = componentOverridablePropTypeUtil.extract(override);
+  const innerOverride = overridableValue ? componentInstanceOverridePropTypeUtil.extract(overridableValue.origin_value) : componentInstanceOverridePropTypeUtil.extract(override);
+  if (!innerOverride) {
+    return null;
+  }
+  const {
+    schema_source: schemaSource,
+    override_key: innerOverrideKey,
+    override_value: overrideValue
+  } = innerOverride;
+  const componentId = schemaSource?.id;
+  if (!componentId || !innerOverrideKey) {
+    return null;
+  }
+  return { componentId, innerOverrideKey, overrideValue };
+}
+
+// src/utils/filter-valid-overridable-props.ts
+function filterValidOverridableProps(overridableProps) {
+  const validProps = {};
+  for (const [key, prop] of Object.entries(overridableProps.props)) {
+    if (isExposedPropValid(prop)) {
+      validProps[key] = prop;
+    }
+  }
+  const validPropKeys = new Set(Object.keys(validProps));
+  const filteredGroups = {
+    items: Object.fromEntries(
+      Object.entries(overridableProps.groups.items).map(([groupId, group]) => [
+        groupId,
+        { ...group, props: group.props.filter((propKey) => validPropKeys.has(propKey)) }
+      ])
+    ),
+    order: overridableProps.groups.order
+  };
+  return { props: validProps, groups: filteredGroups };
+}
+function isExposedPropValid(prop) {
+  if (!prop.originPropFields) {
+    return true;
+  }
+  const setting = (0, import_editor_elements3.getElementSetting)(prop.elementId, "component_instance");
+  const componentInstance = componentInstancePropTypeUtil.extract(setting);
+  if (!componentInstance?.component_id?.value) {
+    return false;
+  }
+  const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance.overrides) ?? void 0;
+  const matchingOverride = findOverrideByOuterKey(overrides, prop.overrideKey);
+  const innerOverrideInfo = extractInnerOverrideInfo(matchingOverride);
+  if (!innerOverrideInfo) {
+    return false;
+  }
+  const { componentId, innerOverrideKey } = innerOverrideInfo;
+  const innerOverridableProp = getOverridableProp({ componentId, overrideKey: innerOverrideKey });
+  if (!innerOverridableProp) {
+    return false;
+  }
+  return isExposedPropValid(innerOverridableProp);
+}
+function findOverrideByOuterKey(overrides, outerKey) {
+  if (!overrides) {
+    return null;
+  }
+  return overrides.find((override) => {
+    const overridableValue = componentOverridablePropTypeUtil.extract(override);
+    if (overridableValue) {
+      return overridableValue.override_key === outerKey;
     }
-  });
+    return override.value.override_key === outerKey;
+  }) ?? null;
 }
-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;
+
+// src/hooks/use-sanitize-overridable-props.ts
+function useSanitizeOverridableProps(componentId) {
+  const overridableProps = useOverridableProps(componentId);
+  const isSanitized = useIsSanitizedComponent(componentId, "overridableProps");
+  if (!overridableProps || !componentId) {
+    return void 0;
   }
-  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;
+  if (isSanitized) {
+    return overridableProps;
   }
-  (0, import_editor_elements2.updateElementSettings)({
-    id: element.id,
-    props: revertedSettings,
-    withHistory: false
+  const filteredOverridableProps = filterValidOverridableProps(overridableProps);
+  const originalPropsArray = Object.entries(overridableProps.props ?? {});
+  const propsToDelete = originalPropsArray.filter(([key]) => !filteredOverridableProps.props[key]);
+  propsToDelete.forEach(([key]) => {
+    deleteOverridableProp({ componentId, propKey: key, source: "system" });
   });
+  updateComponentSanitizedAttribute(componentId, "overridableProps");
+  return filteredOverridableProps;
 }
 
-// src/store/actions/delete-overridable-prop.ts
-function deleteOverridableProp({ componentId, propKey, source }) {
-  const overridableProps = selectOverridableProps((0, import_store15.__getState)(), componentId);
+// src/components/component-properties-panel/component-properties-panel.tsx
+var React8 = __toESM(require("react"));
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_panels2 = require("@elementor/editor-panels");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_ui8 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
+
+// src/components/component-properties-panel/component-properties-panel-content.tsx
+var React7 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_editor_documents6 = require("@elementor/editor-documents");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_icons5 = require("@elementor/icons");
+var import_ui7 = require("@elementor/ui");
+var import_utils2 = require("@elementor/utils");
+var import_i18n10 = require("@wordpress/i18n");
+
+// src/store/actions/add-overridable-group.ts
+var import_store18 = require("@elementor/store");
+function addOverridableGroup({
+  componentId,
+  groupId,
+  label,
+  source
+}) {
+  const currentComponent = selectCurrentComponent((0, import_store18.__getState)());
+  const overridableProps = selectOverridableProps((0, import_store18.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
-  const prop = overridableProps.props[propKey];
-  if (!prop) {
-    return;
-  }
-  revertElementOverridableSetting(prop.elementId, prop.propKey, prop.originValue, propKey);
-  const { [propKey]: removedProp, ...remainingProps } = overridableProps.props;
-  const updatedGroups = removePropFromAllGroups(overridableProps.groups, propKey);
-  (0, import_store15.__dispatch)(
+  const newGroup = {
+    id: groupId,
+    label,
+    props: []
+  };
+  (0, import_store18.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
         ...overridableProps,
-        props: remainingProps,
-        groups: updatedGroups
+        groups: {
+          ...overridableProps.groups,
+          items: {
+            ...overridableProps.groups.items,
+            [groupId]: newGroup
+          },
+          order: [groupId, ...overridableProps.groups.order]
+        }
       }
     })
   );
-  const currentComponent = selectCurrentComponent((0, import_store15.__getState)());
   trackComponentEvent({
-    action: "propertyRemoved",
+    action: "propertiesGroupCreated",
     source,
     component_uid: currentComponent?.uid,
-    property_id: removedProp.overrideKey,
-    property_path: removedProp.propKey,
-    property_name: removedProp.label,
-    element_type: removedProp.widgetType ?? removedProp.elType
+    group_name: label
   });
+  return newGroup;
+}
+
+// src/store/actions/delete-overridable-group.ts
+var import_store20 = require("@elementor/store");
+function deleteOverridableGroup({ componentId, groupId }) {
+  const overridableProps = selectOverridableProps((0, import_store20.__getState)(), componentId);
+  if (!overridableProps) {
+    return false;
+  }
+  const group = overridableProps.groups.items[groupId];
+  if (!group || group.props.length > 0) {
+    return false;
+  }
+  const updatedGroups = deleteGroup(overridableProps.groups, groupId);
+  (0, import_store20.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: updatedGroups
+      }
+    })
+  );
+  return true;
 }
 
 // src/store/actions/reorder-group-props.ts
-var import_store17 = require("@elementor/store");
+var import_store22 = require("@elementor/store");
 function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
-  const overridableProps = selectOverridableProps((0, import_store17.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store22.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1217,7 +1371,7 @@ function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
   if (!group) {
     return;
   }
-  (0, import_store17.__dispatch)(
+  (0, import_store22.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -1238,13 +1392,13 @@ function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
 }
 
 // src/store/actions/reorder-overridable-groups.ts
-var import_store19 = require("@elementor/store");
+var import_store24 = require("@elementor/store");
 function reorderOverridableGroups({ componentId, newOrder }) {
-  const overridableProps = selectOverridableProps((0, import_store19.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store24.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
-  (0, import_store19.__dispatch)(
+  (0, import_store24.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -1259,14 +1413,14 @@ function reorderOverridableGroups({ componentId, newOrder }) {
 }
 
 // src/store/actions/update-overridable-prop-params.ts
-var import_store21 = require("@elementor/store");
+var import_store26 = require("@elementor/store");
 function updateOverridablePropParams({
   componentId,
   overrideKey,
   label,
   groupId
 }) {
-  const overridableProps = selectOverridableProps((0, import_store21.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store26.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1282,7 +1436,7 @@ function updateOverridablePropParams({
     groupId: newGroupId
   };
   const updatedGroups = movePropBetweenGroups(overridableProps.groups, overrideKey, oldGroupId, newGroupId);
-  (0, import_store21.__dispatch)(
+  (0, import_store26.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -1298,17 +1452,6 @@ function updateOverridablePropParams({
   return updatedProp;
 }
 
-// src/components/component-panel-header/use-overridable-props.ts
-var import_store23 = require("@elementor/store");
-function useOverridableProps2(componentId) {
-  return (0, import_store23.__useSelector)((state) => {
-    if (!componentId) {
-      return void 0;
-    }
-    return selectOverridableProps(state, componentId);
-  });
-}
-
 // src/components/component-properties-panel/properties-empty-state.tsx
 var React2 = __toESM(require("react"));
 var import_react2 = require("react");
@@ -1418,7 +1561,7 @@ var import_i18n7 = require("@wordpress/i18n");
 
 // src/components/component-properties-panel/property-item.tsx
 var React5 = __toESM(require("react"));
-var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_elements4 = require("@elementor/editor-elements");
 var import_icons3 = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
 
@@ -1691,7 +1834,7 @@ function PropertyItem({
 }
 function getElementIcon(prop) {
   const elType = prop.elType === "widget" ? prop.widgetType : prop.elType;
-  const widgetsCache = (0, import_editor_elements3.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements4.getWidgetsCache)();
   if (!widgetsCache) {
     return "eicon-apps";
   }
@@ -1850,9 +1993,9 @@ var import_editor_ui4 = require("@elementor/editor-ui");
 var import_i18n9 = require("@wordpress/i18n");
 
 // src/store/actions/rename-overridable-group.ts
-var import_store25 = require("@elementor/store");
+var import_store28 = require("@elementor/store");
 function renameOverridableGroup({ componentId, groupId, label }) {
-  const overridableProps = selectOverridableProps((0, import_store25.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store28.__getState)(), componentId);
   if (!overridableProps) {
     return false;
   }
@@ -1861,7 +2004,7 @@ function renameOverridableGroup({ componentId, groupId, label }) {
     return false;
   }
   const updatedGroups = renameGroup(overridableProps.groups, groupId, label);
-  (0, import_store25.__dispatch)(
+  (0, import_store28.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -1895,7 +2038,7 @@ function validateGroupLabel(label, existingGroups) {
 function useCurrentEditableItem() {
   const [editingGroupId, setEditingGroupId] = (0, import_react4.useState)(null);
   const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps2(currentComponentId);
+  const overridableProps = useOverridableProps(currentComponentId);
   const allGroupsRecord = overridableProps?.groups?.items ?? {};
   const currentGroup = editingGroupId ? allGroupsRecord[editingGroupId] : null;
   const validateLabel = (newLabel) => {
@@ -1958,7 +2101,7 @@ function generateUniqueLabel(groups) {
 // src/components/component-properties-panel/component-properties-panel-content.tsx
 function ComponentPropertiesPanelContent({ onClose }) {
   const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps2(currentComponentId);
+  const overridableProps = useSanitizeOverridableProps(currentComponentId);
   const [isAddingGroup, setIsAddingGroup] = (0, import_react5.useState)(false);
   const introductionRef = (0, import_react5.useRef)(null);
   const groupLabelEditable = useCurrentEditableItem();
@@ -2062,7 +2205,7 @@ var { panel, usePanelActions } = (0, import_editor_panels2.__createPanel)({
   component: ComponentPropertiesPanel
 });
 function ComponentPropertiesPanel() {
-  const { element, elementType } = (0, import_editor_elements4.useSelectedElement)();
+  const { element, elementType } = (0, import_editor_elements5.useSelectedElement)();
   const { close: closePanel } = usePanelActions();
   const { open: openEditingPanel } = (0, import_editor_editing_panel.usePanelActions)();
   if (!element || !elementType) {
@@ -2145,7 +2288,7 @@ var slideUp = import_ui9.keyframes`
 var MESSAGE_KEY = "components-properties-introduction";
 var ComponentPanelHeader = () => {
   const { id: currentComponentId, uid: componentUid } = useCurrentComponent() ?? { id: null, uid: null };
-  const overridableProps = useOverridableProps2(currentComponentId);
+  const overridableProps = useSanitizeOverridableProps(currentComponentId);
   const onBack = useNavigateBack();
   const componentName = getComponentName();
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
@@ -2194,7 +2337,7 @@ var ComponentPanelHeader = () => {
   ));
 };
 function getComponentName() {
-  const state = (0, import_store29.__getState)();
+  const state = (0, import_store32.__getState)();
   const path = state[SLICE_NAME].path;
   const { instanceTitle } = path.at(-1) ?? {};
   if (instanceTitle) {
@@ -2210,10 +2353,10 @@ var React18 = __toESM(require("react"));
 var import_editor_ui10 = require("@elementor/editor-ui");
 
 // src/hooks/use-components.ts
-var import_store31 = require("@elementor/store");
+var import_store34 = require("@elementor/store");
 var useComponents = () => {
-  const components = (0, import_store31.__useSelector)(selectComponents);
-  const isLoading = (0, import_store31.__useSelector)(selectLoadIsPending);
+  const components = (0, import_store34.__useSelector)(selectComponents);
+  const isLoading = (0, import_store34.__useSelector)(selectLoadIsPending);
   return { components, isLoading };
 };
 
@@ -2296,11 +2439,11 @@ var useComponentsPermissions = () => {
 
 // src/store/actions/rename-component.ts
 var import_editor_documents8 = require("@elementor/editor-documents");
-var import_editor_elements5 = require("@elementor/editor-elements");
-var import_store33 = require("@elementor/store");
+var import_editor_elements6 = require("@elementor/editor-elements");
+var import_store36 = require("@elementor/store");
 var TITLE_EXTERNAL_CHANGE_COMMAND = "title_external_change";
 var renameComponent = (componentUid, newName) => {
-  (0, import_store33.__dispatch)(slice.actions.rename({ componentUid, name: newName }));
+  (0, import_store36.__dispatch)(slice.actions.rename({ componentUid, name: newName }));
   (0, import_editor_documents8.setDocumentModifiedStatus)(true);
   refreshComponentInstanceTitles(componentUid);
 };
@@ -2319,7 +2462,7 @@ function getDocumentContainer() {
   return documentsManager?.getCurrent()?.container;
 }
 function findComponentInstancesByUid(documentContainer, componentUid) {
-  const allDescendants = (0, import_editor_elements5.getAllDescendants)(documentContainer);
+  const allDescendants = (0, import_editor_elements6.getAllDescendants)(documentContainer);
   return allDescendants.filter((element) => {
     const widgetType = element.model.get("widgetType");
     const editorSettings = element.model.get("editor_settings");
@@ -2332,7 +2475,7 @@ function findComponentInstancesByUid(documentContainer, componentUid) {
 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_elements9 = require("@elementor/editor-elements");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
@@ -2341,7 +2484,7 @@ var import_i18n18 = require("@wordpress/i18n");
 // src/store/actions/archive-component.ts
 var import_editor_documents9 = require("@elementor/editor-documents");
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_store35 = require("@elementor/store");
+var import_store38 = require("@elementor/store");
 var import_i18n15 = require("@wordpress/i18n");
 var successNotification = (componentId, componentName) => ({
   type: "success",
@@ -2350,7 +2493,7 @@ var successNotification = (componentId, componentName) => ({
   id: `success-archived-components-notification-${componentId}`
 });
 var archiveComponent = (componentId, componentName) => {
-  (0, import_store35.__dispatch)(slice.actions.archive(componentId));
+  (0, import_store38.__dispatch)(slice.actions.archive(componentId));
   (0, import_editor_documents9.setDocumentModifiedStatus)(true);
   (0, import_editor_notifications.notify)(successNotification(componentId, componentName));
 };
@@ -2402,7 +2545,7 @@ async function getDocumentsMap(ids, cache) {
 }
 
 // src/store/actions/load-components-overridable-props.ts
-var import_store37 = require("@elementor/store");
+var import_store40 = require("@elementor/store");
 function loadComponentsOverridableProps(componentIds) {
   if (!componentIds.length) {
     return;
@@ -2410,7 +2553,7 @@ function loadComponentsOverridableProps(componentIds) {
   return Promise.all(componentIds.map(loadComponentOverrides));
 }
 async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store37.__getState)(), componentId);
+  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store40.__getState)(), componentId);
   if (isOverridablePropsLoaded) {
     return;
   }
@@ -2418,7 +2561,7 @@ async function loadComponentOverrides(componentId) {
   if (!overridableProps) {
     return;
   }
-  (0, import_store37.__dispatch)(
+  (0, import_store40.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps
@@ -2427,12 +2570,12 @@ async function loadComponentOverrides(componentId) {
 }
 
 // src/store/actions/load-components-styles.ts
-var import_store39 = require("@elementor/store");
+var import_store42 = require("@elementor/store");
 function loadComponentsStyles(documents) {
   if (!documents.size) {
     return;
   }
-  const knownComponents = selectStyles((0, import_store39.__getState)());
+  const knownComponents = selectStyles((0, import_store42.__getState)());
   const unknownDocuments = new Map([...documents.entries()].filter(([id2]) => !knownComponents[id2]));
   if (!unknownDocuments.size) {
     return;
@@ -2443,7 +2586,7 @@ function addStyles(documents) {
   const styles = Object.fromEntries(
     [...documents.entries()].map(([id2, document]) => [id2, extractStylesFromDocument(document)])
   );
-  (0, import_store39.__dispatch)(slice.actions.addStyles(styles));
+  (0, import_store42.__dispatch)(slice.actions.addStyles(styles));
 }
 function extractStylesFromDocument(document) {
   if (!document.elements?.length) {
@@ -2473,7 +2616,7 @@ function updateDocumentState(documents) {
 }
 
 // src/utils/component-name-validation.ts
-var import_store41 = require("@elementor/store");
+var import_store44 = require("@elementor/store");
 
 // src/components/create-component-form/utils/component-form-schema.ts
 var import_schema5 = require("@elementor/schema");
@@ -2501,7 +2644,7 @@ var createSubmitComponentSchema = (existingNames) => {
 
 // src/utils/component-name-validation.ts
 function validateComponentName(label) {
-  const existingComponentTitles = selectComponents((0, import_store41.__getState)())?.map(({ name }) => name) ?? [];
+  const existingComponentTitles = selectComponents((0, import_store44.__getState)())?.map(({ name }) => name) ?? [];
   const schema = createSubmitComponentSchema(existingComponentTitles);
   const result = schema.safeParse({ componentName: label.toLowerCase() });
   if (result.success) {
@@ -2519,9 +2662,9 @@ function validateComponentName(label) {
 }
 
 // src/utils/get-container-for-new-element.ts
-var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_elements7 = require("@elementor/editor-elements");
 var getContainerForNewElement = () => {
-  const currentDocumentContainer = (0, import_editor_elements6.getCurrentDocumentContainer)();
+  const currentDocumentContainer = (0, import_editor_elements7.getCurrentDocumentContainer)();
   const selectedElement = getSelectedElementContainer();
   let container, options;
   if (selectedElement) {
@@ -2547,17 +2690,17 @@ var getContainerForNewElement = () => {
   return { container: container ?? currentDocumentContainer, options };
 };
 function getSelectedElementContainer() {
-  const selectedElements = (0, import_editor_elements6.getSelectedElements)();
+  const selectedElements = (0, import_editor_elements7.getSelectedElements)();
   if (selectedElements.length !== 1) {
     return void 0;
   }
-  return (0, import_editor_elements6.getContainer)(selectedElements[0].id);
+  return (0, import_editor_elements7.getContainer)(selectedElements[0].id);
 }
 
 // src/components/create-component-form/utils/replace-element-with-component.ts
-var import_editor_elements7 = require("@elementor/editor-elements");
+var import_editor_elements8 = require("@elementor/editor-elements");
 var replaceElementWithComponent = async (element, component) => {
-  return await (0, import_editor_elements7.replaceElement)({
+  return await (0, import_editor_elements8.replaceElement)({
     currentElement: element,
     newElement: createComponentModel2(component),
     withHistory: false
@@ -2746,7 +2889,7 @@ var addComponentToPage = (model) => {
     throw new Error(`Can't find container to drop new component instance at`);
   }
   loadComponentsAssets([model]);
-  (0, import_editor_elements8.dropElement)({
+  (0, import_editor_elements9.dropElement)({
     containerId: container.id,
     model,
     options: { ...options, useHistory: false, scrollIntoView: true }
@@ -2984,25 +3127,25 @@ var OVERRIDABLE_PROP_REPLACEMENT_ID = "overridable-prop";
 // src/components/create-component-form/create-component-form.tsx
 var React19 = __toESM(require("react"));
 var import_react10 = require("react");
-var import_editor_elements11 = require("@elementor/editor-elements");
+var import_editor_elements12 = 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_store50 = require("@elementor/store");
 var import_ui16 = require("@elementor/ui");
 var import_i18n23 = 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_elements10 = require("@elementor/editor-elements");
 var import_editor_notifications2 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_i18n21 = require("@wordpress/i18n");
 
 // src/utils/is-editing-component.ts
-var import_store43 = require("@elementor/store");
+var import_store46 = require("@elementor/store");
 function isEditingComponent() {
-  const state = (0, import_store43.__getStore)()?.getState();
+  const state = (0, import_store46.__getStore)()?.getState();
   if (!state) {
     return false;
   }
@@ -3030,7 +3173,7 @@ function initNonAtomicNestingPrevention() {
   });
 }
 function isElementAtomic(elementType) {
-  return (0, import_editor_elements9.getElementType)(elementType) !== null;
+  return (0, import_editor_elements10.getElementType)(elementType) !== null;
 }
 function blockNonAtomicCreate(args) {
   if (!isEditingComponent()) {
@@ -3056,7 +3199,7 @@ function blockNonAtomicMove(args) {
     if (!container) {
       return false;
     }
-    const allElements = (0, import_editor_elements9.getAllDescendants)(container);
+    const allElements = (0, import_editor_elements10.getAllDescendants)(container);
     return allElements.some((element) => !(0, import_editor_canvas6.isAtomicWidget)(element));
   });
   if (hasNonAtomicElement) {
@@ -3111,9 +3254,9 @@ function findNonAtomicElementsInElement(element) {
 }
 
 // src/store/actions/create-unpublished-component.ts
-var import_editor_elements10 = require("@elementor/editor-elements");
+var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_store45 = require("@elementor/store");
+var import_store48 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
 var import_i18n22 = require("@wordpress/i18n");
 async function createUnpublishedComponent({
@@ -3127,21 +3270,21 @@ async function createUnpublishedComponent({
   const generatedUid = uid ?? (0, import_utils4.generateUniqueId)("component");
   const componentBase = { uid: generatedUid, name };
   const elementDataWithOverridablesReverted = revertAllOverridablesInElementData(element);
-  const container = (0, import_editor_elements10.getContainer)(element.id);
+  const container = (0, import_editor_elements11.getContainer)(element.id);
   const modelFromContainer = container?.model?.toJSON?.();
   const originalElement = {
     model: modelFromContainer ?? element,
     parentId: container?.parent?.id ?? "",
     index: container?.view?._index ?? 0
   };
-  (0, import_store45.__dispatch)(
+  (0, import_store48.__dispatch)(
     slice.actions.addUnpublished({
       ...componentBase,
       elements: [elementDataWithOverridablesReverted],
       overridableProps
     })
   );
-  (0, import_store45.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
+  (0, import_store48.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
   const componentInstance = await replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
@@ -3154,20 +3297,27 @@ async function createUnpublishedComponent({
     await (0, import_editor_v1_adapters4.__privateRunCommand)("document/save/auto");
   } catch (error) {
     restoreOriginalElement(originalElement, componentInstance.id);
-    (0, import_store45.__dispatch)(slice.actions.removeUnpublished(generatedUid));
-    (0, import_store45.__dispatch)(slice.actions.removeCreatedThisSession(generatedUid));
+    (0, import_store48.__dispatch)(slice.actions.removeUnpublished(generatedUid));
+    (0, import_store48.__dispatch)(slice.actions.removeCreatedThisSession(generatedUid));
     throw error;
   }
   return { uid: generatedUid, instanceId: componentInstance.id };
 }
 function restoreOriginalElement(originalElement, componentInstanceId) {
-  (0, import_editor_elements10.deleteElement)({ elementId: componentInstanceId, options: { useHistory: false } });
+  const componentContainer = (0, import_editor_elements11.getContainer)(componentInstanceId);
+  if (componentContainer) {
+    (0, import_editor_elements11.deleteElement)({ container: componentContainer, options: { useHistory: false } });
+  }
+  const parentContainer = (0, import_editor_elements11.getContainer)(originalElement.parentId);
+  if (!parentContainer) {
+    return;
+  }
   const clonedModel = structuredClone(originalElement.model);
-  (0, import_editor_elements10.createElements)({
+  (0, import_editor_elements11.createElements)({
     title: (0, import_i18n22.__)("Restore Element", "elementor"),
     elements: [
       {
-        containerId: originalElement.parentId,
+        container: parentContainer,
         model: clonedModel,
         options: { at: originalElement.index }
       }
@@ -3268,7 +3418,7 @@ function CreateComponentForm() {
         (0, import_editor_notifications3.notify)(notification);
         return;
       }
-      setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements11.getElementLabel)(event.detail.element.id) });
+      setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements12.getElementLabel)(event.detail.element.id) });
       setAnchorPosition(event.detail.anchorPosition);
       eventData.current = getComponentEventData(event.detail.element, event.detail.options);
       trackComponentEvent({
@@ -3293,7 +3443,7 @@ function CreateComponentForm() {
         eventData: eventData.current,
         source: "user"
       });
-      const publishedComponentId = selectComponentByUid((0, import_store47.__getState)(), uid)?.id;
+      const publishedComponentId = selectComponentByUid((0, import_store50.__getState)(), uid)?.id;
       if (publishedComponentId) {
         switchToComponent(publishedComponentId, instanceId);
       } else {
@@ -3441,22 +3591,28 @@ var React21 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_editor_documents12 = require("@elementor/editor-documents");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store51 = require("@elementor/store");
+var import_store56 = require("@elementor/store");
 var import_utils6 = require("@elementor/utils");
 
+// src/store/actions/reset-sanitized-components.ts
+var import_store52 = require("@elementor/store");
+function resetSanitizedComponents() {
+  (0, import_store52.__dispatch)(slice.actions.resetSanitizedComponents());
+}
+
 // src/store/actions/update-current-component.ts
 var import_editor_documents11 = require("@elementor/editor-documents");
-var import_store49 = require("@elementor/store");
+var import_store54 = require("@elementor/store");
 function updateCurrentComponent({
   path,
   currentComponentId
 }) {
-  const dispatch20 = (0, import_store49.__getStore)()?.dispatch;
-  if (!dispatch20) {
+  const dispatch22 = (0, import_store54.__getStore)()?.dispatch;
+  if (!dispatch22) {
     return;
   }
-  dispatch20(slice.actions.setPath(path));
-  dispatch20(slice.actions.setCurrentComponentId(currentComponentId));
+  dispatch22(slice.actions.setPath(path));
+  dispatch22(slice.actions.setCurrentComponentId(currentComponentId));
 }
 
 // src/components/edit-component/component-modal.tsx
@@ -3647,7 +3803,7 @@ function EditComponent() {
 function useHandleDocumentSwitches() {
   const documentsManager = (0, import_editor_documents12.getV1DocumentsManager)();
   const currentComponentId = useCurrentComponentId();
-  const path = (0, import_store51.__useSelector)(selectPath);
+  const path = (0, import_store56.__useSelector)(selectPath);
   (0, import_react13.useEffect)(() => {
     return (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/open"), () => {
       const nextDocument = documentsManager.getCurrent();
@@ -3657,6 +3813,7 @@ function useHandleDocumentSwitches() {
       if (currentComponentId) {
         apiClient.unlockComponent(currentComponentId);
       }
+      resetSanitizedComponents();
       const isComponent2 = nextDocument.config.type === COMPONENT_DOCUMENT_TYPE;
       if (!isComponent2) {
         updateCurrentComponent({ path: [], currentComponentId: null });
@@ -3752,10 +3909,10 @@ var EditModeDialog = ({ lockedBy }) => {
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-var React28 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
-var import_editor_elements16 = require("@elementor/editor-elements");
+var import_editor_elements17 = 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");
@@ -3764,15 +3921,26 @@ var import_i18n27 = require("@wordpress/i18n");
 
 // src/hooks/use-component-instance-settings.ts
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_elements12 = require("@elementor/editor-elements");
+var import_editor_elements13 = require("@elementor/editor-elements");
 function useComponentInstanceSettings() {
   const { element } = (0, import_editor_editing_panel2.useElement)();
-  const settings = (0, import_editor_elements12.useElementSetting)(element.id, "component_instance");
+  const settings = (0, import_editor_elements13.useElementSetting)(element.id, "component_instance");
   return componentInstancePropTypeUtil.extract(settings);
 }
 
-// src/components/instance-editing-panel/empty-state.tsx
+// src/provider/component-instance-context.tsx
 var React23 = __toESM(require("react"));
+var import_react14 = require("react");
+var ComponentInstanceContext = (0, import_react14.createContext)(null);
+function ComponentInstanceProvider({ children, ...props }) {
+  return /* @__PURE__ */ React23.createElement(ComponentInstanceContext.Provider, { value: props }, children);
+}
+var useComponentId = () => (0, import_react14.useContext)(ComponentInstanceContext)?.componentId;
+var useComponentInstanceOverrides = () => (0, import_react14.useContext)(ComponentInstanceContext)?.overrides;
+var useComponentOverridableProps = () => (0, import_react14.useContext)(ComponentInstanceContext)?.overridableProps;
+
+// src/components/instance-editing-panel/empty-state.tsx
+var React24 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
 var import_i18n26 = require("@wordpress/i18n");
@@ -3785,7 +3953,7 @@ var EmptyState2 = ({ onEditComponent }) => {
     "With your current role, you cannot edit this component. Contact an administrator to add properties.",
     "elementor"
   );
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     import_ui18.Stack,
     {
       alignItems: "center",
@@ -3795,31 +3963,31 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__PURE__ */ React23.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n26.__)("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_i18n26.__)("Edit component", "elementor"))
+    /* @__PURE__ */ React24.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React24.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n26.__)("No properties yet", "elementor")),
+    /* @__PURE__ */ React24.createElement(import_ui18.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && /* @__PURE__ */ React24.createElement(import_ui18.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React24.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n26.__)("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-var React27 = __toESM(require("react"));
-var import_react15 = require("react");
+var React28 = __toESM(require("react"));
+var import_react16 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui13 = require("@elementor/editor-ui");
 var import_ui21 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-var React26 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_editor_controls3 = require("@elementor/editor-controls");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_editor_elements15 = require("@elementor/editor-elements");
+var import_editor_elements16 = require("@elementor/editor-elements");
 var import_ui20 = require("@elementor/ui");
 
 // src/hooks/use-controls-by-widget-type.ts
-var import_editor_elements13 = require("@elementor/editor-elements");
+var import_editor_elements14 = require("@elementor/editor-elements");
 function useControlsByWidgetType(type) {
-  const elementType = (0, import_editor_elements13.getElementType)(type);
+  const elementType = (0, import_editor_elements14.getElementType)(type);
   if (!elementType) {
     return {};
   }
@@ -3848,17 +4016,17 @@ function getControlsByBind(controls) {
 }
 
 // src/provider/overridable-prop-context.tsx
-var React24 = __toESM(require("react"));
-var import_react14 = require("react");
-var OverridablePropContext = (0, import_react14.createContext)(null);
+var React25 = __toESM(require("react"));
+var import_react15 = require("react");
+var OverridablePropContext = (0, import_react15.createContext)(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React25.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
-var useOverridablePropValue = () => (0, import_react14.useContext)(OverridablePropContext)?.value;
-var useComponentInstanceElement = () => (0, import_react14.useContext)(OverridablePropContext)?.componentInstanceElement;
+var useOverridablePropValue = () => (0, import_react15.useContext)(OverridablePropContext)?.value;
+var useComponentInstanceElement = () => (0, import_react15.useContext)(OverridablePropContext)?.componentInstanceElement;
 
 // src/store/actions/update-overridable-prop.ts
-var import_store53 = require("@elementor/store");
+var import_store58 = require("@elementor/store");
 
 // src/utils/resolve-override-prop-value.ts
 var resolveOverridePropValue = (originalPropValue) => {
@@ -3893,7 +4061,7 @@ function getOverrideValue(overrideProp) {
 
 // src/store/actions/update-overridable-prop.ts
 function updateOverridableProp(componentId, propValue, originPropFields) {
-  const overridableProps = selectOverridableProps((0, import_store53.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store58.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3918,7 +4086,7 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
       }
     }
   };
-  (0, import_store53.__dispatch)(
+  (0, import_store58.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: newOverridableProps
@@ -3927,7 +4095,7 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
 }
 
 // src/utils/get-prop-type-for-component-override.ts
-var import_editor_elements14 = require("@elementor/editor-elements");
+var import_editor_elements15 = require("@elementor/editor-elements");
 var getPropTypeForComponentOverride = (overridableProp) => {
   if (overridableProp.originPropFields) {
     return getPropType(overridableProp.originPropFields);
@@ -3939,16 +4107,16 @@ var getPropTypeForComponentOverride = (overridableProp) => {
   });
 };
 function getPropType({ widgetType, propKey }) {
-  const widgetPropsSchema = (0, import_editor_elements14.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
+  const widgetPropsSchema = (0, import_editor_elements15.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
   return widgetPropsSchema?.[propKey];
 }
 
 // src/components/control-label.tsx
-var React25 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_ui19 = require("@elementor/ui");
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React25.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React25.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React25.createElement(import_editor_controls2.ControlAdornments, null));
+  return /* @__PURE__ */ React26.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React26.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React26.createElement(import_editor_controls2.ControlAdornments, null));
 };
 
 // src/components/errors.ts
@@ -3959,9 +4127,9 @@ var OverrideControlInnerElementNotFoundError = (0, import_utils7.createError)({
 });
 
 // src/components/instance-editing-panel/use-resolved-origin-value.tsx
-var import_store55 = require("@elementor/store");
+var import_store60 = require("@elementor/store");
 function useResolvedOriginValue(override, overridableProp) {
-  const components = (0, import_store55.__useSelector)(selectData);
+  const components = (0, import_store60.__useSelector)(selectData);
   return resolveOriginValue(components, override, overridableProp);
 }
 function resolveOriginValue(components, matchingOverride, overridableProp) {
@@ -3982,17 +4150,12 @@ function resolveOriginValue(components, matchingOverride, overridableProp) {
   return null;
 }
 function getOriginFromOverride(components, override) {
-  const overridableValue = componentOverridablePropTypeUtil.extract(override);
-  const innerOverride = overridableValue ? componentInstanceOverridePropTypeUtil.extract(overridableValue.origin_value) : componentInstanceOverridePropTypeUtil.extract(override);
-  if (!innerOverride) {
-    return null;
-  }
-  const { schema_source: schemaSource, override_key: overrideKey, override_value: overrideValue } = innerOverride;
-  const componentId = schemaSource?.id;
-  if (!componentId || !overrideKey) {
+  const innerOverrideInfo = extractInnerOverrideInfo(override);
+  if (!innerOverrideInfo) {
     return null;
   }
-  const prop = getOverridableProp(components, componentId, overrideKey);
+  const { componentId, innerOverrideKey, overrideValue } = innerOverrideInfo;
+  const prop = getOverridableProp({ componentId, overrideKey: innerOverrideKey });
   if (hasValue(prop?.originValue)) {
     return prop.originValue;
   }
@@ -4039,39 +4202,52 @@ function findOriginValueByElementId(components, targetElementId, targetPropKey,
 function hasValue(value) {
   return value !== null && value !== void 0;
 }
-function getOverridableProp(components, componentId, overrideKey) {
-  const component = components.find(({ id: id2 }) => id2 === componentId);
-  return component?.overridableProps?.props?.[overrideKey];
-}
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-function OverridePropControl({ overridableProp, overrides }) {
-  return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
+function OverridePropControl({ overrideKey }) {
+  const overridableProps = useComponentOverridableProps();
+  const overridableProp = overridableProps?.props[overrideKey];
+  if (!overridableProp) {
+    return null;
+  }
+  return /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React27.createElement(OverrideControl, { overridableProp }));
 }
-function OverrideControl({ overridableProp, overrides }) {
+function OverrideControl({ overridableProp }) {
   const componentInstanceElement = (0, import_editor_editing_panel3.useElement)();
-  const componentId = useCurrentComponentId();
   const { value: instanceValue, setValue: setInstanceValue } = (0, import_editor_controls3.useBoundProp)(componentInstancePropTypeUtil);
+  const wrappingComponentId = useCurrentComponentId();
+  const componentId = useComponentId();
+  const overridableProps = useComponentOverridableProps();
+  const overrides = useComponentInstanceOverrides();
   const controls = useControlsByWidgetType(
     overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
   );
   const controlReplacements = (0, import_editor_controls3.getControlReplacements)();
   const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
   const recursiveOriginValue = useResolvedOriginValue(matchingOverride, overridableProp);
+  if (!componentId) {
+    throw new Error("Component ID is required");
+  }
+  if (!overridableProps) {
+    throw new Error("Component has no overridable props");
+  }
   const propType = getPropTypeForComponentOverride(overridableProp);
   if (!propType) {
     return null;
   }
-  const componentInstanceId = instanceValue.component_id?.value;
-  if (!componentInstanceId) {
-    throw new Error("Component ID is required");
-  }
   const resolvedOverrideValue = matchingOverride ? resolveOverridePropValue(matchingOverride) : null;
   const propValue = resolvedOverrideValue ?? recursiveOriginValue ?? overridableProp.originValue;
   const value = {
     [overridableProp.overrideKey]: propValue
   };
   const setValue = (newValue) => {
+    if (!overridableProps) {
+      setInstanceValue({
+        ...instanceValue,
+        overrides: void 0
+      });
+      return;
+    }
     const newPropValue = getTempNewValueForDynamicProp(
       propType,
       propValue,
@@ -4081,9 +4257,9 @@ function OverrideControl({ overridableProp, overrides }) {
       matchingOverride,
       overrideKey: overridableProp.overrideKey,
       overrideValue: newPropValue,
-      componentId: componentInstanceId
+      componentId
     });
-    let newOverrides = overrides?.map((override) => override === matchingOverride ? newOverrideValue : override) ?? [];
+    let newOverrides = (overrides ?? []).filter((override) => isValidOverride(overridableProps, override)).map((override) => override === matchingOverride ? newOverrideValue : override);
     if (!matchingOverride) {
       newOverrides = [...newOverrides, newOverrideValue];
     }
@@ -4092,13 +4268,13 @@ function OverrideControl({ overridableProp, overrides }) {
       overrides: componentInstanceOverridesPropTypeUtil.create(newOverrides)
     });
     const overridableValue = componentOverridablePropTypeUtil.extract(newOverrideValue);
-    if (overridableValue && componentId) {
+    if (overridableValue && wrappingComponentId) {
       if (overridableProp.originPropFields) {
-        updateOverridableProp(componentId, overridableValue, overridableProp.originPropFields);
+        updateOverridableProp(wrappingComponentId, overridableValue, overridableProp.originPropFields);
         return;
       }
       const { elType: elType2, widgetType: widgetType2, propKey: propKey2, elementId: elementId2 } = overridableProp;
-      updateOverridableProp(componentId, overridableValue, { elType: elType2, widgetType: widgetType2, propKey: propKey2, elementId: elementId2 });
+      updateOverridableProp(wrappingComponentId, overridableValue, { elType: elType2, widgetType: widgetType2, propKey: propKey2, elementId: elementId2 });
     }
   };
   const { control, controlProps, layout } = getControlParams(
@@ -4107,14 +4283,14 @@ function OverrideControl({ overridableProp, overrides }) {
     overridableProp.label
   );
   const { elementId, widgetType, elType, propKey } = overridableProp.originPropFields ?? overridableProp;
-  const elementContainer = (0, import_editor_elements15.getContainer)(elementId);
+  const elementContainer = (0, import_editor_elements16.getContainer)(elementId);
   if (!elementContainer) {
     throw new OverrideControlInnerElementNotFoundError({
-      context: { componentId: componentInstanceId, elementId }
+      context: { componentId, elementId }
     });
   }
   const type = elType === "widget" ? widgetType : elType;
-  const elementType = (0, import_editor_elements15.getElementType)(type);
+  const elementType = (0, import_editor_elements16.getElementType)(type);
   if (!elementType) {
     return null;
   }
@@ -4123,13 +4299,13 @@ function OverrideControl({ overridableProp, overrides }) {
       [overridableProp.overrideKey]: propType
     }
   });
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     OverridablePropProvider,
     {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.ElementProvider, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.ElementProvider, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React27.createElement(
       import_editor_controls3.PropProvider,
       {
         propType: propTypeSchema,
@@ -4139,7 +4315,7 @@ function OverrideControl({ overridableProp, overrides }) {
           return false;
         }
       },
-      /* @__PURE__ */ React26.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React26.createElement(import_editor_controls3.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React26.createElement(import_ui20.Stack, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React26.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React26.createElement(OriginalControl, { control, controlProps }))))
+      /* @__PURE__ */ React27.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React27.createElement(import_editor_controls3.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React27.createElement(import_ui20.Stack, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React27.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React27.createElement(OriginalControl, { control, controlProps }))))
     )))
   );
 }
@@ -4150,19 +4326,6 @@ function getTempNewValueForDynamicProp(propType, propValue, newPropValue) {
   }
   return newPropValue;
 }
-function getMatchingOverride(overrides, overrideKey) {
-  const result = overrides?.find((override) => {
-    const overridableValue = componentOverridablePropTypeUtil.extract(override);
-    let comparedOverrideKey = null;
-    if (overridableValue) {
-      comparedOverrideKey = overridableValue.origin_value?.value?.override_key;
-    } else {
-      comparedOverrideKey = override.value.override_key;
-    }
-    return comparedOverrideKey === overrideKey;
-  }) ?? null;
-  return result;
-}
 function createOverrideValue({
   matchingOverride,
   overrideKey,
@@ -4211,7 +4374,7 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.BaseControl, { type: value.type, props: controlProps });
 }
 function getControlLayout(control) {
   return control.value.meta?.layout || import_editor_editing_panel3.controlsRegistry.getLayout(control.value.type);
@@ -4231,18 +4394,22 @@ function populateChildControlProps(props) {
   }
   return props;
 }
+function isValidOverride(overridableProps, override) {
+  const overridableKey = componentOverridablePropTypeUtil.isValid(override) ? override.value.origin_value?.value.override_key : override.value.override_key;
+  return !!overridableProps.props[overridableKey];
+}
 
 // src/components/instance-editing-panel/override-props-group.tsx
-function OverridePropsGroup({ group, props, overrides }) {
+function OverridePropsGroup({ group }) {
   const [isOpen, setIsOpen] = (0, import_editor_editing_panel4.useStateByElement)(group.id, true);
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id2 = (0, import_react15.useId)();
+  const id2 = (0, import_react16.useId)();
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React27.createElement(import_ui21.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(import_ui21.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React28.createElement(
     import_ui21.ListItemButton,
     {
       id: labelId,
@@ -4252,7 +4419,7 @@ function OverridePropsGroup({ group, props, overrides }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React28.createElement(
       import_ui21.ListItemText,
       {
         secondary: title,
@@ -4260,15 +4427,8 @@ function OverridePropsGroup({ group, props, overrides }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__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,
-      overridableProp: props[overrideKey],
-      overrides
-    }
-  )))));
+    /* @__PURE__ */ React28.createElement(import_editor_ui13.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React28.createElement(import_ui21.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React28.createElement(import_ui21.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React28.createElement(OverridePropControl, { key: overrideKey, overrideKey })))));
 }
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
@@ -4278,8 +4438,8 @@ function InstanceEditingPanel() {
   const componentId = settings?.component_id?.value;
   const overrides = settings?.overrides?.value;
   const component = useComponent(componentId ?? null);
-  const overridableProps = useOverridableProps(componentId ?? null);
-  const componentInstanceId = (0, import_editor_elements16.useSelectedElement)()?.element?.id ?? null;
+  const overridableProps = useSanitizeOverridableProps(componentId ?? null);
+  const componentInstanceId = (0, import_editor_elements17.useSelectedElement)()?.element?.id ?? null;
   if (!componentId || !overridableProps || !component) {
     return null;
   }
@@ -4288,18 +4448,20 @@ 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__ */ 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 + componentInstanceId }, /* @__PURE__ */ React28.createElement(
-    OverridePropsGroup,
+  return /* @__PURE__ */ React29.createElement(
+    ComponentInstanceProvider,
     {
-      group,
-      props: overridableProps.props,
-      overrides
-    }
-  ), /* @__PURE__ */ React28.createElement(import_ui22.Divider, null)))))));
+      componentId,
+      overrides,
+      overridableProps
+    },
+    /* @__PURE__ */ React29.createElement(import_editor_panels4.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(import_ui22.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_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React29.createElement(import_ui22.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_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React29.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React29.createElement(import_ui22.Divider, null))))))
+  );
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
-var React29 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 function OverridablePropControl({
@@ -4344,7 +4506,7 @@ function OverridablePropControl({
   });
   const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React29.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React30.createElement(
     import_editor_controls5.PropProvider,
     {
       ...propContext,
@@ -4355,7 +4517,7 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React29.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React29.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React29.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
+    /* @__PURE__ */ React30.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
   ));
 }
 function ControlWithReplacements({
@@ -4365,21 +4527,21 @@ function ControlWithReplacements({
   const { ControlToRender, isReplaced } = (0, import_editor_controls5.useControlReplacement)(OriginalControl2);
   if (isReplaced) {
     const ReplacementControl = ControlToRender;
-    return /* @__PURE__ */ React29.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
+    return /* @__PURE__ */ React30.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
   }
-  return /* @__PURE__ */ React29.createElement(OriginalControl2, { ...props });
+  return /* @__PURE__ */ React30.createElement(OriginalControl2, { ...props });
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-var React31 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
-var import_editor_elements17 = require("@elementor/editor-elements");
+var import_editor_elements18 = require("@elementor/editor-elements");
 var import_ui24 = require("@elementor/ui");
 var import_i18n29 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
-var import_store60 = require("@elementor/store");
+var import_store65 = require("@elementor/store");
 var import_utils8 = require("@elementor/utils");
 function setOverridableProp({
   componentId,
@@ -4394,7 +4556,7 @@ function setOverridableProp({
   originPropFields,
   source
 }) {
-  const overridableProps = selectOverridableProps((0, import_store60.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store65.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -4431,7 +4593,7 @@ function setOverridableProp({
   if (isChangingGroups) {
     groups = removePropFromGroup(groups, existingOverridableProp.groupId, overridableProp.overrideKey);
   }
-  (0, import_store60.__dispatch)(
+  (0, import_store65.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -4442,7 +4604,7 @@ function setOverridableProp({
   );
   const isNewProperty = !existingOverridableProp;
   if (isNewProperty) {
-    const currentComponent = selectCurrentComponent((0, import_store60.__getState)());
+    const currentComponent = selectCurrentComponent((0, import_store65.__getState)());
     trackComponentEvent({
       action: "propertyExposed",
       source,
@@ -4457,8 +4619,8 @@ function setOverridableProp({
 }
 
 // src/components/overridable-props/indicator.tsx
-var React30 = __toESM(require("react"));
-var import_react16 = require("react");
+var React31 = __toESM(require("react"));
+var import_react17 = require("react");
 var import_icons15 = require("@elementor/icons");
 var import_ui23 = require("@elementor/ui");
 var import_i18n28 = require("@wordpress/i18n");
@@ -4517,37 +4679,24 @@ var Content = (0, import_ui23.styled)(import_ui23.Box)`
 		}
 	}
 `;
-var Indicator2 = (0, import_react16.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React30.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React30.createElement(
+var Indicator2 = (0, import_react17.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React31.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React31.createElement(
   IconContainer,
   {
     className: "icon",
     "aria-label": isOverridable ? (0, import_i18n28.__)("Overridable property", "elementor") : (0, import_i18n28.__)("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React30.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React30.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
+  isOverridable ? /* @__PURE__ */ React31.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React31.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
 )));
 
-// src/components/overridable-props/utils/get-overridable-prop.ts
-var import_store62 = require("@elementor/store");
-function getOverridableProp2({
-  componentId,
-  overrideKey
-}) {
-  const overridableProps = selectOverridableProps((0, import_store62.__getState)(), componentId);
-  if (!overridableProps) {
-    return void 0;
-  }
-  return overridableProps.props[overrideKey];
-}
-
 // src/components/overridable-props/overridable-prop-indicator.tsx
 function OverridablePropIndicator() {
   const { propType } = (0, import_editor_controls6.useBoundProp)();
   const componentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps(componentId);
+  const overridableProps = useSanitizeOverridableProps(componentId);
   if (!isPropAllowed(propType) || !componentId || !overridableProps) {
     return null;
   }
-  return /* @__PURE__ */ React31.createElement(Content2, { componentId, overridableProps });
+  return /* @__PURE__ */ React32.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
@@ -4566,7 +4715,7 @@ function Content2({ componentId, overridableProps }) {
   });
   const triggerProps = (0, import_ui24.bindTrigger)(popupState);
   const popoverProps = (0, import_ui24.bindPopover)(popupState);
-  const { elType } = (0, import_editor_elements17.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
+  const { elType } = (0, import_editor_elements18.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
   const handleSubmit = ({ label, group }) => {
     const propTypeDefault = propType.default ?? {};
     const originValue = resolveOverridePropValue(overridableValue?.origin_value) ?? value ?? propTypeDefault;
@@ -4592,8 +4741,8 @@ function Content2({ componentId, overridableProps }) {
     }
     popupState.close();
   };
-  const overridableConfig = overridableValue ? getOverridableProp2({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n29.__)("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
+  const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n29.__)("Override Property", "elementor") }, /* @__PURE__ */ React32.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React32.createElement(
     import_ui24.Popover,
     {
       disableScrollLock: true,
@@ -4610,7 +4759,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -4633,7 +4782,7 @@ 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_elements18 = require("@elementor/editor-elements");
+var import_editor_elements19 = require("@elementor/editor-elements");
 var import_editor_mcp = require("@elementor/editor-mcp");
 var import_http_client2 = require("@elementor/http-client");
 var import_schema6 = require("@elementor/schema");
@@ -4678,7 +4827,7 @@ var handleSaveAsComponent = async (params) => {
     overridable_props: overridablePropsInput
   } = params;
   const validElementTypes = getValidElementTypes();
-  const container = (0, import_editor_elements18.getContainer)(elementId);
+  const container = (0, import_editor_elements19.getContainer)(elementId);
   if (!container) {
     throw new Error(ERROR_MESSAGES3.ELEMENT_NOT_FOUND);
   }
@@ -4744,7 +4893,7 @@ function enrichOverridableProps(input, rootElement, propertGroups) {
     }
     const elType = element.elType;
     const widgetType = element.widgetType || element.elType;
-    const elementType = (0, import_editor_elements18.getElementType)(widgetType);
+    const elementType = (0, import_editor_elements19.getElementType)(widgetType);
     if (!elementType) {
       throw new Error(
         `Element type "${widgetType}" is not atomic or does not have a settings schema. Cannot expose property "${propKey}" for element "${elementId}".`
@@ -4815,7 +4964,7 @@ function findElementById(root, targetId) {
   return null;
 }
 function getValidElementTypes() {
-  const types = (0, import_editor_elements18.getWidgetsCache)();
+  const types = (0, import_editor_elements19.getWidgetsCache)();
   if (!types) {
     return [];
   }
@@ -4995,20 +5144,20 @@ function initMcp() {
 }
 
 // src/populate-store.ts
-var import_react17 = require("react");
-var import_store65 = require("@elementor/store");
+var import_react18 = require("react");
+var import_store68 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react17.useEffect)(() => {
-    (0, import_store65.__dispatch)(loadComponents());
+  (0, import_react18.useEffect)(() => {
+    (0, import_store68.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/prevent-circular-nesting.ts
-var import_editor_elements19 = require("@elementor/editor-elements");
+var import_editor_elements20 = require("@elementor/editor-elements");
 var import_editor_notifications4 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
-var import_store66 = require("@elementor/store");
+var import_store69 = require("@elementor/store");
 var import_i18n30 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
@@ -5034,7 +5183,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = (0, import_store66.__getState)();
+  const state = (0, import_store69.__getState)();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -5100,7 +5249,7 @@ function blockCircularMove(args) {
     if (!container) {
       return false;
     }
-    const allElements = (0, import_editor_elements19.getAllDescendants)(container);
+    const allElements = (0, import_editor_elements20.getAllDescendants)(container);
     return allElements.some((element) => {
       const componentId = extractComponentIdFromContainer(element);
       if (componentId === null) {
@@ -5132,19 +5281,19 @@ function blockCircularPaste(args) {
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store68 = require("@elementor/store");
+var import_store71 = require("@elementor/store");
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  (0, import_store68.__dispatch)(slice.actions.removeStyles({ id: id2 }));
+  (0, import_store71.__dispatch)(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store70 = require("@elementor/store");
+var import_store73 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store70.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store73.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -5152,29 +5301,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store70.__getState)());
+      return selectFlatStyles((0, import_store73.__getState)());
     },
     get: (id2) => {
-      return selectFlatStyles((0, import_store70.__getState)()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles((0, import_store73.__getState)()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
-var import_editor_elements20 = require("@elementor/editor-elements");
-var import_store72 = require("@elementor/store");
+var import_editor_elements21 = require("@elementor/editor-elements");
+var import_store75 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store72.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store75.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store72.__dispatch)(
+    (0, import_store75.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -5184,10 +5333,10 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store72.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store75.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     const failedUids = unpublishedComponents.map((component) => component.uid);
-    (0, import_store72.__dispatch)(slice.actions.removeUnpublished(failedUids));
+    (0, import_store75.__dispatch)(slice.actions.removeUnpublished(failedUids));
     throw new Error(`Failed to publish components: ${error}`);
   }
 }
@@ -5231,7 +5380,7 @@ function shouldUpdateElement(element, uidToComponentId) {
   return { shouldUpdate: false, newComponentId: null };
 }
 function updateElementComponentId(elementId, componentId) {
-  (0, import_editor_elements20.updateElementSettings)({
+  (0, import_editor_elements21.updateElementSettings)({
     id: elementId,
     props: {
       component_instance: {
@@ -5261,7 +5410,7 @@ async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-var import_store74 = require("@elementor/store");
+var import_store77 = require("@elementor/store");
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -5269,7 +5418,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps((0, import_store74.__getState)(), currentDocument.id);
+  const overridableProps = selectOverridableProps((0, import_store77.__getState)(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -5277,7 +5426,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 var import_editor_notifications5 = require("@elementor/editor-notifications");
-var import_store76 = require("@elementor/store");
+var import_store79 = require("@elementor/store");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -5285,7 +5434,7 @@ var failedNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async (status) => {
   try {
-    const archivedComponents = selectArchivedThisSession((0, import_store76.__getState)());
+    const archivedComponents = selectArchivedThisSession((0, import_store79.__getState)());
     if (!archivedComponents.length) {
       return;
     }
@@ -5300,15 +5449,15 @@ var updateArchivedComponentBeforeSave = async (status) => {
 };
 
 // src/sync/update-component-title-before-save.ts
-var import_store78 = require("@elementor/store");
+var import_store81 = require("@elementor/store");
 var updateComponentTitleBeforeSave = async (status) => {
-  const updatedComponentNames = selectUpdatedComponentNames((0, import_store78.__getState)());
+  const updatedComponentNames = selectUpdatedComponentNames((0, import_store81.__getState)());
   if (!updatedComponentNames.length) {
     return;
   }
   const result = await apiClient.updateComponentTitle(updatedComponentNames, status);
   if (result.failedIds.length === 0) {
-    (0, import_store78.__dispatch)(slice.actions.cleanUpdatedComponentNames());
+    (0, import_store81.__dispatch)(slice.actions.cleanUpdatedComponentNames());
   }
 };
 
@@ -5334,12 +5483,12 @@ var updateExistingComponentsBeforeSave = async ({
 };
 
 // src/sync/cleanup-overridable-props-on-delete.ts
-var import_editor_elements21 = require("@elementor/editor-elements");
+var import_editor_elements22 = require("@elementor/editor-elements");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
-var import_store80 = require("@elementor/store");
+var import_store83 = require("@elementor/store");
 function initCleanupOverridablePropsOnDelete() {
   (0, import_editor_v1_adapters8.registerDataHook)("dependency", "document/elements/delete", (args) => {
-    const state = (0, import_store80.__getState)();
+    const state = (0, import_store83.__getState)();
     if (!state) {
       return true;
     }
@@ -5370,7 +5519,7 @@ function initCleanupOverridablePropsOnDelete() {
     for (const propKey of propKeysToDelete) {
       updatedGroups = removePropFromAllGroups(updatedGroups, propKey);
     }
-    (0, import_store80.__dispatch)(
+    (0, import_store83.__dispatch)(
       slice.actions.setOverridableProps({
         componentId: currentComponentId,
         overridableProps: {
@@ -5384,12 +5533,12 @@ function initCleanupOverridablePropsOnDelete() {
   });
 }
 function collectDeletedElementIds(containers) {
-  const elementIds = containers.filter(Boolean).flatMap((container) => [container, ...(0, import_editor_elements21.getAllDescendants)(container)]).map((element) => element.model?.get?.("id") ?? element.id).filter((id2) => Boolean(id2));
+  const elementIds = containers.filter(Boolean).flatMap((container) => [container, ...(0, import_editor_elements22.getAllDescendants)(container)]).map((element) => element.model?.get?.("id") ?? element.id).filter((id2) => Boolean(id2));
   return elementIds;
 }
 
 // src/sync/handle-component-edit-mode-container.ts
-var import_editor_elements22 = require("@elementor/editor-elements");
+var import_editor_elements23 = require("@elementor/editor-elements");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 var V4_DEFAULT_CONTAINER_TYPE = "e-flexbox";
 function initHandleComponentEditModeContainer() {
@@ -5439,11 +5588,11 @@ function initRedirectDropIntoComponent() {
   });
 }
 function createEmptyTopLevelContainer(container) {
-  const newContainer = (0, import_editor_elements22.createElement)({
-    containerId: container.id,
+  const newContainer = (0, import_editor_elements23.createElement)({
+    container,
     model: { elType: V4_DEFAULT_CONTAINER_TYPE }
   });
-  (0, import_editor_elements22.selectElement)(newContainer.id);
+  (0, import_editor_elements23.selectElement)(newContainer.id);
 }
 function getComponentContainer(container) {
   const topLevelElement = container.children?.[0];
@@ -5516,7 +5665,7 @@ function revertOverridablesInStorage(storageKey) {
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store82.__registerSlice)(slice);
+  (0, import_store85.__registerSlice)(slice);
   (0, import_editor_panels5.__registerPanel)(panel);
   (0, import_editor_canvas8.registerElementType)(
     COMPONENT_WIDGET_TYPE,