@elementor/editor-components 3.35.0-388 → 3.35.0-390

package/dist/index.js

@@ -38,12 +38,12 @@ module.exports = __toCommonJS(index_exports);
 var import_editor = require("@elementor/editor");
 var import_editor_canvas8 = require("@elementor/editor-canvas");
 var import_editor_documents12 = require("@elementor/editor-documents");
-var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_panels4 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
-var import_store64 = require("@elementor/store");
+var import_store63 = require("@elementor/store");
 var import_i18n24 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
@@ -195,6 +195,9 @@ var getCreatedThisSession = (state) => state[SLICE_NAME].createdThisSession;
 var getPath = (state) => state[SLICE_NAME].path;
 var getCurrentComponentId = (state) => state[SLICE_NAME].currentComponentId;
 var selectComponent = (state, componentId) => state[SLICE_NAME].data.find((component) => component.id === componentId);
+var useComponent = (componentId) => {
+  return (0, import_store2.__useSelector)((state) => componentId ? selectComponent(state, componentId) : null);
+};
 var selectComponents = (0, import_store2.__createSelector)(
   selectData,
   selectUnpublishedData,
@@ -235,6 +238,11 @@ var selectOverridableProps = (0, import_store2.__createSelector)(
     return component.overridableProps ?? DEFAULT_OVERRIDABLE_PROPS;
   }
 );
