@elementor/editor-components 4.1.0-748 → 4.1.0-750

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import * as _elementor_editor_elements from '@elementor/editor-elements';
 import { V1ElementData, V1Element, V1ElementModelProps } from '@elementor/editor-elements';
 import { HttpResponse } from '@elementor/http-client';
 import * as _elementor_editor_props from '@elementor/editor-props';
-import { PropValue } from '@elementor/editor-props';
+import { PropValue, AnyTransformable } from '@elementor/editor-props';
 import { StyleDefinition } from '@elementor/editor-styles';
 import * as React from 'react';
 import { ElementType, PropsWithChildren } from 'react';
@@ -1409,7 +1409,7 @@ declare const getPropTypeForComponentOverride: (overridableProp: OverridableProp
 
 declare function isComponentInstance(elementModel: Partial<V1ElementModelProps>): boolean;
 
-declare const resolveOverridePropValue: (originalPropValue: ComponentInstanceOverride | PropValue) => PropValue;
+declare const resolveOverridePropValue: (originalPropValue: ComponentInstanceOverride | PropValue) => AnyTransformable | null;
 
 declare function switchToComponent(componentId: number, componentInstanceId?: string | null, element?: HTMLElement | null): Promise<void>;
 

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as _elementor_editor_elements from '@elementor/editor-elements';
 import { V1ElementData, V1Element, V1ElementModelProps } from '@elementor/editor-elements';
 import { HttpResponse } from '@elementor/http-client';
 import * as _elementor_editor_props from '@elementor/editor-props';
-import { PropValue } from '@elementor/editor-props';
+import { PropValue, AnyTransformable } from '@elementor/editor-props';
 import { StyleDefinition } from '@elementor/editor-styles';
 import * as React from 'react';
 import { ElementType, PropsWithChildren } from 'react';
@@ -1409,7 +1409,7 @@ declare const getPropTypeForComponentOverride: (overridableProp: OverridableProp
 
 declare function isComponentInstance(elementModel: Partial<V1ElementModelProps>): boolean;
 
-declare const resolveOverridePropValue: (originalPropValue: ComponentInstanceOverride | PropValue) => PropValue;
+declare const resolveOverridePropValue: (originalPropValue: ComponentInstanceOverride | PropValue) => AnyTransformable | null;
 
 declare function switchToComponent(componentId: number, componentInstanceId?: string | null, element?: HTMLElement | null): Promise<void>;
 

package/dist/index.js

@@ -90,7 +90,7 @@ module.exports = __toCommonJS(index_exports);
 var import_editor = require("@elementor/editor");
 var import_editor_canvas5 = require("@elementor/editor-canvas");
 var import_editor_documents6 = require("@elementor/editor-documents");
-var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
@@ -1101,9 +1101,16 @@ var ComponentInstanceContext = (0, import_react4.createContext)(null);
 function ComponentInstanceProvider({ children, ...props }) {
   return /* @__PURE__ */ React13.createElement(ComponentInstanceContext.Provider, { value: props }, children);
 }
-var useComponentId = () => (0, import_react4.useContext)(ComponentInstanceContext)?.componentId;
-var useComponentInstanceOverrides = () => (0, import_react4.useContext)(ComponentInstanceContext)?.overrides;
-var useComponentOverridableProps = () => (0, import_react4.useContext)(ComponentInstanceContext)?.overridableProps;
+function useComponentInstanceContext() {
+  const context = (0, import_react4.useContext)(ComponentInstanceContext);
+  if (!context) {
+    throw new Error("useComponentInstanceContext must be used within a ComponentInstanceProvider");
+  }
+  return context;
+}
+var useComponentId = () => useComponentInstanceContext().componentId;
+var useComponentInstanceOverrides = () => useComponentInstanceContext().overrides;
+var useComponentOverridableProps = () => useComponentInstanceContext().overridableProps;
 
 // src/components/instance-editing-panel/detach-action.tsx
 var React15 = __toESM(require("react"));
@@ -1592,23 +1599,21 @@ var EmptyState2 = ({ onEditComponent }) => {
 // src/components/instance-editing-panel/instance-panel-body.tsx
 var React21 = __toESM(require("react"));
 var import_editor_controls3 = require("@elementor/editor-controls");
-var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_ui14 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-props-group.tsx
 var React20 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_react9 = require("react");
+var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_ui13 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 var React19 = __toESM(require("react"));
-var import_react7 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_editor_elements7 = require("@elementor/editor-elements");
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 var import_ui12 = require("@elementor/ui");
 
 // src/hooks/use-controls-by-widget-type.ts
@@ -1840,6 +1845,128 @@ function getMatchingOverride(overrides, overrideKey) {
   }) ?? null;
 }
 
+// src/components/control-label.tsx
+var React18 = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_ui11 = require("@elementor/ui");
+var ControlLabel = ({ children, ...props }) => {
+  return /* @__PURE__ */ React18.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React18.createElement(import_editor_controls.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React18.createElement(import_editor_controls.ControlAdornments, null));
+};
+
+// src/components/errors.ts
+var import_utils3 = require("@elementor/utils");
+var OverrideControlInnerElementNotFoundError = (0, import_utils3.createError)({
+  code: "override_control_inner_element_not_found",
+  message: `Component inner element not found for override control. The element may have been deleted without updating the overridable props, or the component has not finished rendering yet.`
+});
+var OverrideControlPropTypeNotFoundError = (0, import_utils3.createError)({
+  code: "override_control_prop_type_not_found",
+  message: "Prop type not found for override control."
+});
+
+// src/components/instance-editing-panel/utils/correct-exposed-empty-override.ts
+function correctExposedEmptyOverride(newPropValue, matchingOverride) {
+  const newOverridableValue = componentOverridablePropTypeUtil.extract(newPropValue);
+  const isExposingEmptyOverride = newOverridableValue && matchingOverride === null;
+  if (!isExposingEmptyOverride) {
+    return newPropValue;
+  }
+  return componentOverridablePropTypeUtil.create({
+    override_key: newOverridableValue.override_key,
+    origin_value: null
+  });
+}
+
+// src/components/instance-editing-panel/utils/resolve-element-settings.ts
+function applyOverridesToSettings(elementSettings, overrides) {
+  const result = {};
+  for (const [propKey, propValue] of Object.entries(elementSettings)) {
+    const overridable = componentOverridablePropTypeUtil.extract(propValue);
+    if (!overridable) {
+      result[propKey] = propValue;
+      continue;
+    }
+    const override = overrides[overridable.override_key];
+    if (!override) {
+      result[propKey] = propValue;
+      continue;
+    }
+    if (override.outermostKey && override.outermostKey !== overridable.override_key) {
+      const originValue = overridable.origin_value;
+      result[propKey] = componentOverridablePropTypeUtil.create({
+        override_key: override.outermostKey,
+        origin_value: override.value ?? originValue
+      });
+    } else {
+      result[propKey] = override.value ?? propValue;
+    }
+  }
+  return result;
+}
+function unwrapOverridableSettings(elementSettings) {
+  const result = {};
+  for (const [propKey, propValue] of Object.entries(elementSettings)) {
+    const overridable = componentOverridablePropTypeUtil.extract(propValue);
+    if (!overridable) {
+      result[propKey] = propValue;
+      continue;
+    }
+    result[propKey] = overridable.origin_value;
+  }
+  return result;
+}
+
+// src/components/instance-editing-panel/utils/use-override-dependencies.ts
+var import_react7 = require("react");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+function useOverrideControlDependencies({
+  existingOverride,
+  resolvedElementSettings,
+  elementId,
+  elementType,
+  propKey
+}) {
+  return (0, import_react7.useMemo)(() => {
+    const { isDisabled, isHidden } = (0, import_editor_editing_panel.extractDependencyEffect)(
+      propKey,
+      elementType.propsSchema,
+      resolvedElementSettings
+    );
+    const existingOverrideValue = existingOverride ? resolveOverridePropValue(existingOverride) : null;
+    const settingsForDepsNewValuesCalculation = { ...resolvedElementSettings, [propKey]: existingOverrideValue };
+    const resolvedSettingsWithDefaults = (0, import_editor_editing_panel.getElementSettingsWithDefaults)(
+      elementType.propsSchema,
+      settingsForDepsNewValuesCalculation
+    );
+    const dependents = (0, import_editor_editing_panel.extractOrderedDependencies)(elementType.dependenciesPerTargetMapping ?? {});
+    const settingsWithDepsNewValues = (0, import_editor_editing_panel.getUpdatedValues)(
+      settingsForDepsNewValuesCalculation,
+      dependents,
+      elementType.propsSchema,
+      resolvedSettingsWithDefaults,
+      elementId
+    );
+    const overrideValue = settingsWithDepsNewValues[propKey];
+    return {
+      overrideValue,
+      isDisabled,
+      isHidden
+    };
+  }, [
+    existingOverride,
+    resolvedElementSettings,
+    propKey,
+    elementType.propsSchema,
+    elementType.dependenciesPerTargetMapping,
+    elementId
+  ]);
+}
+
+// src/components/instance-editing-panel/utils/use-resolved-inner-element.ts
+var import_react8 = require("react");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_elements7 = require("@elementor/editor-elements");
+
 // src/utils/get-container-by-origin-id.ts
 var import_editor_elements6 = require("@elementor/editor-elements");
 function getContainerByOriginId(originElementId, instanceElementId) {
@@ -1974,109 +2101,18 @@ function findOverrideByOuterKey(overrides, outerKey) {
   return override;
 }
 
-// src/components/control-label.tsx
-var React18 = __toESM(require("react"));
-var import_editor_controls = require("@elementor/editor-controls");
-var import_ui11 = require("@elementor/ui");
-var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React18.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React18.createElement(import_editor_controls.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React18.createElement(import_editor_controls.ControlAdornments, null));
-};
-
-// src/components/errors.ts
-var import_utils3 = require("@elementor/utils");
-var OverrideControlInnerElementNotFoundError = (0, import_utils3.createError)({
-  code: "override_control_inner_element_not_found",
-  message: `Component inner element not found for override control. The element may have been deleted without updating the overridable props, or the component has not finished rendering yet.`
-});
-
-// src/components/instance-editing-panel/utils/correct-exposed-empty-override.ts
-function correctExposedEmptyOverride(newPropValue, matchingOverride) {
-  const newOverridableValue = componentOverridablePropTypeUtil.extract(newPropValue);
-  const isExposingEmptyOverride = newOverridableValue && matchingOverride === null;
-  if (!isExposingEmptyOverride) {
-    return newPropValue;
-  }
-  return componentOverridablePropTypeUtil.create({
-    override_key: newOverridableValue.override_key,
-    origin_value: null
-  });
-}
-
-// src/components/instance-editing-panel/utils/resolve-element-settings.ts
-function applyOverridesToSettings(elementSettings, overrides) {
-  const result = {};
-  for (const [propKey, propValue] of Object.entries(elementSettings)) {
-    const overridable = componentOverridablePropTypeUtil.extract(propValue);
-    if (!overridable) {
-      result[propKey] = propValue;
-      continue;
-    }
-    const override = overrides[overridable.override_key];
-    if (!override) {
-      result[propKey] = propValue;
-      continue;
-    }
-    if (override.outermostKey && override.outermostKey !== overridable.override_key) {
-      const originValue = overridable.origin_value;
-      result[propKey] = componentOverridablePropTypeUtil.create({
-        override_key: override.outermostKey,
-        origin_value: override.value ?? originValue
-      });
-    } else {
-      result[propKey] = override.value ?? propValue;
-    }
-  }
-  return result;
-}
-function unwrapOverridableSettings(elementSettings) {
-  const result = {};
-  for (const [propKey, propValue] of Object.entries(elementSettings)) {
-    const overridable = componentOverridablePropTypeUtil.extract(propValue);
-    if (!overridable) {
-      result[propKey] = propValue;
-      continue;
-    }
-    result[propKey] = overridable.origin_value;
-  }
-  return result;
-}
-
-// src/components/instance-editing-panel/override-prop-control.tsx
-function OverridePropControl({ overrideKey }) {
-  const overridableProps = useComponentOverridableProps();
-  const overridableProp = overridableProps?.props[overrideKey];
-  if (!overridableProp) {
-    return null;
-  }
-  return /* @__PURE__ */ React19.createElement(import_editor_editing_panel.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(OverrideControl, { overridableProp }));
-}
-function OverrideControl({ overridableProp }) {
-  const componentInstanceElement = (0, import_editor_editing_panel.useElement)();
-  const { value: instanceValue, setValue: setInstanceValue } = (0, import_editor_controls2.useBoundProp)(componentInstancePropTypeUtil);
-  const wrappingComponentId = useCurrentComponentId();
+// src/components/instance-editing-panel/utils/use-resolved-inner-element.ts
+function useResolvedInnerElement(overridableProp) {
+  const componentInstanceElement = (0, import_editor_editing_panel2.useElement)();
   const componentId = useComponentId();
-  const overridableProps = useComponentOverridableProps();
   const overrides = useComponentInstanceOverrides();
-  const controls = useControlsByWidgetType(
-    overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
-  );
-  const controlReplacements = (0, import_editor_controls2.getControlReplacements)();
-  const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
-  if (!componentId) {
-    throw new Error("Component ID is required");
-  }
-  if (!overridableProps) {
-    throw new Error("Component has no overridable props");
-  }
-  const {
-    elementId: originElementId,
-    widgetType,
-    elType,
-    propKey
-  } = overridableProp.originPropFields ?? overridableProp;
+  const { elementId: originElementId, widgetType, elType } = overridableProp.originPropFields ?? overridableProp;
   const type = elType === "widget" ? widgetType : elType;
   const elementType = (0, import_editor_elements7.getElementType)(type);
-  const { elementId, overridesMapping } = (0, import_react7.useMemo)(() => {
+  if (!elementType) {
+    throw new Error(`Element type not found for ${type}`);
+  }
+  const { elementId, overridesMapping } = (0, import_react8.useMemo)(() => {
     const overridesChainResult = resolveOverridesChain({
       outerOverridableProp: overridableProp,
       outerInstanceId: componentInstanceElement.element.id
@@ -2091,27 +2127,90 @@ function OverrideControl({ overridableProp }) {
       overridesMapping: overridesChainResult.overridesMapping
     };
   }, [overridableProp, componentInstanceElement.element.id, componentId, originElementId]);
-  const settingsWithInnerOverrides = (0, import_react7.useMemo)(() => {
+  const settingsWithInnerOverrides = (0, import_react8.useMemo)(() => {
     const settings = (0, import_editor_elements7.getElementSettings)(
       elementId,
       Object.keys(elementType?.propsSchema ?? {})
     );
     return applyOverridesToSettings(settings, overridesMapping);
   }, [elementId, elementType?.propsSchema, overridesMapping]);
-  const resolvedElementSettings = (0, import_react7.useMemo)(() => {
+  const resolvedElementSettings = (0, import_react8.useMemo)(() => {
     const withAllOverrides = applyOverridesToSettings(
       settingsWithInnerOverrides,
       formatOverridesToApply(overrides)
     );
     return unwrapOverridableSettings(withAllOverrides);
   }, [settingsWithInnerOverrides, overrides]);
+  return {
+    elementId,
+    elementType,
+    resolvedOriginValues: settingsWithInnerOverrides,
+    resolvedElementSettings
+  };
+}
+function formatOverridesToApply(overrides) {
+  if (!overrides) {
+    return {};
+  }
+  const result = {};
+  for (const item of overrides) {
+    const overridable = componentOverridablePropTypeUtil.extract(item);
+    let override = item;
+    if (overridable) {
+      override = overridable.origin_value;
+    }
+    const extractedOverride = componentInstanceOverridePropTypeUtil.extract(override);
+    if (!extractedOverride) {
+      continue;
+    }
+    result[extractedOverride.override_key] = {
+      value: extractedOverride.override_value
+    };
+  }
+  return result;
+}
+
+// src/components/instance-editing-panel/override-prop-control.tsx
+function OverridePropControl({ overrideKey }) {
+  const overridableProps = useComponentOverridableProps();
+  const overridableProp = overridableProps.props[overrideKey];
+  if (!overridableProp) {
+    return null;
+  }
+  return /* @__PURE__ */ React19.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(OverrideControl, { overridableProp }));
+}
+function OverrideControl({ overridableProp }) {
+  const componentInstanceElement = (0, import_editor_editing_panel3.useElement)();
+  const { value: instanceValue, setValue: setInstanceValue } = (0, import_editor_controls2.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_controls2.getControlReplacements)();
+  const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
+  const { propKey } = overridableProp.originPropFields ?? overridableProp;
   const propType = getPropTypeForComponentOverride(overridableProp);
-  if (!propType || !elementType) {
+  if (!propType) {
+    throw new OverrideControlPropTypeNotFoundError({ context: { overridableProp } });
+  }
+  const { elementId, elementType, resolvedElementSettings, resolvedOriginValues } = useResolvedInnerElement(overridableProp);
+  const { overrideValue, isDisabled, isHidden } = useOverrideControlDependencies({
+    existingOverride: matchingOverride,
+    resolvedElementSettings,
+    elementType,
+    elementId,
+    propKey
+  });
+  if (isHidden) {
     return null;
   }
   const { propValue, placeholderValue } = resolveValueAndPlaceholder(
     matchingOverride,
-    settingsWithInnerOverrides,
+    overrideValue,
+    resolvedOriginValues,
     propKey
   );
   const value = {
@@ -2120,14 +2219,15 @@ function OverrideControl({ overridableProp }) {
   const placeholder = {
     [overridableProp.overrideKey]: placeholderValue
   };
+  const { control, controlProps, layout } = getControlParams(
+    controls,
+    overridableProp.originPropFields ?? overridableProp,
+    overridableProp.label
+  );
+  const propTypeSchema = (0, import_editor_editing_panel3.createTopLevelObjectType)({
+    schema: { [overridableProp.overrideKey]: propType }
+  });
   const setValue = (newValue) => {
-    if (!overridableProps) {
-      setInstanceValue({
-        ...instanceValue,
-        overrides: void 0
-      });
-      return;
-    }
     let newPropValue = getTempNewValueForDynamicProp(
       propType,
       propValue,
@@ -2163,16 +2263,6 @@ function OverrideControl({ overridableProp }) {
       updateOverridableProp(wrappingComponentId, overridableValue, originPropFields);
     }
   };
-  const { control, controlProps, layout } = getControlParams(
-    controls,
-    overridableProp?.originPropFields ?? overridableProp,
-    overridableProp.label
-  );
-  const propTypeSchema = (0, import_editor_editing_panel.createTopLevelObjectType)({
-    schema: {
-      [overridableProp.overrideKey]: propType
-    }
-  });
   return /* @__PURE__ */ React19.createElement(
     OverridablePropProvider,
     {
@@ -2180,40 +2270,38 @@ function OverrideControl({ overridableProp }) {
       componentInstanceElement
     },
     /* @__PURE__ */ React19.createElement(
-      import_editor_editing_panel.ElementProvider,
+      import_editor_editing_panel3.ElementProvider,
       {
-        element: { id: elementId, type },
+        element: { id: elementId, type: elementType.key },
         elementType,
         settings: resolvedElementSettings
       },
-      /* @__PURE__ */ React19.createElement(import_editor_editing_panel.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React19.createElement(
         import_editor_controls2.PropProvider,
         {
           propType: propTypeSchema,
           value,
           setValue,
           placeholder,
-          isDisabled: () => {
-            return false;
-          }
+          isDisabled
         },
-        /* @__PURE__ */ React19.createElement(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(import_ui12.Box, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_editor_editing_panel.ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps })))))
-      ))
+        /* @__PURE__ */ React19.createElement(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(import_ui12.Box, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_editor_editing_panel3.ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps })))))
+      )
     )
   );
 }
-function resolveValueAndPlaceholder(matchingOverride, settingsWithInnerOverrides, propKey) {
-  const overrideValue = matchingOverride ? resolveOverridePropValue(matchingOverride) : null;
-  const placeholderSettings = unwrapOverridableSettings(settingsWithInnerOverrides);
+function resolveValueAndPlaceholder(matchingOverride, overrideValue, resolvedOriginValues, propKey) {
+  const placeholderSettings = unwrapOverridableSettings(resolvedOriginValues);
   const inheritedValue = placeholderSettings[propKey] ?? null;
-  const isInheritedDynamic = (0, import_editor_editing_panel.isDynamicPropValue)(inheritedValue);
-  const propValue = isInheritedDynamic && !matchingOverride ? inheritedValue : overrideValue;
+  const isInheritedDynamic = (0, import_editor_editing_panel3.isDynamicPropValue)(inheritedValue);
+  const shouldUseInheritedAsValue = isInheritedDynamic && !matchingOverride;
+  const propValue = shouldUseInheritedAsValue ? inheritedValue : overrideValue;
   const placeholderValue = matchingOverride || isInheritedDynamic ? null : inheritedValue;
   return { propValue, placeholderValue };
 }
 function getTempNewValueForDynamicProp(propType, propValue, newPropValue) {
   const isRemovingOverride = newPropValue === null;
-  if (isRemovingOverride && (0, import_editor_editing_panel.isDynamicPropValue)(propValue)) {
+  if (isRemovingOverride && (0, import_editor_editing_panel3.isDynamicPropValue)(propValue)) {
     return propType.default ?? null;
   }
   return newPropValue;
@@ -2266,15 +2354,15 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React19.createElement(import_editor_editing_panel.BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React19.createElement(import_editor_editing_panel3.BaseControl, { type: value.type, props: controlProps });
 }
 function getControlLayout(control) {
-  return control.value.meta?.layout || import_editor_editing_panel.controlsRegistry.getLayout(control.value.type);
+  return control.value.meta?.layout || import_editor_editing_panel3.controlsRegistry.getLayout(control.value.type);
 }
 function populateChildControlProps(props) {
   if (props.childControlType) {
-    const childComponent = import_editor_editing_panel.controlsRegistry.get(props.childControlType);
-    const childPropType = import_editor_editing_panel.controlsRegistry.getPropTypeUtil(props.childControlType);
+    const childComponent = import_editor_editing_panel3.controlsRegistry.get(props.childControlType);
+    const childPropType = import_editor_editing_panel3.controlsRegistry.getPropTypeUtil(props.childControlType);
     props = {
       ...props,
       childControlConfig: {
@@ -2290,35 +2378,14 @@ function isValidOverride(overridableProps, override) {
   const overridableKey = componentOverridablePropTypeUtil.isValid(override) ? override.value.origin_value?.value.override_key : override.value.override_key;
   return !!overridableProps.props[overridableKey];
 }
-function formatOverridesToApply(overrides) {
-  if (!overrides) {
-    return {};
-  }
-  const result = {};
-  for (const item of overrides) {
-    const overridable = componentOverridablePropTypeUtil.extract(item);
-    let override = item;
-    if (overridable) {
-      override = overridable.origin_value;
-    }
-    const extractedOverride = componentInstanceOverridePropTypeUtil.extract(override);
-    if (!extractedOverride) {
-      continue;
-    }
-    result[extractedOverride.override_key] = {
-      value: extractedOverride.override_value
-    };
-  }
-  return result;
-}
 
 // src/components/instance-editing-panel/override-props-group.tsx
 function OverridePropsGroup({ group }) {
-  const [isOpen, setIsOpen] = (0, import_editor_editing_panel2.useStateByElement)(group.id, true);
+  const [isOpen, setIsOpen] = (0, import_editor_editing_panel4.useStateByElement)(group.id, true);
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id = (0, import_react8.useId)();
+  const id = (0, import_react9.useId)();
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   const title = group.label;
@@ -2346,11 +2413,11 @@ function OverridePropsGroup({ group }) {
 
 // src/components/instance-editing-panel/instance-panel-body.tsx
 function InstancePanelBody({ groups, isEmpty, emptyState, componentInstanceId }) {
-  return /* @__PURE__ */ React21.createElement(import_editor_panels2.PanelBody, null, /* @__PURE__ */ React21.createElement(import_editor_controls3.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel3.getFieldIndicators)("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React21.createElement(import_ui14.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React21.createElement(React21.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React21.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React21.createElement(import_ui14.Divider, null))))));
+  return /* @__PURE__ */ React21.createElement(import_editor_panels2.PanelBody, null, /* @__PURE__ */ React21.createElement(import_editor_controls3.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React21.createElement(import_ui14.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React21.createElement(React21.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React21.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React21.createElement(import_ui14.Divider, null))))));
 }
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
-var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 
 // src/utils/filter-valid-overridable-props.ts
 function filterValidOverridableProps(overridableProps, instanceElementId) {
@@ -2410,7 +2477,7 @@ function useInstancePanelData() {
   return { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId };
 }
 function useComponentInstanceSettings() {
-  const { element, settings } = (0, import_editor_editing_panel4.useElement)();
+  const { element, settings } = (0, import_editor_editing_panel6.useElement)();
   return { element, settings: componentInstancePropTypeUtil.extract(settings.component_instance) };
 }
 
@@ -2463,7 +2530,7 @@ function InstanceEditingPanel() {
 
 // src/components/load-template-components.tsx
 var React23 = __toESM(require("react"));
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_editor_templates = require("@elementor/editor-templates");
 
 // src/store/actions/load-components-assets.ts
@@ -2592,7 +2659,7 @@ var LoadTemplateComponents = () => {
 };
 function LoadTemplateComponentsInternal() {
   const templates = (0, import_editor_templates.useLoadedTemplates)();
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     loadComponentsAssets(templates.flatMap((elements) => elements ?? []));
   }, [templates]);
   return null;
@@ -3006,10 +3073,10 @@ function createComponentModel() {
 }
 
 // src/populate-store.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_store27 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     (0, import_store27.__dispatch)(loadComponents());
   }, []);
   return null;
@@ -3278,7 +3345,7 @@ function init() {
     id: "templates",
     component: LoadTemplateComponents
   });
-  (0, import_editor_editing_panel5.registerEditingPanelReplacement)({
+  (0, import_editor_editing_panel7.registerEditingPanelReplacement)({
     id: "component-instance-edit-panel",
     condition: (_, elementType) => elementType.key === "e-component",
     component: InstanceEditingPanel