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

package/dist/index.mjs

@@ -11,7 +11,7 @@ import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook6 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
 import { isProAtLeast } from "@elementor/utils";
-import { __ as __33 } from "@wordpress/i18n";
+import { __ as __36 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -709,58 +709,532 @@ var Components = () => {
   return /* @__PURE__ */ React7.createElement(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
 import * as React8 from "react";
-import { closeDialog, openDialog } from "@elementor/editor-ui";
+import { closeDialog, ConfirmationDialog, openDialog } from "@elementor/editor-ui";
+import { AlertTriangleFilledIcon } from "@elementor/icons";
+import { __ as __4 } from "@wordpress/i18n";
+function DetachInstanceConfirmationDialog({
+  open,
+  onClose,
+  onConfirm
+}) {
+  return /* @__PURE__ */ React8.createElement(ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React8.createElement(ConfirmationDialog.Title, { icon: AlertTriangleFilledIcon, iconColor: "secondary" }, __4("Detach from Component?", "elementor")), /* @__PURE__ */ React8.createElement(ConfirmationDialog.Content, null, /* @__PURE__ */ React8.createElement(ConfirmationDialog.ContentText, null, __4(
+    "Detaching this instance will break its link to the Component. Changes to the Component will no longer apply. Continue?",
+    "elementor"
+  ))), /* @__PURE__ */ React8.createElement(
+    ConfirmationDialog.Actions,
+    {
+      onClose,
+      onConfirm,
+      confirmLabel: __4("Detach", "elementor"),
+      color: "primary"
+    }
+  ));
+}
+function openDetachConfirmDialog(onConfirm) {
+  const handleConfirm = () => {
+    closeDialog();
+    onConfirm();
+  };
+  openDialog({
+    component: /* @__PURE__ */ React8.createElement(DetachInstanceConfirmationDialog, { open: true, onClose: closeDialog, onConfirm: handleConfirm })
+  });
+}
+
+// src/components/in-edit-mode.tsx
+import * as React9 from "react";
+import { closeDialog as closeDialog2, openDialog as openDialog2 } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
 import { Box as Box6, Button, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack4, Typography as Typography4 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
-  openDialog({
-    component: /* @__PURE__ */ React8.createElement(EditModeDialog, { lockedBy })
+  openDialog2({
+    component: /* @__PURE__ */ React9.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __4("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React8.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React8.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React8.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React8.createElement(Typography4, { variant: "subtitle1" }, content))), /* @__PURE__ */ React8.createElement(DialogContent, null, /* @__PURE__ */ React8.createElement(Stack4, { spacing: 2, direction: "column" }, /* @__PURE__ */ React8.createElement(Typography4, { variant: "body2" }, __4(
+  const content = __5("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React9.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React9.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React9.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React9.createElement(Typography4, { variant: "subtitle1" }, content))), /* @__PURE__ */ React9.createElement(DialogContent, null, /* @__PURE__ */ React9.createElement(Stack4, { spacing: 2, direction: "column" }, /* @__PURE__ */ React9.createElement(Typography4, { variant: "body2" }, __5(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React8.createElement(DialogActions, null, /* @__PURE__ */ React8.createElement(Button, { color: "secondary", variant: "contained", onClick: closeDialog }, __4("Close", "elementor"))))));
+  )), /* @__PURE__ */ React9.createElement(DialogActions, null, /* @__PURE__ */ React9.createElement(Button, { color: "secondary", variant: "contained", onClick: closeDialog2 }, __5("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React17 from "react";
+import * as React19 from "react";
 import { PencilIcon as PencilIcon2 } from "@elementor/icons";
-import { Box as Box8 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { Box as Box8, Stack as Stack11 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/provider/component-instance-context.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var ComponentInstanceContext = createContext2(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 = () => useContext2(ComponentInstanceContext)?.componentId;
 var useComponentInstanceOverrides = () => useContext2(ComponentInstanceContext)?.overrides;
 var useComponentOverridableProps = () => useContext2(ComponentInstanceContext)?.overridableProps;
 
+// src/components/instance-editing-panel/detach-action.tsx
+import * as React12 from "react";
+import { useState } from "react";
+import { notify } from "@elementor/editor-notifications";
+import { DetachIcon } from "@elementor/icons";
+import { __ as __7 } from "@wordpress/i18n";
+
+// src/utils/detach-component-instance/detach-component-instance.ts
+import { getContainer, replaceElement } from "@elementor/editor-elements";
+import { undoable } from "@elementor/editor-v1-adapters";
+import { __dispatch as dispatch, __getState as getState3 } from "@elementor/store";
+import { __ as __6 } from "@wordpress/i18n";
+
+// src/prop-types/component-instance-overrides-prop-type.ts
+import { createPropUtils as createPropUtils3 } from "@elementor/editor-props";
+import { z as z3 } from "@elementor/schema";
+
+// src/prop-types/component-instance-override-prop-type.ts
+import { createPropUtils } from "@elementor/editor-props";
+import { z } from "@elementor/schema";
+var componentInstanceOverridePropTypeUtil = createPropUtils(
+  "override",
+  z.object({
+    override_key: z.string(),
+    override_value: z.unknown(),
+    schema_source: z.object({
+      type: z.literal("component"),
+      id: z.number()
+    })
+  })
+);
+
+// src/prop-types/component-overridable-prop-type.ts
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+import { z as z2 } from "@elementor/schema";
+var componentOverridablePropTypeUtil = createPropUtils2(
+  "overridable",
+  z2.object({
+    override_key: z2.string(),
+    origin_value: z2.object({
+      $$type: z2.string(),
+      value: z2.unknown()
+    }).nullable()
+  })
+);
+
+// src/prop-types/component-instance-overrides-prop-type.ts
+var componentInstanceOverridesPropTypeUtil = createPropUtils3(
+  "overrides",
+  z3.array(z3.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([])
+);
+
+// src/prop-types/component-instance-prop-type.ts
+import { createPropUtils as createPropUtils4, numberPropTypeUtil } from "@elementor/editor-props";
+import { z as z4 } from "@elementor/schema";
+var componentInstancePropTypeUtil = createPropUtils4(
+  "component-instance",
+  z4.object({
+    component_id: numberPropTypeUtil.schema,
+    overrides: z4.optional(componentInstanceOverridesPropTypeUtil.schema)
+  })
+);
+
+// src/utils/tracking.ts
+import { getMixpanel } from "@elementor/events";
+import { __getState as getState2 } from "@elementor/store";
+var FEATURE_NAME = "Components";
+var trackComponentEvent = ({ action, source, ...data }) => {
+  if (source === "system") {
+    return;
+  }
+  const { dispatchEvent, config } = 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(getState2());
+  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
+import { generateElementId as generateElementId2 } from "@elementor/editor-elements";
+
+// src/utils/detach-component-instance/regenerate-local-style-ids.ts
+import { generateElementId } from "@elementor/editor-elements";
+import { classesPropTypeUtil } from "@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] = classesPropTypeUtil.create(updatedClasses);
+    }
+  }
+  return {
+    styles: newStyles,
+    settings: updatedSettings
+  };
+}
+function isClassesProp(prop) {
+  return classesPropTypeUtil.isValid(prop);
+}
+function generateLocalStyleId(elementId) {
+  return `e-${elementId}-${generateElementId()}`;
+}
+
+// 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);
+  }
+  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 updatedSettings;
+}
+function resolveOverridableSettingsForComponentInstance(element, overrideMap) {
+  const componentInstance = element.settings?.component_instance;
+  if (!componentInstancePropTypeUtil.isValid(componentInstance)) {
+    return element.settings ?? {};
+  }
+  const instanceOverrides = componentInstance.value.overrides?.value;
+  if (!instanceOverrides?.length) {
+    return element.settings ?? {};
+  }
+  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 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 componentInstanceOverridePropTypeUtil.create({
+    override_value: matchingOverride.value.override_value,
+    override_key: originValue.value.override_key,
+    schema_source: originValue.value.schema_source
+  });
+}
+
+// src/utils/detach-component-instance/resolve-detached-instance.ts
+function resolveDetachedInstance(element, overrides) {
+  const overrideMap = createOverrideMap(overrides);
+  return resolveElementRecursive(structuredClone(element), overrideMap);
+}
+function resolveElementRecursive(element, overrideMap) {
+  element.id = generateElementId2();
+  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 = 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 = undoable(
+    {
+      do: () => {
+        const overrides = extractInstanceOverrides(instanceContainer);
+        const detachedInstanceElementData = resolveDetachedInstance(
+          rootElement,
+          overrides
+        );
+        const editedComponentOnDetach = selectCurrentComponentId(getState3());
+        const overridablePropsBeforeDetach = editedComponentOnDetach ? selectOverridableProps(getState3(), editedComponentOnDetach) ?? null : null;
+        const originalInstanceModel = instanceContainer.model.toJSON();
+        const detachedElement = replaceElement({
+          currentElementId: instanceId,
+          newElement: detachedInstanceElementData,
+          withHistory: false
+        });
+        const componentUid = selectComponent(getState3(), 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 = replaceElement({
+          currentElementId: detachedElement.id,
+          newElement: originalInstanceModel,
+          withHistory: false
+        });
+        const currentComponentId = selectCurrentComponentId(getState3());
+        if (currentComponentId && currentComponentId === editedComponentOnDetach && overridablePropsBeforeDetach) {
+          dispatch(
+            slice.actions.setOverridableProps({
+              componentId: currentComponentId,
+              overridableProps: overridablePropsBeforeDetach
+            })
+          );
+        }
+        return restoredInstance;
+      },
+      redo: (_, doReturn, restoredInstance) => {
+        const { detachedInstanceElementData } = doReturn;
+        const editedComponentOnDetach = selectCurrentComponentId(getState3());
+        const overridablePropsBeforeDetach = editedComponentOnDetach ? selectOverridableProps(getState3(), editedComponentOnDetach) ?? null : null;
+        const detachedElement = replaceElement({
+          currentElementId: restoredInstance.id,
+          newElement: detachedInstanceElementData,
+          withHistory: false
+        });
+        return {
+          ...doReturn,
+          detachedElement,
+          editedComponentOnDetach,
+          overridablePropsBeforeDetach
+        };
+      }
+    },
+    {
+      title: __6("Detach from Component", "elementor"),
+      subtitle: __6("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
+import * as React11 from "react";
+import { PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
+import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
+import { ComponentsIcon as ComponentsIcon3 } from "@elementor/icons";
+import { IconButton, Stack as Stack5, Tooltip } from "@elementor/ui";
+function InstancePanelHeader({ componentName, actions }) {
+  return /* @__PURE__ */ React11.createElement(PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React11.createElement(Stack5, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React11.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React11.createElement(EllipsisWithTooltip2, { title: componentName, as: PanelHeaderTitle, sx: { flexGrow: 1 } }), actions));
+}
+function EditComponentAction({ label, onClick, disabled = false, icon: Icon2 }) {
+  return /* @__PURE__ */ React11.createElement(Tooltip, { title: label }, /* @__PURE__ */ React11.createElement(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] = useState(false);
+  const handleDetachConfirm = async () => {
+    setIsDetachDialogOpen(false);
+    try {
+      await detachComponentInstance({
+        instanceId: componentInstanceId,
+        componentId,
+        trackingInfo: getDetachTrackingInfo()
+      });
+    } catch {
+      notify({
+        type: "error",
+        message: __7("Failed to detach component instance.", "elementor"),
+        id: "detach-component-instance-failed"
+      });
+    }
+  };
+  const handleDetachCancel = () => {
+    setIsDetachDialogOpen(false);
+  };
+  const handleDetachClick = () => {
+    setIsDetachDialogOpen(true);
+  };
+  const detachLabel = __7("Detach from Component", "elementor");
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(EditComponentAction, { label: detachLabel, icon: 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
-import * as React10 from "react";
+import * as React13 from "react";
 import { ComponentPropListIcon, PencilIcon } from "@elementor/icons";
-import { Button as Button2, Stack as Stack5, Typography as Typography5 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { Button as Button2, Stack as Stack6, Typography as Typography5 } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
   const { canEdit } = useComponentsPermissions();
-  const message = canEdit ? __5(
+  const message = canEdit ? __8(
     "Edit the component to add properties, manage them or update the design across all instances.",
     "elementor"
-  ) : __5(
+  ) : __8(
     "With your current role, you cannot edit this component. Contact an administrator to add properties.",
     "elementor"
   );
-  return /* @__PURE__ */ React10.createElement(
-    Stack5,
+  return /* @__PURE__ */ React13.createElement(
+    Stack6,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -769,29 +1243,29 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__PURE__ */ React10.createElement(ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React10.createElement(Typography5, { align: "center", variant: "subtitle2" }, __5("No properties yet", "elementor")),
-    /* @__PURE__ */ React10.createElement(Typography5, { align: "center", variant: "caption", maxWidth: "170px" }, message),
-    canEdit && !!onEditComponent && /* @__PURE__ */ React10.createElement(Button2, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React10.createElement(PencilIcon, { fontSize: "small" }), __5("Edit component", "elementor"))
+    /* @__PURE__ */ React13.createElement(ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React13.createElement(Typography5, { align: "center", variant: "subtitle2" }, __8("No properties yet", "elementor")),
+    /* @__PURE__ */ React13.createElement(Typography5, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && !!onEditComponent && /* @__PURE__ */ React13.createElement(Button2, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React13.createElement(PencilIcon, { fontSize: "small" }), __8("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/instance-panel-body.tsx
-import * as React15 from "react";
+import * as React18 from "react";
 import { ControlAdornmentsProvider } from "@elementor/editor-controls";
 import { getFieldIndicators } from "@elementor/editor-editing-panel";
 import { PanelBody } from "@elementor/editor-panels";
-import { Divider as Divider2, Stack as Stack9 } from "@elementor/ui";
+import { Divider as Divider2, Stack as Stack10 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-props-group.tsx
-import * as React14 from "react";
+import * as React17 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
-import { Box as Box7, Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack8 } from "@elementor/ui";
+import { Box as Box7, Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack9 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-import * as React13 from "react";
+import * as React16 from "react";
 import {
   ControlReplacementsProvider,
   getControlReplacements,
@@ -809,7 +1283,7 @@ import {
   useElement
 } from "@elementor/editor-editing-panel";
 import { getElementSettings, getElementType as getElementType2 } from "@elementor/editor-elements";
-import { Stack as Stack7 } from "@elementor/ui";
+import { Stack as Stack8 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
 import { getElementType } from "@elementor/editor-elements";
@@ -842,62 +1316,12 @@ function getControlsByBind(controls) {
   );
 }
 
-// src/prop-types/component-instance-override-prop-type.ts
-import { createPropUtils } from "@elementor/editor-props";
-import { z } from "@elementor/schema";
-var componentInstanceOverridePropTypeUtil = createPropUtils(
-  "override",
-  z.object({
-    override_key: z.string(),
-    override_value: z.unknown(),
-    schema_source: z.object({
-      type: z.literal("component"),
-      id: z.number()
-    })
-  })
-);
-
-// src/prop-types/component-instance-overrides-prop-type.ts
-import { createPropUtils as createPropUtils3 } from "@elementor/editor-props";
-import { z as z3 } from "@elementor/schema";
-
-// src/prop-types/component-overridable-prop-type.ts
-import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
-import { z as z2 } from "@elementor/schema";
-var componentOverridablePropTypeUtil = createPropUtils2(
-  "overridable",
-  z2.object({
-    override_key: z2.string(),
-    origin_value: z2.object({
-      $$type: z2.string(),
-      value: z2.unknown()
-    }).nullable()
-  })
-);
-
-// src/prop-types/component-instance-overrides-prop-type.ts
-var componentInstanceOverridesPropTypeUtil = createPropUtils3(
-  "overrides",
-  z3.array(z3.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([])
-);
-
-// src/prop-types/component-instance-prop-type.ts
-import { createPropUtils as createPropUtils4, numberPropTypeUtil } from "@elementor/editor-props";
-import { z as z4 } from "@elementor/schema";
-var componentInstancePropTypeUtil = createPropUtils4(
-  "component-instance",
-  z4.object({
-    component_id: numberPropTypeUtil.schema,
-    overrides: z4.optional(componentInstanceOverridesPropTypeUtil.schema)
-  })
-);
-
 // src/provider/overridable-prop-context.tsx
-import * as React11 from "react";
+import * as React14 from "react";
 import { createContext as createContext3, useContext as useContext3 } from "react";
 var OverridablePropContext = createContext3(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React11.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React14.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => useContext3(OverridablePropContext)?.value;
 var useComponentInstanceElement = () => useContext3(OverridablePropContext)?.componentInstanceElement;
@@ -934,40 +1358,40 @@ function getOverrideValue(overrideProp) {
 }
 
 // src/store/dispatchers.ts
-import { __dispatch as dispatch, __getStore as getStore } from "@elementor/store";
+import { __dispatch as dispatch2, __getStore as getStore } from "@elementor/store";
 function safeDispatch() {
   return getStore()?.dispatch;
 }
 var componentsActions = {
   add(components) {
-    dispatch(slice.actions.add(components));
+    dispatch2(slice.actions.add(components));
   },
   load(components) {
-    dispatch(slice.actions.load(components));
+    dispatch2(slice.actions.load(components));
   },
   addUnpublished(component) {
-    dispatch(slice.actions.addUnpublished(component));
+    dispatch2(slice.actions.addUnpublished(component));
   },
   removeUnpublished(uids) {
-    dispatch(slice.actions.removeUnpublished(uids));
+    dispatch2(slice.actions.removeUnpublished(uids));
   },
   resetUnpublished() {
-    dispatch(slice.actions.resetUnpublished());
+    dispatch2(slice.actions.resetUnpublished());
   },
   removeStyles(id2) {
-    dispatch(slice.actions.removeStyles({ id: id2 }));
+    dispatch2(slice.actions.removeStyles({ id: id2 }));
   },
   addStyles(styles) {
-    dispatch(slice.actions.addStyles(styles));
+    dispatch2(slice.actions.addStyles(styles));
   },
   addCreatedThisSession(uid) {
-    dispatch(slice.actions.addCreatedThisSession(uid));
+    dispatch2(slice.actions.addCreatedThisSession(uid));
   },
   removeCreatedThisSession(uid) {
-    dispatch(slice.actions.removeCreatedThisSession(uid));
+    dispatch2(slice.actions.removeCreatedThisSession(uid));
   },
   archive(componentId) {
-    dispatch(slice.actions.archive(componentId));
+    dispatch2(slice.actions.archive(componentId));
   },
   setCurrentComponentId(id2) {
     safeDispatch()?.(slice.actions.setCurrentComponentId(id2));
@@ -976,33 +1400,33 @@ var componentsActions = {
     safeDispatch()?.(slice.actions.setPath(path));
   },
   setOverridableProps(componentId, overridableProps) {
-    dispatch(slice.actions.setOverridableProps({ componentId, overridableProps }));
+    dispatch2(slice.actions.setOverridableProps({ componentId, overridableProps }));
   },
   rename(componentUid, name) {
-    dispatch(slice.actions.rename({ componentUid, name }));
+    dispatch2(slice.actions.rename({ componentUid, name }));
   },
   cleanUpdatedComponentNames() {
-    dispatch(slice.actions.cleanUpdatedComponentNames());
+    dispatch2(slice.actions.cleanUpdatedComponentNames());
   },
   updateComponentSanitizedAttribute(componentId, attribute) {
-    dispatch(slice.actions.updateComponentSanitizedAttribute({ componentId, attribute }));
+    dispatch2(slice.actions.updateComponentSanitizedAttribute({ componentId, attribute }));
   },
   resetSanitizedComponents() {
-    dispatch(slice.actions.resetSanitizedComponents());
+    dispatch2(slice.actions.resetSanitizedComponents());
   }
 };
 
 // src/store/selectors.ts
-import { __getState as getState2, __getStore as getStore2 } from "@elementor/store";
+import { __getState as getState4, __getStore as getStore2 } from "@elementor/store";
 function safeGetState() {
   return getStore2()?.getState();
 }
 var componentsSelectors = {
   getOverridableProps(componentId) {
-    return selectOverridableProps(getState2(), componentId);
+    return selectOverridableProps(getState4(), componentId);
   },
   getCurrentComponent() {
-    return selectCurrentComponent(getState2());
+    return selectCurrentComponent(getState4());
   },
   getCurrentComponentId() {
     const state = safeGetState();
@@ -1012,19 +1436,19 @@ var componentsSelectors = {
     return selectCurrentComponentId(state);
   },
   getUnpublishedComponents() {
-    return selectUnpublishedComponents(getState2());
+    return selectUnpublishedComponents(getState4());
   },
   getUpdatedComponentNames() {
-    return selectUpdatedComponentNames(getState2());
+    return selectUpdatedComponentNames(getState4());
   },
   getArchivedThisSession() {
-    return selectArchivedThisSession(getState2());
+    return selectArchivedThisSession(getState4());
   },
   getComponents() {
-    return selectComponents(getState2());
+    return selectComponents(getState4());
   },
   getComponentByUid(componentUid) {
-    return selectComponentByUid(getState2(), componentUid);
+    return selectComponentByUid(getState4(), componentUid);
   }
 };
 
@@ -1059,12 +1483,12 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
 }
 
 // src/utils/get-container-by-origin-id.ts
-import { getContainer } from "@elementor/editor-elements";
+import { getContainer as getContainer2 } from "@elementor/editor-elements";
 function getContainerByOriginId(originElementId, instanceElementId) {
   if (!instanceElementId) {
-    return getContainer(originElementId);
+    return getContainer2(originElementId);
   }
-  const instanceContainer = getContainer(instanceElementId);
+  const instanceContainer = getContainer2(instanceElementId);
   if (!instanceContainer) {
     return null;
   }
@@ -1126,11 +1550,11 @@ function extractInnerOverrideInfo(override) {
 }
 
 // src/components/control-label.tsx
-import * as React12 from "react";
+import * as React15 from "react";
 import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
-import { Stack as Stack6 } from "@elementor/ui";
+import { Stack as Stack7 } from "@elementor/ui";
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React12.createElement(Stack6, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React12.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React12.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React15.createElement(Stack7, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React15.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React15.createElement(ControlAdornments, null));
 };
 
 // src/components/errors.ts
@@ -1144,12 +1568,12 @@ var OverrideControlInnerElementNotFoundError = createError({
 import { __useSelector as useSelector3 } from "@elementor/store";
 
 // src/utils/get-overridable-prop.ts
-import { __getState as getState3 } from "@elementor/store";
+import { __getState as getState5 } from "@elementor/store";
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps(getState3(), componentId);
+  const overridableProps = selectOverridableProps(getState5(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -1239,7 +1663,7 @@ function OverridePropControl({ overrideKey }) {
   if (!overridableProp) {
     return null;
   }
-  return /* @__PURE__ */ React13.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React13.createElement(OverrideControl, { overridableProp }));
+  return /* @__PURE__ */ React16.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React16.createElement(OverrideControl, { overridableProp }));
 }
 function OverrideControl({ overridableProp }) {
   const componentInstanceElement = useElement();
@@ -1333,13 +1757,13 @@ function OverrideControl({ overridableProp }) {
       [overridableProp.overrideKey]: propType
     }
   });
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React16.createElement(
     OverridablePropProvider,
     {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__PURE__ */ React13.createElement(ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React13.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React16.createElement(ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React16.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React16.createElement(
       PropProvider,
       {
         propType: propTypeSchema,
@@ -1349,7 +1773,7 @@ function OverrideControl({ overridableProp }) {
           return false;
         }
       },
-      /* @__PURE__ */ React13.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React13.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React13.createElement(Stack7, { 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(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React16.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React16.createElement(Stack8, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React16.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React16.createElement(OriginalControl, { control, controlProps }))))
     )))
   );
 }
@@ -1408,7 +1832,7 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React13.createElement(BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React16.createElement(BaseControl, { type: value.type, props: controlProps });
 }
 function getControlLayout(control) {
   return control.value.meta?.layout || controlsRegistry.getLayout(control.value.type);
@@ -1443,7 +1867,7 @@ function OverridePropsGroup({ group }) {
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React14.createElement(Box7, { "aria-label": `${title} section` }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React17.createElement(Box7, { "aria-label": `${title} section` }, /* @__PURE__ */ React17.createElement(
     ListItemButton3,
     {
       id: labelId,
@@ -1453,7 +1877,7 @@ function OverridePropsGroup({ group }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React14.createElement(Stack8, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React17.createElement(Stack9, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React17.createElement(
       ListItemText,
       {
         secondary: title,
@@ -1461,26 +1885,13 @@ function OverridePropsGroup({ group }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React14.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React14.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React14.createElement(Stack8, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React14.createElement(OverridePropControl, { key: overrideKey, overrideKey })))));
+    /* @__PURE__ */ React17.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React17.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React17.createElement(Stack9, { 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(PanelBody, null, /* @__PURE__ */ React15.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React15.createElement(Stack9, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React15.createElement(React15.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React15.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React15.createElement(Divider2, null))))));
-}
-
-// src/components/instance-editing-panel/instance-panel-header.tsx
-import * as React16 from "react";
-import { PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
-import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
-import { ComponentsIcon as ComponentsIcon3 } from "@elementor/icons";
-import { IconButton, Stack as Stack10, Tooltip } from "@elementor/ui";
-function InstancePanelHeader({ componentName, actions }) {
-  return /* @__PURE__ */ React16.createElement(PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React16.createElement(Stack10, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React16.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React16.createElement(EllipsisWithTooltip2, { title: componentName, as: PanelHeaderTitle, sx: { flexGrow: 1 } }), actions));
-}
-function EditComponentAction({ label, onClick, disabled = false, icon: Icon2 }) {
-  return /* @__PURE__ */ React16.createElement(Tooltip, { title: label }, /* @__PURE__ */ React16.createElement(IconButton, { size: "tiny", onClick, "aria-label": label, disabled }, /* @__PURE__ */ React16.createElement(Icon2, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React18.createElement(PanelBody, null, /* @__PURE__ */ React18.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React18.createElement(Stack10, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React18.createElement(React18.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React18.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React18.createElement(Divider2, null))))));
 }
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
@@ -1566,7 +1977,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;
@@ -1581,32 +1992,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 = __6("Edit %s", "elementor").replace("%s", component.name);
-  return /* @__PURE__ */ React17.createElement(Box8, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React17.createElement(
+  const panelTitle = __9("Edit %s", "elementor").replace("%s", component.name);
+  const actions = /* @__PURE__ */ React19.createElement(Stack11, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React19.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React19.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: PencilIcon2 }));
+  return /* @__PURE__ */ React19.createElement(Box8, { "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: PencilIcon2 })
-      }
-    ),
-    /* @__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
       }
     )
@@ -1620,15 +2027,138 @@ import { useLoadedTemplates } from "@elementor/editor-templates";
 // src/store/actions/load-components-assets.ts
 import { isDocumentDirty, setDocumentModifiedStatus } from "@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
+import { __dispatch as dispatch3, __getState as getState6 } from "@elementor/store";
+function loadComponentsOverridableProps(componentIds) {
+  if (!componentIds.length) {
+    return;
+  }
+  return Promise.all(componentIds.map(loadComponentOverrides));
+}
+async function loadComponentOverrides(componentId) {
+  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded(getState6(), componentId);
+  if (isOverridablePropsLoaded) {
+    return;
+  }
+  const overridableProps = await apiClient.getOverridableProps(componentId);
+  if (!overridableProps) {
+    return;
+  }
+  dispatch3(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps
+    })
+  );
+}
+
+// src/store/actions/load-components-styles.ts
+import { __dispatch as dispatch4, __getState as getState7 } from "@elementor/store";
+function loadComponentsStyles(documents) {
+  if (!documents.size) {
+    return;
+  }
+  const knownComponents = selectStyles(getState7());
+  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)])
+  );
+  dispatch4(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(isDocumentDirty);
+  if (isDrafted) {
+    setDocumentModifiedStatus(true);
+  }
+}
+
+// src/components/load-template-components.tsx
+var LoadTemplateComponents = () => {
+  const templates = useLoadedTemplates();
+  useEffect(() => {
+    loadComponentsAssets(templates.flatMap((elements) => elements ?? []));
+  }, [templates]);
+  return null;
+};
+
 // src/create-component-type.ts
 import {
   createTemplatedElementView
 } from "@elementor/editor-canvas";
 import { getCurrentDocument } from "@elementor/editor-documents";
-import { notify } from "@elementor/editor-notifications";
-import { __getState as getState5 } from "@elementor/store";
+import { notify as notify2 } from "@elementor/editor-notifications";
+import { __getState as getState8 } from "@elementor/store";
 import { hasProInstalled } from "@elementor/utils";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/utils/format-component-elements-id.ts
 import { hashString } from "@elementor/utils";
@@ -1690,62 +2220,23 @@ function buildUniqueSelector(element) {
     current = current.parentElement?.closest("[data-id]") ?? null;
   }
   if (selectors.length === 0) {
-    const closestElement = element.closest("[data-id]");
-    if (closestElement?.dataset?.id) {
-      return `[data-id="${closestElement.dataset.id}"]`;
-    }
-  }
-  return selectors.join(" ");
-}
-
-// src/utils/tracking.ts
-import { getMixpanel } from "@elementor/events";
-import { __getState as getState4 } from "@elementor/store";
-var FEATURE_NAME = "Components";
-var trackComponentEvent = ({ action, source, ...data }) => {
-  if (source === "system") {
-    return;
-  }
-  const { dispatchEvent, config } = 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(getState4());
-  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
-  });
-};
+    const closestElement = element.closest("[data-id]");
+    if (closestElement?.dataset?.id) {
+      return `[data-id="${closestElement.dataset.id}"]`;
+    }
+  }
+  return selectors.join(" ");
+}
 
 // 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() {
-  notify({
+  notify2({
     type: "promotion",
     id: COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID,
-    message: __7("Your Pro subscription has expired. Renew to edit components.", "elementor"),
+    message: __10("Your Pro subscription has expired. Renew to edit components.", "elementor"),
     additionalActionProps: [
       {
         size: "small",
@@ -1753,7 +2244,7 @@ function notifyComponentEditUpgrade() {
         color: "promotion",
         href: EDIT_COMPONENT_UPGRADE_URL,
         target: "_blank",
-        children: __7("Upgrade Now", "elementor")
+        children: __10("Upgrade Now", "elementor")
       }
     ]
   });
@@ -1768,7 +2259,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 };
   });
@@ -1867,26 +2358,35 @@ function createComponentView(options) {
     _getContextMenuConfig() {
       const isAdministrator = isUserAdministrator();
       const hasPro = hasProInstalled();
-      const proLabel = __7("PRO", "elementor");
+      const proLabel = __10("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: () => __10("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: () => __10("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: () => __7("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(
@@ -1915,6 +2415,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 {
+          notify2({
+            type: "error",
+            message: __10("Failed to detach component instance.", "elementor"),
+            id: "detach-component-instance-failed"
+          });
+        }
+      };
+      options.showDetachConfirmDialog?.(handleConfirm);
+    }
     handleDblClick(e) {
       e.stopPropagation();
       if (!isUserAdministrator()) {
@@ -1986,7 +2509,7 @@ function createComponentModel() {
       }
       const componentUid = editorSettings?.component_uid;
       if (componentUid) {
-        const component = selectComponentByUid(getState5(), componentUid);
+        const component = selectComponentByUid(getState8(), componentUid);
         if (component?.name) {
           return component.name;
         }
@@ -2006,134 +2529,6 @@ function createComponentModel() {
   });
 }
 
-// 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
-import { __dispatch as dispatch2, __getState as getState6 } from "@elementor/store";
-function loadComponentsOverridableProps(componentIds) {
-  if (!componentIds.length) {
-    return;
-  }
-  return Promise.all(componentIds.map(loadComponentOverrides));
-}
-async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded(getState6(), componentId);
-  if (isOverridablePropsLoaded) {
-    return;
-  }
-  const overridableProps = await apiClient.getOverridableProps(componentId);
-  if (!overridableProps) {
-    return;
-  }
-  dispatch2(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps
-    })
-  );
-}
-
-// src/store/actions/load-components-styles.ts
-import { __dispatch as dispatch3, __getState as getState7 } from "@elementor/store";
-function loadComponentsStyles(documents) {
-  if (!documents.size) {
-    return;
-  }
-  const knownComponents = selectStyles(getState7());
-  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)])
-  );
-  dispatch3(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(isDocumentDirty);
-  if (isDrafted) {
-    setDocumentModifiedStatus(true);
-  }
-}
-
-// src/components/load-template-components.tsx
-var LoadTemplateComponents = () => {
-  const templates = useLoadedTemplates();
-  useEffect(() => {
-    loadComponentsAssets(templates.flatMap((elements) => elements ?? []));
-  }, [templates]);
-  return null;
-};
-
 // src/extended/init.ts
 import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
 import { registerControlReplacement } from "@elementor/editor-controls";
@@ -2147,18 +2542,18 @@ import {
 import { registerTab } from "@elementor/editor-elements-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { registerDataHook as registerDataHook4 } from "@elementor/editor-v1-adapters";
-import { __ as __31 } from "@wordpress/i18n";
+import { __ as __34 } from "@wordpress/i18n";
 
 // src/extended/components/component-panel-header/component-panel-header.tsx
-import * as React27 from "react";
+import * as React29 from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { getV1DocumentsManager as getV1DocumentsManager3 } from "@elementor/editor-documents";
 import { PanelHeader as PanelHeader3 } from "@elementor/editor-panels";
 import { EllipsisWithTooltip as EllipsisWithTooltip4 } from "@elementor/editor-ui";
 import { ArrowLeftIcon, ComponentsFilledIcon } from "@elementor/icons";
-import { __getState as getState8 } from "@elementor/store";
+import { __getState as getState9 } from "@elementor/store";
 import { Box as Box15, Divider as Divider4, IconButton as IconButton5, Tooltip as Tooltip5, Typography as Typography11 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __22 } from "@wordpress/i18n";
 
 // src/extended/hooks/use-navigate-back.ts
 import { useCallback } from "react";
@@ -2178,11 +2573,11 @@ function useNavigateBack() {
 }
 
 // src/extended/components/component-introduction.tsx
-import * as React18 from "react";
+import * as React20 from "react";
 import { PopoverContent } from "@elementor/editor-controls";
 import { PopoverHeader } from "@elementor/editor-ui";
-import { Box as Box9, Button as Button3, Image, Link as Link2, Popover, Stack as Stack11, Typography as Typography6 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { Box as Box9, Button as Button3, Image, Link as Link2, Popover, Stack as Stack12, Typography as Typography6 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 var ComponentIntroduction = ({
   anchorRef,
   shouldShowIntroduction,
@@ -2191,7 +2586,7 @@ var ComponentIntroduction = ({
   if (!anchorRef.current || !shouldShowIntroduction) {
     return null;
   }
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React20.createElement(
     Popover,
     {
       anchorEl: anchorRef.current,
@@ -2206,20 +2601,20 @@ var ComponentIntroduction = ({
       },
       onClose
     },
-    /* @__PURE__ */ React18.createElement(Box9, { sx: { width: "296px" } }, /* @__PURE__ */ React18.createElement(PopoverHeader, { title: __8("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React20.createElement(Box9, { sx: { width: "296px" } }, /* @__PURE__ */ React20.createElement(PopoverHeader, { title: __11("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React20.createElement(
       Image,
       {
         sx: { width: "296px", height: "160px" },
         src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
         alt: ""
       }
-    ), /* @__PURE__ */ React18.createElement(PopoverContent, null, /* @__PURE__ */ React18.createElement(Stack11, { sx: { p: 2 } }, /* @__PURE__ */ React18.createElement(Typography6, { variant: "body2" }, __8("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React18.createElement(Typography6, { variant: "body2" }, __8(
+    ), /* @__PURE__ */ React20.createElement(PopoverContent, null, /* @__PURE__ */ React20.createElement(Stack12, { sx: { p: 2 } }, /* @__PURE__ */ React20.createElement(Typography6, { variant: "body2" }, __11("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React20.createElement(Typography6, { variant: "body2" }, __11(
       "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(Typography6, { variant: "body2", sx: { mt: 2 } }, __8(
+    )), /* @__PURE__ */ React20.createElement(Typography6, { variant: "body2", sx: { mt: 2 } }, __11(
       "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
       "elementor"
-    )), /* @__PURE__ */ React18.createElement(
+    )), /* @__PURE__ */ React20.createElement(
       Link2,
       {
         href: "http://go.elementor.com/components-guide",
@@ -2228,28 +2623,28 @@ var ComponentIntroduction = ({
         color: "info.main",
         variant: "body2"
       },
-      __8("Learn more", "elementor")
-    ), /* @__PURE__ */ React18.createElement(Stack11, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { pt: 1 } }, /* @__PURE__ */ React18.createElement(Button3, { size: "medium", variant: "contained", onClick: onClose }, __8("Got it", "elementor"))))))
+      __11("Learn more", "elementor")
+    ), /* @__PURE__ */ React20.createElement(Stack12, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { pt: 1 } }, /* @__PURE__ */ React20.createElement(Button3, { size: "medium", variant: "contained", onClick: onClose }, __11("Got it", "elementor"))))))
   );
 };
 
 // src/extended/components/component-properties-panel/component-properties-panel.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 import { usePanelActions as useEditingPanelActions } from "@elementor/editor-editing-panel";
 import { __createPanel as createPanel, Panel } from "@elementor/editor-panels";
 import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 import { Alert, Box as Box13, ErrorBoundary } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 
 // src/extended/components/component-properties-panel/component-properties-panel-content.tsx
-import * as React24 from "react";
-import { useMemo, useRef, useState as useState4 } from "react";
+import * as React26 from "react";
+import { useMemo, useRef, useState as useState5 } from "react";
 import { setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
 import { PanelBody as PanelBody2, PanelHeader as PanelHeader2, PanelHeaderTitle as PanelHeaderTitle2 } from "@elementor/editor-panels";
 import { ComponentPropListIcon as ComponentPropListIcon3, FolderPlusIcon, XIcon as XIcon2 } from "@elementor/icons";
-import { Divider as Divider3, IconButton as IconButton4, List as List3, Stack as Stack15, Tooltip as Tooltip3 } from "@elementor/ui";
+import { Divider as Divider3, IconButton as IconButton4, List as List3, Stack as Stack16, Tooltip as Tooltip3 } from "@elementor/ui";
 import { generateUniqueId as generateUniqueId2 } from "@elementor/utils";
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __19 } from "@wordpress/i18n";
 
 // src/extended/store/actions/add-overridable-group.ts
 function addOverridableGroup({
@@ -2290,7 +2685,7 @@ function addOverridableGroup({
 
 // src/extended/store/utils/groups-transformers.ts
 import { generateUniqueId } from "@elementor/utils";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 function removePropFromAllGroups(groups, propKey) {
   const propKeys = Array.isArray(propKey) ? propKey : [propKey];
   return {
@@ -2359,7 +2754,7 @@ function resolveOrCreateGroup(groups, requestedGroupId) {
 }
 function createGroup(groups, groupId, label) {
   const newGroupId = groupId || generateUniqueId("group");
-  const newLabel = label || __9("Default", "elementor");
+  const newLabel = label || __12("Default", "elementor");
   return {
     groups: {
       ...groups,
@@ -2454,12 +2849,12 @@ function deleteOverridableGroup({ componentId, groupId }) {
 // src/extended/utils/revert-overridable-settings.ts
 import {
   getAllDescendants,
-  getContainer as getContainer2,
+  getContainer as getContainer3,
   getElementSetting,
   updateElementSettings
 } from "@elementor/editor-elements";
 function revertElementOverridableSetting(elementId, settingKey, originValue, overrideKey) {
-  const container = getContainer2(elementId);
+  const container = getContainer3(elementId);
   if (!container) {
     return;
   }
@@ -2551,7 +2946,7 @@ function revertComponentInstanceSettings(settings) {
 }
 function revertAllOverridablesInContainer(container) {
   getAllDescendants(container).forEach((element) => {
-    if (element.model.get("widgetType") === COMPONENT_WIDGET_TYPE) {
+    if (element.model.get("widgetType") === COMPONENT_WIDGET_TYPE2) {
       revertComponentInstanceOverridesInElement(element);
     } else {
       revertElementSettings(element);
@@ -2706,15 +3101,15 @@ function updateOverridablePropParams({
 }
 
 // src/extended/components/component-properties-panel/properties-empty-state.tsx
-import * as React19 from "react";
-import { useState } from "react";
+import * as React21 from "react";
+import { useState as useState2 } from "react";
 import { ComponentPropListIcon as ComponentPropListIcon2 } from "@elementor/icons";
-import { Link as Link3, Stack as Stack12, Typography as Typography7 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { Link as Link3, Stack as Stack13, Typography as Typography7 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
 function PropertiesEmptyState({ introductionRef }) {
-  const [isOpen, setIsOpen] = useState(false);
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
-    Stack12,
+  const [isOpen, setIsOpen] = useState2(false);
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+    Stack13,
     {
       alignItems: "center",
       justifyContent: "flex-start",
@@ -2723,11 +3118,11 @@ function PropertiesEmptyState({ introductionRef }) {
       sx: { px: 2.5, pt: 10, pb: 5.5 },
       gap: 1
     },
-    /* @__PURE__ */ React19.createElement(ComponentPropListIcon2, { fontSize: "large" }),
-    /* @__PURE__ */ React19.createElement(Typography7, { align: "center", variant: "subtitle2" }, __10("Add your first property", "elementor")),
-    /* @__PURE__ */ React19.createElement(Typography7, { align: "center", variant: "caption" }, __10("Make instances flexible while keeping design synced.", "elementor")),
-    /* @__PURE__ */ React19.createElement(Typography7, { align: "center", variant: "caption" }, __10("Select any element, then click + next to a setting to expose it.", "elementor")),
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React21.createElement(ComponentPropListIcon2, { fontSize: "large" }),
+    /* @__PURE__ */ React21.createElement(Typography7, { align: "center", variant: "subtitle2" }, __13("Add your first property", "elementor")),
+    /* @__PURE__ */ React21.createElement(Typography7, { align: "center", variant: "caption" }, __13("Make instances flexible while keeping design synced.", "elementor")),
+    /* @__PURE__ */ React21.createElement(Typography7, { align: "center", variant: "caption" }, __13("Select any element, then click + next to a setting to expose it.", "elementor")),
+    /* @__PURE__ */ React21.createElement(
       Link3,
       {
         variant: "caption",
@@ -2735,9 +3130,9 @@ function PropertiesEmptyState({ introductionRef }) {
         sx: { textDecorationLine: "underline" },
         onClick: () => setIsOpen(true)
       },
-      __10("Learn more", "elementor")
+      __13("Learn more", "elementor")
     )
-  ), /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React21.createElement(
     ComponentIntroduction,
     {
       anchorRef: introductionRef,
@@ -2748,7 +3143,7 @@ function PropertiesEmptyState({ introductionRef }) {
 }
 
 // src/extended/components/component-properties-panel/properties-group.tsx
-import * as React23 from "react";
+import * as React25 from "react";
 import { EditableField as EditableField2, EllipsisWithTooltip as EllipsisWithTooltip3, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
 import {
@@ -2758,31 +3153,31 @@ import {
   IconButton as IconButton3,
   List as List2,
   Menu,
-  Stack as Stack14,
+  Stack as Stack15,
   Tooltip as Tooltip2,
   Typography as Typography10,
   usePopupState as usePopupState2
 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 
 // src/extended/components/component-properties-panel/property-item.tsx
-import * as React22 from "react";
+import * as React24 from "react";
 import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
 import { XIcon } from "@elementor/icons";
 import { bindPopover, bindTrigger, Box as Box11, IconButton as IconButton2, Popover as Popover2, Typography as Typography9, usePopupState } from "@elementor/ui";
 
 // src/extended/components/overridable-props/overridable-prop-form.tsx
-import * as React20 from "react";
-import { useState as useState2 } from "react";
+import * as React22 from "react";
+import { useState as useState3 } from "react";
 import { Form, MenuListItem } from "@elementor/editor-ui";
-import { Button as Button4, FormLabel, Grid, Select, Stack as Stack13, TextField as TextField2, Typography as Typography8 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { Button as Button4, FormLabel, Grid, Select, Stack as Stack14, TextField as TextField2, Typography as Typography8 } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
 
 // src/extended/components/overridable-props/utils/validate-prop-label.ts
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 var ERROR_MESSAGES = {
-  EMPTY_NAME: __11("Property name is required", "elementor"),
-  DUPLICATE_NAME: __11("Property name already exists", "elementor")
+  EMPTY_NAME: __14("Property name is required", "elementor"),
+  DUPLICATE_NAME: __14("Property name already exists", "elementor")
 };
 function validatePropLabel(label, existingLabels, currentLabel) {
   const trimmedLabel = label.trim();
@@ -2806,17 +3201,17 @@ function validatePropLabel(label, existingLabels, currentLabel) {
 
 // src/extended/components/overridable-props/overridable-prop-form.tsx
 var SIZE = "tiny";
-var DEFAULT_GROUP = { value: null, label: __12("Default", "elementor") };
+var DEFAULT_GROUP = { value: null, label: __15("Default", "elementor") };
 function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels = [], sx }) {
   const selectGroups = groups?.length ? groups : [DEFAULT_GROUP];
-  const [propLabel, setPropLabel] = useState2(currentValue?.label ?? null);
-  const [group, setGroup] = useState2(currentValue?.groupId ?? selectGroups[0]?.value ?? null);
-  const [error, setError] = useState2(null);
-  const name = __12("Name", "elementor");
-  const groupName = __12("Group Name", "elementor");
+  const [propLabel, setPropLabel] = useState3(currentValue?.label ?? null);
+  const [group, setGroup] = useState3(currentValue?.groupId ?? selectGroups[0]?.value ?? null);
+  const [error, setError] = useState3(null);
+  const name = __15("Name", "elementor");
+  const groupName = __15("Group Name", "elementor");
   const isCreate = currentValue === void 0;
-  const title = isCreate ? __12("Create new property", "elementor") : __12("Update property", "elementor");
-  const ctaLabel = isCreate ? __12("Create", "elementor") : __12("Update", "elementor");
+  const title = isCreate ? __15("Create new property", "elementor") : __15("Update property", "elementor");
+  const ctaLabel = isCreate ? __15("Create", "elementor") : __15("Update", "elementor");
   const handleSubmit = () => {
     const validationResult = validatePropLabel(propLabel ?? "", existingLabels, currentValue?.label);
     if (!validationResult.isValid) {
@@ -2825,8 +3220,8 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
     }
     onSubmit({ label: propLabel ?? "", group });
   };
-  return /* @__PURE__ */ React20.createElement(Form, { onSubmit: handleSubmit, "data-testid": "overridable-prop-form" }, /* @__PURE__ */ React20.createElement(Stack13, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React20.createElement(
-    Stack13,
+  return /* @__PURE__ */ React22.createElement(Form, { onSubmit: handleSubmit, "data-testid": "overridable-prop-form" }, /* @__PURE__ */ React22.createElement(Stack14, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React22.createElement(
+    Stack14,
     {
       direction: "row",
       alignItems: "center",
@@ -2834,14 +3229,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(Typography8, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__PURE__ */ React20.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React20.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React20.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React22.createElement(Typography8, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React22.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React22.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React22.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
     TextField2,
     {
       name,
       size: SIZE,
       fullWidth: true,
-      placeholder: __12("Enter value", "elementor"),
+      placeholder: __15("Enter value", "elementor"),
       value: propLabel ?? "",
       onChange: (e) => {
         const newValue = e.target.value;
@@ -2856,7 +3251,7 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
       error: Boolean(error),
       helperText: error
     }
-  ))), /* @__PURE__ */ React20.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React20.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React20.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
+  ))), /* @__PURE__ */ React22.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React22.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React22.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
     Select,
     {
       name: groupName,
@@ -2872,8 +3267,8 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
         return selectGroups.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
       }
     },
-    selectGroups.map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React20.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React20.createElement(Stack13, { 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(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React22.createElement(Stack14, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React22.createElement(
     Button4,
     {
       type: "submit",
@@ -2887,7 +3282,7 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
 }
 
 // src/extended/components/component-properties-panel/sortable.tsx
-import * as React21 from "react";
+import * as React23 from "react";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
   Box as Box10,
@@ -2895,8 +3290,8 @@ import {
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
-var SortableProvider = (props) => /* @__PURE__ */ React21.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React21.createElement(
+var SortableProvider = (props) => /* @__PURE__ */ React23.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React23.createElement(
   StyledSortableTrigger,
   {
     ...props,
@@ -2904,9 +3299,9 @@ var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React2
     className: `sortable-trigger ${triggerClassName ?? ""}`.trim(),
     "aria-label": "sort"
   },
-  /* @__PURE__ */ React21.createElement(GripVerticalIcon, { fontSize: "tiny" })
+  /* @__PURE__ */ React23.createElement(GripVerticalIcon, { fontSize: "tiny" })
 );
-var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React21.createElement(
+var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React23.createElement(
   UnstableSortableItem,
   {
     id: id2,
@@ -2920,7 +3315,7 @@ var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React21.createElem
       showDropIndication,
       isDragOverlay,
       isDragPlaceholder
-    }) => /* @__PURE__ */ React21.createElement(
+    }) => /* @__PURE__ */ React23.createElement(
       Box10,
       {
         ...itemProps,
@@ -2937,7 +3332,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 })
     )
   }
 );
@@ -2978,7 +3373,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(
     Box11,
     {
       ...bindTrigger(popoverState),
@@ -3013,17 +3408,17 @@ function PropertyItem({
         }
       }
     },
-    /* @__PURE__ */ React22.createElement(SortableTrigger, { ...sortableTriggerProps }),
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React24.createElement(
       Box11,
       {
         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(Typography9, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
-    /* @__PURE__ */ React22.createElement(IconButton2, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React22.createElement(XIcon, { fontSize: "tiny" }))
-  ), /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(Typography9, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
+    /* @__PURE__ */ React24.createElement(IconButton2, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React24.createElement(XIcon, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React24.createElement(
     Popover2,
     {
       ...popoverProps,
@@ -3031,7 +3426,7 @@ function PropertyItem({
       transformOrigin: { vertical: "top", horizontal: "left" },
       PaperProps: { sx: { width: popoverState.anchorEl?.getBoundingClientRect().width } }
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -3082,14 +3477,14 @@ function PropertiesGroup({
     popupState.close();
     onGroupDelete(group.id);
   };
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     Box12,
     {
       sx: {
         opacity: isDragPlaceholder ? 0.5 : 1
       }
     },
-    /* @__PURE__ */ React23.createElement(Stack14, { gap: 1 }, /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React25.createElement(Stack15, { gap: 1 }, /* @__PURE__ */ React25.createElement(
       Box12,
       {
         className: "group-header",
@@ -3109,8 +3504,8 @@ function PropertiesGroup({
           }
         }
       },
-      /* @__PURE__ */ React23.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
-      /* @__PURE__ */ React23.createElement(Stack14, { 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(Stack15, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React25.createElement(
         Box12,
         {
           sx: {
@@ -3128,7 +3523,7 @@ function PropertiesGroup({
             width: "100%"
           }
         },
-        /* @__PURE__ */ React23.createElement(
+        /* @__PURE__ */ React25.createElement(
           EditableField2,
           {
             ref: editableRef,
@@ -3139,7 +3534,7 @@ function PropertiesGroup({
             ...getEditableProps()
           }
         )
-      ) : /* @__PURE__ */ React23.createElement(
+      ) : /* @__PURE__ */ React25.createElement(
         EllipsisWithTooltip3,
         {
           title: group.label,
@@ -3147,18 +3542,18 @@ function PropertiesGroup({
           variant: "caption",
           sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
         }
-      ), /* @__PURE__ */ React23.createElement(
+      ), /* @__PURE__ */ React25.createElement(
         IconButton3,
         {
           className: "group-menu",
           size: "tiny",
           sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
-          "aria-label": __13("Group actions", "elementor"),
+          "aria-label": __16("Group actions", "elementor"),
           ...bindTrigger2(popupState)
         },
-        /* @__PURE__ */ React23.createElement(DotsVerticalIcon, { fontSize: "tiny" })
+        /* @__PURE__ */ React25.createElement(DotsVerticalIcon, { fontSize: "tiny" })
       ))
-    ), /* @__PURE__ */ React23.createElement(List2, { 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(List2, { 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,
@@ -3170,27 +3565,27 @@ function PropertiesGroup({
         onUpdate: (data) => onPropertyUpdate(prop.overrideKey, data)
       }
     )))))),
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React25.createElement(
       Menu,
       {
         ...bindMenu(popupState),
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" }
       },
-      /* @__PURE__ */ React23.createElement(MenuListItem2, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React23.createElement(Typography10, { variant: "caption", sx: { color: "text.primary" } }, __13("Rename", "elementor"))),
-      /* @__PURE__ */ React23.createElement(
+      /* @__PURE__ */ React25.createElement(MenuListItem2, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React25.createElement(Typography10, { variant: "caption", sx: { color: "text.primary" } }, __16("Rename", "elementor"))),
+      /* @__PURE__ */ React25.createElement(
         Tooltip2,
         {
-          title: hasProperties ? __13("To delete the group, first remove all the properties", "elementor") : "",
+          title: hasProperties ? __16("To delete the group, first remove all the properties", "elementor") : "",
           placement: "right"
         },
-        /* @__PURE__ */ React23.createElement("span", null, /* @__PURE__ */ React23.createElement(MenuListItem2, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React23.createElement(
+        /* @__PURE__ */ React25.createElement("span", null, /* @__PURE__ */ React25.createElement(MenuListItem2, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React25.createElement(
           Typography10,
           {
             variant: "caption",
             sx: { color: hasProperties ? "text.disabled" : "error.light" }
           },
-          __13("Delete", "elementor")
+          __16("Delete", "elementor")
         )))
       )
     )
@@ -3198,10 +3593,10 @@ function PropertiesGroup({
 }
 
 // src/extended/components/component-properties-panel/use-current-editable-item.ts
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
 import { useEditable } from "@elementor/editor-ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 
 // src/extended/store/actions/rename-overridable-group.ts
 function renameOverridableGroup({ componentId, groupId, label }) {
@@ -3222,10 +3617,10 @@ function renameOverridableGroup({ componentId, groupId, label }) {
 }
 
 // src/extended/components/component-properties-panel/utils/validate-group-label.ts
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 var ERROR_MESSAGES2 = {
-  EMPTY_NAME: __14("Group name is required", "elementor"),
-  DUPLICATE_NAME: __14("Group name already exists", "elementor")
+  EMPTY_NAME: __17("Group name is required", "elementor"),
+  DUPLICATE_NAME: __17("Group name already exists", "elementor")
 };
 function validateGroupLabel(label, existingGroups) {
   const trimmedLabel = label.trim();
@@ -3241,7 +3636,7 @@ function validateGroupLabel(label, existingGroups) {
 
 // src/extended/components/component-properties-panel/use-current-editable-item.ts
 function useCurrentEditableItem() {
-  const [editingGroupId, setEditingGroupId] = useState3(null);
+  const [editingGroupId, setEditingGroupId] = useState4(null);
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(currentComponentId);
   const allGroupsRecord = overridableProps?.groups?.items ?? {};
@@ -3254,7 +3649,7 @@ function useCurrentEditableItem() {
   };
   const handleSubmit = (newLabel) => {
     if (!editingGroupId || !currentComponentId) {
-      throw new Error(__15("Group ID or component ID is missing", "elementor"));
+      throw new Error(__18("Group ID or component ID is missing", "elementor"));
     }
     renameOverridableGroup({
       componentId: currentComponentId,
@@ -3307,7 +3702,7 @@ function generateUniqueLabel(groups) {
 function ComponentPropertiesPanelContent({ onClose }) {
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useSanitizeOverridableProps(currentComponentId);
-  const [isAddingGroup, setIsAddingGroup] = useState4(false);
+  const [isAddingGroup, setIsAddingGroup] = useState5(false);
   const introductionRef = useRef(null);
   const groupLabelEditable = useCurrentEditableItem();
   const groups = useMemo(() => {
@@ -3367,24 +3762,24 @@ function ComponentPropertiesPanelContent({ onClose }) {
     deleteOverridableGroup({ componentId: currentComponentId, groupId });
     setDocumentModifiedStatus3(true);
   };
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(PanelHeader2, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React24.createElement(Stack15, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React24.createElement(ComponentPropListIcon3, { fontSize: "tiny" }), /* @__PURE__ */ React24.createElement(PanelHeaderTitle2, { variant: "subtitle2" }, __16("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React24.createElement(Tooltip3, { title: __16("Add new group", "elementor") }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(PanelHeader2, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React26.createElement(Stack16, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React26.createElement(ComponentPropListIcon3, { fontSize: "tiny" }), /* @__PURE__ */ React26.createElement(PanelHeaderTitle2, { variant: "subtitle2" }, __19("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React26.createElement(Tooltip3, { title: __19("Add new group", "elementor") }, /* @__PURE__ */ React26.createElement(
     IconButton4,
     {
       size: "tiny",
-      "aria-label": __16("Add new group", "elementor"),
+      "aria-label": __19("Add new group", "elementor"),
       onClick: handleAddGroupClick
     },
-    /* @__PURE__ */ React24.createElement(FolderPlusIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React24.createElement(Tooltip3, { title: __16("Close panel", "elementor") }, /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React26.createElement(FolderPlusIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React26.createElement(Tooltip3, { title: __19("Close panel", "elementor") }, /* @__PURE__ */ React26.createElement(
     IconButton4,
     {
       ref: introductionRef,
       size: "tiny",
-      "aria-label": __16("Close panel", "elementor"),
+      "aria-label": __19("Close panel", "elementor"),
       onClick: onClose
     },
-    /* @__PURE__ */ React24.createElement(XIcon2, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React24.createElement(Divider3, null), /* @__PURE__ */ React24.createElement(PanelBody2, null, showEmptyState ? /* @__PURE__ */ React24.createElement(PropertiesEmptyState, { introductionRef }) : /* @__PURE__ */ React24.createElement(List3, { 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(XIcon2, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React26.createElement(Divider3, null), /* @__PURE__ */ React26.createElement(PanelBody2, null, showEmptyState ? /* @__PURE__ */ React26.createElement(PropertiesEmptyState, { introductionRef }) : /* @__PURE__ */ React26.createElement(List3, { 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,
@@ -3412,7 +3807,7 @@ var { panel, usePanelActions } = createPanel({
 function ComponentPropertiesPanel() {
   const { close: closePanel } = usePanelActions();
   const { open: openEditingPanel } = useEditingPanelActions();
-  return /* @__PURE__ */ React25.createElement(ThemeProvider2, null, /* @__PURE__ */ React25.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React25.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React25.createElement(Panel, null, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(ThemeProvider2, null, /* @__PURE__ */ React27.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React27.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React27.createElement(Panel, null, /* @__PURE__ */ React27.createElement(
     ComponentPropertiesPanelContent,
     {
       onClose: () => {
@@ -3422,18 +3817,18 @@ function ComponentPropertiesPanel() {
     }
   ))));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React25.createElement(Box13, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React25.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React25.createElement("strong", null, __17("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React27.createElement(Box13, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React27.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React27.createElement("strong", null, __20("Something went wrong", "elementor"))));
 
 // src/extended/components/component-panel-header/component-badge.tsx
-import * as React26 from "react";
+import * as React28 from "react";
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { ComponentPropListIcon as ComponentPropListIcon4 } from "@elementor/icons";
 import { Badge, Box as Box14, keyframes, styled as styled3, ToggleButton, Tooltip as Tooltip4 } from "@elementor/ui";
-import { __ as __18 } from "@wordpress/i18n";
-var ComponentsBadge = React26.forwardRef(({ overridablePropsCount, onClick }, ref) => {
+import { __ as __21 } from "@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,
@@ -3442,17 +3837,17 @@ var ComponentsBadge = React26.forwardRef(({ overridablePropsCount, onClick }, re
       invisible: overridablePropsCount === 0,
       animate: isFirstExposedProperty,
       anchorOrigin: { vertical: "top", horizontal: "right" },
-      badgeContent: /* @__PURE__ */ React26.createElement(Box14, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
+      badgeContent: /* @__PURE__ */ React28.createElement(Box14, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
     },
-    /* @__PURE__ */ React26.createElement(Tooltip4, { title: __18("Component properties", "elementor") }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React28.createElement(Tooltip4, { title: __21("Component properties", "elementor") }, /* @__PURE__ */ React28.createElement(
       ToggleButton,
       {
         value: "exposed properties",
         size: "tiny",
         onClick,
-        "aria-label": __18("Component properties", "elementor")
+        "aria-label": __21("Component properties", "elementor")
       },
-      /* @__PURE__ */ React26.createElement(ComponentPropListIcon4, { fontSize: "tiny" })
+      /* @__PURE__ */ React28.createElement(ComponentPropListIcon4, { fontSize: "tiny" })
     ))
   );
 });
@@ -3493,10 +3888,10 @@ var ComponentPanelHeader = () => {
   const onBack = useNavigateBack();
   const componentName = getComponentName();
   const [isMessageSuppressed, suppressMessage] = 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;
   }
@@ -3513,7 +3908,7 @@ var ComponentPanelHeader = () => {
       properties_count: overridablePropsCount
     });
   };
-  return /* @__PURE__ */ React27.createElement(Box15, { "data-testid": "component-panel-header" }, /* @__PURE__ */ React27.createElement(PanelHeader3, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React27.createElement(Tooltip5, { title: __19("Back", "elementor") }, /* @__PURE__ */ React27.createElement(IconButton5, { size: "tiny", onClick: onBack, "aria-label": __19("Back", "elementor") }, /* @__PURE__ */ React27.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React27.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React29.createElement(Box15, { "data-testid": "component-panel-header" }, /* @__PURE__ */ React29.createElement(PanelHeader3, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(Tooltip5, { title: __22("Back", "elementor") }, /* @__PURE__ */ React29.createElement(IconButton5, { size: "tiny", onClick: onBack, "aria-label": __22("Back", "elementor") }, /* @__PURE__ */ React29.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React29.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React29.createElement(
     EllipsisWithTooltip4,
     {
       title: componentName,
@@ -3521,14 +3916,14 @@ var ComponentPanelHeader = () => {
       variant: "caption",
       sx: { fontWeight: 500, flexGrow: 1 }
     }
-  ), /* @__PURE__ */ React27.createElement(
+  ), /* @__PURE__ */ React29.createElement(
     ComponentsBadge,
     {
       overridablePropsCount,
       ref: anchorRef,
       onClick: handleOpenPropertiesPanel
     }
-  )), /* @__PURE__ */ React27.createElement(Divider4, null), /* @__PURE__ */ React27.createElement(
+  )), /* @__PURE__ */ React29.createElement(Divider4, null), /* @__PURE__ */ React29.createElement(
     ComponentIntroduction,
     {
       anchorRef,
@@ -3538,7 +3933,7 @@ var ComponentPanelHeader = () => {
   ));
 };
 function getComponentName() {
-  const state = getState8();
+  const state = getState9();
   const path = state[SLICE_NAME].path;
   const { instanceTitle } = path.at(-1) ?? {};
   if (instanceTitle) {
@@ -3550,34 +3945,34 @@ function getComponentName() {
 }
 
 // src/extended/components/components-tab/components.tsx
-import * as React30 from "react";
+import * as React32 from "react";
 import { ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
 import { List as List4 } from "@elementor/ui";
 
 // src/extended/components/components-tab/component-item.tsx
-import * as React29 from "react";
-import { useRef as useRef4, useState as useState6 } from "react";
+import * as React31 from "react";
+import { useRef as useRef4, useState as useState7 } from "react";
 import { endDragElementFromPanel, startDragElementFromPanel } from "@elementor/editor-canvas";
 import { dropElement } from "@elementor/editor-elements";
 import { MenuListItem as MenuListItem3, useEditable as useEditable2, WarningInfotip } from "@elementor/editor-ui";
 import { DotsVerticalIcon as DotsVerticalIcon2 } from "@elementor/icons";
-import { bindMenu as bindMenu2, bindTrigger as bindTrigger3, IconButton as IconButton6, Menu as Menu2, Stack as Stack16, usePopupState as usePopupState3 } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
+import { bindMenu as bindMenu2, bindTrigger as bindTrigger3, IconButton as IconButton6, Menu as Menu2, Stack as Stack17, usePopupState as usePopupState3 } from "@elementor/ui";
+import { __ as __26 } from "@wordpress/i18n";
 
 // src/extended/store/actions/archive-component.ts
 import { setDocumentModifiedStatus as setDocumentModifiedStatus4 } from "@elementor/editor-documents";
-import { notify as notify2 } from "@elementor/editor-notifications";
-import { __ as __20 } from "@wordpress/i18n";
+import { notify as notify3 } from "@elementor/editor-notifications";
+import { __ as __23 } from "@wordpress/i18n";
 var successNotification = (componentId, componentName) => ({
   type: "success",
   /* translators: %s: component name */
-  message: __20("Successfully deleted component %s", "elementor").replace("%s", componentName),
+  message: __23("Successfully deleted component %s", "elementor").replace("%s", componentName),
   id: `success-archived-components-notification-${componentId}`
 });
 var archiveComponent = (componentId, componentName) => {
   componentsActions.archive(componentId);
   setDocumentModifiedStatus4(true);
-  notify2(successNotification(componentId, componentName));
+  notify3(successNotification(componentId, componentName));
 };
 
 // src/extended/store/actions/rename-component.ts
@@ -3608,21 +4003,21 @@ function findComponentInstancesByUid(documentContainer, componentUid) {
   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
 import { z as z5 } from "@elementor/schema";
-import { __ as __21 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
-var baseComponentSchema = z5.string().trim().max(MAX_NAME_LENGTH, __21("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var baseComponentSchema = z5.string().trim().max(MAX_NAME_LENGTH, __24("Component name is too long. Please keep it under 50 characters.", "elementor"));
 var createBaseComponentSchema = (existingNames) => {
   return z5.object({
     componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
-      message: __21("Component name already exists", "elementor")
+      message: __24("Component name already exists", "elementor")
     })
   });
 };
@@ -3630,9 +4025,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: __21("Component name is required.", "elementor")
+      message: __24("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: __21("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: __24("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -3680,7 +4075,7 @@ var createComponentModel2 = (component) => {
 
 // src/extended/utils/get-container-for-new-element.ts
 import {
-  getContainer as getContainer3,
+  getContainer as getContainer4,
   getCurrentDocumentContainer as getCurrentDocumentContainer2,
   getSelectedElements
 } from "@elementor/editor-elements";
@@ -3715,24 +4110,24 @@ function getSelectedElementContainer() {
   if (selectedElements.length !== 1) {
     return void 0;
   }
-  return getContainer3(selectedElements[0].id);
+  return getContainer4(selectedElements[0].id);
 }
 
 // src/extended/components/components-tab/delete-confirmation-dialog.tsx
-import * as React28 from "react";
-import { ConfirmationDialog } from "@elementor/editor-ui";
-import { __ as __22 } from "@wordpress/i18n";
+import * as React30 from "react";
+import { ConfirmationDialog as ConfirmationDialog2 } from "@elementor/editor-ui";
+import { __ as __25 } from "@wordpress/i18n";
 function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
-  return /* @__PURE__ */ React28.createElement(ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React28.createElement(ConfirmationDialog.Title, null, __22("Delete this component?", "elementor")), /* @__PURE__ */ React28.createElement(ConfirmationDialog.Content, null, /* @__PURE__ */ React28.createElement(ConfirmationDialog.ContentText, null, __22(
+  return /* @__PURE__ */ React30.createElement(ConfirmationDialog2, { open, onClose }, /* @__PURE__ */ React30.createElement(ConfirmationDialog2.Title, null, __25("Delete this component?", "elementor")), /* @__PURE__ */ React30.createElement(ConfirmationDialog2.Content, null, /* @__PURE__ */ React30.createElement(ConfirmationDialog2.ContentText, null, __25(
     "Existing instances on your pages will remain functional. You will no longer find this component in your list.",
     "elementor"
-  ))), /* @__PURE__ */ React28.createElement(ConfirmationDialog.Actions, { onClose, onConfirm }));
+  ))), /* @__PURE__ */ React30.createElement(ConfirmationDialog2.Actions, { onClose, onConfirm }));
 }
 
 // src/extended/components/components-tab/component-item.tsx
 function ComponentItem2({ component }) {
   const itemRef = useRef4(null);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState6(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState7(false);
   const { canRename, canDelete } = useComponentsPermissions();
   const shouldShowActions = canRename || canDelete;
   const {
@@ -3772,7 +4167,7 @@ function ComponentItem2({ component }) {
   const handleDeleteDialogClose = () => {
     setIsDeleteDialogOpen(false);
   };
-  return /* @__PURE__ */ React29.createElement(Stack16, null, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React31.createElement(Stack17, null, /* @__PURE__ */ React31.createElement(
     WarningInfotip,
     {
       open: Boolean(error),
@@ -3781,7 +4176,7 @@ function ComponentItem2({ component }) {
       width: itemRef.current?.getBoundingClientRect().width,
       offset: [0, -15]
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React31.createElement(
       ComponentItem,
       {
         ref: itemRef,
@@ -3793,17 +4188,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(IconButton6, { size: "tiny", ...bindTrigger3(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React29.createElement(DotsVerticalIcon2, { fontSize: "tiny" })) : void 0
+        endSlot: shouldShowActions ? /* @__PURE__ */ React31.createElement(IconButton6, { size: "tiny", ...bindTrigger3(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React31.createElement(DotsVerticalIcon2, { fontSize: "tiny" })) : void 0
       }
     )
-  ), shouldShowActions && /* @__PURE__ */ React29.createElement(
+  ), shouldShowActions && /* @__PURE__ */ React31.createElement(
     Menu2,
     {
       ...bindMenu2(popupState),
@@ -3816,7 +4211,7 @@ function ComponentItem2({ component }) {
         horizontal: "right"
       }
     },
-    canRename && /* @__PURE__ */ React29.createElement(
+    canRename && /* @__PURE__ */ React31.createElement(
       MenuListItem3,
       {
         sx: { minWidth: "160px" },
@@ -3826,18 +4221,18 @@ function ComponentItem2({ component }) {
           openEditMode();
         }
       },
-      __23("Rename", "elementor")
+      __26("Rename", "elementor")
     ),
-    canDelete && /* @__PURE__ */ React29.createElement(
+    canDelete && /* @__PURE__ */ React31.createElement(
       MenuListItem3,
       {
         sx: { minWidth: "160px" },
         primaryTypographyProps: { variant: "caption", color: "error.light" },
         onClick: handleDeleteClick
       },
-      __23("Delete", "elementor")
+      __26("Delete", "elementor")
     )
-  ), /* @__PURE__ */ React29.createElement(
+  ), /* @__PURE__ */ React31.createElement(
     DeleteConfirmationDialog,
     {
       open: isDeleteDialogOpen,
@@ -3870,43 +4265,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(List4, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React30.createElement(ComponentItem2, { key: component.uid, component })));
+  return /* @__PURE__ */ React32.createElement(List4, { 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(ThemeProvider3, null, /* @__PURE__ */ React30.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React30.createElement(ExtendedComponentsContent, null)));
+  return /* @__PURE__ */ React32.createElement(ThemeProvider3, null, /* @__PURE__ */ React32.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React32.createElement(ExtendedComponentsContent, null)));
 };
 
 // src/extended/components/create-component-form/create-component-form.tsx
-import * as React31 from "react";
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef5, useState as useState8 } from "react";
+import * as React33 from "react";
+import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef5, useState as useState9 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
-import { notify as notify4 } from "@elementor/editor-notifications";
+import { notify as notify5 } from "@elementor/editor-notifications";
 import { Form as FormElement, ThemeProvider as ThemeProvider4, useTextFieldAutoSelect } from "@elementor/editor-ui";
 import { ComponentsIcon as ComponentsIcon4 } from "@elementor/icons";
-import { Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Stack as Stack17, TextField as TextField3, Typography as Typography12 } from "@elementor/ui";
-import { __ as __26 } from "@wordpress/i18n";
+import { Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Stack as Stack18, TextField as TextField3, Typography as Typography12 } from "@elementor/ui";
+import { __ as __29 } from "@wordpress/i18n";
 
 // src/extended/store/actions/create-unpublished-component.ts
-import { createElements, deleteElement, getContainer as getContainer4 } from "@elementor/editor-elements";
+import { createElements, deleteElement, getContainer as getContainer5 } from "@elementor/editor-elements";
 import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
 import { generateUniqueId as generateUniqueId3 } from "@elementor/utils";
-import { __ as __24 } from "@wordpress/i18n";
+import { __ as __27 } from "@wordpress/i18n";
 
 // src/extended/utils/replace-element-with-component.ts
-import { replaceElement } from "@elementor/editor-elements";
+import { replaceElement as replaceElement2 } from "@elementor/editor-elements";
 var replaceElementWithComponent = (element, component) => {
-  return replaceElement({
+  return replaceElement2({
     currentElementId: element.id,
     newElement: createComponentModel2(component),
     withHistory: false
@@ -3925,7 +4320,7 @@ async function createUnpublishedComponent({
   const generatedUid = uid ?? generateUniqueId3("component");
   const componentBase = { uid: generatedUid, name };
   const elementDataWithOverridablesReverted = revertAllOverridablesInElementData(element);
-  const container = getContainer4(element.id);
+  const container = getContainer5(element.id);
   const modelFromContainer = container?.model?.toJSON?.();
   const originalElement = {
     model: modelFromContainer ?? element,
@@ -3957,17 +4352,17 @@ async function createUnpublishedComponent({
   return { uid: generatedUid, instanceId: componentInstance.id };
 }
 function restoreOriginalElement(originalElement, componentInstanceId) {
-  const componentContainer = getContainer4(componentInstanceId);
+  const componentContainer = getContainer5(componentInstanceId);
   if (componentContainer) {
     deleteElement({ container: componentContainer, options: { useHistory: false } });
   }
-  const parentContainer = getContainer4(originalElement.parentId);
+  const parentContainer = getContainer5(originalElement.parentId);
   if (!parentContainer) {
     return;
   }
   const clonedModel = structuredClone(originalElement.model);
   createElements({
-    title: __24("Restore Element", "elementor"),
+    title: __27("Restore Element", "elementor"),
     elements: [
       {
         container: parentContainer,
@@ -3981,9 +4376,9 @@ function restoreOriginalElement(originalElement, componentInstanceId) {
 // src/extended/sync/prevent-non-atomic-nesting.ts
 import { isAtomicWidget } from "@elementor/editor-canvas";
 import { getAllDescendants as getAllDescendants3, getElementType as getElementType3 } from "@elementor/editor-elements";
-import { notify as notify3 } from "@elementor/editor-notifications";
+import { notify as notify4 } from "@elementor/editor-notifications";
 import { blockCommand } from "@elementor/editor-v1-adapters";
-import { __ as __25 } from "@wordpress/i18n";
+import { __ as __28 } from "@wordpress/i18n";
 
 // src/extended/utils/is-editing-component.ts
 function isEditingComponent() {
@@ -3993,7 +4388,7 @@ function isEditingComponent() {
 // src/extended/sync/prevent-non-atomic-nesting.ts
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: __25("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: __28("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -4025,7 +4420,7 @@ function blockNonAtomicCreate(args) {
   if (isElementAtomic(elementType)) {
     return false;
   }
-  notify3(NON_ATOMIC_ELEMENT_ALERT);
+  notify4(NON_ATOMIC_ELEMENT_ALERT);
   return true;
 }
 function blockNonAtomicMove(args) {
@@ -4041,7 +4436,7 @@ function blockNonAtomicMove(args) {
     return allElements.some((element) => !isAtomicWidget(element));
   });
   if (hasNonAtomicElement) {
-    notify3(NON_ATOMIC_ELEMENT_ALERT);
+    notify4(NON_ATOMIC_ELEMENT_ALERT);
   }
   return hasNonAtomicElement;
 }
@@ -4059,7 +4454,7 @@ function blockNonAtomicPaste(args) {
   }
   const hasNonAtomicElement = hasNonAtomicElementsInTree(data.clipboard.elements);
   if (hasNonAtomicElement) {
-    notify3(NON_ATOMIC_ELEMENT_ALERT);
+    notify4(NON_ATOMIC_ELEMENT_ALERT);
   }
   return hasNonAtomicElement;
 }
@@ -4092,10 +4487,10 @@ function findNonAtomicElementsInElement(element) {
 }
 
 // src/extended/components/create-component-form/hooks/use-form.ts
-import { useMemo as useMemo2, useState as useState7 } from "react";
+import { useMemo as useMemo2, useState as useState8 } from "react";
 var useForm = (initialValues) => {
-  const [values, setValues] = useState7(initialValues);
-  const [errors, setErrors] = useState7({});
+  const [values, setValues] = useState8(initialValues);
+  const [errors, setErrors] = useState8({});
   const isValid = useMemo2(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
@@ -4172,8 +4567,8 @@ function countNestedElements(container) {
 // src/extended/components/create-component-form/create-component-form.tsx
 var MAX_COMPONENTS = 100;
 function CreateComponentForm() {
-  const [element, setElement] = useState8(null);
-  const [anchorPosition, setAnchorPosition] = useState8();
+  const [element, setElement] = useState9(null);
+  const [anchorPosition, setAnchorPosition] = useState9();
   const { components } = useComponents();
   const eventData = useRef5(null);
   useEffect3(() => {
@@ -4181,7 +4576,7 @@ function CreateComponentForm() {
     const openPopup = (event) => {
       const { shouldOpen, notification } = shouldOpenForm(event.detail.element, components?.length ?? 0);
       if (!shouldOpen) {
-        notify4(notification);
+        notify5(notification);
         return;
       }
       setElement({ element: event.detail.element, elementLabel: getElementLabel(event.detail.element.id) });
@@ -4215,15 +4610,15 @@ function CreateComponentForm() {
       } else {
         throw new Error("Failed to find published component");
       }
-      notify4({
+      notify5({
         type: "success",
-        message: __26("Component created successfully.", "elementor"),
+        message: __29("Component created successfully.", "elementor"),
         id: `component-saved-successfully-${uid}`
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = __26("Failed to create component. Please try again.", "elementor");
-      notify4({
+      const errorMessage = __29("Failed to create component. Please try again.", "elementor");
+      notify5({
         type: "error",
         message: errorMessage,
         id: "component-save-failed"
@@ -4243,7 +4638,7 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React31.createElement(ThemeProvider4, null, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React33.createElement(ThemeProvider4, null, /* @__PURE__ */ React33.createElement(
     Popover3,
     {
       open: element !== null,
@@ -4252,7 +4647,7 @@ function CreateComponentForm() {
       anchorPosition,
       "data-testid": "create-component-form"
     },
-    element !== null && /* @__PURE__ */ React31.createElement(
+    element !== null && /* @__PURE__ */ React33.createElement(
       Form2,
       {
         initialValues: { componentName: element.elementLabel },
@@ -4269,7 +4664,7 @@ function shouldOpenForm(element, componentsCount) {
       shouldOpen: false,
       notification: {
         type: "default",
-        message: __26(
+        message: __29(
           "Components require atomic elements only. Remove widgets to create this component.",
           "elementor"
         ),
@@ -4283,7 +4678,7 @@ function shouldOpenForm(element, componentsCount) {
       notification: {
         type: "default",
         /* translators: %s is the maximum number of components */
-        message: __26(
+        message: __29(
           `You've reached the limit of %s components. Please remove an existing one to create a new component.`,
           "elementor"
         ).replace("%s", MAX_COMPONENTS.toString()),
@@ -4320,14 +4715,14 @@ var Form2 = ({
     }
   };
   const texts = {
-    heading: __26("Create component", "elementor"),
-    name: __26("Name", "elementor"),
-    cancel: __26("Cancel", "elementor"),
-    create: __26("Create", "elementor")
+    heading: __29("Create component", "elementor"),
+    name: __29("Name", "elementor"),
+    cancel: __29("Cancel", "elementor"),
+    create: __29("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React31.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React31.createElement(Stack17, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React31.createElement(
-    Stack17,
+  return /* @__PURE__ */ React33.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React33.createElement(Stack18, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React33.createElement(
+    Stack18,
     {
       direction: "row",
       alignItems: "center",
@@ -4335,9 +4730,9 @@ var Form2 = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__PURE__ */ React31.createElement(ComponentsIcon4, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React31.createElement(Typography12, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
-  ), /* @__PURE__ */ React31.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React31.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(FormLabel2, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React31.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React33.createElement(ComponentsIcon4, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React33.createElement(Typography12, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
+  ), /* @__PURE__ */ React33.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React33.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React33.createElement(FormLabel2, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React33.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React33.createElement(
     TextField3,
     {
       id: nameInputId,
@@ -4350,12 +4745,12 @@ var Form2 = ({
       helperText: errors.componentName,
       inputRef: nameInputRef
     }
-  ))), /* @__PURE__ */ React31.createElement(Stack17, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React31.createElement(Button5, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React31.createElement(Button5, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
+  ))), /* @__PURE__ */ React33.createElement(Stack18, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React33.createElement(Button5, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React33.createElement(Button5, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
 };
 
 // src/extended/components/edit-component/edit-component.tsx
-import * as React33 from "react";
-import { useEffect as useEffect6, useState as useState10 } from "react";
+import * as React35 from "react";
+import { useEffect as useEffect6, useState as useState11 } from "react";
 import { getV1DocumentsManager as getV1DocumentsManager5 } from "@elementor/editor-documents";
 import { __privateListenTo as listenTo, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
 import { __useSelector as useSelector5 } from "@elementor/store";
@@ -4377,10 +4772,10 @@ function updateCurrentComponent(params) {
 }
 
 // src/extended/components/edit-component/component-modal.tsx
-import * as React32 from "react";
+import * as React34 from "react";
 import { useEffect as useEffect5 } from "react";
 import { createPortal } from "react-dom";
-import { __ as __27 } from "@wordpress/i18n";
+import { __ as __30 } from "@wordpress/i18n";
 
 // src/extended/components/edit-component/use-canvas-document.ts
 import {
@@ -4393,10 +4788,10 @@ function useCanvasDocument() {
 }
 
 // src/extended/components/edit-component/use-element-rect.ts
-import { useEffect as useEffect4, useState as useState9 } from "react";
+import { useEffect as useEffect4, useState as useState10 } from "react";
 import { throttle } from "@elementor/utils";
 function useElementRect(element) {
-  const [rect, setRect] = useState9(new DOMRect(0, 0, 0, 0));
+  const [rect, setRect] = useState10(new DOMRect(0, 0, 0, 0));
   const onChange = throttle(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
@@ -4473,7 +4868,7 @@ function ComponentModal({ topLevelElementDom, onClose }) {
     return null;
   }
   return 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
   );
 }
@@ -4502,7 +4897,7 @@ function Backdrop({
       onClose();
     }
   };
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "div",
     {
       style: backdropStyle,
@@ -4510,7 +4905,7 @@ function Backdrop({
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": __27("Exit component editing mode", "elementor")
+      "aria-label": __30("Exit component editing mode", "elementor")
     }
   );
 }
@@ -4550,7 +4945,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
@@ -4563,7 +4958,7 @@ function EditComponent() {
   if (!currentComponentId) {
     return null;
   }
-  return /* @__PURE__ */ React33.createElement(ComponentModal, { topLevelElementDom, onClose });
+  return /* @__PURE__ */ React35.createElement(ComponentModal, { topLevelElementDom, onClose });
 }
 function useHandleDocumentSwitches() {
   const documentsManager = getV1DocumentsManager5();
@@ -4623,7 +5018,7 @@ function getInstanceTitle(instanceId, path) {
 }
 function useComponentDOMElement(id2) {
   const { componentContainerDomElement, topLevelElementDom } = getComponentDOMElements(id2);
-  const [currentElementDom, setCurrentElementDom] = useState10(topLevelElementDom);
+  const [currentElementDom, setCurrentElementDom] = useState11(topLevelElementDom);
   useEffect6(() => {
     setCurrentElementDom(topLevelElementDom);
   }, [topLevelElementDom]);
@@ -4655,10 +5050,10 @@ function getComponentDOMElements(id2) {
 }
 
 // src/extended/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React34 from "react";
+import * as React36 from "react";
 import { PencilIcon as PencilIcon3 } from "@elementor/icons";
 import { Box as Box16 } from "@elementor/ui";
-import { __ as __28 } from "@wordpress/i18n";
+import { __ as __31 } from "@wordpress/i18n";
 function ExtendedInstanceEditingPanel() {
   const { canEdit } = useComponentsPermissions();
   const data = useInstancePanelData();
@@ -4666,20 +5061,20 @@ function ExtendedInstanceEditingPanel() {
     return null;
   }
   const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
-  const panelTitle = __28("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = __31("Edit %s", "elementor").replace("%s", component.name);
   const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
-  return /* @__PURE__ */ React34.createElement(Box16, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React36.createElement(Box16, { "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,
@@ -4689,12 +5084,12 @@ function ExtendedInstanceEditingPanel() {
         ) : 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
       }
     )
@@ -4702,7 +5097,7 @@ function ExtendedInstanceEditingPanel() {
 }
 
 // src/extended/components/overridable-props/overridable-prop-control.tsx
-import * as React35 from "react";
+import * as React37 from "react";
 import {
   ControlReplacementsProvider as ControlReplacementsProvider2,
   getControlReplacements as getControlReplacements2,
@@ -4754,7 +5149,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(
     PropProvider2,
     {
       ...propContext,
@@ -4765,7 +5160,7 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React35.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React35.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React35.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
+    /* @__PURE__ */ React37.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React37.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React37.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
   ));
 }
 function ControlWithReplacements({
@@ -4775,18 +5170,18 @@ function ControlWithReplacements({
   const { ControlToRender, isReplaced } = 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
-import * as React37 from "react";
+import * as React39 from "react";
 import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { useElement as useElement4 } from "@elementor/editor-editing-panel";
 import { getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Popover4, Tooltip as Tooltip6, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __30 } from "@wordpress/i18n";
+import { __ as __33 } from "@wordpress/i18n";
 
 // src/extended/store/actions/set-overridable-prop.ts
 import { generateUniqueId as generateUniqueId4 } from "@elementor/utils";
@@ -4858,11 +5253,11 @@ function setOverridableProp({
 }
 
 // src/extended/components/overridable-props/indicator.tsx
-import * as React36 from "react";
+import * as React38 from "react";
 import { forwardRef as forwardRef3 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
 import { Box as Box17, styled as styled4 } from "@elementor/ui";
-import { __ as __29 } from "@wordpress/i18n";
+import { __ as __32 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
 var IconContainer = styled4(Box17)`
 	pointer-events: none;
@@ -4918,16 +5313,16 @@ var Content = styled4(Box17)`
 		}
 	}
 `;
-var Indicator2 = forwardRef3(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React36.createElement(
+var Indicator2 = forwardRef3(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React38.createElement(
   Content,
   {
     role: "button",
     ref,
     ...props,
     className: isOpen || isOverridable ? "enlarged" : "",
-    "aria-label": isOverridable ? __29("Overridable property", "elementor") : __29("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? __32("Overridable property", "elementor") : __32("Make prop overridable", "elementor")
   },
-  /* @__PURE__ */ React36.createElement(IconContainer, { className: "icon" }, isOverridable ? /* @__PURE__ */ React36.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React36.createElement(PlusIcon, { fontSize: SIZE2 }))
+  /* @__PURE__ */ React38.createElement(IconContainer, { className: "icon" }, isOverridable ? /* @__PURE__ */ React38.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React38.createElement(PlusIcon, { fontSize: SIZE2 }))
 ));
 
 // src/extended/components/overridable-props/overridable-prop-indicator.tsx
@@ -4938,7 +5333,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 {
@@ -4984,7 +5379,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(Tooltip6, { placement: "top", title: __30("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(Tooltip6, { placement: "top", title: __33("Override Property", "elementor") }, /* @__PURE__ */ React39.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React39.createElement(
     Popover4,
     {
       disableScrollLock: true,
@@ -5001,7 +5396,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React39.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -5024,7 +5419,7 @@ import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
 
 // src/extended/mcp/save-as-component-tool.ts
 import { DOCUMENT_STRUCTURE_URI, WIDGET_SCHEMA_URI } from "@elementor/editor-canvas";
-import { getContainer as getContainer5, getElementType as getElementType4, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
+import { getContainer as getContainer6, getElementType as getElementType4, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
 import { getMCPByDomain, toolPrompts } from "@elementor/editor-mcp";
 import { AxiosError } from "@elementor/http-client";
 import { z as z6 } from "@elementor/schema";
@@ -5069,7 +5464,7 @@ var handleSaveAsComponent = async (params) => {
     overridable_props: overridablePropsInput
   } = params;
   const validElementTypes = getValidElementTypes();
-  const container = getContainer5(elementId);
+  const container = getContainer6(elementId);
   if (!container) {
     throw new Error(ERROR_MESSAGES3.ELEMENT_NOT_FOUND);
   }
@@ -5415,7 +5810,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 };
 
 // src/extended/sync/update-archived-component-before-save.ts
-import { notify as notify5 } from "@elementor/editor-notifications";
+import { notify as notify6 } from "@elementor/editor-notifications";
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -5430,7 +5825,7 @@ var updateArchivedComponentBeforeSave = async (status) => {
     const result = await apiClient.updateArchivedComponents(archivedComponents, status);
     const failedIds = result.failedIds.join(", ");
     if (failedIds) {
-      notify5(failedNotification(failedIds));
+      notify6(failedNotification(failedIds));
     }
   } catch (error) {
     throw new Error(`Failed to update archived components: ${error}`);
@@ -5594,7 +5989,7 @@ function isPartOfMoveCommand(options) {
 }
 
 // src/extended/sync/handle-component-edit-mode-container.ts
-import { createElement as createElement38, selectElement as selectElement2 } from "@elementor/editor-elements";
+import { createElement as createElement40, selectElement as selectElement2 } from "@elementor/editor-elements";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 var V4_DEFAULT_CONTAINER_TYPE = "e-flexbox";
 function initHandleComponentEditModeContainer() {
@@ -5644,7 +6039,7 @@ function initRedirectDropIntoComponent() {
   });
 }
 function createEmptyTopLevelContainer(container) {
-  const newContainer = createElement38({
+  const newContainer = createElement40({
     container,
     model: { elType: V4_DEFAULT_CONTAINER_TYPE }
   });
@@ -5743,7 +6138,7 @@ function initExtended() {
   });
   registerTab({
     id: "components",
-    label: __31("Components", "elementor"),
+    label: __34("Components", "elementor"),
     component: ExtendedComponents,
     priority: PRIORITY
   });
@@ -5863,24 +6258,24 @@ function initCreateComponentShortcut() {
 
 // src/populate-store.ts
 import { useEffect as useEffect8 } from "react";
-import { __dispatch as dispatch4 } from "@elementor/store";
+import { __dispatch as dispatch5 } from "@elementor/store";
 function PopulateStore() {
   useEffect8(() => {
-    dispatch4(loadComponents());
+    dispatch5(loadComponents());
   }, []);
   return null;
 }
 
 // src/prevent-circular-nesting.ts
 import { getAllDescendants as getAllDescendants5 } from "@elementor/editor-elements";
-import { notify as notify6 } from "@elementor/editor-notifications";
+import { notify as notify7 } from "@elementor/editor-notifications";
 import { blockCommand as blockCommand2 } from "@elementor/editor-v1-adapters";
-import { __getState as getState9 } from "@elementor/store";
-import { __ as __32 } from "@wordpress/i18n";
+import { __getState as getState10 } from "@elementor/store";
+import { __ as __35 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: __32("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: __35("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -5901,7 +6296,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = getState9();
+  const state = getState10();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -5957,7 +6352,7 @@ function blockCircularCreate(args) {
   }
   const isBlocked = wouldCreateCircularNesting(componentId);
   if (isBlocked) {
-    notify6(COMPONENT_CIRCULAR_NESTING_ALERT);
+    notify7(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return isBlocked;
 }
@@ -5977,7 +6372,7 @@ function blockCircularMove(args) {
     });
   });
   if (hasCircularComponent) {
-    notify6(COMPONENT_CIRCULAR_NESTING_ALERT);
+    notify7(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return hasCircularComponent;
 }
@@ -5993,21 +6388,21 @@ function blockCircularPaste(args) {
   const allComponentIds = extractComponentIdsFromElements(data.clipboard.elements);
   const hasCircularComponent = allComponentIds.some(wouldCreateCircularNesting);
   if (hasCircularComponent) {
-    notify6(COMPONENT_CIRCULAR_NESTING_ALERT);
+    notify7(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return hasCircularComponent;
 }
 
 // src/store/actions/remove-component-styles.ts
-import { __dispatch as dispatch5 } from "@elementor/store";
+import { __dispatch as dispatch6 } from "@elementor/store";
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  dispatch5(slice.actions.removeStyles({ id: id2 }));
+  dispatch6(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState10, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+import { __getState as getState11, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
 var componentsStylesProvider = createStylesProvider({
   key: "components-styles",
   priority: 100,
@@ -6019,10 +6414,10 @@ var componentsStylesProvider = createStylesProvider({
   ),
   actions: {
     all: () => {
-      return selectFlatStyles(getState10());
+      return selectFlatStyles(getState11());
     },
     get: (id2) => {
-      return selectFlatStyles(getState10()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles(getState11()).find((style) => style.id === id2) ?? null;
     }
   }
 });
@@ -6054,13 +6449,17 @@ function init() {
   stylesRepository.register(componentsStylesProvider);
   registerSlice(slice);
   registerElementType(
-    COMPONENT_WIDGET_TYPE,
-    (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
+    COMPONENT_WIDGET_TYPE2,
+    (options) => createComponentType({
+      ...options,
+      showLockedByModal: openEditModeDialog,
+      showDetachConfirmDialog: openDetachConfirmDialog
+    })
   );
   window.elementorCommon.__beforeSave = beforeSave2;
   injectTab({
     id: "components",
-    label: __33("Components", "elementor"),
+    label: __36("Components", "elementor"),
     component: Components,
     position: 1
   });
@@ -6097,13 +6496,14 @@ function init() {
   }
 }
 export {
-  COMPONENT_WIDGET_TYPE,
+  COMPONENT_WIDGET_TYPE2 as COMPONENT_WIDGET_TYPE,
   ComponentInstanceProvider,
   ComponentItem,
   ComponentName,
   ComponentSearch,
   EmptyState as ComponentsEmptyState,
   ComponentsList,
+  DetachAction,
   EditComponentAction,
   EmptySearchResult,
   EmptyState2 as InstanceEmptyState,