@elementor/editor-components 4.0.0-663 → 4.0.0-665

package/dist/index.js

@@ -30,13 +30,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  COMPONENT_WIDGET_TYPE: () => COMPONENT_WIDGET_TYPE,
+  COMPONENT_WIDGET_TYPE: () => COMPONENT_WIDGET_TYPE2,
   ComponentInstanceProvider: () => ComponentInstanceProvider,
   ComponentItem: () => ComponentItem,
   ComponentName: () => ComponentName,
   ComponentSearch: () => ComponentSearch,
   ComponentsEmptyState: () => EmptyState,
   ComponentsList: () => ComponentsList,
+  DetachAction: () => DetachAction,
   EditComponentAction: () => EditComponentAction,
   EmptySearchResult: () => EmptySearchResult,
   InstanceEmptyState: () => EmptyState2,
@@ -90,10 +91,10 @@ var import_editor_documents14 = require("@elementor/editor-documents");
 var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel2 = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
-var import_store44 = require("@elementor/store");
+var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
+var import_store46 = require("@elementor/store");
 var import_utils13 = require("@elementor/utils");
-var import_i18n33 = require("@wordpress/i18n");
+var import_i18n36 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -787,124 +788,91 @@ var Components = () => {
   return /* @__PURE__ */ React7.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React7.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React7.createElement(ComponentsContent, null)));
 };
 