+var useOverridableProps = (componentId) => {
+  return (0, import_store2.__useSelector)(
+    (state) => componentId ? selectOverridableProps(state, componentId) : null
+  );
+};
 var selectIsOverridablePropsLoaded = (0, import_store2.__createSelector)(
   selectComponent,
   (component) => {
@@ -692,11 +700,11 @@ function reorderOverridableGroups({ componentId, newOrder }) {
   );
 }
 
-// src/store/actions/update-overridable-prop.ts
+// src/store/actions/update-overridable-prop-params.ts
 var import_store17 = require("@elementor/store");
-function updateOverridableProp({
+function updateOverridablePropParams({
   componentId,
-  propKey,
+  overrideKey,
   label,
   groupId
 }) {
@@ -704,7 +712,7 @@ function updateOverridableProp({
   if (!overridableProps) {
     return;
   }
-  const prop = overridableProps.props[propKey];
+  const prop = overridableProps.props[overrideKey];
   if (!prop) {
     return;
   }
@@ -715,7 +723,7 @@ function updateOverridableProp({
     label,
     groupId: newGroupId
   };
-  const updatedGroups = movePropBetweenGroups(overridableProps.groups, propKey, oldGroupId, newGroupId);
+  const updatedGroups = movePropBetweenGroups(overridableProps.groups, overrideKey, oldGroupId, newGroupId);
   (0, import_store17.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
@@ -723,7 +731,7 @@ function updateOverridableProp({
         ...overridableProps,
         props: {
           ...overridableProps.props,
-          [propKey]: updatedProp
+          [overrideKey]: updatedProp
         },
         groups: updatedGroups
       }
@@ -734,7 +742,7 @@ function updateOverridableProp({
 
 // src/components/component-panel-header/use-overridable-props.ts
 var import_store19 = require("@elementor/store");
-function useOverridableProps(componentId) {
+function useOverridableProps2(componentId) {
   return (0, import_store19.__useSelector)((state) => {
     if (!componentId) {
       return void 0;
@@ -1253,7 +1261,7 @@ function validateGroupLabel(label, existingGroups) {
 function useCurrentEditableItem() {
   const [editingGroupId, setEditingGroupId] = (0, import_react4.useState)(null);
   const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps(currentComponentId);
+  const overridableProps = useOverridableProps2(currentComponentId);
   const allGroupsRecord = overridableProps?.groups?.items ?? {};
   const currentGroup = editingGroupId ? allGroupsRecord[editingGroupId] : null;
   const validateLabel = (newLabel) => {
@@ -1316,7 +1324,7 @@ function generateUniqueLabel(groups) {
 // src/components/component-properties-panel/component-properties-panel-content.tsx
 function ComponentPropertiesPanelContent({ onClose }) {
   const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps(currentComponentId);
+  const overridableProps = useOverridableProps2(currentComponentId);
   const [isAddingGroup, setIsAddingGroup] = (0, import_react5.useState)(false);
   const introductionRef = (0, import_react5.useRef)(null);
   const groupLabelEditable = useCurrentEditableItem();
@@ -1359,10 +1367,10 @@ function ComponentPropertiesPanelContent({ onClose }) {
     deleteOverridableProp({ componentId: currentComponentId, propKey });
     (0, import_editor_documents4.setDocumentModifiedStatus)(true);
   };
-  const handlePropertyUpdate = (propKey, data) => {
-    updateOverridableProp({
+  const handlePropertyUpdate = (overrideKey, data) => {
+    updateOverridablePropParams({
       componentId: currentComponentId,
-      propKey,
+      overrideKey,
       label: data.label,
       groupId: data.group
     });
@@ -1500,7 +1508,7 @@ var slideUp = import_ui9.keyframes`
 var MESSAGE_KEY = "components-properties-introduction";
 var ComponentPanelHeader = () => {
   const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps(currentComponentId);
+  const overridableProps = useOverridableProps2(currentComponentId);
   const onBack = useNavigateBack();
   const componentName = getComponentName();
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
@@ -1838,6 +1846,9 @@ var getComponentIds = async (elements) => {
     const isComponent = isComponentInstance({ widgetType, elType });
     if (isComponent) {
       const componentId = settings?.component_instance?.value?.component_id.value;
+      if (!componentId) {
+        return;
+      }
       const document = await getComponentDocumentData(componentId);
       childElements = document?.elements;
       if (Boolean(componentId)) {
@@ -1845,12 +1856,13 @@ var getComponentIds = async (elements) => {
       }
     }
     if (!!childElements?.length) {
-      ids.push(...await getComponentIds(childElements));
+      const newIds = await getComponentIds(childElements);
+      ids.push(...Array.from(new Set(newIds)));
     }
     return ids;
   });
   const result = (await Promise.all(components)).flat();
-  return Array.from(new Set(result));
+  return Array.from(new Set(result)).filter((value) => value !== void 0);
 };
 
 // src/store/actions/load-components-overridable-props.ts
@@ -2807,22 +2819,26 @@ var EditModeDialog = ({ lockedBy }) => {
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-var React23 = __toESM(require("react"));
-var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_editor_elements8 = require("@elementor/editor-elements");
+var React25 = __toESM(require("react"));
+var import_editor_controls4 = require("@elementor/editor-controls");
+var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
+var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_panels3 = require("@elementor/editor-panels");
 var import_icons14 = require("@elementor/icons");
-var import_store42 = require("@elementor/store");
-var import_ui19 = require("@elementor/ui");
+var import_ui21 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
 
+// src/hooks/use-component-instance-settings.ts
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_elements8 = require("@elementor/editor-elements");
+
 // src/prop-types/component-instance-prop-type.ts
-var import_editor_props3 = require("@elementor/editor-props");
-var import_schema4 = require("@elementor/schema");
+var import_editor_props4 = require("@elementor/editor-props");
+var import_schema5 = require("@elementor/schema");
 
 // src/prop-types/component-instance-overrides-prop-type.ts
-var import_editor_props2 = require("@elementor/editor-props");
-var import_schema3 = require("@elementor/schema");
+var import_editor_props3 = require("@elementor/editor-props");
+var import_schema4 = require("@elementor/schema");
 
 // src/prop-types/component-instance-override-prop-type.ts
 var import_editor_props = require("@elementor/editor-props");
@@ -2839,21 +2855,42 @@ var componentInstanceOverridePropTypeUtil = (0, import_editor_props.createPropUt
   })
 );
 
+// src/prop-types/component-overridable-prop-type.ts
+var import_editor_props2 = require("@elementor/editor-props");
+var import_schema3 = require("@elementor/schema");
+var componentOverridablePropTypeUtil = (0, import_editor_props2.createPropUtils)(
+  "overridable",
+  import_schema3.z.object({
+    override_key: import_schema3.z.string(),
+    origin_value: import_schema3.z.object({
+      $$type: import_schema3.z.string(),
+      value: import_schema3.z.unknown()
+    }).nullable()
+  })
+);
+
 // src/prop-types/component-instance-overrides-prop-type.ts
-var componentInstanceOverridesPropTypeUtil = (0, import_editor_props2.createPropUtils)(
+var componentInstanceOverridesPropTypeUtil = (0, import_editor_props3.createPropUtils)(
   "overrides",
-  import_schema3.z.array(componentInstanceOverridePropTypeUtil.schema).optional().default([])
+  import_schema4.z.array(import_schema4.z.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([])
 );
 
 // src/prop-types/component-instance-prop-type.ts
-var componentInstancePropTypeUtil = (0, import_editor_props3.createPropUtils)(
+var componentInstancePropTypeUtil = (0, import_editor_props4.createPropUtils)(
   "component-instance",
-  import_schema4.z.object({
-    component_id: import_editor_props3.numberPropTypeUtil.schema,
-    overrides: import_schema4.z.optional(componentInstanceOverridesPropTypeUtil.schema)
+  import_schema5.z.object({
+    component_id: import_editor_props4.numberPropTypeUtil.schema,
+    overrides: import_schema5.z.optional(componentInstanceOverridesPropTypeUtil.schema)
   })
 );
 
+// src/hooks/use-component-instance-settings.ts
+function useComponentInstanceSettings() {
+  const { element } = (0, import_editor_editing_panel2.useElement)();
+  const settings = (0, import_editor_elements8.useElementSetting)(element.id, "component_instance");
+  return componentInstancePropTypeUtil.extract(settings);
+}
+
 // src/components/instance-editing-panel/empty-state.tsx
 var React21 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
@@ -2881,13 +2918,228 @@ var EmptyState2 = ({ onEditComponent }) => {
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-var React22 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var import_react13 = require("react");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui10 = require("@elementor/editor-ui");
+var import_ui20 = require("@elementor/ui");
+
+// src/components/instance-editing-panel/override-prop-control.tsx
+var React23 = __toESM(require("react"));
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_ui19 = require("@elementor/ui");
+
+// src/hooks/use-controls-by-widget-type.ts
+var import_editor_elements9 = require("@elementor/editor-elements");
+function useControlsByWidgetType(type) {
+  const elementType = (0, import_editor_elements9.getElementType)(type);
+  if (!elementType) {
+    return {};
+  }
+  const controls = iterateControls(elementType.controls);
+  return getControlsByBind(controls);
+}
+function iterateControls(controls) {
+  return controls.map((control) => {
+    if (control.type === "control" && "bind" in control.value) {
+      return control;
+    }
+    if (control.type === "section") {
+      return iterateControls(control.value.items);
+    }
+    return null;
+  }).filter(Boolean).flat();
+}
+function getControlsByBind(controls) {
+  return controls.reduce(
+    (controlsByBind, control) => ({
+      ...controlsByBind,
+      [control.value.bind]: control
+    }),
+    {}
+  );
+}
+
+// src/store/actions/update-overridable-prop.ts
+var import_store42 = require("@elementor/store");
+function updateOverridableProp(componentId, propValue, originPropFields) {
+  const overridableProps = selectOverridableProps((0, import_store42.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const existingOverridableProp = overridableProps.props[propValue.override_key];
+  if (!existingOverridableProp) {
+    return;
+  }
+  const newOverridableProp = originPropFields ? {
+    originValue: propValue.origin_value,
+    originPropFields
+  } : {
+    originValue: propValue.origin_value
+  };
+  const newOverridableProps = {
+    ...overridableProps,
+    props: {
+      ...overridableProps.props,
+      [existingOverridableProp.overrideKey]: {
+        ...existingOverridableProp,
+        ...newOverridableProp
+      }
+    }
+  };
+  (0, import_store42.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: newOverridableProps
+    })
+  );
+}
+
+// src/utils/get-prop-type-for-component-override.ts
+var import_editor_elements10 = require("@elementor/editor-elements");
+var getPropTypeForComponentOverride = (overridableProp) => {
+  if (overridableProp.originPropFields) {
+    return getPropType(overridableProp.originPropFields);
+  }
+  const { elType, widgetType, propKey } = overridableProp;
+  return getPropType({
+    elType,
+    widgetType,
+    propKey
+  });
+};
+function getPropType({ widgetType, propKey }) {
+  const widgetPropsSchema = (0, import_editor_elements10.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
+  return widgetPropsSchema?.[propKey];
+}
+
+// src/components/control-label.tsx
+var React22 = __toESM(require("react"));
+var import_editor_controls2 = require("@elementor/editor-controls");
 var import_ui18 = require("@elementor/ui");
-function OverridePropsGroup({ group, props }) {
-  const [isOpen, setIsOpen] = (0, import_editor_editing_panel2.useStateByElement)(group.id, true);
+var ControlLabel = ({ children, ...props }) => {
+  return /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React22.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React22.createElement(import_editor_controls2.ControlAdornments, null));
+};
+
+// src/components/instance-editing-panel/override-prop-control.tsx
+function OverridePropControl({ overridableProp, overrides }) {
+  return /* @__PURE__ */ React23.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React23.createElement(OverrideControl, { overridableProp, overrides }));
+}
+function OverrideControl({ overridableProp, overrides }) {
+  const componentId = useCurrentComponentId();
+  const { value: instanceValue, setValue: setInstanceValue } = (0, import_editor_controls3.useBoundProp)(componentInstancePropTypeUtil);
+  const controls = useControlsByWidgetType(
+    overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
+  );
+  const propType = getPropTypeForComponentOverride(overridableProp);
+  if (!propType) {
+    return null;
+  }
+  const propTypeSchema = (0, import_editor_editing_panel3.createTopLevelObjectType)({
+    schema: {
+      [overridableProp.overrideKey]: propType
+    }
+  });
+  const componentInstanceId = instanceValue.component_id?.value;
+  if (!componentInstanceId) {
+    throw new Error("Component ID is required");
+  }
+  const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
+  const propValue = matchingOverride ? getPropValue(matchingOverride) : overridableProp.originValue;
+  const value = {
+    [overridableProp.overrideKey]: propValue
+  };
+  const setValue = (newValue) => {
+    const newPropValue = newValue[overridableProp.overrideKey];
+    const newOverrideValue = createOverrideValue(overridableProp.overrideKey, newPropValue, componentInstanceId);
+    let newOverrides = overrides?.map((override) => override === matchingOverride ? newOverrideValue : override) ?? [];
+    if (!matchingOverride) {
+      newOverrides = [...newOverrides, newOverrideValue];
+    }
+    setInstanceValue({
+      ...instanceValue,
+      overrides: componentInstanceOverridesPropTypeUtil.create(newOverrides)
+    });
+    const overridableValue = componentOverridablePropTypeUtil.extract(newOverrideValue);
+    if (overridableValue && componentId) {
+      if (overridableProp.originPropFields) {
+        updateOverridableProp(componentId, overridableValue, overridableProp.originPropFields);
+        return;
+      }
+      const { elType, widgetType, propKey } = overridableProp;
+      updateOverridableProp(componentId, overridableValue, { elType, widgetType, propKey });
+    }
+  };
+  return /* @__PURE__ */ React23.createElement(
+    import_editor_controls3.PropProvider,
+    {
+      propType: propTypeSchema,
+      value,
+      setValue,
+      isDisabled: () => {
+        return false;
+      }
+    },
+    /* @__PURE__ */ React23.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "column", gap: 1, mb: 1.5 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, overridableProp.label), getControl(controls, overridableProp?.originPropFields ?? overridableProp)))
+  );
+}
+function getPropValue(value) {
+  const overridableValue = componentOverridablePropTypeUtil.extract(value);
+  if (overridableValue) {
+    return value;
+  }
+  if (componentInstanceOverridePropTypeUtil.isValid(value)) {
+    return value.value.override_value;
+  }
+  return null;
+}
+function getMatchingOverride(overrides, overrideKey) {
+  return 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;
+}
+function createOverrideValue(overrideKey, overrideValue, componentId) {
+  const overridableValue = componentOverridablePropTypeUtil.extract(overrideValue);
+  if (overridableValue) {
+    const innerOverride = componentInstanceOverridePropTypeUtil.create({
+      override_key: overrideKey,
+      override_value: overridableValue.origin_value,
+      schema_source: {
+        type: "component",
+        id: componentId
+      }
+    });
+    return componentOverridablePropTypeUtil.create({
+      override_key: overridableValue.override_key,
+      origin_value: innerOverride
+    });
+  }
+  return componentInstanceOverridePropTypeUtil.create({
+    override_key: overrideKey,
+    override_value: overrideValue,
+    schema_source: {
+      type: "component",
+      id: componentId
+    }
+  });
+}
+function getControl(controls, originPropFields) {
+  const ControlComponent = import_editor_editing_panel3.controlsRegistry.get(controls[originPropFields.propKey].value.type);
+  const controlProps = controls[originPropFields.propKey].value.props;
+  return /* @__PURE__ */ React23.createElement(ControlComponent, { ...controlProps });
+}
+
+// src/components/instance-editing-panel/override-props-group.tsx
+function OverridePropsGroup({ group, props, overrides }) {
+  const [isOpen, setIsOpen] = (0, import_editor_editing_panel4.useStateByElement)(group.id, true);
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
@@ -2895,8 +3147,8 @@ function OverridePropsGroup({ group, props }) {
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
-    import_ui18.ListItemButton,
+  return /* @__PURE__ */ React24.createElement(import_ui20.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React24.createElement(
+    import_ui20.ListItemButton,
     {
       id: labelId,
       "aria-controls": contentId,
@@ -2905,29 +3157,33 @@ function OverridePropsGroup({ group, props }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React22.createElement(
-      import_ui18.ListItemText,
+    /* @__PURE__ */ React24.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React24.createElement(
+      import_ui20.ListItemText,
       {
         secondary: title,
         secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React22.createElement(import_editor_ui10.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React22.createElement(import_ui18.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((propId) => (
-    // TODO: Render actual controls
-    /* @__PURE__ */ React22.createElement("pre", { key: propId }, JSON.stringify(props[propId], null, 2))
+    /* @__PURE__ */ React24.createElement(import_editor_ui10.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React24.createElement(import_ui20.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React24.createElement(import_ui20.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React24.createElement(
+    OverridePropControl,
+    {
+      key: overrideKey,
+      overridableProp: props[overrideKey],
+      overrides
+    }
   )))));
 }
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
 function InstanceEditingPanel() {
-  const { element } = (0, import_editor_editing_panel3.useElement)();
-  const settings = (0, import_editor_elements8.useElementSetting)(element.id, "component_instance");
-  const componentId = componentInstancePropTypeUtil.extract(settings)?.component_id?.value;
-  const component = componentId ? selectComponent((0, import_store42.__getState)(), componentId) : null;
-  const overridableProps = componentId ? selectOverridableProps((0, import_store42.__getState)(), componentId) : null;
-  const componentInstanceId = (0, import_editor_elements8.useSelectedElement)()?.element?.id ?? null;
+  const settings = useComponentInstanceSettings();
+  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_elements11.useSelectedElement)()?.element?.id ?? null;
   if (!componentId || !overridableProps || !component) {
     return null;
   }
@@ -2937,114 +3193,84 @@ function InstanceEditingPanel() {
     (groupId) => overridableProps.groups.items[groupId] ? overridableProps.groups.items[groupId] : null
   ).filter(Boolean);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React23.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React23.createElement(import_editor_panels3.PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React23.createElement(import_ui19.Tooltip, { title: panelTitle }, /* @__PURE__ */ React23.createElement(import_ui19.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React23.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React23.createElement(import_editor_panels3.PanelBody, null, isEmpty ? /* @__PURE__ */ React23.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React23.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React25.createElement(import_ui21.Stack, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React25.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React25.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React25.createElement(import_editor_panels3.PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React25.createElement(import_ui21.Tooltip, { title: panelTitle }, /* @__PURE__ */ React25.createElement(import_ui21.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React25.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React25.createElement(import_editor_panels3.PanelBody, null, /* @__PURE__ */ React25.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React25.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React25.createElement(import_ui21.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React25.createElement(
+    OverridePropsGroup,
+    {
+      key: group.id,
+      group,
+      props: overridableProps.props,
+      overrides
+    }
+  ))))));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
-var React25 = __toESM(require("react"));
-var import_editor_controls2 = require("@elementor/editor-controls");
-var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
-
-// src/prop-types/component-overridable-prop-type.ts
-var import_editor_props4 = require("@elementor/editor-props");
-var import_schema5 = require("@elementor/schema");
-var componentOverridablePropTypeUtil = (0, import_editor_props4.createPropUtils)(
-  "overridable",
-  import_schema5.z.object({
-    override_key: import_schema5.z.string(),
-    origin_value: import_schema5.z.object({
-      $$type: import_schema5.z.string(),
-      value: import_schema5.z.unknown()
-    }).nullable()
-  })
-);
+var React27 = __toESM(require("react"));
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 
 // src/provider/overridable-prop-context.tsx
-var React24 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var import_react14 = require("react");
 var OverridablePropContext = (0, import_react14.createContext)(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React26.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => (0, import_react14.useContext)(OverridablePropContext)?.value;
 
-// src/store/actions/update-overridable-prop-origin-value.ts
-var import_store44 = require("@elementor/store");
-function updateOverridablePropOriginValue(componentId, propValue) {
-  const overridableProps = selectOverridableProps((0, import_store44.__getState)(), componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const existingOverridableProp = overridableProps.props[propValue.override_key];
-  if (!existingOverridableProp) {
-    return;
-  }
-  const newOverridableProps = {
-    ...overridableProps,
-    props: {
-      ...overridableProps.props,
-      [existingOverridableProp.overrideKey]: {
-        ...existingOverridableProp,
-        originValue: propValue.origin_value
-      }
-    }
-  };
-  (0, import_store44.__dispatch)(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: newOverridableProps
-    })
-  );
-}
-
 // src/components/overridable-props/overridable-prop-control.tsx
 function OverridablePropControl({
   OriginalControl,
   ...props
 }) {
-  const { elementType } = (0, import_editor_editing_panel4.useElement)();
-  const { value, bind, setValue, placeholder, ...propContext } = (0, import_editor_controls2.useBoundProp)(componentOverridablePropTypeUtil);
+  const { elementType } = (0, import_editor_editing_panel6.useElement)();
+  const { value, bind, setValue, placeholder, ...propContext } = (0, import_editor_controls5.useBoundProp)(componentOverridablePropTypeUtil);
   const componentId = useCurrentComponentId();
+  const overridableProps = useOverridableProps(componentId);
   if (!componentId) {
     return null;
   }
   if (!value?.override_key) {
     throw new Error("Override key is required");
   }
+  const isComponentInstance2 = elementType.key === "e-component";
   const setOverridableValue = (newValue) => {
-    const propValue = {
+    const propValue2 = {
       ...value,
       origin_value: newValue[bind]
     };
-    setValue(propValue);
-    updateOverridablePropOriginValue(componentId, propValue);
+    setValue(propValue2);
+    updateOverridableProp(componentId, propValue2);
   };
-  const propType = (0, import_editor_editing_panel4.createTopLevelObjectType)({
+  const defaultPropType = elementType.propsSchema[bind];
+  const propType = (0, import_editor_editing_panel6.createTopLevelObjectType)({
     schema: {
-      [bind]: elementType.propsSchema[bind]
+      [bind]: isComponentInstance2 && overridableProps ? getPropTypeForComponentOverride(overridableProps.props[value.override_key]) ?? defaultPropType : defaultPropType
     }
   });
+  const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React25.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React25.createElement(
-    import_editor_controls2.PropProvider,
+  return /* @__PURE__ */ React27.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React27.createElement(
+    import_editor_controls5.PropProvider,
     {
       ...propContext,
       propType,
       setValue: setOverridableValue,
-      value: { [bind]: value.origin_value },
+      value: {
+        [bind]: propValue
+      },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React25.createElement(import_editor_controls2.PropKeyProvider, { bind }, /* @__PURE__ */ React25.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React25.createElement(OriginalControl, { ...props })))
+    /* @__PURE__ */ React27.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React27.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React27.createElement(OriginalControl, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-var React27 = __toESM(require("react"));
-var import_editor_controls3 = require("@elementor/editor-controls");
-var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
-var import_editor_elements9 = require("@elementor/editor-elements");
-var import_store51 = require("@elementor/store");
-var import_ui21 = require("@elementor/ui");
+var React29 = __toESM(require("react"));
+var import_editor_controls6 = require("@elementor/editor-controls");
+var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
+var import_editor_elements12 = require("@elementor/editor-elements");
+var import_ui23 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
@@ -3059,7 +3285,8 @@ function setOverridableProp({
   propKey,
   elType,
   widgetType,
-  originValue
+  originValue,
+  originPropFields
 }) {
   const overridableProps = selectOverridableProps((0, import_store47.__getState)(), componentId);
   if (!overridableProps) {
@@ -3081,7 +3308,8 @@ function setOverridableProp({
     widgetType,
     elType,
     originValue,
-    groupId: currentGroupId
+    groupId: currentGroupId,
+    originPropFields
   };
   const stateAfterRemovingDuplicates = removePropsFromState(
     { ...overridableProps, groups: groupsAfterResolve },
@@ -3110,13 +3338,13 @@ function setOverridableProp({
 }
 
 // src/components/overridable-props/indicator.tsx
-var React26 = __toESM(require("react"));
+var React28 = __toESM(require("react"));
 var import_react15 = require("react");
 var import_icons15 = require("@elementor/icons");
-var import_ui20 = require("@elementor/ui");
+var import_ui22 = require("@elementor/ui");
 var import_i18n22 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
-var IconContainer = (0, import_ui20.styled)(import_ui20.Box)`
+var IconContainer = (0, import_ui22.styled)(import_ui22.Box)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -3133,7 +3361,7 @@ var IconContainer = (0, import_ui20.styled)(import_ui20.Box)`
 		stroke-width: 2px;
 	}
 `;
-var Content = (0, import_ui20.styled)(import_ui20.Box)`
+var Content = (0, import_ui22.styled)(import_ui22.Box)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -3170,13 +3398,13 @@ var Content = (0, import_ui20.styled)(import_ui20.Box)`
 		}
 	}
 `;
-var Indicator = (0, import_react15.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React26.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React26.createElement(
+var Indicator = (0, import_react15.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React28.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React28.createElement(
   IconContainer,
   {
     className: "icon",
     "aria-label": isOverridable ? (0, import_i18n22.__)("Overridable property", "elementor") : (0, import_i18n22.__)("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React26.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React26.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
+  isOverridable ? /* @__PURE__ */ React28.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React28.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
@@ -3195,33 +3423,35 @@ function getOverridableProp({
 // src/components/overridable-props/overridable-prop-indicator.tsx
 var FORBIDDEN_KEYS = ["_cssid", "attributes"];
 function OverridablePropIndicator() {
-  const { bind } = (0, import_editor_controls3.useBoundProp)();
+  const { bind } = (0, import_editor_controls6.useBoundProp)();
   const componentId = useCurrentComponentId();
-  if (!isPropAllowed(bind) || !componentId) {
+  const overridableProps = useOverridableProps(componentId);
+  if (!isPropAllowed(bind) || !componentId || !overridableProps) {
     return null;
   }
-  const overridableProps = selectOverridableProps((0, import_store51.__getState)(), componentId);
-  return /* @__PURE__ */ React27.createElement(Content2, { componentId, overridableProps });
+  return /* @__PURE__ */ React29.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
     element: { id: elementId },
     elementType
-  } = (0, import_editor_editing_panel5.useElement)();
-  const { value, bind, propType } = (0, import_editor_controls3.useBoundProp)();
+  } = (0, import_editor_editing_panel7.useElement)();
+  const { value, bind, propType } = (0, import_editor_controls6.useBoundProp)();
   const contextOverridableValue = useOverridablePropValue();
-  const { value: boundPropOverridableValue, setValue: setOverridableValue } = (0, import_editor_controls3.useBoundProp)(
+  const { value: boundPropOverridableValue, setValue: setOverridableValue } = (0, import_editor_controls6.useBoundProp)(
     componentOverridablePropTypeUtil
   );
   const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
-  const popupState = (0, import_ui21.usePopupState)({
+  const popupState = (0, import_ui23.usePopupState)({
     variant: "popover"
   });
-  const triggerProps = (0, import_ui21.bindTrigger)(popupState);
-  const popoverProps = (0, import_ui21.bindPopover)(popupState);
-  const { elType } = (0, import_editor_elements9.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
+  const triggerProps = (0, import_ui23.bindTrigger)(popupState);
+  const popoverProps = (0, import_ui23.bindPopover)(popupState);
+  const { elType } = (0, import_editor_elements12.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
   const handleSubmit = ({ label, group }) => {
-    const originValue = !overridableValue ? value ?? propType.default : overridableValue?.origin_value ?? {};
+    const propTypeDefault = propType.default ?? {};
+    const originValue = (!overridableValue ? value : overridableValue?.origin_value) ?? propTypeDefault;
+    const matchingOverridableProp = overridableValue ? overridableProps?.props?.[overridableValue.override_key] : void 0;
     const overridablePropConfig = setOverridableProp({
       componentId,
       overrideKey: overridableValue?.override_key ?? null,
@@ -3231,7 +3461,8 @@ function Content2({ componentId, overridableProps }) {
       propKey: bind,
       elType: elType ?? "widget",
       widgetType: elementType.key,
-      originValue
+      originValue,
+      originPropFields: matchingOverridableProp?.originPropFields
     });
     if (!overridableValue && overridablePropConfig) {
       setOverridableValue({
@@ -3242,8 +3473,8 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(import_ui21.Tooltip, { placement: "top", title: (0, import_i18n23.__)("Override Property", "elementor") }, /* @__PURE__ */ React27.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React27.createElement(
-    import_ui21.Popover,
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { placement: "top", title: (0, import_i18n23.__)("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
+    import_ui23.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: {
@@ -3259,7 +3490,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React29.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -3277,7 +3508,7 @@ function isPropAllowed(bind) {
 }
 
 // src/hooks/regenerate-override-keys.ts
-var import_editor_elements10 = require("@elementor/editor-elements");
+var import_editor_elements13 = require("@elementor/editor-elements");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var import_utils8 = require("@elementor/utils");
 function initRegenerateOverrideKeys() {
@@ -3298,7 +3529,7 @@ function regenerateOverrideKeysForContainers(result) {
   });
 }
 function regenerateOverrideKeysRecursive(elementId) {
-  const container = (0, import_editor_elements10.getContainer)(elementId);
+  const container = (0, import_editor_elements13.getContainer)(elementId);
   if (!container) {
     return;
   }
@@ -3340,7 +3571,7 @@ function regenerateOverrideKeys(element) {
       }
     }
   };
-  (0, import_editor_elements10.updateElementSettings)({
+  (0, import_editor_elements13.updateElementSettings)({
     id: element.id,
     props: { component_instance: newComponentInstance },
     withHistory: false
@@ -3364,7 +3595,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_elements11 = require("@elementor/editor-elements");
+var import_editor_elements14 = 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");
@@ -3399,7 +3630,7 @@ var ERROR_MESSAGES2 = {
 var handleSaveAsComponent = async (params) => {
   const { element_id: elementId, component_name: componentName, overridable_props: overridablePropsInput } = params;
   const validElementTypes = getValidElementTypes();
-  const container = (0, import_editor_elements11.getContainer)(elementId);
+  const container = (0, import_editor_elements14.getContainer)(elementId);
   if (!container) {
     throw new Error(ERROR_MESSAGES2.ELEMENT_NOT_FOUND);
   }
@@ -3446,7 +3677,7 @@ function enrichOverridableProps(input, rootElement) {
     }
     const elType = element.elType;
     const widgetType = element.widgetType || element.elType;
-    const elementType = (0, import_editor_elements11.getElementType)(widgetType);
+    const elementType = (0, import_editor_elements14.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}".`
@@ -3520,7 +3751,7 @@ function generateLabel(propKey) {
   return `${uniqueId} - ${propKey}`;
 }
 function getValidElementTypes() {
-  const types = (0, import_editor_elements11.getWidgetsCache)();
+  const types = (0, import_editor_elements14.getWidgetsCache)();
   if (!types) {
     return [];
   }
@@ -3693,28 +3924,28 @@ function initMcp() {
 
 // src/populate-store.ts
 var import_react16 = require("react");
-var import_store53 = require("@elementor/store");
+var import_store52 = require("@elementor/store");
 function PopulateStore() {
   (0, import_react16.useEffect)(() => {
-    (0, import_store53.__dispatch)(loadComponents());
+    (0, import_store52.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store54 = require("@elementor/store");
+var import_store53 = require("@elementor/store");
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  (0, import_store54.__dispatch)(slice.actions.removeStyles({ id: id2 }));
+  (0, import_store53.__dispatch)(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store56 = require("@elementor/store");
+var import_store55 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store56.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store55.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -3722,29 +3953,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store56.__getState)());
+      return selectFlatStyles((0, import_store55.__getState)());
     },
     get: (id2) => {
-      return selectFlatStyles((0, import_store56.__getState)()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles((0, import_store55.__getState)()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
-var import_editor_elements12 = require("@elementor/editor-elements");
-var import_store58 = require("@elementor/store");
+var import_editor_elements15 = require("@elementor/editor-elements");
+var import_store57 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store58.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store57.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store58.__dispatch)(
+    (0, import_store57.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -3754,7 +3985,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store58.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store57.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -3789,14 +4020,17 @@ function updateComponentInstances(elements, uidToComponentId) {
 function shouldUpdateElement(element, uidToComponentId) {
   if (element.widgetType === "e-component") {
     const currentComponentId = element.settings?.component_instance?.value?.component_id.value;
-    if (currentComponentId && uidToComponentId.has(currentComponentId)) {
-      return { shouldUpdate: true, newComponentId: uidToComponentId.get(currentComponentId) };
+    if (currentComponentId && uidToComponentId.has(currentComponentId.toString())) {
+      return {
+        shouldUpdate: true,
+        newComponentId: uidToComponentId.get(currentComponentId.toString())
+      };
     }
   }
   return { shouldUpdate: false, newComponentId: null };
 }
 function updateElementComponentId(elementId, componentId) {
-  (0, import_editor_elements12.updateElementSettings)({
+  (0, import_editor_elements15.updateElementSettings)({
     id: elementId,
     props: {
       component_instance: {
@@ -3811,7 +4045,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-var import_store60 = require("@elementor/store");
+var import_store59 = require("@elementor/store");
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -3819,7 +4053,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps((0, import_store60.__getState)(), currentDocument.id);
+  const overridableProps = selectOverridableProps((0, import_store59.__getState)(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -3827,7 +4061,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_store62 = require("@elementor/store");
+var import_store61 = require("@elementor/store");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -3840,7 +4074,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents((0, import_store62.__getState)());
+    const archivedComponents = selectArchivedComponents((0, import_store61.__getState)());
     if (!archivedComponents.length) {
       return;
     }
@@ -3890,7 +4124,7 @@ var beforeSave = ({ container, status }) => {
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store64.__registerSlice)(slice);
+  (0, import_store63.__registerSlice)(slice);
   (0, import_editor_panels4.__registerPanel)(panel);
   (0, import_editor_canvas8.registerElementType)(
     COMPONENT_WIDGET_TYPE,
@@ -3922,7 +4156,7 @@ function init() {
     id: "edit-component",
     component: EditComponent
   });
-  (0, import_editor_editing_panel6.injectIntoPanelHeaderTop)({
+  (0, import_editor_editing_panel8.injectIntoPanelHeaderTop)({
     id: "component-panel-header",
     component: ComponentPanelHeader
   });
@@ -3933,17 +4167,17 @@ function init() {
     }
     await loadComponentsAssets(config?.elements ?? []);
   });
-  (0, import_editor_editing_panel6.registerFieldIndicator)({
-    fieldType: import_editor_editing_panel6.FIELD_TYPE.SETTINGS,
+  (0, import_editor_editing_panel8.registerFieldIndicator)({
+    fieldType: import_editor_editing_panel8.FIELD_TYPE.SETTINGS,
     id: "component-overridable-prop",
     priority: 1,
     indicator: OverridablePropIndicator
   });
-  (0, import_editor_editing_panel6.registerControlReplacement)({
+  (0, import_editor_editing_panel8.registerControlReplacement)({
     component: OverridablePropControl,
     condition: ({ value }) => componentOverridablePropTypeUtil.isValid(value)
   });
-  (0, import_editor_editing_panel6.registerEditingPanelReplacement)({
+  (0, import_editor_editing_panel8.registerEditingPanelReplacement)({
     id: "component-instance-edit-panel",
     condition: (_, elementType) => elementType.key === "e-component",
     component: InstanceEditingPanel