-// src/components/in-edit-mode.tsx
+// src/components/detach-instance-confirmation-dialog.tsx
 var React8 = __toESM(require("react"));
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
-var openEditModeDialog = (lockedBy) => {
+function DetachInstanceConfirmationDialog({
+  open,
+  onClose,
+  onConfirm
+}) {
+  return /* @__PURE__ */ React8.createElement(import_editor_ui4.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React8.createElement(import_editor_ui4.ConfirmationDialog.Title, { icon: import_icons4.AlertTriangleFilledIcon, iconColor: "secondary" }, (0, import_i18n4.__)("Detach from Component?", "elementor")), /* @__PURE__ */ React8.createElement(import_editor_ui4.ConfirmationDialog.Content, null, /* @__PURE__ */ React8.createElement(import_editor_ui4.ConfirmationDialog.ContentText, null, (0, import_i18n4.__)(
+    "Detaching this instance will break its link to the Component. Changes to the Component will no longer apply. Continue?",
+    "elementor"
+  ))), /* @__PURE__ */ React8.createElement(
+    import_editor_ui4.ConfirmationDialog.Actions,
+    {
+      onClose,
+      onConfirm,
+      confirmLabel: (0, import_i18n4.__)("Detach", "elementor"),
+      color: "primary"
+    }
+  ));
+}
+function openDetachConfirmDialog(onConfirm) {
+  const handleConfirm = () => {
+    (0, import_editor_ui4.closeDialog)();
+    onConfirm();
+  };
   (0, import_editor_ui4.openDialog)({
-    component: /* @__PURE__ */ React8.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React8.createElement(DetachInstanceConfirmationDialog, { open: true, onClose: import_editor_ui4.closeDialog, onConfirm: handleConfirm })
+  });
+}
+
+// src/components/in-edit-mode.tsx
+var React9 = __toESM(require("react"));
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_icons5 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+var openEditModeDialog = (lockedBy) => {
+  (0, import_editor_ui5.openDialog)({
+    component: /* @__PURE__ */ React9.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = (0, import_i18n4.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui6.DialogHeader, { logo: false }, /* @__PURE__ */ React8.createElement(import_ui6.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React8.createElement(import_ui6.Icon, { color: "secondary" }, /* @__PURE__ */ React8.createElement(import_icons4.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React8.createElement(import_ui6.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React8.createElement(import_ui6.DialogContent, null, /* @__PURE__ */ React8.createElement(import_ui6.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React8.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n4.__)(
+  const content = (0, import_i18n5.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_ui6.DialogHeader, { logo: false }, /* @__PURE__ */ React9.createElement(import_ui6.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React9.createElement(import_ui6.Icon, { color: "secondary" }, /* @__PURE__ */ React9.createElement(import_icons5.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React9.createElement(import_ui6.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React9.createElement(import_ui6.DialogContent, null, /* @__PURE__ */ React9.createElement(import_ui6.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React9.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n5.__)(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React8.createElement(import_ui6.DialogActions, null, /* @__PURE__ */ React8.createElement(import_ui6.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui4.closeDialog }, (0, import_i18n4.__)("Close", "elementor"))))));
+  )), /* @__PURE__ */ React9.createElement(import_ui6.DialogActions, null, /* @__PURE__ */ React9.createElement(import_ui6.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui5.closeDialog }, (0, import_i18n5.__)("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-var React17 = __toESM(require("react"));
-var import_icons7 = require("@elementor/icons");
+var React19 = __toESM(require("react"));
+var import_icons9 = require("@elementor/icons");
 var import_ui13 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/provider/component-instance-context.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_react3 = require("react");
 var ComponentInstanceContext = (0, import_react3.createContext)(null);
 function ComponentInstanceProvider({ children, ...props }) {
-  return /* @__PURE__ */ React9.createElement(ComponentInstanceContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React10.createElement(ComponentInstanceContext.Provider, { value: props }, children);
 }
 var useComponentId = () => (0, import_react3.useContext)(ComponentInstanceContext)?.componentId;
 var useComponentInstanceOverrides = () => (0, import_react3.useContext)(ComponentInstanceContext)?.overrides;
 var useComponentOverridableProps = () => (0, import_react3.useContext)(ComponentInstanceContext)?.overridableProps;
 
-// src/components/instance-editing-panel/empty-state.tsx
-var React10 = __toESM(require("react"));
-var import_icons5 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
-var EmptyState2 = ({ onEditComponent }) => {
-  const { canEdit } = useComponentsPermissions();
-  const message = canEdit ? (0, import_i18n5.__)(
-    "Edit the component to add properties, manage them or update the design across all instances.",
-    "elementor"
-  ) : (0, import_i18n5.__)(
-    "With your current role, you cannot edit this component. Contact an administrator to add properties.",
-    "elementor"
-  );
-  return /* @__PURE__ */ React10.createElement(
-    import_ui7.Stack,
-    {
-      alignItems: "center",
-      justifyContent: "start",
-      height: "100%",
-      color: "text.secondary",
-      sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
-      gap: 1.5
-    },
-    /* @__PURE__ */ React10.createElement(import_icons5.ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React10.createElement(import_ui7.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n5.__)("No properties yet", "elementor")),
-    /* @__PURE__ */ React10.createElement(import_ui7.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
-    canEdit && !!onEditComponent && /* @__PURE__ */ React10.createElement(import_ui7.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React10.createElement(import_icons5.PencilIcon, { fontSize: "small" }), (0, import_i18n5.__)("Edit component", "elementor"))
-  );
-};
-
-// src/components/instance-editing-panel/instance-panel-body.tsx
-var React15 = __toESM(require("react"));
-var import_editor_controls3 = require("@elementor/editor-controls");
-var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_ui11 = require("@elementor/ui");
-
-// src/components/instance-editing-panel/override-props-group.tsx
-var React14 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_ui10 = require("@elementor/ui");
+// src/components/instance-editing-panel/detach-action.tsx
+var React12 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_editor_notifications = require("@elementor/editor-notifications");
+var import_icons7 = require("@elementor/icons");
+var import_i18n7 = require("@wordpress/i18n");
 
-// src/components/instance-editing-panel/override-prop-control.tsx
-var React13 = __toESM(require("react"));
-var import_editor_controls2 = require("@elementor/editor-controls");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_editor_elements4 = require("@elementor/editor-elements");
-var import_ui9 = require("@elementor/ui");
+// src/utils/detach-component-instance/detach-component-instance.ts
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_store9 = require("@elementor/store");
+var import_i18n6 = require("@wordpress/i18n");
 
-// src/hooks/use-controls-by-widget-type.ts
-var import_editor_elements = require("@elementor/editor-elements");
-function useControlsByWidgetType(type) {
-  const elementType = (0, import_editor_elements.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/prop-types/component-instance-overrides-prop-type.ts
+var import_editor_props3 = require("@elementor/editor-props");
+var import_schema3 = require("@elementor/schema");
 
 // src/prop-types/component-instance-override-prop-type.ts
 var import_editor_props = require("@elementor/editor-props");
@@ -921,10 +889,6 @@ var componentInstanceOverridePropTypeUtil = (0, import_editor_props.createPropUt
   })
 );
 
-// src/prop-types/component-instance-overrides-prop-type.ts
-var import_editor_props3 = require("@elementor/editor-props");
-var import_schema3 = require("@elementor/schema");
-
 // src/prop-types/component-overridable-prop-type.ts
 var import_editor_props2 = require("@elementor/editor-props");
 var import_schema2 = require("@elementor/schema");
@@ -956,117 +920,578 @@ var componentInstancePropTypeUtil = (0, import_editor_props4.createPropUtils)(
   })
 );
 
-// src/provider/overridable-prop-context.tsx
-var React11 = __toESM(require("react"));
-var import_react4 = require("react");
-var OverridablePropContext = (0, import_react4.createContext)(null);
-function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React11.createElement(OverridablePropContext.Provider, { value: props }, children);
+// 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;
+  }
+  const name = config.names.components[action];
+  dispatchEvent?.(name, { ...data, source, "Feature name": FEATURE_NAME });
+};
+var onElementDrop = (_args, element) => {
+  if (!(element?.model?.get("widgetType") === "e-component")) {
+    return;
+  }
+  const editorSettings = element.model.get("editor_settings");
+  const componentName = editorSettings?.title;
+  const componentUID = editorSettings?.component_uid;
+  const instanceId = element.id;
+  const createdThisSession = selectCreatedThisSession((0, import_store7.__getState)());
+  const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
+  const eventsManagerConfig = window.elementorCommon.eventsManager.config;
+  const { locations, secondaryLocations } = eventsManagerConfig;
+  trackComponentEvent({
+    action: "instanceAdded",
+    source: "user",
+    instance_id: instanceId,
+    component_uid: componentUID,
+    component_name: componentName,
+    is_same_session_reuse: isSameSessionReuse,
+    location: locations.widgetPanel,
+    secondary_location: secondaryLocations.componentsTab
+  });
+};
+
+// src/utils/detach-component-instance/resolve-detached-instance.ts
+var import_editor_elements2 = require("@elementor/editor-elements");
+
+// src/utils/detach-component-instance/regenerate-local-style-ids.ts
+var import_editor_elements = require("@elementor/editor-elements");
+var import_editor_props5 = require("@elementor/editor-props");
+function regenerateLocalStyleIds(element) {
+  const originalStyles = element.styles;
+  if (!originalStyles || Object.keys(originalStyles).length === 0) {
+    return { styles: void 0, settings: void 0 };
+  }
+  const newStyles = {};
+  const styleIdMapping = {};
+  for (const [originalStyleId, style] of Object.entries(originalStyles)) {
+    const newStyleId = generateLocalStyleId(element.id);
+    newStyles[newStyleId] = { ...style, id: newStyleId };
+    styleIdMapping[originalStyleId] = newStyleId;
+  }
+  const settings = element.settings;
+  if (!settings || Object.keys(settings).length === 0) {
+    return { styles: newStyles, settings: void 0 };
+  }
+  const updatedSettings = { ...settings };
+  for (const [propKey, propValue] of Object.entries(updatedSettings)) {
+    if (isClassesProp(propValue) && propValue.value.length > 0) {
+      const updatedClasses = propValue.value.map((classId) => styleIdMapping[classId] ?? classId);
+      updatedSettings[propKey] = import_editor_props5.classesPropTypeUtil.create(updatedClasses);
+    }
+  }
+  return {
+    styles: newStyles,
+    settings: updatedSettings
+  };
+}
+function isClassesProp(prop) {
+  return import_editor_props5.classesPropTypeUtil.isValid(prop);
+}
+function generateLocalStyleId(elementId) {
+  return `e-${elementId}-${(0, import_editor_elements.generateElementId)()}`;
 }
-var useOverridablePropValue = () => (0, import_react4.useContext)(OverridablePropContext)?.value;
-var useComponentInstanceElement = () => (0, import_react4.useContext)(OverridablePropContext)?.componentInstanceElement;
 
-// src/utils/resolve-override-prop-value.ts
-var resolveOverridePropValue = (originalPropValue) => {
-  const isOverridable = componentOverridablePropTypeUtil.isValid(originalPropValue);
-  if (isOverridable) {
-    return getOverridableValue(originalPropValue);
+// src/consts.ts
+var COMPONENT_WIDGET_TYPE = "e-component";
+
+// src/utils/is-component-instance.ts
+function isComponentInstance(elementModel) {
+  return [elementModel.widgetType, elementModel.elType].includes(COMPONENT_WIDGET_TYPE);
+}
+
+// src/utils/detach-component-instance/resolve-overridable-settings.ts
+function resolveOverridableSettings(element, overrideMap) {
+  if (isComponentInstance({ widgetType: element.widgetType, elType: element.elType })) {
+    return resolveOverridableSettingsForComponentInstance(element, overrideMap);
   }
-  const isOverride = componentInstanceOverridePropTypeUtil.isValid(originalPropValue);
-  if (isOverride) {
-    return getOverrideValue(originalPropValue);
+  return resolveOverridableSettingsForElement(element, overrideMap);
+}
+function resolveOverridableSettingsForElement(element, overrideMap) {
+  const updatedSettings = element.settings ? { ...element.settings } : {};
+  for (const [settingKey, settingValue] of Object.entries(element.settings ?? {})) {
+    updatedSettings[settingKey] = resolvePropValue(settingValue, overrideMap);
   }
-  return originalPropValue;
-};
-function getOverridableValue(overridableProp) {
-  const overridableValue = componentOverridablePropTypeUtil.extract(overridableProp);
-  if (!overridableValue) {
-    return null;
+  return updatedSettings;
+}
+function resolveOverridableSettingsForComponentInstance(element, overrideMap) {
+  const componentInstance = element.settings?.component_instance;
+  if (!componentInstancePropTypeUtil.isValid(componentInstance)) {
+    return element.settings ?? {};
   }
-  const isOverride = componentInstanceOverridePropTypeUtil.isValid(overridableValue.origin_value);
-  if (isOverride) {
-    return getOverrideValue(overridableValue.origin_value);
+  const instanceOverrides = componentInstance.value.overrides?.value;
+  if (!instanceOverrides?.length) {
+    return element.settings ?? {};
   }
-  return overridableValue.origin_value;
+  const updatedOverrides = instanceOverrides.map(
+    (item) => resolvePropValue(item, overrideMap, { isOverridableOverride: true })
+  );
+  return {
+    ...element.settings,
+    component_instance: {
+      ...componentInstance,
+      value: {
+        ...componentInstance.value,
+        overrides: {
+          ...componentInstance.value.overrides,
+          value: updatedOverrides
+        }
+      }
+    }
+  };
 }
-function getOverrideValue(overrideProp) {
-  const overrideValue = componentInstanceOverridePropTypeUtil.extract(overrideProp);
-  if (!overrideValue) {
+function resolvePropValue(propValue, overrideMap, options) {
+  const { isOverridableOverride = false } = options ?? {};
+  if (!componentOverridablePropTypeUtil.isValid(propValue)) {
+    return propValue;
+  }
+  const overridableKey = propValue.value.override_key;
+  const matchingOverride = overrideMap.get(overridableKey);
+  const originValue = componentOverridablePropTypeUtil.extract(propValue)?.origin_value;
+  if (!matchingOverride) {
+    return originValue;
+  }
+  if (isOverridableOverride) {
+    return resolveOverridableOverride(matchingOverride, originValue);
+  }
+  const matchingOverrideValue = componentInstanceOverridePropTypeUtil.extract(matchingOverride)?.override_value;
+  return matchingOverrideValue;
+}
+function resolveOverridableOverride(matchingOverride, originValue) {
+  if (!originValue || !componentInstanceOverridePropTypeUtil.isValid(originValue)) {
     return null;
   }
-  return overrideValue.override_value;
+  return componentInstanceOverridePropTypeUtil.create({
+    override_value: matchingOverride.value.override_value,
+    override_key: originValue.value.override_key,
+    schema_source: originValue.value.schema_source
+  });
 }
 
-// src/store/dispatchers.ts
-var import_store7 = require("@elementor/store");
-function safeDispatch() {
-  return (0, import_store7.__getStore)()?.dispatch;
+// src/utils/detach-component-instance/resolve-detached-instance.ts
+function resolveDetachedInstance(element, overrides) {
+  const overrideMap = createOverrideMap(overrides);
+  return resolveElementRecursive(structuredClone(element), overrideMap);
 }
-var componentsActions = {
-  add(components) {
-    (0, import_store7.__dispatch)(slice.actions.add(components));
-  },
-  load(components) {
-    (0, import_store7.__dispatch)(slice.actions.load(components));
-  },
-  addUnpublished(component) {
-    (0, import_store7.__dispatch)(slice.actions.addUnpublished(component));
-  },
-  removeUnpublished(uids) {
-    (0, import_store7.__dispatch)(slice.actions.removeUnpublished(uids));
-  },
-  resetUnpublished() {
-    (0, import_store7.__dispatch)(slice.actions.resetUnpublished());
-  },
-  removeStyles(id2) {
-    (0, import_store7.__dispatch)(slice.actions.removeStyles({ id: id2 }));
-  },
-  addStyles(styles) {
-    (0, import_store7.__dispatch)(slice.actions.addStyles(styles));
-  },
-  addCreatedThisSession(uid) {
-    (0, import_store7.__dispatch)(slice.actions.addCreatedThisSession(uid));
-  },
-  removeCreatedThisSession(uid) {
-    (0, import_store7.__dispatch)(slice.actions.removeCreatedThisSession(uid));
-  },
-  archive(componentId) {
-    (0, import_store7.__dispatch)(slice.actions.archive(componentId));
-  },
-  setCurrentComponentId(id2) {
-    safeDispatch()?.(slice.actions.setCurrentComponentId(id2));
-  },
-  setPath(path) {
-    safeDispatch()?.(slice.actions.setPath(path));
-  },
-  setOverridableProps(componentId, overridableProps) {
-    (0, import_store7.__dispatch)(slice.actions.setOverridableProps({ componentId, overridableProps }));
-  },
-  rename(componentUid, name) {
-    (0, import_store7.__dispatch)(slice.actions.rename({ componentUid, name }));
-  },
-  cleanUpdatedComponentNames() {
-    (0, import_store7.__dispatch)(slice.actions.cleanUpdatedComponentNames());
-  },
-  updateComponentSanitizedAttribute(componentId, attribute) {
-    (0, import_store7.__dispatch)(slice.actions.updateComponentSanitizedAttribute({ componentId, attribute }));
-  },
-  resetSanitizedComponents() {
-    (0, import_store7.__dispatch)(slice.actions.resetSanitizedComponents());
+function resolveElementRecursive(element, overrideMap) {
+  element.id = (0, import_editor_elements2.generateElementId)();
+  if (element.styles) {
+    const { styles, settings } = regenerateLocalStyleIds(element);
+    element.styles = styles;
+    if (settings) {
+      element.settings = { ...element.settings, ...settings };
+    }
   }
-};
-
+  if (element.settings) {
+    element.settings = resolveOverridableSettings(element, overrideMap);
+  }
+  if (element.elements?.length) {
+    element.elements = element.elements.map((child) => resolveElementRecursive(child, overrideMap));
+  }
+  return element;
+}
+function createOverrideMap(overrides) {
+  const map = /* @__PURE__ */ new Map();
+  overrides.forEach((item) => {
+    let override = null;
+    if (componentInstanceOverridePropTypeUtil.isValid(item)) {
+      override = item;
+    } else if (componentOverridablePropTypeUtil.isValid(item)) {
+      override = getOverridableOverride(item);
+    }
+    if (override) {
+      const overrideKey = override.value.override_key;
+      map.set(overrideKey, override);
+    }
+  });
+  return map;
+}
+function getOverridableOverride(propValue) {
+  if (!componentOverridablePropTypeUtil.isValid(propValue)) {
+    return null;
+  }
+  const originValue = componentOverridablePropTypeUtil.extract(propValue)?.origin_value;
+  if (!componentInstanceOverridePropTypeUtil.isValid(originValue)) {
+    return null;
+  }
+  return originValue;
+}
+
+// src/utils/detach-component-instance/detach-component-instance.ts
+async function detachComponentInstance({
+  instanceId,
+  componentId,
+  trackingInfo
+}) {
+  const instanceContainer = (0, import_editor_elements3.getContainer)(instanceId);
+  if (!instanceContainer) {
+    throw new Error(`Instance container with ID "${instanceId}" not found.`);
+  }
+  const componentData = await getComponentDocumentData(componentId);
+  if (!componentData) {
+    throw new Error(`Component with ID "${componentId}" not found.`);
+  }
+  const rootElement = componentData.elements?.[0];
+  if (!rootElement) {
+    throw new Error(`Component with ID "${componentId}" has no root element.`);
+  }
+  const undoableDetach = (0, import_editor_v1_adapters2.undoable)(
+    {
+      do: () => {
+        const overrides = extractInstanceOverrides(instanceContainer);
+        const detachedInstanceElementData = resolveDetachedInstance(
+          rootElement,
+          overrides
+        );
+        const editedComponentOnDetach = selectCurrentComponentId((0, import_store9.__getState)());
+        const overridablePropsBeforeDetach = editedComponentOnDetach ? selectOverridableProps((0, import_store9.__getState)(), editedComponentOnDetach) ?? null : null;
+        const originalInstanceModel = instanceContainer.model.toJSON();
+        const detachedElement = (0, import_editor_elements3.replaceElement)({
+          currentElementId: instanceId,
+          newElement: detachedInstanceElementData,
+          withHistory: false
+        });
+        const componentUid = selectComponent((0, import_store9.__getState)(), componentId)?.uid;
+        trackComponentEvent({
+          action: "detached",
+          source: "user",
+          component_uid: componentUid,
+          instance_id: instanceId,
+          location: trackingInfo.location,
+          secondary_location: trackingInfo.secondaryLocation,
+          trigger: trackingInfo.trigger
+        });
+        return {
+          detachedElement,
+          detachedInstanceElementData,
+          editedComponentOnDetach,
+          overridablePropsBeforeDetach,
+          originalInstanceModel
+        };
+      },
+      undo: (_, {
+        detachedElement,
+        originalInstanceModel,
+        overridablePropsBeforeDetach,
+        editedComponentOnDetach
+      }) => {
+        const restoredInstance = (0, import_editor_elements3.replaceElement)({
+          currentElementId: detachedElement.id,
+          newElement: originalInstanceModel,
+          withHistory: false
+        });
+        const currentComponentId = selectCurrentComponentId((0, import_store9.__getState)());
+        if (currentComponentId && currentComponentId === editedComponentOnDetach && overridablePropsBeforeDetach) {
+          (0, import_store9.__dispatch)(
+            slice.actions.setOverridableProps({
+              componentId: currentComponentId,
+              overridableProps: overridablePropsBeforeDetach
+            })
+          );
+        }
+        return restoredInstance;
+      },
+      redo: (_, doReturn, restoredInstance) => {
+        const { detachedInstanceElementData } = doReturn;
+        const editedComponentOnDetach = selectCurrentComponentId((0, import_store9.__getState)());
+        const overridablePropsBeforeDetach = editedComponentOnDetach ? selectOverridableProps((0, import_store9.__getState)(), editedComponentOnDetach) ?? null : null;
+        const detachedElement = (0, import_editor_elements3.replaceElement)({
+          currentElementId: restoredInstance.id,
+          newElement: detachedInstanceElementData,
+          withHistory: false
+        });
+        return {
+          ...doReturn,
+          detachedElement,
+          editedComponentOnDetach,
+          overridablePropsBeforeDetach
+        };
+      }
+    },
+    {
+      title: (0, import_i18n6.__)("Detach from Component", "elementor"),
+      subtitle: (0, import_i18n6.__)("Instance detached", "elementor")
+    }
+  );
+  return undoableDetach();
+}
+function extractInstanceOverrides(instanceContainer) {
+  const settings = instanceContainer.model.toJSON().settings;
+  const componentInstance = componentInstancePropTypeUtil.extract(
+    settings?.component_instance
+  );
+  const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance?.overrides);
+  return overrides ?? [];
+}
+
+// src/components/instance-editing-panel/instance-panel-header.tsx
+var React11 = __toESM(require("react"));
+var import_editor_panels = require("@elementor/editor-panels");
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_icons6 = require("@elementor/icons");
+var import_ui7 = require("@elementor/ui");
+function InstancePanelHeader({ componentName, actions }) {
+  return /* @__PURE__ */ React11.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React11.createElement(import_ui7.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React11.createElement(import_icons6.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React11.createElement(import_editor_ui6.EllipsisWithTooltip, { title: componentName, as: import_editor_panels.PanelHeaderTitle, sx: { flexGrow: 1 } }), actions));
+}
+function EditComponentAction({ label, onClick, disabled = false, icon: Icon2 }) {
+  return /* @__PURE__ */ React11.createElement(import_ui7.Tooltip, { title: label }, /* @__PURE__ */ React11.createElement(import_ui7.IconButton, { size: "tiny", onClick, "aria-label": label, disabled }, /* @__PURE__ */ React11.createElement(Icon2, { fontSize: "tiny" })));
+}
+
+// src/components/instance-editing-panel/detach-action.tsx
+var DetachAction = ({
+  componentInstanceId,
+  componentId
+}) => {
+  const [isDetachDialogOpen, setIsDetachDialogOpen] = (0, import_react4.useState)(false);
+  const handleDetachConfirm = async () => {
+    setIsDetachDialogOpen(false);
+    try {
+      await detachComponentInstance({
+        instanceId: componentInstanceId,
+        componentId,
+        trackingInfo: getDetachTrackingInfo()
+      });
+    } catch {
+      (0, import_editor_notifications.notify)({
+        type: "error",
+        message: (0, import_i18n7.__)("Failed to detach component instance.", "elementor"),
+        id: "detach-component-instance-failed"
+      });
+    }
+  };
+  const handleDetachCancel = () => {
+    setIsDetachDialogOpen(false);
+  };
+  const handleDetachClick = () => {
+    setIsDetachDialogOpen(true);
+  };
+  const detachLabel = (0, import_i18n7.__)("Detach from Component", "elementor");
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(EditComponentAction, { label: detachLabel, icon: import_icons7.DetachIcon, onClick: handleDetachClick }), /* @__PURE__ */ React12.createElement(
+    DetachInstanceConfirmationDialog,
+    {
+      open: isDetachDialogOpen,
+      onClose: handleDetachCancel,
+      onConfirm: handleDetachConfirm
+    }
+  ));
+};
+function getDetachTrackingInfo() {
+  const extendedWindow = window;
+  const config = extendedWindow?.elementorCommon?.eventsManager?.config;
+  if (!config) {
+    return {
+      location: "",
+      trigger: ""
+    };
+  }
+  return {
+    location: config.locations.components.instanceEditingPanel,
+    trigger: config.triggers.click
+  };
+}
+
+// src/components/instance-editing-panel/empty-state.tsx
+var React13 = __toESM(require("react"));
+var import_icons8 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
+var EmptyState2 = ({ onEditComponent }) => {
+  const { canEdit } = useComponentsPermissions();
+  const message = canEdit ? (0, import_i18n8.__)(
+    "Edit the component to add properties, manage them or update the design across all instances.",
+    "elementor"
+  ) : (0, import_i18n8.__)(
+    "With your current role, you cannot edit this component. Contact an administrator to add properties.",
+    "elementor"
+  );
+  return /* @__PURE__ */ React13.createElement(
+    import_ui8.Stack,
+    {
+      alignItems: "center",
+      justifyContent: "start",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
+      gap: 1.5
+    },
+    /* @__PURE__ */ React13.createElement(import_icons8.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React13.createElement(import_ui8.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n8.__)("No properties yet", "elementor")),
+    /* @__PURE__ */ React13.createElement(import_ui8.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && !!onEditComponent && /* @__PURE__ */ React13.createElement(import_ui8.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React13.createElement(import_icons8.PencilIcon, { fontSize: "small" }), (0, import_i18n8.__)("Edit component", "elementor"))
+  );
+};
+
+// src/components/instance-editing-panel/instance-panel-body.tsx
+var React18 = __toESM(require("react"));
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_editor_panels2 = require("@elementor/editor-panels");
+var import_ui12 = require("@elementor/ui");
+
+// src/components/instance-editing-panel/override-props-group.tsx
+var React17 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_ui7 = require("@elementor/editor-ui");
+var import_ui11 = require("@elementor/ui");
+
+// src/components/instance-editing-panel/override-prop-control.tsx
+var React16 = __toESM(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_ui10 = require("@elementor/ui");
+
+// src/hooks/use-controls-by-widget-type.ts
+var import_editor_elements4 = require("@elementor/editor-elements");
+function useControlsByWidgetType(type) {
+  const elementType = (0, import_editor_elements4.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/provider/overridable-prop-context.tsx
+var React14 = __toESM(require("react"));
+var import_react5 = require("react");
+var OverridablePropContext = (0, import_react5.createContext)(null);
+function OverridablePropProvider({ children, ...props }) {
+  return /* @__PURE__ */ React14.createElement(OverridablePropContext.Provider, { value: props }, children);
+}
+var useOverridablePropValue = () => (0, import_react5.useContext)(OverridablePropContext)?.value;
+var useComponentInstanceElement = () => (0, import_react5.useContext)(OverridablePropContext)?.componentInstanceElement;
+
+// src/utils/resolve-override-prop-value.ts
+var resolveOverridePropValue = (originalPropValue) => {
+  const isOverridable = componentOverridablePropTypeUtil.isValid(originalPropValue);
+  if (isOverridable) {
+    return getOverridableValue(originalPropValue);
+  }
+  const isOverride = componentInstanceOverridePropTypeUtil.isValid(originalPropValue);
+  if (isOverride) {
+    return getOverrideValue(originalPropValue);
+  }
+  return originalPropValue;
+};
+function getOverridableValue(overridableProp) {
+  const overridableValue = componentOverridablePropTypeUtil.extract(overridableProp);
+  if (!overridableValue) {
+    return null;
+  }
+  const isOverride = componentInstanceOverridePropTypeUtil.isValid(overridableValue.origin_value);
+  if (isOverride) {
+    return getOverrideValue(overridableValue.origin_value);
+  }
+  return overridableValue.origin_value;
+}
+function getOverrideValue(overrideProp) {
+  const overrideValue = componentInstanceOverridePropTypeUtil.extract(overrideProp);
+  if (!overrideValue) {
+    return null;
+  }
+  return overrideValue.override_value;
+}
+
+// src/store/dispatchers.ts
+var import_store11 = require("@elementor/store");
+function safeDispatch() {
+  return (0, import_store11.__getStore)()?.dispatch;
+}
+var componentsActions = {
+  add(components) {
+    (0, import_store11.__dispatch)(slice.actions.add(components));
+  },
+  load(components) {
+    (0, import_store11.__dispatch)(slice.actions.load(components));
+  },
+  addUnpublished(component) {
+    (0, import_store11.__dispatch)(slice.actions.addUnpublished(component));
+  },
+  removeUnpublished(uids) {
+    (0, import_store11.__dispatch)(slice.actions.removeUnpublished(uids));
+  },
+  resetUnpublished() {
+    (0, import_store11.__dispatch)(slice.actions.resetUnpublished());
+  },
+  removeStyles(id2) {
+    (0, import_store11.__dispatch)(slice.actions.removeStyles({ id: id2 }));
+  },
+  addStyles(styles) {
+    (0, import_store11.__dispatch)(slice.actions.addStyles(styles));
+  },
+  addCreatedThisSession(uid) {
+    (0, import_store11.__dispatch)(slice.actions.addCreatedThisSession(uid));
+  },
+  removeCreatedThisSession(uid) {
+    (0, import_store11.__dispatch)(slice.actions.removeCreatedThisSession(uid));
+  },
+  archive(componentId) {
+    (0, import_store11.__dispatch)(slice.actions.archive(componentId));
+  },
+  setCurrentComponentId(id2) {
+    safeDispatch()?.(slice.actions.setCurrentComponentId(id2));
+  },
+  setPath(path) {
+    safeDispatch()?.(slice.actions.setPath(path));
+  },
+  setOverridableProps(componentId, overridableProps) {
+    (0, import_store11.__dispatch)(slice.actions.setOverridableProps({ componentId, overridableProps }));
+  },
+  rename(componentUid, name) {
+    (0, import_store11.__dispatch)(slice.actions.rename({ componentUid, name }));
+  },
+  cleanUpdatedComponentNames() {
+    (0, import_store11.__dispatch)(slice.actions.cleanUpdatedComponentNames());
+  },
+  updateComponentSanitizedAttribute(componentId, attribute) {
+    (0, import_store11.__dispatch)(slice.actions.updateComponentSanitizedAttribute({ componentId, attribute }));
+  },
+  resetSanitizedComponents() {
+    (0, import_store11.__dispatch)(slice.actions.resetSanitizedComponents());
+  }
+};
+
 // src/store/selectors.ts
-var import_store9 = require("@elementor/store");
+var import_store13 = require("@elementor/store");
 function safeGetState() {
-  return (0, import_store9.__getStore)()?.getState();
+  return (0, import_store13.__getStore)()?.getState();
 }
 var componentsSelectors = {
   getOverridableProps(componentId) {
-    return selectOverridableProps((0, import_store9.__getState)(), componentId);
+    return selectOverridableProps((0, import_store13.__getState)(), componentId);
   },
   getCurrentComponent() {
-    return selectCurrentComponent((0, import_store9.__getState)());
+    return selectCurrentComponent((0, import_store13.__getState)());
   },
   getCurrentComponentId() {
     const state = safeGetState();
@@ -1076,19 +1501,19 @@ var componentsSelectors = {
     return selectCurrentComponentId(state);
   },
   getUnpublishedComponents() {
-    return selectUnpublishedComponents((0, import_store9.__getState)());
+    return selectUnpublishedComponents((0, import_store13.__getState)());
   },
   getUpdatedComponentNames() {
-    return selectUpdatedComponentNames((0, import_store9.__getState)());
+    return selectUpdatedComponentNames((0, import_store13.__getState)());
   },
   getArchivedThisSession() {
-    return selectArchivedThisSession((0, import_store9.__getState)());
+    return selectArchivedThisSession((0, import_store13.__getState)());
   },
   getComponents() {
-    return selectComponents((0, import_store9.__getState)());
+    return selectComponents((0, import_store13.__getState)());
   },
   getComponentByUid(componentUid) {
-    return selectComponentByUid((0, import_store9.__getState)(), componentUid);
+    return selectComponentByUid((0, import_store13.__getState)(), componentUid);
   }
 };
 
@@ -1123,12 +1548,12 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
 }
 
 // src/utils/get-container-by-origin-id.ts
-var import_editor_elements2 = require("@elementor/editor-elements");
+var import_editor_elements5 = require("@elementor/editor-elements");
 function getContainerByOriginId(originElementId, instanceElementId) {
   if (!instanceElementId) {
-    return (0, import_editor_elements2.getContainer)(originElementId);
+    return (0, import_editor_elements5.getContainer)(originElementId);
   }
-  const instanceContainer = (0, import_editor_elements2.getContainer)(instanceElementId);
+  const instanceContainer = (0, import_editor_elements5.getContainer)(instanceElementId);
   if (!instanceContainer) {
     return null;
   }
@@ -1141,7 +1566,7 @@ function getContainerByOriginId(originElementId, instanceElementId) {
 }
 
 // src/utils/get-prop-type-for-component-override.ts
-var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_elements6 = require("@elementor/editor-elements");
 var getPropTypeForComponentOverride = (overridableProp) => {
   if (overridableProp.originPropFields) {
     return getPropType(overridableProp.originPropFields);
@@ -1153,7 +1578,7 @@ var getPropTypeForComponentOverride = (overridableProp) => {
   });
 };
 function getPropType({ widgetType, propKey }) {
-  const widgetPropsSchema = (0, import_editor_elements3.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
+  const widgetPropsSchema = (0, import_editor_elements6.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
   return widgetPropsSchema?.[propKey];
 }
 
@@ -1190,11 +1615,11 @@ function extractInnerOverrideInfo(override) {
 }
 
 // src/components/control-label.tsx
-var React12 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_editor_controls = require("@elementor/editor-controls");
-var import_ui8 = require("@elementor/ui");
+var import_ui9 = require("@elementor/ui");
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React12.createElement(import_ui8.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React12.createElement(import_editor_controls.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React12.createElement(import_editor_controls.ControlAdornments, null));
+  return /* @__PURE__ */ React15.createElement(import_ui9.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React15.createElement(import_editor_controls.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React15.createElement(import_editor_controls.ControlAdornments, null));
 };
 
 // src/components/errors.ts
@@ -1205,15 +1630,15 @@ var OverrideControlInnerElementNotFoundError = (0, import_utils2.createError)({
 });
 
 // src/components/instance-editing-panel/use-resolved-origin-value.tsx
-var import_store13 = require("@elementor/store");
+var import_store17 = require("@elementor/store");
 
 // src/utils/get-overridable-prop.ts
-var import_store11 = require("@elementor/store");
+var import_store15 = require("@elementor/store");
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps((0, import_store11.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store15.__getState)(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -1222,7 +1647,7 @@ function getOverridableProp({
 
 // src/components/instance-editing-panel/use-resolved-origin-value.tsx
 function useResolvedOriginValue(override, overridableProp) {
-  const components = (0, import_store13.__useSelector)(selectData);
+  const components = (0, import_store17.__useSelector)(selectData);
   return resolveOriginValue(components, override, overridableProp);
 }
 function resolveOriginValue(components, matchingOverride, overridableProp) {
@@ -1303,7 +1728,7 @@ function OverridePropControl({ overrideKey }) {
   if (!overridableProp) {
     return null;
   }
-  return /* @__PURE__ */ React13.createElement(import_editor_editing_panel.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React13.createElement(OverrideControl, { overridableProp }));
+  return /* @__PURE__ */ React16.createElement(import_editor_editing_panel.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React16.createElement(OverrideControl, { overridableProp }));
 }
 function OverrideControl({ overridableProp }) {
   const componentInstanceElement = (0, import_editor_editing_panel.useElement)();
@@ -1387,23 +1812,23 @@ function OverrideControl({ overridableProp }) {
   }
   const elementId = element.id;
   const type = elType === "widget" ? widgetType : elType;
-  const elementType = (0, import_editor_elements4.getElementType)(type);
+  const elementType = (0, import_editor_elements7.getElementType)(type);
   if (!elementType) {
     return null;
   }
-  const settings = (0, import_editor_elements4.getElementSettings)(elementId, Object.keys(elementType.propsSchema));
+  const settings = (0, import_editor_elements7.getElementSettings)(elementId, Object.keys(elementType.propsSchema));
   const propTypeSchema = (0, import_editor_editing_panel.createTopLevelObjectType)({
     schema: {
       [overridableProp.overrideKey]: propType
     }
   });
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React16.createElement(
     OverridablePropProvider,
     {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__PURE__ */ React13.createElement(import_editor_editing_panel.ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React13.createElement(import_editor_editing_panel.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React16.createElement(import_editor_editing_panel.ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React16.createElement(import_editor_editing_panel.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React16.createElement(
       import_editor_controls2.PropProvider,
       {
         propType: propTypeSchema,
@@ -1413,7 +1838,7 @@ function OverrideControl({ overridableProp }) {
           return false;
         }
       },
-      /* @__PURE__ */ React13.createElement(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React13.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React13.createElement(import_ui9.Stack, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React13.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React13.createElement(OriginalControl, { control, controlProps }))))
+      /* @__PURE__ */ React16.createElement(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React16.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React16.createElement(import_ui10.Stack, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React16.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React16.createElement(OriginalControl, { control, controlProps }))))
     )))
   );
 }
@@ -1472,7 +1897,7 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React13.createElement(import_editor_editing_panel.BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React16.createElement(import_editor_editing_panel.BaseControl, { type: value.type, props: controlProps });
 }
 function getControlLayout(control) {
   return control.value.meta?.layout || import_editor_editing_panel.controlsRegistry.getLayout(control.value.type);
@@ -1503,12 +1928,12 @@ function OverridePropsGroup({ group }) {
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id2 = (0, import_react5.useId)();
+  const id2 = (0, import_react6.useId)();
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React14.createElement(import_ui10.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React14.createElement(
-    import_ui10.ListItemButton,
+  return /* @__PURE__ */ React17.createElement(import_ui11.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React17.createElement(
+    import_ui11.ListItemButton,
     {
       id: labelId,
       "aria-controls": contentId,
@@ -1517,34 +1942,21 @@ function OverridePropsGroup({ group }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React14.createElement(import_ui10.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React14.createElement(
-      import_ui10.ListItemText,
+    /* @__PURE__ */ React17.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React17.createElement(
+      import_ui11.ListItemText,
       {
         secondary: title,
         secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React14.createElement(import_editor_ui5.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React14.createElement(import_ui10.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React14.createElement(import_ui10.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React14.createElement(OverridePropControl, { key: overrideKey, overrideKey })))));
+    /* @__PURE__ */ React17.createElement(import_editor_ui7.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React17.createElement(import_ui11.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React17.createElement(import_ui11.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React17.createElement(OverridePropControl, { key: overrideKey, overrideKey })))));
 }
 
 // src/components/instance-editing-panel/instance-panel-body.tsx
 function InstancePanelBody({ groups, isEmpty, emptyState, componentInstanceId }) {
-  return /* @__PURE__ */ React15.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React15.createElement(import_editor_controls3.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel3.getFieldIndicators)("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React15.createElement(import_ui11.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React15.createElement(React15.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React15.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React15.createElement(import_ui11.Divider, null))))));
-}
-
-// src/components/instance-editing-panel/instance-panel-header.tsx
-var React16 = __toESM(require("react"));
-var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_ui6 = require("@elementor/editor-ui");
-var import_icons6 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
-function InstancePanelHeader({ componentName, actions }) {
-  return /* @__PURE__ */ React16.createElement(import_editor_panels2.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React16.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React16.createElement(import_icons6.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React16.createElement(import_editor_ui6.EllipsisWithTooltip, { title: componentName, as: import_editor_panels2.PanelHeaderTitle, sx: { flexGrow: 1 } }), actions));
-}
-function EditComponentAction({ label, onClick, disabled = false, icon: Icon2 }) {
-  return /* @__PURE__ */ React16.createElement(import_ui12.Tooltip, { title: label }, /* @__PURE__ */ React16.createElement(import_ui12.IconButton, { size: "tiny", onClick, "aria-label": label, disabled }, /* @__PURE__ */ React16.createElement(Icon2, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React18.createElement(import_editor_panels2.PanelBody, null, /* @__PURE__ */ React18.createElement(import_editor_controls3.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel3.getFieldIndicators)("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React18.createElement(import_ui12.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React18.createElement(React18.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React18.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React18.createElement(import_ui12.Divider, null))))));
 }
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
@@ -1630,7 +2042,7 @@ function useInstancePanelData() {
   const component = useComponent(componentId ?? null);
   const componentInstanceId = element?.id;
   const overridableProps = useSanitizeOverridableProps(componentId ?? null, componentInstanceId);
-  if (!componentId || !overridableProps || !component) {
+  if (!componentId || !overridableProps || !component || !componentInstanceId) {
     return null;
   }
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
@@ -1645,32 +2057,28 @@ function useComponentInstanceSettings() {
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
 function InstanceEditingPanel() {
+  const { canEdit } = useComponentsPermissions();
   const data = useInstancePanelData();
   if (!data) {
     return null;
   }
   const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
-  const panelTitle = (0, import_i18n6.__)("Edit %s", "elementor").replace("%s", component.name);
-  return /* @__PURE__ */ React17.createElement(import_ui13.Box, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React17.createElement(
+  const panelTitle = (0, import_i18n9.__)("Edit %s", "elementor").replace("%s", component.name);
+  const actions = /* @__PURE__ */ React19.createElement(import_ui13.Stack, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React19.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React19.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: import_icons9.PencilIcon }));
+  return /* @__PURE__ */ React19.createElement(import_ui13.Box, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React19.createElement(
     ComponentInstanceProvider,
     {
       componentId,
       overrides,
       overridableProps
     },
-    /* @__PURE__ */ React17.createElement(
-      InstancePanelHeader,
-      {
-        componentName: component.name,
-        actions: /* @__PURE__ */ React17.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: import_icons7.PencilIcon })
-      }
-    ),
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(InstancePanelHeader, { componentName: component.name, actions }),
+    /* @__PURE__ */ React19.createElement(
       InstancePanelBody,
       {
         groups,
         isEmpty,
-        emptyState: /* @__PURE__ */ React17.createElement(EmptyState2, null),
+        emptyState: /* @__PURE__ */ React19.createElement(EmptyState2, null),
         componentInstanceId
       }
     )
@@ -1678,19 +2086,142 @@ function InstanceEditingPanel() {
 }
 
 // src/components/load-template-components.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_editor_templates = require("@elementor/editor-templates");
 
 // src/store/actions/load-components-assets.ts
-var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_documents2 = require("@elementor/editor-documents");
+
+// src/utils/get-component-documents.ts
+async function getComponentDocuments(elements, cache = /* @__PURE__ */ new Map()) {
+  const componentIds = await getComponentIds(elements, cache);
+  return getDocumentsMap(componentIds, cache);
+}
+async function getComponentIds(elements, cache) {
+  const results = await Promise.all(
+    elements.map(async ({ widgetType, elType, elements: childElements, settings }) => {
+      const ids = [];
+      if (isComponentInstance({ widgetType, elType })) {
+        const componentId = settings?.component_instance?.value?.component_id.value;
+        if (!componentId) {
+          return ids;
+        }
+        ids.push(componentId);
+        if (!cache.has(componentId)) {
+          cache.set(componentId, getComponentDocumentData(componentId));
+        }
+        const doc = await cache.get(componentId);
+        childElements = doc?.elements;
+      }
+      if (childElements?.length) {
+        const childIds = await getComponentIds(childElements, cache);
+        ids.push(...childIds);
+      }
+      return ids;
+    })
+  );
+  return [...new Set(results.flat())];
+}
+async function getDocumentsMap(ids, cache) {
+  const documents = await Promise.all(
+    ids.map(async (id2) => {
+      const document = await cache.get(id2);
+      if (!document) {
+        return null;
+      }
+      return [id2, document];
+    })
+  );
+  return new Map(documents.filter((document) => document !== null));
+}
+
+// src/store/actions/load-components-overridable-props.ts
+var import_store22 = require("@elementor/store");
+function loadComponentsOverridableProps(componentIds) {
+  if (!componentIds.length) {
+    return;
+  }
+  return Promise.all(componentIds.map(loadComponentOverrides));
+}
+async function loadComponentOverrides(componentId) {
+  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store22.__getState)(), componentId);
+  if (isOverridablePropsLoaded) {
+    return;
+  }
+  const overridableProps = await apiClient.getOverridableProps(componentId);
+  if (!overridableProps) {
+    return;
+  }
+  (0, import_store22.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps
+    })
+  );
+}
+
+// src/store/actions/load-components-styles.ts
+var import_store24 = require("@elementor/store");
+function loadComponentsStyles(documents) {
+  if (!documents.size) {
+    return;
+  }
+  const knownComponents = selectStyles((0, import_store24.__getState)());
+  const unknownDocuments = new Map([...documents.entries()].filter(([id2]) => !knownComponents[id2]));
+  if (!unknownDocuments.size) {
+    return;
+  }
+  addStyles(unknownDocuments);
+}
+function addStyles(documents) {
+  const styles = Object.fromEntries(
+    [...documents.entries()].map(([id2, document]) => [id2, extractStylesFromDocument(document)])
+  );
+  (0, import_store24.__dispatch)(slice.actions.addStyles(styles));
+}
+function extractStylesFromDocument(document) {
+  if (!document.elements?.length) {
+    return [];
+  }
+  return document.elements.flatMap(extractStylesFromElement);
+}
+function extractStylesFromElement(element) {
+  return [
+    ...Object.values(element.styles ?? {}),
+    ...(element.elements ?? []).flatMap(extractStylesFromElement)
+  ];
+}
+
+// src/store/actions/load-components-assets.ts
+async function loadComponentsAssets(elements) {
+  const documents = await getComponentDocuments(elements);
+  updateDocumentState(documents);
+  loadComponentsStyles(documents);
+  await loadComponentsOverridableProps([...documents.keys()]);
+}
+function updateDocumentState(documents) {
+  const isDrafted = [...documents.values()].some(import_editor_documents2.isDocumentDirty);
+  if (isDrafted) {
+    (0, import_editor_documents2.setDocumentModifiedStatus)(true);
+  }
+}
+
+// src/components/load-template-components.tsx
+var LoadTemplateComponents = () => {
+  const templates = (0, import_editor_templates.useLoadedTemplates)();
+  (0, import_react7.useEffect)(() => {
+    loadComponentsAssets(templates.flatMap((elements) => elements ?? []));
+  }, [templates]);
+  return null;
+};
 
 // src/create-component-type.ts
 var import_editor_canvas4 = require("@elementor/editor-canvas");
-var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_notifications = require("@elementor/editor-notifications");
-var import_store20 = require("@elementor/store");
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_notifications2 = require("@elementor/editor-notifications");
+var import_store26 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/utils/format-component-elements-id.ts
 var import_utils3 = require("@elementor/utils");
@@ -1709,27 +2240,27 @@ function formatComponentElementsId(elements, path) {
 }
 
 // src/utils/switch-to-component.ts
-var import_editor_documents2 = require("@elementor/editor-documents");
-var import_editor_elements5 = require("@elementor/editor-elements");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_documents3 = require("@elementor/editor-documents");
+var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 async function switchToComponent(componentId, componentInstanceId, element) {
   const selector = getSelector(element, componentInstanceId);
-  (0, import_editor_documents2.invalidateDocumentData)(componentId);
-  await (0, import_editor_documents2.switchToDocument)(componentId, {
+  (0, import_editor_documents3.invalidateDocumentData)(componentId);
+  await (0, import_editor_documents3.switchToDocument)(componentId, {
     selector,
     mode: "autosave",
     setAsInitial: false,
     shouldScroll: false
   });
-  const currentDocumentContainer = (0, import_editor_elements5.getCurrentDocumentContainer)();
+  const currentDocumentContainer = (0, import_editor_elements8.getCurrentDocumentContainer)();
   const topLevelElement = currentDocumentContainer?.children?.[0];
   if (topLevelElement) {
-    (0, import_editor_elements5.selectElement)(topLevelElement.id);
+    (0, import_editor_elements8.selectElement)(topLevelElement.id);
     expandNavigator();
   }
 }
 async function expandNavigator() {
-  await (0, import_editor_v1_adapters2.__privateRunCommand)("navigator/expand-all");
+  await (0, import_editor_v1_adapters3.__privateRunCommand)("navigator/expand-all");
 }
 function getSelector(element, componentInstanceId) {
   if (element) {
@@ -1760,54 +2291,15 @@ function buildUniqueSelector(element) {
   return selectors.join(" ");
 }
 
-// src/utils/tracking.ts
-var import_events = require("@elementor/events");
-var import_store18 = 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;
-  }
-  const name = config.names.components[action];
-  dispatchEvent?.(name, { ...data, source, "Feature name": FEATURE_NAME });
-};
-var onElementDrop = (_args, element) => {
-  if (!(element?.model?.get("widgetType") === "e-component")) {
-    return;
-  }
-  const editorSettings = element.model.get("editor_settings");
-  const componentName = editorSettings?.title;
-  const componentUID = editorSettings?.component_uid;
-  const instanceId = element.id;
-  const createdThisSession = selectCreatedThisSession((0, import_store18.__getState)());
-  const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
-  const eventsManagerConfig = window.elementorCommon.eventsManager.config;
-  const { locations, secondaryLocations } = eventsManagerConfig;
-  trackComponentEvent({
-    action: "instanceAdded",
-    source: "user",
-    instance_id: instanceId,
-    component_uid: componentUID,
-    component_name: componentName,
-    is_same_session_reuse: isSameSessionReuse,
-    location: locations.widgetPanel,
-    secondary_location: secondaryLocations.componentsTab
-  });
-};
-
 // src/create-component-type.ts
-var COMPONENT_WIDGET_TYPE = "e-component";
+var COMPONENT_WIDGET_TYPE2 = "e-component";
 var EDIT_COMPONENT_UPGRADE_URL = "https://go.elementor.com/go-pro-components-edit/";
 var COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID = "component-edit-upgrade";
 function notifyComponentEditUpgrade() {
-  (0, import_editor_notifications.notify)({
+  (0, import_editor_notifications2.notify)({
     type: "promotion",
     id: COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID,
-    message: (0, import_i18n7.__)("Your Pro subscription has expired. Renew to edit components.", "elementor"),
+    message: (0, import_i18n10.__)("Your Pro subscription has expired. Renew to edit components.", "elementor"),
     additionalActionProps: [
       {
         size: "small",
@@ -1815,7 +2307,7 @@ function notifyComponentEditUpgrade() {
         color: "promotion",
         href: EDIT_COMPONENT_UPGRADE_URL,
         target: "_blank",
-        children: (0, import_i18n7.__)("Upgrade Now", "elementor")
+        children: (0, import_i18n10.__)("Upgrade Now", "elementor")
       }
     ]
   });
@@ -1830,7 +2322,7 @@ var updateGroups = (groups, config) => {
       (action) => disabledActions.includes(action.name) ? { ...action, isEnabled: () => false } : action
     );
     if (addConfig) {
-      updatedActions.splice(addConfig.index, 0, addConfig.action);
+      updatedActions.splice(addConfig.index, 0, ...addConfig.actions);
     }
     return { ...group, actions: updatedActions };
   });
@@ -1857,7 +2349,7 @@ function createComponentView(options) {
     eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
     #componentRenderContext;
     isComponentCurrentlyEdited() {
-      const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
+      const currentDocument = (0, import_editor_documents4.getCurrentDocument)();
       return currentDocument?.id === this.getComponentId();
     }
     getRenderContext() {
@@ -1929,26 +2421,35 @@ function createComponentView(options) {
     _getContextMenuConfig() {
       const isAdministrator = isUserAdministrator();
       const hasPro = (0, import_utils4.hasProInstalled)();
-      const proLabel = (0, import_i18n7.__)("PRO", "elementor");
+      const proLabel = (0, import_i18n10.__)("PRO", "elementor");
       const badgeClass = "elementor-context-menu-list__item__shortcut__new-badge";
       const proBadge = `<a href="${EDIT_COMPONENT_UPGRADE_URL}" target="_blank" onclick="event.stopPropagation()" class="${badgeClass}">${proLabel}</a>`;
+      const editComponentAction = {
+        name: "edit component",
+        icon: "eicon-edit",
+        title: () => (0, import_i18n10.__)("Edit Component", "elementor"),
+        ...!hasPro && { shortcut: proBadge, hasShortcutAction: true },
+        isEnabled: () => hasPro,
+        callback: (_, eventData) => this.editComponent(eventData)
+      };
+      const detachInstanceAction = {
+        name: "detach instance",
+        icon: "eicon-chain-broken",
+        title: () => (0, import_i18n10.__)("Detach from Component", "elementor"),
+        isEnabled: () => true,
+        callback: (_, eventData) => this.detachInstance(eventData)
+      };
+      const actions = isAdministrator ? [editComponentAction, detachInstanceAction] : [detachInstanceAction];
       const addedGroup = {
         general: {
           index: 1,
-          action: {
-            name: "edit component",
-            icon: "eicon-edit",
-            title: () => (0, import_i18n7.__)("Edit Component", "elementor"),
-            ...!hasPro && { shortcut: proBadge, hasShortcutAction: true },
-            isEnabled: () => hasPro,
-            callback: (_, eventData) => this.editComponent(eventData)
-          }
+          actions
         }
       };
       const disabledGroup = {
         clipboard: ["pasteStyle", "resetStyle"]
       };
-      return { add: isAdministrator ? addedGroup : {}, disable: disabledGroup };
+      return { add: addedGroup, disable: disabledGroup };
     }
     async switchDocument() {
       const { isAllowedToSwitchDocument, lockedBy } = await apiClient.getComponentLockStatus(
@@ -1977,6 +2478,29 @@ function createComponentView(options) {
         trigger
       });
     }
+    detachInstance({ trigger, location, secondaryLocation }) {
+      const componentId = this.getComponentId();
+      const instanceId = this.model.get("id");
+      if (!componentId || !instanceId) {
+        return;
+      }
+      const handleConfirm = async () => {
+        try {
+          await detachComponentInstance({
+            instanceId,
+            componentId,
+            trackingInfo: { location, secondaryLocation, trigger }
+          });
+        } catch {
+          (0, import_editor_notifications2.notify)({
+            type: "error",
+            message: (0, import_i18n10.__)("Failed to detach component instance.", "elementor"),
+            id: "detach-component-instance-failed"
+          });
+        }
+      };
+      options.showDetachConfirmDialog?.(handleConfirm);
+    }
     handleDblClick(e) {
       e.stopPropagation();
       if (!isUserAdministrator()) {
@@ -2048,7 +2572,7 @@ function createComponentModel() {
       }
       const componentUid = editorSettings?.component_uid;
       if (componentUid) {
-        const component = selectComponentByUid((0, import_store20.__getState)(), componentUid);
+        const component = selectComponentByUid((0, import_store26.__getState)(), componentUid);
         if (component?.name) {
           return component.name;
         }
@@ -2056,146 +2580,18 @@ function createComponentModel() {
       return window.elementor.getElementData(this).title;
     },
     getComponentId() {
-      return this.get("componentId") || null;
-    },
-    getComponentName() {
-      return this.getTitle();
-    },
-    getComponentUid() {
-      const editorSettings = this.get("editor_settings");
-      return editorSettings?.component_uid || null;
-    }
-  });
-}
-
-// src/utils/is-component-instance.ts
-function isComponentInstance(elementModel) {
-  return [elementModel.widgetType, elementModel.elType].includes(COMPONENT_WIDGET_TYPE);
-}
-
-// src/utils/get-component-documents.ts
-async function getComponentDocuments(elements, cache = /* @__PURE__ */ new Map()) {
-  const componentIds = await getComponentIds(elements, cache);
-  return getDocumentsMap(componentIds, cache);
-}
-async function getComponentIds(elements, cache) {
-  const results = await Promise.all(
-    elements.map(async ({ widgetType, elType, elements: childElements, settings }) => {
-      const ids = [];
-      if (isComponentInstance({ widgetType, elType })) {
-        const componentId = settings?.component_instance?.value?.component_id.value;
-        if (!componentId) {
-          return ids;
-        }
-        ids.push(componentId);
-        if (!cache.has(componentId)) {
-          cache.set(componentId, getComponentDocumentData(componentId));
-        }
-        const doc = await cache.get(componentId);
-        childElements = doc?.elements;
-      }
-      if (childElements?.length) {
-        const childIds = await getComponentIds(childElements, cache);
-        ids.push(...childIds);
-      }
-      return ids;
-    })
-  );
-  return [...new Set(results.flat())];
-}
-async function getDocumentsMap(ids, cache) {
-  const documents = await Promise.all(
-    ids.map(async (id2) => {
-      const document = await cache.get(id2);
-      if (!document) {
-        return null;
-      }
-      return [id2, document];
-    })
-  );
-  return new Map(documents.filter((document) => document !== null));
-}
-
-// src/store/actions/load-components-overridable-props.ts
-var import_store22 = require("@elementor/store");
-function loadComponentsOverridableProps(componentIds) {
-  if (!componentIds.length) {
-    return;
-  }
-  return Promise.all(componentIds.map(loadComponentOverrides));
-}
-async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store22.__getState)(), componentId);
-  if (isOverridablePropsLoaded) {
-    return;
-  }
-  const overridableProps = await apiClient.getOverridableProps(componentId);
-  if (!overridableProps) {
-    return;
-  }
-  (0, import_store22.__dispatch)(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps
-    })
-  );
-}
-
-// src/store/actions/load-components-styles.ts
-var import_store24 = require("@elementor/store");
-function loadComponentsStyles(documents) {
-  if (!documents.size) {
-    return;
-  }
-  const knownComponents = selectStyles((0, import_store24.__getState)());
-  const unknownDocuments = new Map([...documents.entries()].filter(([id2]) => !knownComponents[id2]));
-  if (!unknownDocuments.size) {
-    return;
-  }
-  addStyles(unknownDocuments);
-}
-function addStyles(documents) {
-  const styles = Object.fromEntries(
-    [...documents.entries()].map(([id2, document]) => [id2, extractStylesFromDocument(document)])
-  );
-  (0, import_store24.__dispatch)(slice.actions.addStyles(styles));
-}
-function extractStylesFromDocument(document) {
-  if (!document.elements?.length) {
-    return [];
-  }
-  return document.elements.flatMap(extractStylesFromElement);
-}
-function extractStylesFromElement(element) {
-  return [
-    ...Object.values(element.styles ?? {}),
-    ...(element.elements ?? []).flatMap(extractStylesFromElement)
-  ];
-}
-
-// src/store/actions/load-components-assets.ts
-async function loadComponentsAssets(elements) {
-  const documents = await getComponentDocuments(elements);
-  updateDocumentState(documents);
-  loadComponentsStyles(documents);
-  await loadComponentsOverridableProps([...documents.keys()]);
-}
-function updateDocumentState(documents) {
-  const isDrafted = [...documents.values()].some(import_editor_documents4.isDocumentDirty);
-  if (isDrafted) {
-    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
-  }
+      return this.get("componentId") || null;
+    },
+    getComponentName() {
+      return this.getTitle();
+    },
+    getComponentUid() {
+      const editorSettings = this.get("editor_settings");
+      return editorSettings?.component_uid || null;
+    }
+  });
 }
 
-// src/components/load-template-components.tsx
-var LoadTemplateComponents = () => {
-  const templates = (0, import_editor_templates.useLoadedTemplates)();
-  (0, import_react6.useEffect)(() => {
-    loadComponentsAssets(templates.flatMap((elements) => elements ?? []));
-  }, [templates]);
-  return null;
-};
-
 // src/extended/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_controls7 = require("@elementor/editor-controls");
@@ -2203,28 +2599,28 @@ var import_editor_documents13 = require("@elementor/editor-documents");
 var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_panels6 = require("@elementor/editor-panels");
-var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
-var import_i18n31 = require("@wordpress/i18n");
+var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
+var import_i18n34 = require("@wordpress/i18n");
 
 // src/extended/components/component-panel-header/component-panel-header.tsx
-var React27 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_documents8 = require("@elementor/editor-documents");
 var import_editor_panels5 = require("@elementor/editor-panels");
-var import_editor_ui12 = require("@elementor/editor-ui");
-var import_icons14 = require("@elementor/icons");
-var import_store30 = require("@elementor/store");
+var import_editor_ui13 = require("@elementor/editor-ui");
+var import_icons16 = require("@elementor/icons");
+var import_store32 = require("@elementor/store");
 var import_ui23 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
+var import_i18n22 = require("@wordpress/i18n");
 
 // src/extended/hooks/use-navigate-back.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_editor_documents5 = require("@elementor/editor-documents");
-var import_store26 = require("@elementor/store");
+var import_store28 = require("@elementor/store");
 function useNavigateBack() {
-  const path = (0, import_store26.__useSelector)(selectPath);
+  const path = (0, import_store28.__useSelector)(selectPath);
   const documentsManager = (0, import_editor_documents5.getV1DocumentsManager)();
-  return (0, import_react7.useCallback)(() => {
+  return (0, import_react8.useCallback)(() => {
     const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
     if (prevComponentId && prevComponentInstanceId) {
       switchToComponent(prevComponentId, prevComponentInstanceId);
@@ -2235,11 +2631,11 @@ function useNavigateBack() {
 }
 
 // src/extended/components/component-introduction.tsx
-var React18 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_editor_controls4 = require("@elementor/editor-controls");
-var import_editor_ui7 = require("@elementor/editor-ui");
+var import_editor_ui8 = require("@elementor/editor-ui");
 var import_ui14 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 var ComponentIntroduction = ({
   anchorRef,
   shouldShowIntroduction,
@@ -2248,7 +2644,7 @@ var ComponentIntroduction = ({
   if (!anchorRef.current || !shouldShowIntroduction) {
     return null;
   }
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React20.createElement(
     import_ui14.Popover,
     {
       anchorEl: anchorRef.current,
@@ -2263,20 +2659,20 @@ var ComponentIntroduction = ({
       },
       onClose
     },
-    /* @__PURE__ */ React18.createElement(import_ui14.Box, { sx: { width: "296px" } }, /* @__PURE__ */ React18.createElement(import_editor_ui7.PopoverHeader, { title: (0, import_i18n8.__)("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React20.createElement(import_ui14.Box, { sx: { width: "296px" } }, /* @__PURE__ */ React20.createElement(import_editor_ui8.PopoverHeader, { title: (0, import_i18n11.__)("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React20.createElement(
       import_ui14.Image,
       {
         sx: { width: "296px", height: "160px" },
         src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
         alt: ""
       }
-    ), /* @__PURE__ */ React18.createElement(import_editor_controls4.PopoverContent, null, /* @__PURE__ */ React18.createElement(import_ui14.Stack, { sx: { p: 2 } }, /* @__PURE__ */ React18.createElement(import_ui14.Typography, { variant: "body2" }, (0, import_i18n8.__)("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React18.createElement(import_ui14.Typography, { variant: "body2" }, (0, import_i18n8.__)(
+    ), /* @__PURE__ */ React20.createElement(import_editor_controls4.PopoverContent, null, /* @__PURE__ */ React20.createElement(import_ui14.Stack, { sx: { p: 2 } }, /* @__PURE__ */ React20.createElement(import_ui14.Typography, { variant: "body2" }, (0, import_i18n11.__)("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React20.createElement(import_ui14.Typography, { variant: "body2" }, (0, import_i18n11.__)(
       "Select any Element, then in the General tab, click next to any setting you want users to customize - like text, images, or links.",
       "elementor"
-    )), /* @__PURE__ */ React18.createElement(import_ui14.Typography, { variant: "body2", sx: { mt: 2 } }, (0, import_i18n8.__)(
+    )), /* @__PURE__ */ React20.createElement(import_ui14.Typography, { variant: "body2", sx: { mt: 2 } }, (0, import_i18n11.__)(
       "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
       "elementor"
-    )), /* @__PURE__ */ React18.createElement(
+    )), /* @__PURE__ */ React20.createElement(
       import_ui14.Link,
       {
         href: "http://go.elementor.com/components-guide",
@@ -2285,28 +2681,28 @@ var ComponentIntroduction = ({
         color: "info.main",
         variant: "body2"
       },
-      (0, import_i18n8.__)("Learn more", "elementor")
-    ), /* @__PURE__ */ React18.createElement(import_ui14.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { pt: 1 } }, /* @__PURE__ */ React18.createElement(import_ui14.Button, { size: "medium", variant: "contained", onClick: onClose }, (0, import_i18n8.__)("Got it", "elementor"))))))
+      (0, import_i18n11.__)("Learn more", "elementor")
+    ), /* @__PURE__ */ React20.createElement(import_ui14.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { pt: 1 } }, /* @__PURE__ */ React20.createElement(import_ui14.Button, { size: "medium", variant: "contained", onClick: onClose }, (0, import_i18n11.__)("Got it", "elementor"))))))
   );
 };
 
 // src/extended/components/component-properties-panel/component-properties-panel.tsx
-var React25 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_panels4 = require("@elementor/editor-panels");
-var import_editor_ui11 = require("@elementor/editor-ui");
+var import_editor_ui12 = require("@elementor/editor-ui");
 var import_ui21 = require("@elementor/ui");
-var import_i18n17 = require("@wordpress/i18n");
+var import_i18n20 = require("@wordpress/i18n");
 
 // src/extended/components/component-properties-panel/component-properties-panel-content.tsx
-var React24 = __toESM(require("react"));
-var import_react11 = require("react");
+var React26 = __toESM(require("react"));
+var import_react12 = require("react");
 var import_editor_documents7 = require("@elementor/editor-documents");
 var import_editor_panels3 = require("@elementor/editor-panels");
-var import_icons12 = require("@elementor/icons");
+var import_icons14 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
 var import_utils6 = require("@elementor/utils");
-var import_i18n16 = require("@wordpress/i18n");
+var import_i18n19 = require("@wordpress/i18n");
 
 // src/extended/store/actions/add-overridable-group.ts
 function addOverridableGroup({
@@ -2347,7 +2743,7 @@ function addOverridableGroup({
 
 // src/extended/store/utils/groups-transformers.ts
 var import_utils5 = require("@elementor/utils");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 function removePropFromAllGroups(groups, propKey) {
   const propKeys = Array.isArray(propKey) ? propKey : [propKey];
   return {
@@ -2416,7 +2812,7 @@ function resolveOrCreateGroup(groups, requestedGroupId) {
 }
 function createGroup(groups, groupId, label) {
   const newGroupId = groupId || (0, import_utils5.generateUniqueId)("group");
-  const newLabel = label || (0, import_i18n9.__)("Default", "elementor");
+  const newLabel = label || (0, import_i18n12.__)("Default", "elementor");
   return {
     groups: {
       ...groups,
@@ -2509,9 +2905,9 @@ function deleteOverridableGroup({ componentId, groupId }) {
 }
 
 // src/extended/utils/revert-overridable-settings.ts
-var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_elements9 = require("@elementor/editor-elements");
 function revertElementOverridableSetting(elementId, settingKey, originValue, overrideKey) {
-  const container = (0, import_editor_elements6.getContainer)(elementId);
+  const container = (0, import_editor_elements9.getContainer)(elementId);
   if (!container) {
     return;
   }
@@ -2519,14 +2915,14 @@ function revertElementOverridableSetting(elementId, settingKey, originValue, ove
     revertComponentInstanceOverridableSetting(elementId, overrideKey);
     return;
   }
-  (0, import_editor_elements6.updateElementSettings)({
+  (0, import_editor_elements9.updateElementSettings)({
     id: elementId,
     props: { [settingKey]: originValue ?? null },
     withHistory: false
   });
 }
 function revertComponentInstanceOverridableSetting(elementId, overrideKey) {
-  const setting = (0, import_editor_elements6.getElementSetting)(elementId, "component_instance");
+  const setting = (0, import_editor_elements9.getElementSetting)(elementId, "component_instance");
   const componentInstance = componentInstancePropTypeUtil.extract(setting);
   const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance?.overrides);
   if (!overrides?.length) {
@@ -2537,7 +2933,7 @@ function revertComponentInstanceOverridableSetting(elementId, overrideKey) {
     ...componentInstance,
     overrides: componentInstanceOverridesPropTypeUtil.create(revertedOverrides)
   });
-  (0, import_editor_elements6.updateElementSettings)({
+  (0, import_editor_elements9.updateElementSettings)({
     id: elementId,
     props: { component_instance: updatedSetting },
     withHistory: false
@@ -2602,8 +2998,8 @@ function revertComponentInstanceSettings(settings) {
   };
 }
 function revertAllOverridablesInContainer(container) {
-  (0, import_editor_elements6.getAllDescendants)(container).forEach((element) => {
-    if (element.model.get("widgetType") === COMPONENT_WIDGET_TYPE) {
+  (0, import_editor_elements9.getAllDescendants)(container).forEach((element) => {
+    if (element.model.get("widgetType") === COMPONENT_WIDGET_TYPE2) {
       revertComponentInstanceOverridesInElement(element);
     } else {
       revertElementSettings(element);
@@ -2622,7 +3018,7 @@ function revertComponentInstanceOverridesInElement(element) {
     ...componentInstance,
     overrides: componentInstanceOverridesPropTypeUtil.create(revertedOverrides)
   });
-  (0, import_editor_elements6.updateElementSettings)({
+  (0, import_editor_elements9.updateElementSettings)({
     id: element.id,
     props: { component_instance: updatedSetting },
     withHistory: false
@@ -2634,7 +3030,7 @@ function revertElementSettings(element) {
   if (!hasChanges) {
     return;
   }
-  (0, import_editor_elements6.updateElementSettings)({
+  (0, import_editor_elements9.updateElementSettings)({
     id: element.id,
     props: revertedSettings,
     withHistory: false
@@ -2758,14 +3154,14 @@ function updateOverridablePropParams({
 }
 
 // src/extended/components/component-properties-panel/properties-empty-state.tsx
-var React19 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_icons8 = require("@elementor/icons");
+var React21 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_icons10 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 function PropertiesEmptyState({ introductionRef }) {
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
     import_ui15.Stack,
     {
       alignItems: "center",
@@ -2775,11 +3171,11 @@ function PropertiesEmptyState({ introductionRef }) {
       sx: { px: 2.5, pt: 10, pb: 5.5 },
       gap: 1
     },
-    /* @__PURE__ */ React19.createElement(import_icons8.ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React19.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n10.__)("Add your first property", "elementor")),
-    /* @__PURE__ */ React19.createElement(import_ui15.Typography, { align: "center", variant: "caption" }, (0, import_i18n10.__)("Make instances flexible while keeping design synced.", "elementor")),
-    /* @__PURE__ */ React19.createElement(import_ui15.Typography, { align: "center", variant: "caption" }, (0, import_i18n10.__)("Select any element, then click + next to a setting to expose it.", "elementor")),
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React21.createElement(import_icons10.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React21.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n13.__)("Add your first property", "elementor")),
+    /* @__PURE__ */ React21.createElement(import_ui15.Typography, { align: "center", variant: "caption" }, (0, import_i18n13.__)("Make instances flexible while keeping design synced.", "elementor")),
+    /* @__PURE__ */ React21.createElement(import_ui15.Typography, { align: "center", variant: "caption" }, (0, import_i18n13.__)("Select any element, then click + next to a setting to expose it.", "elementor")),
+    /* @__PURE__ */ React21.createElement(
       import_ui15.Link,
       {
         variant: "caption",
@@ -2787,9 +3183,9 @@ function PropertiesEmptyState({ introductionRef }) {
         sx: { textDecorationLine: "underline" },
         onClick: () => setIsOpen(true)
       },
-      (0, import_i18n10.__)("Learn more", "elementor")
+      (0, import_i18n13.__)("Learn more", "elementor")
     )
-  ), /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React21.createElement(
     ComponentIntroduction,
     {
       anchorRef: introductionRef,
@@ -2800,30 +3196,30 @@ function PropertiesEmptyState({ introductionRef }) {
 }
 
 // src/extended/components/component-properties-panel/properties-group.tsx
-var React23 = __toESM(require("react"));
-var import_editor_ui9 = require("@elementor/editor-ui");
-var import_icons11 = require("@elementor/icons");
+var React25 = __toESM(require("react"));
+var import_editor_ui10 = require("@elementor/editor-ui");
+var import_icons13 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 
 // src/extended/components/component-properties-panel/property-item.tsx
-var React22 = __toESM(require("react"));
-var import_editor_elements7 = require("@elementor/editor-elements");
-var import_icons10 = require("@elementor/icons");
+var React24 = __toESM(require("react"));
+var import_editor_elements10 = require("@elementor/editor-elements");
+var import_icons12 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
 
 // src/extended/components/overridable-props/overridable-prop-form.tsx
-var React20 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_editor_ui8 = require("@elementor/editor-ui");
+var React22 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_editor_ui9 = require("@elementor/editor-ui");
 var import_ui16 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 
 // src/extended/components/overridable-props/utils/validate-prop-label.ts
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 var ERROR_MESSAGES = {
-  EMPTY_NAME: (0, import_i18n11.__)("Property name is required", "elementor"),
-  DUPLICATE_NAME: (0, import_i18n11.__)("Property name already exists", "elementor")
+  EMPTY_NAME: (0, import_i18n14.__)("Property name is required", "elementor"),
+  DUPLICATE_NAME: (0, import_i18n14.__)("Property name already exists", "elementor")
 };
 function validatePropLabel(label, existingLabels, currentLabel) {
   const trimmedLabel = label.trim();
@@ -2847,17 +3243,17 @@ function validatePropLabel(label, existingLabels, currentLabel) {
 
 // src/extended/components/overridable-props/overridable-prop-form.tsx
 var SIZE = "tiny";
-var DEFAULT_GROUP = { value: null, label: (0, import_i18n12.__)("Default", "elementor") };
+var DEFAULT_GROUP = { value: null, label: (0, import_i18n15.__)("Default", "elementor") };
 function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels = [], sx }) {
   const selectGroups = groups?.length ? groups : [DEFAULT_GROUP];
-  const [propLabel, setPropLabel] = (0, import_react9.useState)(currentValue?.label ?? null);
-  const [group, setGroup] = (0, import_react9.useState)(currentValue?.groupId ?? selectGroups[0]?.value ?? null);
-  const [error, setError] = (0, import_react9.useState)(null);
-  const name = (0, import_i18n12.__)("Name", "elementor");
-  const groupName = (0, import_i18n12.__)("Group Name", "elementor");
+  const [propLabel, setPropLabel] = (0, import_react10.useState)(currentValue?.label ?? null);
+  const [group, setGroup] = (0, import_react10.useState)(currentValue?.groupId ?? selectGroups[0]?.value ?? null);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const name = (0, import_i18n15.__)("Name", "elementor");
+  const groupName = (0, import_i18n15.__)("Group Name", "elementor");
   const isCreate = currentValue === void 0;
-  const title = isCreate ? (0, import_i18n12.__)("Create new property", "elementor") : (0, import_i18n12.__)("Update property", "elementor");
-  const ctaLabel = isCreate ? (0, import_i18n12.__)("Create", "elementor") : (0, import_i18n12.__)("Update", "elementor");
+  const title = isCreate ? (0, import_i18n15.__)("Create new property", "elementor") : (0, import_i18n15.__)("Update property", "elementor");
+  const ctaLabel = isCreate ? (0, import_i18n15.__)("Create", "elementor") : (0, import_i18n15.__)("Update", "elementor");
   const handleSubmit = () => {
     const validationResult = validatePropLabel(propLabel ?? "", existingLabels, currentValue?.label);
     if (!validationResult.isValid) {
@@ -2866,7 +3262,7 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
     }
     onSubmit({ label: propLabel ?? "", group });
   };
-  return /* @__PURE__ */ React20.createElement(import_editor_ui8.Form, { onSubmit: handleSubmit, "data-testid": "overridable-prop-form" }, /* @__PURE__ */ React20.createElement(import_ui16.Stack, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React22.createElement(import_editor_ui9.Form, { onSubmit: handleSubmit, "data-testid": "overridable-prop-form" }, /* @__PURE__ */ React22.createElement(import_ui16.Stack, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React22.createElement(
     import_ui16.Stack,
     {
       direction: "row",
@@ -2875,14 +3271,14 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
     },
-    /* @__PURE__ */ React20.createElement(import_ui16.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__PURE__ */ React20.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React20.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(import_ui16.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React20.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React22.createElement(import_ui16.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React22.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React22.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(import_ui16.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React22.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
     import_ui16.TextField,
     {
       name,
       size: SIZE,
       fullWidth: true,
-      placeholder: (0, import_i18n12.__)("Enter value", "elementor"),
+      placeholder: (0, import_i18n15.__)("Enter value", "elementor"),
       value: propLabel ?? "",
       onChange: (e) => {
         const newValue = e.target.value;
@@ -2897,7 +3293,7 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
       error: Boolean(error),
       helperText: error
     }
-  ))), /* @__PURE__ */ React20.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React20.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(import_ui16.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React20.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
+  ))), /* @__PURE__ */ React22.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React22.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(import_ui16.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React22.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
     import_ui16.Select,
     {
       name: groupName,
@@ -2913,8 +3309,8 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
         return selectGroups.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
       }
     },
-    selectGroups.map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React20.createElement(import_editor_ui8.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React20.createElement(import_ui16.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React20.createElement(
+    selectGroups.map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React22.createElement(import_editor_ui9.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React22.createElement(import_ui16.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React22.createElement(
     import_ui16.Button,
     {
       type: "submit",
@@ -2928,11 +3324,11 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
 }
 
 // src/extended/components/component-properties-panel/sortable.tsx
-var React21 = __toESM(require("react"));
-var import_icons9 = require("@elementor/icons");
+var React23 = __toESM(require("react"));
+var import_icons11 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
-var SortableProvider = (props) => /* @__PURE__ */ React21.createElement(import_ui17.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React21.createElement(
+var SortableProvider = (props) => /* @__PURE__ */ React23.createElement(import_ui17.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React23.createElement(
   StyledSortableTrigger,
   {
     ...props,
@@ -2940,9 +3336,9 @@ var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React2
     className: `sortable-trigger ${triggerClassName ?? ""}`.trim(),
     "aria-label": "sort"
   },
-  /* @__PURE__ */ React21.createElement(import_icons9.GripVerticalIcon, { fontSize: "tiny" })
+  /* @__PURE__ */ React23.createElement(import_icons11.GripVerticalIcon, { fontSize: "tiny" })
 );
-var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React21.createElement(
+var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React23.createElement(
   import_ui17.UnstableSortableItem,
   {
     id: id2,
@@ -2956,7 +3352,7 @@ var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React21.createElem
       showDropIndication,
       isDragOverlay,
       isDragPlaceholder
-    }) => /* @__PURE__ */ React21.createElement(
+    }) => /* @__PURE__ */ React23.createElement(
       import_ui17.Box,
       {
         ...itemProps,
@@ -2973,7 +3369,7 @@ var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React21.createElem
         triggerProps,
         triggerStyle
       }),
-      showDropIndication && /* @__PURE__ */ React21.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+      showDropIndication && /* @__PURE__ */ React23.createElement(SortableItemIndicator, { style: dropIndicationStyle })
     )
   }
 );
@@ -3014,7 +3410,7 @@ function PropertyItem({
     event.stopPropagation();
     onDelete(prop.overrideKey);
   };
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
     import_ui18.Box,
     {
       ...(0, import_ui18.bindTrigger)(popoverState),
@@ -3049,17 +3445,17 @@ function PropertyItem({
         }
       }
     },
-    /* @__PURE__ */ React22.createElement(SortableTrigger, { ...sortableTriggerProps }),
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React24.createElement(
       import_ui18.Box,
       {
         sx: { display: "flex", alignItems: "center", color: "text.primary", fontSize: 12, padding: 0.25 }
       },
-      /* @__PURE__ */ React22.createElement("i", { className: icon })
+      /* @__PURE__ */ React24.createElement("i", { className: icon })
     ),
-    /* @__PURE__ */ React22.createElement(import_ui18.Typography, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
-    /* @__PURE__ */ React22.createElement(import_ui18.IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React22.createElement(import_icons10.XIcon, { fontSize: "tiny" }))
-  ), /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(import_ui18.Typography, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
+    /* @__PURE__ */ React24.createElement(import_ui18.IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React24.createElement(import_icons12.XIcon, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React24.createElement(
     import_ui18.Popover,
     {
       ...popoverProps,
@@ -3067,7 +3463,7 @@ function PropertyItem({
       transformOrigin: { vertical: "top", horizontal: "left" },
       PaperProps: { sx: { width: popoverState.anchorEl?.getBoundingClientRect().width } }
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -3081,7 +3477,7 @@ function PropertyItem({
 }
 function getElementIcon(prop) {
   const elType = prop.elType === "widget" ? prop.widgetType : prop.elType;
-  const widgetsCache = (0, import_editor_elements7.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements10.getWidgetsCache)();
   if (!widgetsCache) {
     return "eicon-apps";
   }
@@ -3118,14 +3514,14 @@ function PropertiesGroup({
     popupState.close();
     onGroupDelete(group.id);
   };
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     import_ui19.Box,
     {
       sx: {
         opacity: isDragPlaceholder ? 0.5 : 1
       }
     },
-    /* @__PURE__ */ React23.createElement(import_ui19.Stack, { gap: 1 }, /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React25.createElement(import_ui19.Stack, { gap: 1 }, /* @__PURE__ */ React25.createElement(
       import_ui19.Box,
       {
         className: "group-header",
@@ -3145,8 +3541,8 @@ function PropertiesGroup({
           }
         }
       },
-      /* @__PURE__ */ React23.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
-      /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React23.createElement(
+      /* @__PURE__ */ React25.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
+      /* @__PURE__ */ React25.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React25.createElement(
         import_ui19.Box,
         {
           sx: {
@@ -3164,8 +3560,8 @@ function PropertiesGroup({
             width: "100%"
           }
         },
-        /* @__PURE__ */ React23.createElement(
-          import_editor_ui9.EditableField,
+        /* @__PURE__ */ React25.createElement(
+          import_editor_ui10.EditableField,
           {
             ref: editableRef,
             as: import_ui19.Typography,
@@ -3175,26 +3571,26 @@ function PropertiesGroup({
             ...getEditableProps()
           }
         )
-      ) : /* @__PURE__ */ React23.createElement(
-        import_editor_ui9.EllipsisWithTooltip,
+      ) : /* @__PURE__ */ React25.createElement(
+        import_editor_ui10.EllipsisWithTooltip,
         {
           title: group.label,
           as: import_ui19.Typography,
           variant: "caption",
           sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
         }
-      ), /* @__PURE__ */ React23.createElement(
+      ), /* @__PURE__ */ React25.createElement(
         import_ui19.IconButton,
         {
           className: "group-menu",
           size: "tiny",
           sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
-          "aria-label": (0, import_i18n13.__)("Group actions", "elementor"),
+          "aria-label": (0, import_i18n16.__)("Group actions", "elementor"),
           ...(0, import_ui19.bindTrigger)(popupState)
         },
-        /* @__PURE__ */ React23.createElement(import_icons11.DotsVerticalIcon, { fontSize: "tiny" })
+        /* @__PURE__ */ React25.createElement(import_icons13.DotsVerticalIcon, { fontSize: "tiny" })
       ))
-    ), /* @__PURE__ */ React23.createElement(import_ui19.List, { sx: { p: 0, display: "flex", flexDirection: "column", gap: 1 } }, /* @__PURE__ */ React23.createElement(SortableProvider, { value: group.props, onChange: onPropsReorder }, groupProps.map((prop) => /* @__PURE__ */ React23.createElement(SortableItem, { key: prop.overrideKey, id: prop.overrideKey }, ({ triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder }) => /* @__PURE__ */ React23.createElement(
+    ), /* @__PURE__ */ React25.createElement(import_ui19.List, { sx: { p: 0, display: "flex", flexDirection: "column", gap: 1 } }, /* @__PURE__ */ React25.createElement(SortableProvider, { value: group.props, onChange: onPropsReorder }, groupProps.map((prop) => /* @__PURE__ */ React25.createElement(SortableItem, { key: prop.overrideKey, id: prop.overrideKey }, ({ triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder }) => /* @__PURE__ */ React25.createElement(
       PropertyItem,
       {
         prop,
@@ -3206,27 +3602,27 @@ function PropertiesGroup({
         onUpdate: (data) => onPropertyUpdate(prop.overrideKey, data)
       }
     )))))),
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React25.createElement(
       import_ui19.Menu,
       {
         ...(0, import_ui19.bindMenu)(popupState),
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" }
       },
-      /* @__PURE__ */ React23.createElement(import_editor_ui9.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React23.createElement(import_ui19.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n13.__)("Rename", "elementor"))),
-      /* @__PURE__ */ React23.createElement(
+      /* @__PURE__ */ React25.createElement(import_editor_ui10.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React25.createElement(import_ui19.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n16.__)("Rename", "elementor"))),
+      /* @__PURE__ */ React25.createElement(
         import_ui19.Tooltip,
         {
-          title: hasProperties ? (0, import_i18n13.__)("To delete the group, first remove all the properties", "elementor") : "",
+          title: hasProperties ? (0, import_i18n16.__)("To delete the group, first remove all the properties", "elementor") : "",
           placement: "right"
         },
-        /* @__PURE__ */ React23.createElement("span", null, /* @__PURE__ */ React23.createElement(import_editor_ui9.MenuListItem, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React23.createElement(
+        /* @__PURE__ */ React25.createElement("span", null, /* @__PURE__ */ React25.createElement(import_editor_ui10.MenuListItem, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React25.createElement(
           import_ui19.Typography,
           {
             variant: "caption",
             sx: { color: hasProperties ? "text.disabled" : "error.light" }
           },
-          (0, import_i18n13.__)("Delete", "elementor")
+          (0, import_i18n16.__)("Delete", "elementor")
         )))
       )
     )
@@ -3234,10 +3630,10 @@ function PropertiesGroup({
 }
 
 // src/extended/components/component-properties-panel/use-current-editable-item.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_editor_documents6 = require("@elementor/editor-documents");
-var import_editor_ui10 = require("@elementor/editor-ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_editor_ui11 = require("@elementor/editor-ui");
+var import_i18n18 = require("@wordpress/i18n");
 
 // src/extended/store/actions/rename-overridable-group.ts
 function renameOverridableGroup({ componentId, groupId, label }) {
@@ -3258,10 +3654,10 @@ function renameOverridableGroup({ componentId, groupId, label }) {
 }
 
 // src/extended/components/component-properties-panel/utils/validate-group-label.ts
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n17 = require("@wordpress/i18n");
 var ERROR_MESSAGES2 = {
-  EMPTY_NAME: (0, import_i18n14.__)("Group name is required", "elementor"),
-  DUPLICATE_NAME: (0, import_i18n14.__)("Group name already exists", "elementor")
+  EMPTY_NAME: (0, import_i18n17.__)("Group name is required", "elementor"),
+  DUPLICATE_NAME: (0, import_i18n17.__)("Group name already exists", "elementor")
 };
 function validateGroupLabel(label, existingGroups) {
   const trimmedLabel = label.trim();
@@ -3277,7 +3673,7 @@ function validateGroupLabel(label, existingGroups) {
 
 // src/extended/components/component-properties-panel/use-current-editable-item.ts
 function useCurrentEditableItem() {
-  const [editingGroupId, setEditingGroupId] = (0, import_react10.useState)(null);
+  const [editingGroupId, setEditingGroupId] = (0, import_react11.useState)(null);
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(currentComponentId);
   const allGroupsRecord = overridableProps?.groups?.items ?? {};
@@ -3290,7 +3686,7 @@ function useCurrentEditableItem() {
   };
   const handleSubmit = (newLabel) => {
     if (!editingGroupId || !currentComponentId) {
-      throw new Error((0, import_i18n15.__)("Group ID or component ID is missing", "elementor"));
+      throw new Error((0, import_i18n18.__)("Group ID or component ID is missing", "elementor"));
     }
     renameOverridableGroup({
       componentId: currentComponentId,
@@ -3305,7 +3701,7 @@ function useCurrentEditableItem() {
     isEditing,
     error,
     getProps: getEditableProps
-  } = (0, import_editor_ui10.useEditable)({
+  } = (0, import_editor_ui11.useEditable)({
     value: currentGroup?.label ?? "",
     onSubmit: handleSubmit,
     validation: validateLabel
@@ -3343,16 +3739,16 @@ function generateUniqueLabel(groups) {
 function ComponentPropertiesPanelContent({ onClose }) {
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useSanitizeOverridableProps(currentComponentId);
-  const [isAddingGroup, setIsAddingGroup] = (0, import_react11.useState)(false);
-  const introductionRef = (0, import_react11.useRef)(null);
+  const [isAddingGroup, setIsAddingGroup] = (0, import_react12.useState)(false);
+  const introductionRef = (0, import_react12.useRef)(null);
   const groupLabelEditable = useCurrentEditableItem();
-  const groups = (0, import_react11.useMemo)(() => {
+  const groups = (0, import_react12.useMemo)(() => {
     if (!overridableProps) {
       return [];
     }
     return overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(Boolean);
   }, [overridableProps]);
-  const allGroupsForSelect = (0, import_react11.useMemo)(
+  const allGroupsForSelect = (0, import_react12.useMemo)(
     () => groups.map((group) => ({ value: group.id, label: group.label })),
     [groups]
   );
@@ -3403,24 +3799,24 @@ function ComponentPropertiesPanelContent({ onClose }) {
     deleteOverridableGroup({ componentId: currentComponentId, groupId });
     (0, import_editor_documents7.setDocumentModifiedStatus)(true);
   };
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React24.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React24.createElement(import_icons12.ComponentPropListIcon, { fontSize: "tiny" }), /* @__PURE__ */ React24.createElement(import_editor_panels3.PanelHeaderTitle, { variant: "subtitle2" }, (0, import_i18n16.__)("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React24.createElement(import_ui20.Tooltip, { title: (0, import_i18n16.__)("Add new group", "elementor") }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React26.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React26.createElement(import_icons14.ComponentPropListIcon, { fontSize: "tiny" }), /* @__PURE__ */ React26.createElement(import_editor_panels3.PanelHeaderTitle, { variant: "subtitle2" }, (0, import_i18n19.__)("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React26.createElement(import_ui20.Tooltip, { title: (0, import_i18n19.__)("Add new group", "elementor") }, /* @__PURE__ */ React26.createElement(
     import_ui20.IconButton,
     {
       size: "tiny",
-      "aria-label": (0, import_i18n16.__)("Add new group", "elementor"),
+      "aria-label": (0, import_i18n19.__)("Add new group", "elementor"),
       onClick: handleAddGroupClick
     },
-    /* @__PURE__ */ React24.createElement(import_icons12.FolderPlusIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React24.createElement(import_ui20.Tooltip, { title: (0, import_i18n16.__)("Close panel", "elementor") }, /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React26.createElement(import_icons14.FolderPlusIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React26.createElement(import_ui20.Tooltip, { title: (0, import_i18n19.__)("Close panel", "elementor") }, /* @__PURE__ */ React26.createElement(
     import_ui20.IconButton,
     {
       ref: introductionRef,
       size: "tiny",
-      "aria-label": (0, import_i18n16.__)("Close panel", "elementor"),
+      "aria-label": (0, import_i18n19.__)("Close panel", "elementor"),
       onClick: onClose
     },
-    /* @__PURE__ */ React24.createElement(import_icons12.XIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React24.createElement(import_ui20.Divider, null), /* @__PURE__ */ React24.createElement(import_editor_panels3.PanelBody, null, showEmptyState ? /* @__PURE__ */ React24.createElement(PropertiesEmptyState, { introductionRef }) : /* @__PURE__ */ React24.createElement(import_ui20.List, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React24.createElement(SortableProvider, { value: groupIds, onChange: handleGroupsReorder }, groups.map((group) => /* @__PURE__ */ React24.createElement(SortableItem, { key: group.id, id: group.id }, ({ triggerProps, triggerStyle, isDragPlaceholder }) => /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React26.createElement(import_icons14.XIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React26.createElement(import_ui20.Divider, null), /* @__PURE__ */ React26.createElement(import_editor_panels3.PanelBody, null, showEmptyState ? /* @__PURE__ */ React26.createElement(PropertiesEmptyState, { introductionRef }) : /* @__PURE__ */ React26.createElement(import_ui20.List, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React26.createElement(SortableProvider, { value: groupIds, onChange: handleGroupsReorder }, groups.map((group) => /* @__PURE__ */ React26.createElement(SortableItem, { key: group.id, id: group.id }, ({ triggerProps, triggerStyle, isDragPlaceholder }) => /* @__PURE__ */ React26.createElement(
     PropertiesGroup,
     {
       group,
@@ -3448,7 +3844,7 @@ var { panel, usePanelActions } = (0, import_editor_panels4.__createPanel)({
 function ComponentPropertiesPanel() {
   const { close: closePanel } = usePanelActions();
   const { open: openEditingPanel } = (0, import_editor_editing_panel5.usePanelActions)();
-  return /* @__PURE__ */ React25.createElement(import_editor_ui11.ThemeProvider, null, /* @__PURE__ */ React25.createElement(import_ui21.ErrorBoundary, { fallback: /* @__PURE__ */ React25.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React25.createElement(import_editor_panels4.Panel, null, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(import_editor_ui12.ThemeProvider, null, /* @__PURE__ */ React27.createElement(import_ui21.ErrorBoundary, { fallback: /* @__PURE__ */ React27.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React27.createElement(import_editor_panels4.Panel, null, /* @__PURE__ */ React27.createElement(
     ComponentPropertiesPanelContent,
     {
       onClose: () => {
@@ -3458,18 +3854,18 @@ function ComponentPropertiesPanel() {
     }
   ))));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React25.createElement(import_ui21.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React25.createElement(import_ui21.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React25.createElement("strong", null, (0, import_i18n17.__)("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React27.createElement(import_ui21.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React27.createElement(import_ui21.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React27.createElement("strong", null, (0, import_i18n20.__)("Something went wrong", "elementor"))));
 
 // src/extended/components/component-panel-header/component-badge.tsx
-var React26 = __toESM(require("react"));
-var import_react12 = require("react");
-var import_icons13 = require("@elementor/icons");
+var React28 = __toESM(require("react"));
+var import_react13 = require("react");
+var import_icons15 = require("@elementor/icons");
 var import_ui22 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
-var ComponentsBadge = React26.forwardRef(({ overridablePropsCount, onClick }, ref) => {
+var import_i18n21 = require("@wordpress/i18n");
+var ComponentsBadge = React28.forwardRef(({ overridablePropsCount, onClick }, ref) => {
   const prevCount = usePrevious(overridablePropsCount);
   const isFirstExposedProperty = prevCount === 0 && overridablePropsCount === 1;
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React28.createElement(
     StyledBadge,
     {
       ref,
@@ -3478,17 +3874,17 @@ var ComponentsBadge = React26.forwardRef(({ overridablePropsCount, onClick }, re
       invisible: overridablePropsCount === 0,
       animate: isFirstExposedProperty,
       anchorOrigin: { vertical: "top", horizontal: "right" },
-      badgeContent: /* @__PURE__ */ React26.createElement(import_ui22.Box, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
+      badgeContent: /* @__PURE__ */ React28.createElement(import_ui22.Box, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
     },
-    /* @__PURE__ */ React26.createElement(import_ui22.Tooltip, { title: (0, import_i18n18.__)("Component properties", "elementor") }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React28.createElement(import_ui22.Tooltip, { title: (0, import_i18n21.__)("Component properties", "elementor") }, /* @__PURE__ */ React28.createElement(
       import_ui22.ToggleButton,
       {
         value: "exposed properties",
         size: "tiny",
         onClick,
-        "aria-label": (0, import_i18n18.__)("Component properties", "elementor")
+        "aria-label": (0, import_i18n21.__)("Component properties", "elementor")
       },
-      /* @__PURE__ */ React26.createElement(import_icons13.ComponentPropListIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React28.createElement(import_icons15.ComponentPropListIcon, { fontSize: "tiny" })
     ))
   );
 });
@@ -3505,8 +3901,8 @@ var StyledBadge = (0, import_ui22.styled)(import_ui22.Badge, { shouldForwardProp
   })
 );
 function usePrevious(value) {
-  const ref = (0, import_react12.useRef)(value);
-  (0, import_react12.useEffect)(() => {
+  const ref = (0, import_react13.useRef)(value);
+  (0, import_react13.useEffect)(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
@@ -3529,10 +3925,10 @@ var ComponentPanelHeader = () => {
   const onBack = useNavigateBack();
   const componentName = getComponentName();
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user2.useSuppressedMessage)(MESSAGE_KEY);
-  const [shouldShowIntroduction, setShouldShowIntroduction] = React27.useState(!isMessageSuppressed);
+  const [shouldShowIntroduction, setShouldShowIntroduction] = React29.useState(!isMessageSuppressed);
   const { open: openPropertiesPanel } = usePanelActions();
   const overridablePropsCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
-  const anchorRef = React27.useRef(null);
+  const anchorRef = React29.useRef(null);
   if (!currentComponentId) {
     return null;
   }
@@ -3549,22 +3945,22 @@ var ComponentPanelHeader = () => {
       properties_count: overridablePropsCount
     });
   };
-  return /* @__PURE__ */ React27.createElement(import_ui23.Box, { "data-testid": "component-panel-header" }, /* @__PURE__ */ React27.createElement(import_editor_panels5.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React27.createElement(import_ui23.Tooltip, { title: (0, import_i18n19.__)("Back", "elementor") }, /* @__PURE__ */ React27.createElement(import_ui23.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n19.__)("Back", "elementor") }, /* @__PURE__ */ React27.createElement(import_icons14.ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React27.createElement(import_icons14.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React27.createElement(
-    import_editor_ui12.EllipsisWithTooltip,
+  return /* @__PURE__ */ React29.createElement(import_ui23.Box, { "data-testid": "component-panel-header" }, /* @__PURE__ */ React29.createElement(import_editor_panels5.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { title: (0, import_i18n22.__)("Back", "elementor") }, /* @__PURE__ */ React29.createElement(import_ui23.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n22.__)("Back", "elementor") }, /* @__PURE__ */ React29.createElement(import_icons16.ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React29.createElement(import_icons16.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React29.createElement(
+    import_editor_ui13.EllipsisWithTooltip,
     {
       title: componentName,
       as: import_ui23.Typography,
       variant: "caption",
       sx: { fontWeight: 500, flexGrow: 1 }
     }
-  ), /* @__PURE__ */ React27.createElement(
+  ), /* @__PURE__ */ React29.createElement(
     ComponentsBadge,
     {
       overridablePropsCount,
       ref: anchorRef,
       onClick: handleOpenPropertiesPanel
     }
-  )), /* @__PURE__ */ React27.createElement(import_ui23.Divider, null), /* @__PURE__ */ React27.createElement(
+  )), /* @__PURE__ */ React29.createElement(import_ui23.Divider, null), /* @__PURE__ */ React29.createElement(
     ComponentIntroduction,
     {
       anchorRef,
@@ -3574,7 +3970,7 @@ var ComponentPanelHeader = () => {
   ));
 };
 function getComponentName() {
-  const state = (0, import_store30.__getState)();
+  const state = (0, import_store32.__getState)();
   const path = state[SLICE_NAME].path;
   const { instanceTitle } = path.at(-1) ?? {};
   if (instanceTitle) {
@@ -3586,39 +3982,39 @@ function getComponentName() {
 }
 
 // src/extended/components/components-tab/components.tsx
-var React30 = __toESM(require("react"));
-var import_editor_ui15 = require("@elementor/editor-ui");
+var React32 = __toESM(require("react"));
+var import_editor_ui16 = require("@elementor/editor-ui");
 var import_ui25 = require("@elementor/ui");
 
 // src/extended/components/components-tab/component-item.tsx
-var React29 = __toESM(require("react"));
-var import_react13 = require("react");
+var React31 = __toESM(require("react"));
+var import_react14 = require("react");
 var import_editor_canvas5 = require("@elementor/editor-canvas");
-var import_editor_elements10 = require("@elementor/editor-elements");
-var import_editor_ui14 = require("@elementor/editor-ui");
-var import_icons15 = require("@elementor/icons");
+var import_editor_elements13 = require("@elementor/editor-elements");
+var import_editor_ui15 = require("@elementor/editor-ui");
+var import_icons17 = require("@elementor/icons");
 var import_ui24 = require("@elementor/ui");
-var import_i18n23 = require("@wordpress/i18n");
+var import_i18n26 = require("@wordpress/i18n");
 
 // src/extended/store/actions/archive-component.ts
 var import_editor_documents9 = require("@elementor/editor-documents");
-var import_editor_notifications2 = require("@elementor/editor-notifications");
-var import_i18n20 = require("@wordpress/i18n");
+var import_editor_notifications3 = require("@elementor/editor-notifications");
+var import_i18n23 = require("@wordpress/i18n");
 var successNotification = (componentId, componentName) => ({
   type: "success",
   /* translators: %s: component name */
-  message: (0, import_i18n20.__)("Successfully deleted component %s", "elementor").replace("%s", componentName),
+  message: (0, import_i18n23.__)("Successfully deleted component %s", "elementor").replace("%s", componentName),
   id: `success-archived-components-notification-${componentId}`
 });
 var archiveComponent = (componentId, componentName) => {
   componentsActions.archive(componentId);
   (0, import_editor_documents9.setDocumentModifiedStatus)(true);
-  (0, import_editor_notifications2.notify)(successNotification(componentId, componentName));
+  (0, import_editor_notifications3.notify)(successNotification(componentId, componentName));
 };
 
 // src/extended/store/actions/rename-component.ts
 var import_editor_documents10 = require("@elementor/editor-documents");
-var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_elements11 = require("@elementor/editor-elements");
 var TITLE_EXTERNAL_CHANGE_COMMAND = "title_external_change";
 var renameComponent = (componentUid, newName) => {
   componentsActions.rename(componentUid, newName);
@@ -3640,25 +4036,25 @@ function getDocumentContainer() {
   return documentsManager?.getCurrent()?.container;
 }
 function findComponentInstancesByUid(documentContainer, componentUid) {
-  const allDescendants = (0, import_editor_elements8.getAllDescendants)(documentContainer);
+  const allDescendants = (0, import_editor_elements11.getAllDescendants)(documentContainer);
   return allDescendants.filter((element) => {
     const widgetType = element.model.get("widgetType");
     const editorSettings = element.model.get("editor_settings");
-    const isMatch = widgetType === COMPONENT_WIDGET_TYPE && editorSettings?.component_uid === componentUid;
+    const isMatch = widgetType === COMPONENT_WIDGET_TYPE2 && editorSettings?.component_uid === componentUid;
     return isMatch;
   });
 }
 
 // src/extended/utils/component-form-schema.ts
 var import_schema5 = require("@elementor/schema");
-var import_i18n21 = require("@wordpress/i18n");
+var import_i18n24 = require("@wordpress/i18n");
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
-var baseComponentSchema = import_schema5.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n21.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var baseComponentSchema = import_schema5.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n24.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
 var createBaseComponentSchema = (existingNames) => {
   return import_schema5.z.object({
     componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
-      message: (0, import_i18n21.__)("Component name already exists", "elementor")
+      message: (0, import_i18n24.__)("Component name already exists", "elementor")
     })
   });
 };
@@ -3666,9 +4062,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: (0, import_i18n21.__)("Component name is required.", "elementor")
+      message: (0, import_i18n24.__)("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: (0, import_i18n21.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: (0, import_i18n24.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -3715,9 +4111,9 @@ var createComponentModel2 = (component) => {
 };
 
 // src/extended/utils/get-container-for-new-element.ts
-var import_editor_elements9 = require("@elementor/editor-elements");
+var import_editor_elements12 = require("@elementor/editor-elements");
 var getContainerForNewElement = () => {
-  const currentDocumentContainer = (0, import_editor_elements9.getCurrentDocumentContainer)();
+  const currentDocumentContainer = (0, import_editor_elements12.getCurrentDocumentContainer)();
   const selectedElement = getSelectedElementContainer();
   let container, options;
   if (selectedElement) {
@@ -3743,28 +4139,28 @@ var getContainerForNewElement = () => {
   return { container: container ?? currentDocumentContainer, options };
 };
 function getSelectedElementContainer() {
-  const selectedElements = (0, import_editor_elements9.getSelectedElements)();
+  const selectedElements = (0, import_editor_elements12.getSelectedElements)();
   if (selectedElements.length !== 1) {
     return void 0;
   }
-  return (0, import_editor_elements9.getContainer)(selectedElements[0].id);
+  return (0, import_editor_elements12.getContainer)(selectedElements[0].id);
 }
 
 // src/extended/components/components-tab/delete-confirmation-dialog.tsx
-var React28 = __toESM(require("react"));
-var import_editor_ui13 = require("@elementor/editor-ui");
-var import_i18n22 = require("@wordpress/i18n");
+var React30 = __toESM(require("react"));
+var import_editor_ui14 = require("@elementor/editor-ui");
+var import_i18n25 = require("@wordpress/i18n");
 function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
-  return /* @__PURE__ */ React28.createElement(import_editor_ui13.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React28.createElement(import_editor_ui13.ConfirmationDialog.Title, null, (0, import_i18n22.__)("Delete this component?", "elementor")), /* @__PURE__ */ React28.createElement(import_editor_ui13.ConfirmationDialog.Content, null, /* @__PURE__ */ React28.createElement(import_editor_ui13.ConfirmationDialog.ContentText, null, (0, import_i18n22.__)(
+  return /* @__PURE__ */ React30.createElement(import_editor_ui14.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React30.createElement(import_editor_ui14.ConfirmationDialog.Title, null, (0, import_i18n25.__)("Delete this component?", "elementor")), /* @__PURE__ */ React30.createElement(import_editor_ui14.ConfirmationDialog.Content, null, /* @__PURE__ */ React30.createElement(import_editor_ui14.ConfirmationDialog.ContentText, null, (0, import_i18n25.__)(
     "Existing instances on your pages will remain functional. You will no longer find this component in your list.",
     "elementor"
-  ))), /* @__PURE__ */ React28.createElement(import_editor_ui13.ConfirmationDialog.Actions, { onClose, onConfirm }));
+  ))), /* @__PURE__ */ React30.createElement(import_editor_ui14.ConfirmationDialog.Actions, { onClose, onConfirm }));
 }
 
 // src/extended/components/components-tab/component-item.tsx
 function ComponentItem2({ component }) {
-  const itemRef = (0, import_react13.useRef)(null);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = (0, import_react13.useState)(false);
+  const itemRef = (0, import_react14.useRef)(null);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = (0, import_react14.useState)(false);
   const { canRename, canDelete } = useComponentsPermissions();
   const shouldShowActions = canRename || canDelete;
   const {
@@ -3773,7 +4169,7 @@ function ComponentItem2({ component }) {
     openEditMode,
     error,
     getProps: getEditableProps
-  } = (0, import_editor_ui14.useEditable)({
+  } = (0, import_editor_ui15.useEditable)({
     value: component.name,
     onSubmit: (newName) => renameComponent(component.uid, newName),
     validation: validateComponentTitle
@@ -3804,8 +4200,8 @@ function ComponentItem2({ component }) {
   const handleDeleteDialogClose = () => {
     setIsDeleteDialogOpen(false);
   };
-  return /* @__PURE__ */ React29.createElement(import_ui24.Stack, null, /* @__PURE__ */ React29.createElement(
-    import_editor_ui14.WarningInfotip,
+  return /* @__PURE__ */ React31.createElement(import_ui24.Stack, null, /* @__PURE__ */ React31.createElement(
+    import_editor_ui15.WarningInfotip,
     {
       open: Boolean(error),
       text: error ?? "",
@@ -3813,7 +4209,7 @@ function ComponentItem2({ component }) {
       width: itemRef.current?.getBoundingClientRect().width,
       offset: [0, -15]
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React31.createElement(
       ComponentItem,
       {
         ref: itemRef,
@@ -3825,17 +4221,17 @@ function ComponentItem2({ component }) {
         onClick: handleClick,
         isEditing,
         error,
-        nameSlot: /* @__PURE__ */ React29.createElement(
+        nameSlot: /* @__PURE__ */ React31.createElement(
           ComponentName,
           {
             name: component.name,
             editable: { ref: editableRef, isEditing, getProps: getEditableProps }
           }
         ),
-        endSlot: shouldShowActions ? /* @__PURE__ */ React29.createElement(import_ui24.IconButton, { size: "tiny", ...(0, import_ui24.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React29.createElement(import_icons15.DotsVerticalIcon, { fontSize: "tiny" })) : void 0
+        endSlot: shouldShowActions ? /* @__PURE__ */ React31.createElement(import_ui24.IconButton, { size: "tiny", ...(0, import_ui24.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React31.createElement(import_icons17.DotsVerticalIcon, { fontSize: "tiny" })) : void 0
       }
     )
-  ), shouldShowActions && /* @__PURE__ */ React29.createElement(
+  ), shouldShowActions && /* @__PURE__ */ React31.createElement(
     import_ui24.Menu,
     {
       ...(0, import_ui24.bindMenu)(popupState),
@@ -3848,8 +4244,8 @@ function ComponentItem2({ component }) {
         horizontal: "right"
       }
     },
-    canRename && /* @__PURE__ */ React29.createElement(
-      import_editor_ui14.MenuListItem,
+    canRename && /* @__PURE__ */ React31.createElement(
+      import_editor_ui15.MenuListItem,
       {
         sx: { minWidth: "160px" },
         primaryTypographyProps: { variant: "caption", color: "text.primary" },
@@ -3858,18 +4254,18 @@ function ComponentItem2({ component }) {
           openEditMode();
         }
       },
-      (0, import_i18n23.__)("Rename", "elementor")
+      (0, import_i18n26.__)("Rename", "elementor")
     ),
-    canDelete && /* @__PURE__ */ React29.createElement(
-      import_editor_ui14.MenuListItem,
+    canDelete && /* @__PURE__ */ React31.createElement(
+      import_editor_ui15.MenuListItem,
       {
         sx: { minWidth: "160px" },
         primaryTypographyProps: { variant: "caption", color: "error.light" },
         onClick: handleDeleteClick
       },
-      (0, import_i18n23.__)("Delete", "elementor")
+      (0, import_i18n26.__)("Delete", "elementor")
     )
-  ), /* @__PURE__ */ React29.createElement(
+  ), /* @__PURE__ */ React31.createElement(
     DeleteConfirmationDialog,
     {
       open: isDeleteDialogOpen,
@@ -3884,7 +4280,7 @@ var addComponentToPage = (model) => {
     throw new Error(`Can't find container to drop new component instance at`);
   }
   loadComponentsAssets([model]);
-  (0, import_editor_elements10.dropElement)({
+  (0, import_editor_elements13.dropElement)({
     containerId: container.id,
     model,
     options: { ...options, useHistory: false, scrollIntoView: true }
@@ -3902,43 +4298,43 @@ var validateComponentTitle = (newTitle) => {
 var ExtendedComponentsList = () => {
   const { components, isLoading, searchValue } = useFilteredComponents();
   if (isLoading) {
-    return /* @__PURE__ */ React30.createElement(LoadingComponents, null);
+    return /* @__PURE__ */ React32.createElement(LoadingComponents, null);
   }
   const isEmpty = !components?.length;
   if (isEmpty) {
-    return searchValue.length ? /* @__PURE__ */ React30.createElement(EmptySearchResult, null) : /* @__PURE__ */ React30.createElement(EmptyState, null);
+    return searchValue.length ? /* @__PURE__ */ React32.createElement(EmptySearchResult, null) : /* @__PURE__ */ React32.createElement(EmptyState, null);
   }
-  return /* @__PURE__ */ React30.createElement(import_ui25.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React30.createElement(ComponentItem2, { key: component.uid, component })));
+  return /* @__PURE__ */ React32.createElement(import_ui25.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React32.createElement(ComponentItem2, { key: component.uid, component })));
 };
 var ExtendedComponentsContent = () => {
   const { components, isLoading } = useComponents();
   const hasComponents = !isLoading && components.length > 0;
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, hasComponents && /* @__PURE__ */ React30.createElement(ComponentSearch, null), /* @__PURE__ */ React30.createElement(ExtendedComponentsList, null));
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, hasComponents && /* @__PURE__ */ React32.createElement(ComponentSearch, null), /* @__PURE__ */ React32.createElement(ExtendedComponentsList, null));
 };
 var ExtendedComponents = () => {
-  return /* @__PURE__ */ React30.createElement(import_editor_ui15.ThemeProvider, null, /* @__PURE__ */ React30.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React30.createElement(ExtendedComponentsContent, null)));
+  return /* @__PURE__ */ React32.createElement(import_editor_ui16.ThemeProvider, null, /* @__PURE__ */ React32.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React32.createElement(ExtendedComponentsContent, null)));
 };
 
 // src/extended/components/create-component-form/create-component-form.tsx
-var React31 = __toESM(require("react"));
-var import_react15 = require("react");
-var import_editor_elements14 = require("@elementor/editor-elements");
-var import_editor_notifications4 = require("@elementor/editor-notifications");
-var import_editor_ui16 = require("@elementor/editor-ui");
-var import_icons16 = require("@elementor/icons");
+var React33 = __toESM(require("react"));
+var import_react16 = require("react");
+var import_editor_elements17 = require("@elementor/editor-elements");
+var import_editor_notifications5 = require("@elementor/editor-notifications");
+var import_editor_ui17 = require("@elementor/editor-ui");
+var import_icons18 = require("@elementor/icons");
 var import_ui26 = require("@elementor/ui");
-var import_i18n26 = require("@wordpress/i18n");
+var import_i18n29 = require("@wordpress/i18n");
 
 // src/extended/store/actions/create-unpublished-component.ts
-var import_editor_elements12 = require("@elementor/editor-elements");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_elements15 = require("@elementor/editor-elements");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_utils7 = require("@elementor/utils");
-var import_i18n24 = require("@wordpress/i18n");
+var import_i18n27 = require("@wordpress/i18n");
 
 // src/extended/utils/replace-element-with-component.ts
-var import_editor_elements11 = require("@elementor/editor-elements");
+var import_editor_elements14 = require("@elementor/editor-elements");
 var replaceElementWithComponent = (element, component) => {
-  return (0, import_editor_elements11.replaceElement)({
+  return (0, import_editor_elements14.replaceElement)({
     currentElementId: element.id,
     newElement: createComponentModel2(component),
     withHistory: false
@@ -3957,7 +4353,7 @@ async function createUnpublishedComponent({
   const generatedUid = uid ?? (0, import_utils7.generateUniqueId)("component");
   const componentBase = { uid: generatedUid, name };
   const elementDataWithOverridablesReverted = revertAllOverridablesInElementData(element);
-  const container = (0, import_editor_elements12.getContainer)(element.id);
+  const container = (0, import_editor_elements15.getContainer)(element.id);
   const modelFromContainer = container?.model?.toJSON?.();
   const originalElement = {
     model: modelFromContainer ?? element,
@@ -3979,7 +4375,7 @@ async function createUnpublishedComponent({
     ...eventData
   });
   try {
-    await (0, import_editor_v1_adapters3.__privateRunCommand)("document/save/auto");
+    await (0, import_editor_v1_adapters4.__privateRunCommand)("document/save/auto");
   } catch (error) {
     restoreOriginalElement(originalElement, componentInstance.id);
     componentsActions.removeUnpublished(generatedUid);
@@ -3989,17 +4385,17 @@ async function createUnpublishedComponent({
   return { uid: generatedUid, instanceId: componentInstance.id };
 }
 function restoreOriginalElement(originalElement, componentInstanceId) {
-  const componentContainer = (0, import_editor_elements12.getContainer)(componentInstanceId);
+  const componentContainer = (0, import_editor_elements15.getContainer)(componentInstanceId);
   if (componentContainer) {
-    (0, import_editor_elements12.deleteElement)({ container: componentContainer, options: { useHistory: false } });
+    (0, import_editor_elements15.deleteElement)({ container: componentContainer, options: { useHistory: false } });
   }
-  const parentContainer = (0, import_editor_elements12.getContainer)(originalElement.parentId);
+  const parentContainer = (0, import_editor_elements15.getContainer)(originalElement.parentId);
   if (!parentContainer) {
     return;
   }
   const clonedModel = structuredClone(originalElement.model);
-  (0, import_editor_elements12.createElements)({
-    title: (0, import_i18n24.__)("Restore Element", "elementor"),
+  (0, import_editor_elements15.createElements)({
+    title: (0, import_i18n27.__)("Restore Element", "elementor"),
     elements: [
       {
         container: parentContainer,
@@ -4012,10 +4408,10 @@ function restoreOriginalElement(originalElement, componentInstanceId) {
 
 // src/extended/sync/prevent-non-atomic-nesting.ts
 var import_editor_canvas6 = require("@elementor/editor-canvas");
-var import_editor_elements13 = require("@elementor/editor-elements");
-var import_editor_notifications3 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_i18n25 = require("@wordpress/i18n");
+var import_editor_elements16 = require("@elementor/editor-elements");
+var import_editor_notifications4 = require("@elementor/editor-notifications");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_i18n28 = require("@wordpress/i18n");
 
 // src/extended/utils/is-editing-component.ts
 function isEditingComponent() {
@@ -4025,25 +4421,25 @@ function isEditingComponent() {
 // src/extended/sync/prevent-non-atomic-nesting.ts
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: (0, import_i18n25.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: (0, import_i18n28.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
-  (0, import_editor_v1_adapters4.blockCommand)({
+  (0, import_editor_v1_adapters5.blockCommand)({
     command: "document/elements/create",
     condition: blockNonAtomicCreate
   });
-  (0, import_editor_v1_adapters4.blockCommand)({
+  (0, import_editor_v1_adapters5.blockCommand)({
     command: "document/elements/move",
     condition: blockNonAtomicMove
   });
-  (0, import_editor_v1_adapters4.blockCommand)({
+  (0, import_editor_v1_adapters5.blockCommand)({
     command: "document/elements/paste",
     condition: blockNonAtomicPaste
   });
 }
 function isElementAtomic(elementType) {
-  return (0, import_editor_elements13.getElementType)(elementType) !== null;
+  return (0, import_editor_elements16.getElementType)(elementType) !== null;
 }
 function blockNonAtomicCreate(args) {
   if (!isEditingComponent()) {
@@ -4057,7 +4453,7 @@ function blockNonAtomicCreate(args) {
   if (isElementAtomic(elementType)) {
     return false;
   }
-  (0, import_editor_notifications3.notify)(NON_ATOMIC_ELEMENT_ALERT);
+  (0, import_editor_notifications4.notify)(NON_ATOMIC_ELEMENT_ALERT);
   return true;
 }
 function blockNonAtomicMove(args) {
@@ -4069,11 +4465,11 @@ function blockNonAtomicMove(args) {
     if (!container) {
       return false;
     }
-    const allElements = (0, import_editor_elements13.getAllDescendants)(container);
+    const allElements = (0, import_editor_elements16.getAllDescendants)(container);
     return allElements.some((element) => !(0, import_editor_canvas6.isAtomicWidget)(element));
   });
   if (hasNonAtomicElement) {
-    (0, import_editor_notifications3.notify)(NON_ATOMIC_ELEMENT_ALERT);
+    (0, import_editor_notifications4.notify)(NON_ATOMIC_ELEMENT_ALERT);
   }
   return hasNonAtomicElement;
 }
@@ -4091,7 +4487,7 @@ function blockNonAtomicPaste(args) {
   }
   const hasNonAtomicElement = hasNonAtomicElementsInTree(data.clipboard.elements);
   if (hasNonAtomicElement) {
-    (0, import_editor_notifications3.notify)(NON_ATOMIC_ELEMENT_ALERT);
+    (0, import_editor_notifications4.notify)(NON_ATOMIC_ELEMENT_ALERT);
   }
   return hasNonAtomicElement;
 }
@@ -4124,11 +4520,11 @@ function findNonAtomicElementsInElement(element) {
 }
 
 // src/extended/components/create-component-form/hooks/use-form.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var useForm = (initialValues) => {
-  const [values, setValues] = (0, import_react14.useState)(initialValues);
-  const [errors, setErrors] = (0, import_react14.useState)({});
-  const isValid = (0, import_react14.useMemo)(() => {
+  const [values, setValues] = (0, import_react15.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react15.useState)({});
+  const isValid = (0, import_react15.useMemo)(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
   const handleChange = (e, field, validationSchema) => {
@@ -4204,19 +4600,19 @@ function countNestedElements(container) {
 // src/extended/components/create-component-form/create-component-form.tsx
 var MAX_COMPONENTS = 100;
 function CreateComponentForm() {
-  const [element, setElement] = (0, import_react15.useState)(null);
-  const [anchorPosition, setAnchorPosition] = (0, import_react15.useState)();
+  const [element, setElement] = (0, import_react16.useState)(null);
+  const [anchorPosition, setAnchorPosition] = (0, import_react16.useState)();
   const { components } = useComponents();
-  const eventData = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
+  const eventData = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT2 = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
       const { shouldOpen, notification } = shouldOpenForm(event.detail.element, components?.length ?? 0);
       if (!shouldOpen) {
-        (0, import_editor_notifications4.notify)(notification);
+        (0, import_editor_notifications5.notify)(notification);
         return;
       }
-      setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements14.getElementLabel)(event.detail.element.id) });
+      setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements17.getElementLabel)(event.detail.element.id) });
       setAnchorPosition(event.detail.anchorPosition);
       eventData.current = getComponentEventData(event.detail.element, event.detail.options);
       trackComponentEvent({
@@ -4247,15 +4643,15 @@ function CreateComponentForm() {
       } else {
         throw new Error("Failed to find published component");
       }
-      (0, import_editor_notifications4.notify)({
+      (0, import_editor_notifications5.notify)({
         type: "success",
-        message: (0, import_i18n26.__)("Component created successfully.", "elementor"),
+        message: (0, import_i18n29.__)("Component created successfully.", "elementor"),
         id: `component-saved-successfully-${uid}`
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = (0, import_i18n26.__)("Failed to create component. Please try again.", "elementor");
-      (0, import_editor_notifications4.notify)({
+      const errorMessage = (0, import_i18n29.__)("Failed to create component. Please try again.", "elementor");
+      (0, import_editor_notifications5.notify)({
         type: "error",
         message: errorMessage,
         id: "component-save-failed"
@@ -4275,7 +4671,7 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React31.createElement(import_editor_ui16.ThemeProvider, null, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React33.createElement(import_editor_ui17.ThemeProvider, null, /* @__PURE__ */ React33.createElement(
     import_ui26.Popover,
     {
       open: element !== null,
@@ -4284,7 +4680,7 @@ function CreateComponentForm() {
       anchorPosition,
       "data-testid": "create-component-form"
     },
-    element !== null && /* @__PURE__ */ React31.createElement(
+    element !== null && /* @__PURE__ */ React33.createElement(
       Form2,
       {
         initialValues: { componentName: element.elementLabel },
@@ -4301,7 +4697,7 @@ function shouldOpenForm(element, componentsCount) {
       shouldOpen: false,
       notification: {
         type: "default",
-        message: (0, import_i18n26.__)(
+        message: (0, import_i18n29.__)(
           "Components require atomic elements only. Remove widgets to create this component.",
           "elementor"
         ),
@@ -4315,7 +4711,7 @@ function shouldOpenForm(element, componentsCount) {
       notification: {
         type: "default",
         /* translators: %s is the maximum number of components */
-        message: (0, import_i18n26.__)(
+        message: (0, import_i18n29.__)(
           `You've reached the limit of %s components. Please remove an existing one to create a new component.`,
           "elementor"
         ).replace("%s", MAX_COMPONENTS.toString()),
@@ -4332,16 +4728,16 @@ var Form2 = ({
   closePopup
 }) => {
   const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
-  const nameInputRef = (0, import_editor_ui16.useTextFieldAutoSelect)();
+  const nameInputRef = (0, import_editor_ui17.useTextFieldAutoSelect)();
   const { components } = useComponents();
-  const existingComponentNames = (0, import_react15.useMemo)(() => {
+  const existingComponentNames = (0, import_react16.useMemo)(() => {
     return components?.map((component) => component.name) ?? [];
   }, [components]);
-  const changeValidationSchema = (0, import_react15.useMemo)(
+  const changeValidationSchema = (0, import_react16.useMemo)(
     () => createBaseComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
-  const submitValidationSchema = (0, import_react15.useMemo)(
+  const submitValidationSchema = (0, import_react16.useMemo)(
     () => createSubmitComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
@@ -4352,13 +4748,13 @@ var Form2 = ({
     }
   };
   const texts = {
-    heading: (0, import_i18n26.__)("Create component", "elementor"),
-    name: (0, import_i18n26.__)("Name", "elementor"),
-    cancel: (0, import_i18n26.__)("Cancel", "elementor"),
-    create: (0, import_i18n26.__)("Create", "elementor")
+    heading: (0, import_i18n29.__)("Create component", "elementor"),
+    name: (0, import_i18n29.__)("Name", "elementor"),
+    cancel: (0, import_i18n29.__)("Cancel", "elementor"),
+    create: (0, import_i18n29.__)("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React31.createElement(import_editor_ui16.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React31.createElement(import_ui26.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React33.createElement(import_editor_ui17.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React33.createElement(import_ui26.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React33.createElement(
     import_ui26.Stack,
     {
       direction: "row",
@@ -4367,9 +4763,9 @@ var Form2 = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__PURE__ */ React31.createElement(import_icons16.ComponentsIcon, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React31.createElement(import_ui26.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
-  ), /* @__PURE__ */ React31.createElement(import_ui26.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(import_ui26.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React33.createElement(import_icons18.ComponentsIcon, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React33.createElement(import_ui26.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
+  ), /* @__PURE__ */ React33.createElement(import_ui26.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React33.createElement(import_ui26.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React33.createElement(import_ui26.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React33.createElement(import_ui26.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React33.createElement(
     import_ui26.TextField,
     {
       id: nameInputId,
@@ -4382,15 +4778,15 @@ var Form2 = ({
       helperText: errors.componentName,
       inputRef: nameInputRef
     }
-  ))), /* @__PURE__ */ React31.createElement(import_ui26.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React31.createElement(import_ui26.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React31.createElement(import_ui26.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
+  ))), /* @__PURE__ */ React33.createElement(import_ui26.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React33.createElement(import_ui26.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React33.createElement(import_ui26.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
 };
 
 // src/extended/components/edit-component/edit-component.tsx
-var React33 = __toESM(require("react"));
-var import_react18 = require("react");
+var React35 = __toESM(require("react"));
+var import_react19 = require("react");
 var import_editor_documents11 = require("@elementor/editor-documents");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store32 = require("@elementor/store");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_store34 = require("@elementor/store");
 var import_utils9 = require("@elementor/utils");
 
 // src/extended/consts.ts
@@ -4409,22 +4805,22 @@ function updateCurrentComponent(params) {
 }
 
 // src/extended/components/edit-component/component-modal.tsx
-var React32 = __toESM(require("react"));
-var import_react17 = require("react");
+var React34 = __toESM(require("react"));
+var import_react18 = require("react");
 var import_react_dom = require("react-dom");
-var import_i18n27 = require("@wordpress/i18n");
+var import_i18n30 = require("@wordpress/i18n");
 
 // src/extended/components/edit-component/use-canvas-document.ts
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 function useCanvasDocument() {
-  return (0, import_editor_v1_adapters5.__privateUseListenTo)((0, import_editor_v1_adapters5.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters5.getCanvasIframeDocument)());
+  return (0, import_editor_v1_adapters6.__privateUseListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters6.getCanvasIframeDocument)());
 }
 
 // src/extended/components/edit-component/use-element-rect.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_utils8 = require("@elementor/utils");
 function useElementRect(element) {
-  const [rect, setRect] = (0, import_react16.useState)(new DOMRect(0, 0, 0, 0));
+  const [rect, setRect] = (0, import_react17.useState)(new DOMRect(0, 0, 0, 0));
   const onChange = (0, import_utils8.throttle)(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
@@ -4435,7 +4831,7 @@ function useElementRect(element) {
   useScrollListener({ element, onChange });
   useResizeListener({ element, onChange });
   useMutationsListener({ element, onChange });
-  (0, import_react16.useEffect)(
+  (0, import_react17.useEffect)(
     () => () => {
       onChange.cancel();
     },
@@ -4444,7 +4840,7 @@ function useElementRect(element) {
   return rect;
 }
 function useScrollListener({ element, onChange }) {
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -4456,7 +4852,7 @@ function useScrollListener({ element, onChange }) {
   }, [element, onChange]);
 }
 function useResizeListener({ element, onChange }) {
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -4471,7 +4867,7 @@ function useResizeListener({ element, onChange }) {
   }, [element, onChange]);
 }
 function useMutationsListener({ element, onChange }) {
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -4486,7 +4882,7 @@ function useMutationsListener({ element, onChange }) {
 // src/extended/components/edit-component/component-modal.tsx
 function ComponentModal({ topLevelElementDom, onClose }) {
   const canvasDocument = useCanvasDocument();
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const handleEsc = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -4501,7 +4897,7 @@ function ComponentModal({ topLevelElementDom, onClose }) {
     return null;
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(BlockEditPage, null), /* @__PURE__ */ React32.createElement(Backdrop, { canvas: canvasDocument, element: topLevelElementDom, onClose })),
+    /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(BlockEditPage, null), /* @__PURE__ */ React34.createElement(Backdrop, { canvas: canvasDocument, element: topLevelElementDom, onClose })),
     canvasDocument.body
   );
 }
@@ -4530,7 +4926,7 @@ function Backdrop({
       onClose();
     }
   };
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "div",
     {
       style: backdropStyle,
@@ -4538,7 +4934,7 @@ function Backdrop({
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": (0, import_i18n27.__)("Exit component editing mode", "elementor")
+      "aria-label": (0, import_i18n30.__)("Exit component editing mode", "elementor")
     }
   );
 }
@@ -4578,7 +4974,7 @@ function BlockEditPage() {
 		}
 	}
 	`;
-  return /* @__PURE__ */ React32.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
+  return /* @__PURE__ */ React34.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
 }
 
 // src/extended/components/edit-component/edit-component.tsx
@@ -4591,14 +4987,14 @@ function EditComponent() {
   if (!currentComponentId) {
     return null;
   }
-  return /* @__PURE__ */ React33.createElement(ComponentModal, { topLevelElementDom, onClose });
+  return /* @__PURE__ */ React35.createElement(ComponentModal, { topLevelElementDom, onClose });
 }
 function useHandleDocumentSwitches() {
   const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
   const currentComponentId = useCurrentComponentId();
-  const path = (0, import_store32.__useSelector)(selectPath);
-  (0, import_react18.useEffect)(() => {
-    return (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/open"), () => {
+  const path = (0, import_store34.__useSelector)(selectPath);
+  (0, import_react19.useEffect)(() => {
+    return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/open"), () => {
       const nextDocument = documentsManager.getCurrent();
       if (nextDocument.id === currentComponentId) {
         return;
@@ -4651,11 +5047,11 @@ function getInstanceTitle(instanceId, path) {
 }
 function useComponentDOMElement(id2) {
   const { componentContainerDomElement, topLevelElementDom } = getComponentDOMElements(id2);
-  const [currentElementDom, setCurrentElementDom] = (0, import_react18.useState)(topLevelElementDom);
-  (0, import_react18.useEffect)(() => {
+  const [currentElementDom, setCurrentElementDom] = (0, import_react19.useState)(topLevelElementDom);
+  (0, import_react19.useEffect)(() => {
     setCurrentElementDom(topLevelElementDom);
   }, [topLevelElementDom]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!componentContainerDomElement) {
       return;
     }
@@ -4683,10 +5079,10 @@ function getComponentDOMElements(id2) {
 }
 
 // src/extended/components/instance-editing-panel/instance-editing-panel.tsx
-var React34 = __toESM(require("react"));
-var import_icons17 = require("@elementor/icons");
+var React36 = __toESM(require("react"));
+var import_icons19 = require("@elementor/icons");
 var import_ui27 = require("@elementor/ui");
-var import_i18n28 = require("@wordpress/i18n");
+var import_i18n31 = require("@wordpress/i18n");
 function ExtendedInstanceEditingPanel() {
   const { canEdit } = useComponentsPermissions();
   const data = useInstancePanelData();
@@ -4694,35 +5090,35 @@ function ExtendedInstanceEditingPanel() {
     return null;
   }
   const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
-  const panelTitle = (0, import_i18n28.__)("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = (0, import_i18n31.__)("Edit %s", "elementor").replace("%s", component.name);
   const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
-  return /* @__PURE__ */ React34.createElement(import_ui27.Box, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React36.createElement(import_ui27.Box, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React36.createElement(
     ComponentInstanceProvider,
     {
       componentId,
       overrides,
       overridableProps
     },
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React36.createElement(
       InstancePanelHeader,
       {
         componentName: component.name,
-        actions: canEdit ? /* @__PURE__ */ React34.createElement(
+        actions: canEdit ? /* @__PURE__ */ React36.createElement(
           EditComponentAction,
           {
             label: panelTitle,
             onClick: handleEditComponent,
-            icon: import_icons17.PencilIcon
+            icon: import_icons19.PencilIcon
           }
         ) : void 0
       }
     ),
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React36.createElement(
       InstancePanelBody,
       {
         groups,
         isEmpty,
-        emptyState: /* @__PURE__ */ React34.createElement(EmptyState2, { onEditComponent: canEdit ? handleEditComponent : void 0 }),
+        emptyState: /* @__PURE__ */ React36.createElement(EmptyState2, { onEditComponent: canEdit ? handleEditComponent : void 0 }),
         componentInstanceId
       }
     )
@@ -4730,7 +5126,7 @@ function ExtendedInstanceEditingPanel() {
 }
 
 // src/extended/components/overridable-props/overridable-prop-control.tsx
-var React35 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 function OverridablePropControl({
@@ -4775,7 +5171,7 @@ function OverridablePropControl({
   });
   const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React35.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React37.createElement(
     import_editor_controls5.PropProvider,
     {
       ...propContext,
@@ -4786,7 +5182,7 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React35.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React35.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React35.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
+    /* @__PURE__ */ React37.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React37.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
   ));
 }
 function ControlWithReplacements({
@@ -4796,18 +5192,18 @@ function ControlWithReplacements({
   const { ControlToRender, isReplaced } = (0, import_editor_controls5.useControlReplacement)(OriginalControl2);
   if (isReplaced) {
     const ReplacementControl = ControlToRender;
-    return /* @__PURE__ */ React35.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
+    return /* @__PURE__ */ React37.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
   }
-  return /* @__PURE__ */ React35.createElement(OriginalControl2, { ...props });
+  return /* @__PURE__ */ React37.createElement(OriginalControl2, { ...props });
 }
 
 // src/extended/components/overridable-props/overridable-prop-indicator.tsx
-var React37 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
-var import_editor_elements15 = require("@elementor/editor-elements");
+var import_editor_elements18 = require("@elementor/editor-elements");
 var import_ui29 = require("@elementor/ui");
-var import_i18n30 = require("@wordpress/i18n");
+var import_i18n33 = require("@wordpress/i18n");
 
 // src/extended/store/actions/set-overridable-prop.ts
 var import_utils10 = require("@elementor/utils");
@@ -4879,11 +5275,11 @@ function setOverridableProp({
 }
 
 // src/extended/components/overridable-props/indicator.tsx
-var React36 = __toESM(require("react"));
-var import_react19 = require("react");
-var import_icons18 = require("@elementor/icons");
+var React38 = __toESM(require("react"));
+var import_react20 = require("react");
+var import_icons20 = require("@elementor/icons");
 var import_ui28 = require("@elementor/ui");
-var import_i18n29 = require("@wordpress/i18n");
+var import_i18n32 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
 var IconContainer = (0, import_ui28.styled)(import_ui28.Box)`
 	pointer-events: none;
@@ -4939,16 +5335,16 @@ var Content = (0, import_ui28.styled)(import_ui28.Box)`
 		}
 	}
 `;
-var Indicator2 = (0, import_react19.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React36.createElement(
+var Indicator2 = (0, import_react20.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React38.createElement(
   Content,
   {
     role: "button",
     ref,
     ...props,
     className: isOpen || isOverridable ? "enlarged" : "",
-    "aria-label": isOverridable ? (0, import_i18n29.__)("Overridable property", "elementor") : (0, import_i18n29.__)("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? (0, import_i18n32.__)("Overridable property", "elementor") : (0, import_i18n32.__)("Make prop overridable", "elementor")
   },
-  /* @__PURE__ */ React36.createElement(IconContainer, { className: "icon" }, isOverridable ? /* @__PURE__ */ React36.createElement(import_icons18.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React36.createElement(import_icons18.PlusIcon, { fontSize: SIZE2 }))
+  /* @__PURE__ */ React38.createElement(IconContainer, { className: "icon" }, isOverridable ? /* @__PURE__ */ React38.createElement(import_icons20.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React38.createElement(import_icons20.PlusIcon, { fontSize: SIZE2 }))
 ));
 
 // src/extended/components/overridable-props/overridable-prop-indicator.tsx
@@ -4959,7 +5355,7 @@ function OverridablePropIndicator() {
   if (!isPropAllowed(propType) || !componentId || !overridableProps) {
     return null;
   }
-  return /* @__PURE__ */ React37.createElement(Content2, { componentId, overridableProps });
+  return /* @__PURE__ */ React39.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
@@ -4978,7 +5374,7 @@ function Content2({ componentId, overridableProps }) {
   });
   const triggerProps = (0, import_ui29.bindTrigger)(popupState);
   const popoverProps = (0, import_ui29.bindPopover)(popupState);
-  const { elType } = (0, import_editor_elements15.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;
@@ -5005,7 +5401,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(import_ui29.Tooltip, { placement: "top", title: (0, import_i18n30.__)("Override Property", "elementor") }, /* @__PURE__ */ React37.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(import_ui29.Tooltip, { placement: "top", title: (0, import_i18n33.__)("Override Property", "elementor") }, /* @__PURE__ */ React39.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React39.createElement(
     import_ui29.Popover,
     {
       disableScrollLock: true,
@@ -5022,7 +5418,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React39.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -5045,7 +5441,7 @@ var import_editor_mcp2 = require("@elementor/editor-mcp");
 
 // src/extended/mcp/save-as-component-tool.ts
 var import_editor_canvas7 = require("@elementor/editor-canvas");
-var import_editor_elements16 = 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");
@@ -5090,7 +5486,7 @@ var handleSaveAsComponent = async (params) => {
     overridable_props: overridablePropsInput
   } = params;
   const validElementTypes = getValidElementTypes();
-  const container = (0, import_editor_elements16.getContainer)(elementId);
+  const container = (0, import_editor_elements19.getContainer)(elementId);
   if (!container) {
     throw new Error(ERROR_MESSAGES3.ELEMENT_NOT_FOUND);
   }
@@ -5156,7 +5552,7 @@ function enrichOverridableProps(input, rootElement, propertGroups) {
     }
     const elType = element.elType;
     const widgetType = element.widgetType || element.elType;
-    const elementType = (0, import_editor_elements16.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}".`
@@ -5227,7 +5623,7 @@ function findElementById(root, targetId) {
   return null;
 }
 function getValidElementTypes() {
-  const types = (0, import_editor_elements16.getWidgetsCache)();
+  const types = (0, import_editor_elements19.getWidgetsCache)();
   if (!types) {
     return [];
   }
@@ -5436,7 +5832,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 };
 
 // src/extended/sync/update-archived-component-before-save.ts
-var import_editor_notifications5 = require("@elementor/editor-notifications");
+var import_editor_notifications6 = require("@elementor/editor-notifications");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -5451,7 +5847,7 @@ var updateArchivedComponentBeforeSave = async (status) => {
     const result = await apiClient.updateArchivedComponents(archivedComponents, status);
     const failedIds = result.failedIds.join(", ");
     if (failedIds) {
-      (0, import_editor_notifications5.notify)(failedNotification(failedIds));
+      (0, import_editor_notifications6.notify)(failedNotification(failedIds));
     }
   } catch (error) {
     throw new Error(`Failed to update archived components: ${error}`);
@@ -5471,7 +5867,7 @@ var updateComponentTitleBeforeSave = async (status) => {
 };
 
 // src/extended/sync/create-components-before-save.ts
-var import_editor_elements17 = require("@elementor/editor-elements");
+var import_editor_elements20 = require("@elementor/editor-elements");
 async function createComponentsBeforeSave({
   elements,
   status
@@ -5538,7 +5934,7 @@ function shouldUpdateElement(element, uidToComponentId) {
   return { shouldUpdate: false, newComponentId: null };
 }
 function updateElementComponentId(elementId, componentId) {
-  (0, import_editor_elements17.updateElementSettings)({
+  (0, import_editor_elements20.updateElementSettings)({
     id: elementId,
     props: {
       component_instance: {
@@ -5574,10 +5970,10 @@ var updateExistingComponentsBeforeSave = async ({
 };
 
 // src/extended/sync/cleanup-overridable-props-on-delete.ts
-var import_editor_elements18 = require("@elementor/editor-elements");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_editor_elements21 = require("@elementor/editor-elements");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 function initCleanupOverridablePropsOnDelete() {
-  (0, import_editor_v1_adapters7.registerDataHook)("dependency", "document/elements/delete", (args, options) => {
+  (0, import_editor_v1_adapters8.registerDataHook)("dependency", "document/elements/delete", (args, options) => {
     if (isPartOfMoveCommand(options)) {
       return true;
     }
@@ -5606,7 +6002,7 @@ function initCleanupOverridablePropsOnDelete() {
   });
 }
 function collectDeletedElementIds(containers) {
-  const elementIds = containers.filter(Boolean).flatMap((container) => [container, ...(0, import_editor_elements18.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_elements21.getAllDescendants)(container)]).map((element) => element.model?.get?.("id") ?? element.id).filter((id2) => Boolean(id2));
   return elementIds;
 }
 function isPartOfMoveCommand(options) {
@@ -5615,15 +6011,15 @@ function isPartOfMoveCommand(options) {
 }
 
 // src/extended/sync/handle-component-edit-mode-container.ts
-var import_editor_elements19 = require("@elementor/editor-elements");
-var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_editor_elements22 = require("@elementor/editor-elements");
+var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 var V4_DEFAULT_CONTAINER_TYPE = "e-flexbox";
 function initHandleComponentEditModeContainer() {
   initRedirectDropIntoComponent();
   initHandleTopLevelElementDelete();
 }
 function initHandleTopLevelElementDelete() {
-  (0, import_editor_v1_adapters8.registerDataHook)("after", "document/elements/delete", (args) => {
+  (0, import_editor_v1_adapters9.registerDataHook)("after", "document/elements/delete", (args) => {
     if (!isEditingComponent()) {
       return;
     }
@@ -5641,7 +6037,7 @@ function initHandleTopLevelElementDelete() {
   });
 }
 function initRedirectDropIntoComponent() {
-  (0, import_editor_v1_adapters8.registerDataHook)("dependency", "preview/drop", (args) => {
+  (0, import_editor_v1_adapters9.registerDataHook)("dependency", "preview/drop", (args) => {
     if (!isEditingComponent()) {
       return true;
     }
@@ -5665,11 +6061,11 @@ function initRedirectDropIntoComponent() {
   });
 }
 function createEmptyTopLevelContainer(container) {
-  const newContainer = (0, import_editor_elements19.createElement)({
+  const newContainer = (0, import_editor_elements22.createElement)({
     container,
     model: { elType: V4_DEFAULT_CONTAINER_TYPE }
   });
-  (0, import_editor_elements19.selectElement)(newContainer.id);
+  (0, import_editor_elements22.selectElement)(newContainer.id);
 }
 function getComponentContainer(container) {
   const topLevelElement = container.children?.[0];
@@ -5687,15 +6083,15 @@ function isComponent(container) {
 }
 
 // src/extended/sync/revert-overridables-on-copy-or-duplicate.ts
-var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 function initRevertOverridablesOnCopyOrDuplicate() {
-  (0, import_editor_v1_adapters9.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
+  (0, import_editor_v1_adapters10.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
     if (!isEditingComponent()) {
       return;
     }
     revertOverridablesForDuplicatedElements(result);
   });
-  (0, import_editor_v1_adapters9.registerDataHook)("after", "document/elements/copy", (args) => {
+  (0, import_editor_v1_adapters10.registerDataHook)("after", "document/elements/copy", (args) => {
     if (!isEditingComponent()) {
       return;
     }
@@ -5725,7 +6121,7 @@ function revertOverridablesInStorage(storageKey) {
 }
 
 // src/extended/sync/sanitize-overridable-props.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/extended/store/actions/update-component-sanitized-attribute.ts
 function updateComponentSanitizedAttribute(componentId, attribute) {
@@ -5737,7 +6133,7 @@ function SanitizeOverridableProps() {
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(currentComponentId);
   const isSanitized = useIsSanitizedComponent(currentComponentId, "overridableProps");
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (isSanitized || !overridableProps || !currentComponentId) {
       return;
     }
@@ -5764,19 +6160,19 @@ function initExtended() {
   });
   (0, import_editor_elements_panel.registerTab)({
     id: "components",
-    label: (0, import_i18n31.__)("Components", "elementor"),
+    label: (0, import_i18n34.__)("Components", "elementor"),
     component: ExtendedComponents,
     priority: PRIORITY
   });
   (0, import_editor_panels6.__registerPanel)(panel);
-  (0, import_editor_v1_adapters10.registerDataHook)("dependency", "editor/documents/close", (args) => {
+  (0, import_editor_v1_adapters11.registerDataHook)("dependency", "editor/documents/close", (args) => {
     const document = (0, import_editor_documents13.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
       args.mode = "autosave";
     }
     return true;
   });
-  (0, import_editor_v1_adapters10.registerDataHook)("after", "preview/drop", onElementDrop);
+  (0, import_editor_v1_adapters11.registerDataHook)("after", "preview/drop", onElementDrop);
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor.injectIntoTop)({
     id: "create-component-popup",
@@ -5813,24 +6209,24 @@ function initExtended() {
 }
 
 // src/extended/shortcuts/create-component-shortcut.ts
-var import_editor_elements20 = require("@elementor/editor-elements");
+var import_editor_elements23 = require("@elementor/editor-elements");
 var import_utils12 = require("@elementor/utils");
 var CREATE_COMPONENT_SHORTCUT_KEYS = "ctrl+shift+k";
 var OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
 function isCreateComponentAllowed() {
-  const selectedElements = (0, import_editor_elements20.getSelectedElements)();
+  const selectedElements = (0, import_editor_elements23.getSelectedElements)();
   if (selectedElements.length !== 1) {
     return { allowed: false };
   }
   const element = selectedElements[0];
-  const elementType = (0, import_editor_elements20.getElementType)(element.type);
+  const elementType = (0, import_editor_elements23.getElementType)(element.type);
   if (!elementType) {
     return { allowed: false };
   }
   if (!(0, import_utils12.isProActive)()) {
     return { allowed: false };
   }
-  const widgetsCache = (0, import_editor_elements20.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements23.getWidgetsCache)();
   const elementConfig = widgetsCache?.[element.type];
   if (!elementConfig?.atomic_props_schema || !elementConfig?.show_in_panel || elementConfig?.elType === "widget") {
     return { allowed: false };
@@ -5883,37 +6279,37 @@ function initCreateComponentShortcut() {
 }
 
 // src/populate-store.ts
-var import_react21 = require("react");
-var import_store37 = require("@elementor/store");
+var import_react22 = require("react");
+var import_store39 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react21.useEffect)(() => {
-    (0, import_store37.__dispatch)(loadComponents());
+  (0, import_react22.useEffect)(() => {
+    (0, import_store39.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/prevent-circular-nesting.ts
-var import_editor_elements21 = require("@elementor/editor-elements");
-var import_editor_notifications6 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
-var import_store38 = require("@elementor/store");
-var import_i18n32 = require("@wordpress/i18n");
+var import_editor_elements24 = require("@elementor/editor-elements");
+var import_editor_notifications7 = require("@elementor/editor-notifications");
+var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
+var import_store40 = require("@elementor/store");
+var import_i18n35 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: (0, import_i18n32.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: (0, import_i18n35.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
-  (0, import_editor_v1_adapters11.blockCommand)({
+  (0, import_editor_v1_adapters12.blockCommand)({
     command: "document/elements/create",
     condition: blockCircularCreate
   });
-  (0, import_editor_v1_adapters11.blockCommand)({
+  (0, import_editor_v1_adapters12.blockCommand)({
     command: "document/elements/move",
     condition: blockCircularMove
   });
-  (0, import_editor_v1_adapters11.blockCommand)({
+  (0, import_editor_v1_adapters12.blockCommand)({
     command: "document/elements/paste",
     condition: blockCircularPaste
   });
@@ -5922,7 +6318,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = (0, import_store38.__getState)();
+  const state = (0, import_store40.__getState)();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -5978,7 +6374,7 @@ function blockCircularCreate(args) {
   }
   const isBlocked = wouldCreateCircularNesting(componentId);
   if (isBlocked) {
-    (0, import_editor_notifications6.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
+    (0, import_editor_notifications7.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return isBlocked;
 }
@@ -5988,7 +6384,7 @@ function blockCircularMove(args) {
     if (!container) {
       return false;
     }
-    const allElements = (0, import_editor_elements21.getAllDescendants)(container);
+    const allElements = (0, import_editor_elements24.getAllDescendants)(container);
     return allElements.some((element) => {
       const componentId = extractComponentIdFromContainer(element);
       if (componentId === null) {
@@ -5998,7 +6394,7 @@ function blockCircularMove(args) {
     });
   });
   if (hasCircularComponent) {
-    (0, import_editor_notifications6.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
+    (0, import_editor_notifications7.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return hasCircularComponent;
 }
@@ -6014,25 +6410,25 @@ function blockCircularPaste(args) {
   const allComponentIds = extractComponentIdsFromElements(data.clipboard.elements);
   const hasCircularComponent = allComponentIds.some(wouldCreateCircularNesting);
   if (hasCircularComponent) {
-    (0, import_editor_notifications6.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
+    (0, import_editor_notifications7.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return hasCircularComponent;
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store40 = require("@elementor/store");
+var import_store42 = require("@elementor/store");
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  (0, import_store40.__dispatch)(slice.actions.removeStyles({ id: id2 }));
+  (0, import_store42.__dispatch)(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store42 = require("@elementor/store");
+var import_store44 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store42.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store44.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -6040,10 +6436,10 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store42.__getState)());
+      return selectFlatStyles((0, import_store44.__getState)());
     },
     get: (id2) => {
-      return selectFlatStyles((0, import_store42.__getState)()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles((0, import_store44.__getState)()).find((style) => style.id === id2) ?? null;
     }
   }
 });
@@ -6055,12 +6451,12 @@ var beforeSave2 = ({ container, status }) => {
 };
 
 // src/sync/load-component-data-after-instance-added.ts
-var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 function initLoadComponentDataAfterInstanceAdded() {
-  (0, import_editor_v1_adapters12.registerDataHook)("after", "document/elements/paste", (_args, result) => {
+  (0, import_editor_v1_adapters13.registerDataHook)("after", "document/elements/paste", (_args, result) => {
     load(result);
   });
-  (0, import_editor_v1_adapters12.registerDataHook)("after", "document/elements/import", (_args, result) => {
+  (0, import_editor_v1_adapters13.registerDataHook)("after", "document/elements/import", (_args, result) => {
     load(result);
   });
 }
@@ -6073,15 +6469,19 @@ function load(result) {
 var PRO_EXTENDED_MIGRATION_VERSION = "4.0.0";
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store44.__registerSlice)(slice);
+  (0, import_store46.__registerSlice)(slice);
   (0, import_editor_canvas8.registerElementType)(
-    COMPONENT_WIDGET_TYPE,
-    (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
+    COMPONENT_WIDGET_TYPE2,
+    (options) => createComponentType({
+      ...options,
+      showLockedByModal: openEditModeDialog,
+      showDetachConfirmDialog: openDetachConfirmDialog
+    })
   );
   window.elementorCommon.__beforeSave = beforeSave2;
   (0, import_editor_elements_panel2.injectTab)({
     id: "components",
-    label: (0, import_i18n33.__)("Components", "elementor"),
+    label: (0, import_i18n36.__)("Components", "elementor"),
     component: Components,
     position: 1
   });
@@ -6089,7 +6489,7 @@ function init() {
     id: "components-populate-store",
     component: PopulateStore
   });
-  (0, import_editor_v1_adapters13.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+  (0, import_editor_v1_adapters14.registerDataHook)("after", "editor/documents/attach-preview", async () => {
     const { id: id2, config } = (0, import_editor_documents14.getV1CurrentDocument)();
     if (id2) {
       removeComponentStyles(id2);
@@ -6126,6 +6526,7 @@ function init() {
   ComponentSearch,
   ComponentsEmptyState,
   ComponentsList,
+  DetachAction,
   EditComponentAction,
   EmptySearchResult,
   InstanceEmptyState,