@elementor/editor-components 4.0.0-666 → 4.0.0-667

package/dist/index.mjs

@@ -1,17 +1,16 @@
 // src/init.ts
-import { injectIntoLogic as injectIntoLogic2 } from "@elementor/editor";
+import { injectIntoLogic } from "@elementor/editor";
 import {
   registerElementType,
   settingsTransformersRegistry as settingsTransformersRegistry2
 } from "@elementor/editor-canvas";
-import { getV1CurrentDocument as getV1CurrentDocument2 } from "@elementor/editor-documents";
-import { registerEditingPanelReplacement as registerEditingPanelReplacement2 } from "@elementor/editor-editing-panel";
+import { getV1CurrentDocument } from "@elementor/editor-documents";
+import { registerEditingPanelReplacement } from "@elementor/editor-editing-panel";
 import { injectTab } from "@elementor/editor-elements-panel";
 import { stylesRepository } from "@elementor/editor-styles-repository";
-import { registerDataHook as registerDataHook6 } from "@elementor/editor-v1-adapters";
+import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { isProAtLeast } from "@elementor/utils";
-import { __ as __36 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -31,10 +30,10 @@ import { __createAsyncThunk as createAsyncThunk } from "@elementor/store";
 import { ajax } from "@elementor/editor-v1-adapters";
 import { httpService } from "@elementor/http-client";
 var BASE_URL = "elementor/v1/components";
-var getParams = (id2) => ({
+var getParams = (id) => ({
   action: "get_document_config",
-  unique_id: `document-config-${id2}`,
-  data: { id: id2 }
+  unique_id: `document-config-${id}`,
+  data: { id }
 });
 var apiClient = {
   get: () => httpService().get(`${BASE_URL}`).then((res) => res.data.data),
@@ -43,8 +42,8 @@ var apiClient = {
     ids,
     status
   }),
-  getComponentConfig: (id2) => ajax.load(getParams(id2)),
-  invalidateComponentConfigCache: (id2) => ajax.invalidateCache(getParams(id2)),
+  getComponentConfig: (id) => ajax.load(getParams(id)),
+  invalidateComponentConfigCache: (id) => ajax.invalidateCache(getParams(id)),
   getComponentLockStatus: async (componentId) => await httpService().get(`${BASE_URL}/lock-status`, {
     params: {
       componentId
@@ -298,10 +297,10 @@ var useIsSanitizedComponent = (componentId, key) => {
 
 // src/utils/component-document-data.ts
 import { getV1DocumentsManager } from "@elementor/editor-documents";
-var getComponentDocumentData = async (id2) => {
+var getComponentDocumentData = async (id) => {
   const documentManager = getV1DocumentsManager();
   try {
-    return await documentManager.request(id2);
+    return await documentManager.request(id);
   } catch {
     return null;
   }
@@ -310,11 +309,11 @@ var getComponentDocumentData = async (id2) => {
 // src/component-instance-transformer.ts
 var componentInstanceTransformer = createTransformer(
   async ({
-    component_id: id2,
+    component_id: id,
     overrides: overridesValue
   }) => {
     const unpublishedComponents = selectUnpublishedComponents(getState());
-    const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id2);
+    const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id);
     const overrides = overridesValue?.reduce((acc, override) => ({ ...acc, ...override }), {});
     if (unpublishedComponent) {
       return {
@@ -322,10 +321,10 @@ var componentInstanceTransformer = createTransformer(
         overrides
       };
     }
-    if (typeof id2 !== "number") {
-      throw new Error(`Component ID "${id2}" not valid.`);
+    if (typeof id !== "number") {
+      throw new Error(`Component ID "${id}" not valid.`);
     }
-    const data = await getComponentDocumentData(id2);
+    const data = await getComponentDocumentData(id);
     return {
       elements: data?.elements ?? [],
       overrides
@@ -1378,8 +1377,8 @@ var componentsActions = {
   resetUnpublished() {
     dispatch2(slice.actions.resetUnpublished());
   },
-  removeStyles(id2) {
-    dispatch2(slice.actions.removeStyles({ id: id2 }));
+  removeStyles(id) {
+    dispatch2(slice.actions.removeStyles({ id }));
   },
   addStyles(styles) {
     dispatch2(slice.actions.addStyles(styles));
@@ -1393,8 +1392,8 @@ var componentsActions = {
   archive(componentId) {
     dispatch2(slice.actions.archive(componentId));
   },
-  setCurrentComponentId(id2) {
-    safeDispatch()?.(slice.actions.setCurrentComponentId(id2));
+  setCurrentComponentId(id) {
+    safeDispatch()?.(slice.actions.setCurrentComponentId(id));
   },
   setPath(path) {
     safeDispatch()?.(slice.actions.setPath(path));
@@ -1863,9 +1862,9 @@ function OverridePropsGroup({ group }) {
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id2 = useId();
-  const labelId = `label-${id2}`;
-  const contentId = `content-${id2}`;
+  const id = useId();
+  const labelId = `label-${id}`;
+  const contentId = `content-${id}`;
   const title = group.label;
   return /* @__PURE__ */ React17.createElement(Box7, { "aria-label": `${title} section` }, /* @__PURE__ */ React17.createElement(
     ListItemButton3,
@@ -2059,12 +2058,12 @@ async function getComponentIds(elements, cache) {
 }
 async function getDocumentsMap(ids, cache) {
   const documents = await Promise.all(
-    ids.map(async (id2) => {
-      const document = await cache.get(id2);
+    ids.map(async (id) => {
+      const document = await cache.get(id);
       if (!document) {
         return null;
       }
-      return [id2, document];
+      return [id, document];
     })
   );
   return new Map(documents.filter((document) => document !== null));
@@ -2102,7 +2101,7 @@ function loadComponentsStyles(documents) {
     return;
   }
   const knownComponents = selectStyles(getState7());
-  const unknownDocuments = new Map([...documents.entries()].filter(([id2]) => !knownComponents[id2]));
+  const unknownDocuments = new Map([...documents.entries()].filter(([id]) => !knownComponents[id]));
   if (!unknownDocuments.size) {
     return;
   }
@@ -2110,7 +2109,7 @@ function loadComponentsStyles(documents) {
 }
 function addStyles(documents) {
   const styles = Object.fromEntries(
-    [...documents.entries()].map(([id2, document]) => [id2, extractStylesFromDocument(document)])
+    [...documents.entries()].map(([id, document]) => [id, extractStylesFromDocument(document)])
   );
   dispatch4(slice.actions.addStyles(styles));
 }
@@ -2166,10 +2165,10 @@ var ELEMENT_ID_LENGTH = 7;
 function formatComponentElementsId(elements, path) {
   return elements.map((element) => {
     const nestingPath = [...path, element.id];
-    const id2 = hashString(nestingPath.join("_"), ELEMENT_ID_LENGTH);
+    const id = hashString(nestingPath.join("_"), ELEMENT_ID_LENGTH);
     return {
       ...element,
-      id: id2,
+      id,
       originId: element.id,
       elements: element.elements ? formatComponentElementsId(element.elements, nestingPath) : void 0
     };
@@ -2529,3912 +2528,200 @@ function createComponentModel() {
   });
 }
 
-// src/extended/init.ts
-import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
-import { registerControlReplacement } from "@elementor/editor-controls";
-import { getV1CurrentDocument } from "@elementor/editor-documents";
-import {
-  FIELD_TYPE,
-  injectIntoPanelHeaderTop,
-  registerEditingPanelReplacement,
-  registerFieldIndicator
-} from "@elementor/editor-editing-panel";
-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 __34 } from "@wordpress/i18n";
-
-// src/extended/components/component-panel-header/component-panel-header.tsx
-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 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 __22 } from "@wordpress/i18n";
-
-// src/extended/hooks/use-navigate-back.ts
-import { useCallback } from "react";
-import { getV1DocumentsManager as getV1DocumentsManager2 } from "@elementor/editor-documents";
-import { __useSelector as useSelector4 } from "@elementor/store";
-function useNavigateBack() {
-  const path = useSelector4(selectPath);
-  const documentsManager = getV1DocumentsManager2();
-  return useCallback(() => {
-    const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
-    if (prevComponentId && prevComponentInstanceId) {
-      switchToComponent(prevComponentId, prevComponentInstanceId);
-      return;
-    }
-    switchToComponent(documentsManager.getInitialId());
-  }, [path, documentsManager]);
+// src/populate-store.ts
+import { useEffect as useEffect2 } from "react";
+import { __dispatch as dispatch5 } from "@elementor/store";
+function PopulateStore() {
+  useEffect2(() => {
+    dispatch5(loadComponents());
+  }, []);
+  return null;
 }
 
-// src/extended/components/component-introduction.tsx
-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 Stack12, Typography as Typography6 } from "@elementor/ui";
+// src/prevent-circular-nesting.ts
+import { getAllDescendants } from "@elementor/editor-elements";
+import { notify as notify3 } from "@elementor/editor-notifications";
+import { blockCommand } from "@elementor/editor-v1-adapters";
+import { __getState as getState9 } from "@elementor/store";
 import { __ as __11 } from "@wordpress/i18n";
-var ComponentIntroduction = ({
-  anchorRef,
-  shouldShowIntroduction,
-  onClose
-}) => {
-  if (!anchorRef.current || !shouldShowIntroduction) {
-    return null;
-  }
-  return /* @__PURE__ */ React20.createElement(
-    Popover,
-    {
-      anchorEl: anchorRef.current,
-      open: shouldShowIntroduction,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: -30
-      },
-      onClose
-    },
-    /* @__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__ */ 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__ */ 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__ */ React20.createElement(
-      Link2,
-      {
-        href: "http://go.elementor.com/components-guide",
-        target: "_blank",
-        sx: { mt: 2 },
-        color: "info.main",
-        variant: "body2"
-      },
-      __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"))))))
-  );
+var COMPONENT_TYPE = "e-component";
+var COMPONENT_CIRCULAR_NESTING_ALERT = {
+  type: "default",
+  message: __11("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  id: "circular-component-nesting-blocked"
 };
-
-// src/extended/components/component-properties-panel/component-properties-panel.tsx
-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 __20 } from "@wordpress/i18n";
-
-// src/extended/components/component-properties-panel/component-properties-panel-content.tsx
-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 Stack16, Tooltip as Tooltip3 } from "@elementor/ui";
-import { generateUniqueId as generateUniqueId2 } from "@elementor/utils";
-import { __ as __19 } from "@wordpress/i18n";
-
-// src/extended/store/actions/add-overridable-group.ts
-function addOverridableGroup({
-  componentId,
-  groupId,
-  label,
-  source
-}) {
-  const currentComponent = componentsSelectors.getCurrentComponent();
-  const overridableProps = componentsSelectors.getOverridableProps(componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const newGroup = {
-    id: groupId,
-    label,
-    props: []
-  };
-  componentsActions.setOverridableProps(componentId, {
-    ...overridableProps,
-    groups: {
-      ...overridableProps.groups,
-      items: {
-        ...overridableProps.groups.items,
-        [groupId]: newGroup
-      },
-      order: [groupId, ...overridableProps.groups.order]
-    }
+function initCircularNestingPrevention() {
+  blockCommand({
+    command: "document/elements/create",
+    condition: blockCircularCreate
   });
-  trackComponentEvent({
-    action: "propertiesGroupCreated",
-    source,
-    component_uid: currentComponent?.uid,
-    group_name: label
+  blockCommand({
+    command: "document/elements/move",
+    condition: blockCircularMove
+  });
+  blockCommand({
+    command: "document/elements/paste",
+    condition: blockCircularPaste
   });
-  return newGroup;
-}
-
-// src/extended/store/utils/groups-transformers.ts
-import { generateUniqueId } from "@elementor/utils";
-import { __ as __12 } from "@wordpress/i18n";
-function removePropFromAllGroups(groups, propKey) {
-  const propKeys = Array.isArray(propKey) ? propKey : [propKey];
-  return {
-    ...groups,
-    items: Object.fromEntries(
-      Object.entries(groups.items).map(([groupId, group]) => [
-        groupId,
-        {
-          ...group,
-          props: group.props.filter((p) => !propKeys.includes(p))
-        }
-      ])
-    )
-  };
 }
-function addPropToGroup(groups, groupId, propKey) {
-  const group = groups.items[groupId];
-  if (!group) {
-    return groups;
-  }
-  if (group.props.includes(propKey)) {
-    return groups;
+function wouldCreateCircularNesting(componentIdToAdd) {
+  if (componentIdToAdd === void 0) {
+    return false;
   }
-  return {
-    ...groups,
-    items: {
-      ...groups.items,
-      [groupId]: {
-        ...group,
-        props: [...group.props, propKey]
-      }
-    }
-  };
-}
-function movePropBetweenGroups(groups, propKey, fromGroupId, toGroupId) {
-  if (fromGroupId === toGroupId) {
-    return groups;
+  const state = getState9();
+  const currentComponentId = selectCurrentComponentId(state);
+  const path = selectPath(state);
+  if (currentComponentId === null) {
+    return false;
   }
-  const withoutProp = removePropFromGroup(groups, fromGroupId, propKey);
-  return addPropToGroup(withoutProp, toGroupId, propKey);
-}
-function removePropFromGroup(groups, groupId, propKey) {
-  const group = groups.items[groupId];
-  if (!group) {
-    return groups;
+  if (componentIdToAdd === currentComponentId) {
+    return true;
   }
-  return {
-    ...groups,
-    items: {
-      ...groups.items,
-      [groupId]: {
-        ...group,
-        props: group.props.filter((p) => p !== propKey)
-      }
-    }
-  };
+  return path.some((item) => item.componentId === componentIdToAdd);
 }
-function resolveOrCreateGroup(groups, requestedGroupId) {
-  if (requestedGroupId && groups.items[requestedGroupId]) {
-    return { groups, groupId: requestedGroupId };
+function extractComponentIdFromModel(model) {
+  if (!model) {
+    return null;
   }
-  if (!requestedGroupId && groups.order.length > 0) {
-    return { groups, groupId: groups.order[0] };
+  const isComponent = model.widgetType === COMPONENT_TYPE;
+  if (!isComponent) {
+    return null;
   }
-  return createGroup(groups, requestedGroupId);
+  return model.settings?.component_instance?.value?.component_id?.value ?? null;
 }
-function createGroup(groups, groupId, label) {
-  const newGroupId = groupId || generateUniqueId("group");
-  const newLabel = label || __12("Default", "elementor");
-  return {
-    groups: {
-      ...groups,
-      items: {
-        ...groups.items,
-        [newGroupId]: {
-          id: newGroupId,
-          label: newLabel,
-          props: []
-        }
-      },
-      order: [...groups.order, newGroupId]
-    },
-    groupId: newGroupId
-  };
+function extractComponentIdFromElement(element) {
+  if (element.widgetType !== COMPONENT_TYPE) {
+    return null;
+  }
+  return element.settings?.component_instance?.value?.component_id?.value ?? null;
 }
-function removePropsFromState(overridableProps, propsToRemove) {
-  const overrideKeysToRemove = propsToRemove.map((prop) => prop.overrideKey);
-  const remainingProps = Object.fromEntries(
-    Object.entries(overridableProps.props).filter(([, prop]) => !propsToRemove.includes(prop))
-  );
-  const updatedGroupItems = Object.fromEntries(
-    Object.entries(overridableProps.groups.items).map(
-      ([groupId, group]) => [
-        groupId,
-        {
-          ...group,
-          props: group.props.filter((prop) => !overrideKeysToRemove.includes(prop))
-        }
-      ]
-    )
-  );
-  return {
-    props: remainingProps,
-    groups: {
-      items: updatedGroupItems,
-      order: overridableProps.groups.order.filter((groupId) => !overrideKeysToRemove.includes(groupId))
+function extractComponentIdsFromElements(elements) {
+  const ids = [];
+  for (const element of elements) {
+    const componentId = extractComponentIdFromElement(element);
+    if (componentId !== null) {
+      ids.push(componentId);
+    }
+    if (element.elements?.length) {
+      ids.push(...extractComponentIdsFromElements(element.elements));
     }
-  };
-}
-function ensureGroupInOrder(groups, groupId) {
-  if (groups.order.includes(groupId)) {
-    return groups;
   }
-  return {
-    ...groups,
-    order: [...groups.order, groupId]
-  };
-}
-function deleteGroup(groups, groupId) {
-  const { [groupId]: removed, ...remainingItems } = groups.items;
-  return {
-    items: remainingItems,
-    order: groups.order.filter((id2) => id2 !== groupId)
-  };
+  return ids;
 }
-function renameGroup(groups, groupId, newLabel) {
-  const group = groups.items[groupId];
-  if (!group) {
-    return groups;
+function extractComponentIdFromContainer(container) {
+  const widgetType = container.model?.get?.("widgetType");
+  if (widgetType !== COMPONENT_TYPE) {
+    return null;
   }
-  return {
-    ...groups,
-    items: {
-      ...groups.items,
-      [groupId]: {
-        ...group,
-        label: newLabel
-      }
-    }
-  };
+  const settings = container.model?.get?.("settings");
+  const componentInstance = settings?.get?.("component_instance");
+  return componentInstance?.value?.component_id?.value ?? null;
 }
-
-// src/extended/store/actions/delete-overridable-group.ts
-function deleteOverridableGroup({ componentId, groupId }) {
-  const overridableProps = componentsSelectors.getOverridableProps(componentId);
-  if (!overridableProps) {
+function blockCircularCreate(args) {
+  const componentId = extractComponentIdFromModel(args.model);
+  if (componentId === null) {
     return false;
   }
-  const group = overridableProps.groups.items[groupId];
-  if (!group || group.props.length > 0) {
-    return false;
+  const isBlocked = wouldCreateCircularNesting(componentId);
+  if (isBlocked) {
+    notify3(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
-  const updatedGroups = deleteGroup(overridableProps.groups, groupId);
-  componentsActions.setOverridableProps(componentId, {
-    ...overridableProps,
-    groups: updatedGroups
-  });
-  return true;
+  return isBlocked;
 }
-
-// src/extended/utils/revert-overridable-settings.ts
-import {
-  getAllDescendants,
-  getContainer as getContainer3,
-  getElementSetting,
-  updateElementSettings
-} from "@elementor/editor-elements";
-function revertElementOverridableSetting(elementId, settingKey, originValue, overrideKey) {
-  const container = getContainer3(elementId);
-  if (!container) {
-    return;
-  }
-  if (isComponentInstance(container.model.toJSON())) {
-    revertComponentInstanceOverridableSetting(elementId, overrideKey);
-    return;
-  }
-  updateElementSettings({
-    id: elementId,
-    props: { [settingKey]: originValue ?? null },
-    withHistory: false
+function blockCircularMove(args) {
+  const { containers = [args.container] } = args;
+  const hasCircularComponent = containers.some((container) => {
+    if (!container) {
+      return false;
+    }
+    const allElements = getAllDescendants(container);
+    return allElements.some((element) => {
+      const componentId = extractComponentIdFromContainer(element);
+      if (componentId === null) {
+        return false;
+      }
+      return wouldCreateCircularNesting(componentId);
+    });
   });
-}
-function revertComponentInstanceOverridableSetting(elementId, overrideKey) {
-  const setting = getElementSetting(elementId, "component_instance");
-  const componentInstance = componentInstancePropTypeUtil.extract(setting);
-  const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance?.overrides);
-  if (!overrides?.length) {
-    return;
+  if (hasCircularComponent) {
+    notify3(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
-  const revertedOverrides = revertComponentInstanceOverrides(overrides, overrideKey);
-  const updatedSetting = componentInstancePropTypeUtil.create({
-    ...componentInstance,
-    overrides: componentInstanceOverridesPropTypeUtil.create(revertedOverrides)
-  });
-  updateElementSettings({
-    id: elementId,
-    props: { component_instance: updatedSetting },
-    withHistory: false
-  });
-}
-function revertComponentInstanceOverrides(overrides, filterByKey) {
-  return overrides.map((item) => {
-    if (!componentOverridablePropTypeUtil.isValid(item)) {
-      return item;
-    }
-    if (!componentInstanceOverridePropTypeUtil.isValid(item.value.origin_value)) {
-      return null;
-    }
-    if (filterByKey && item.value.override_key !== filterByKey) {
-      return item;
-    }
-    return item.value.origin_value;
-  }).filter((item) => item !== null);
+  return hasCircularComponent;
 }
-function revertOverridablePropsFromSettings(settings) {
-  let hasChanges = false;
-  const revertedSettings = {};
-  for (const [key, value] of Object.entries(settings)) {
-    if (componentOverridablePropTypeUtil.isValid(value)) {
-      revertedSettings[key] = value.value.origin_value;
-      hasChanges = true;
-    } else {
-      revertedSettings[key] = value;
-    }
+function blockCircularPaste(args) {
+  const { storageType } = args;
+  if (storageType !== "localstorage") {
+    return false;
   }
-  return { hasChanges, settings: revertedSettings };
-}
-function revertAllOverridablesInElementData(elementData) {
-  const revertedElement = { ...elementData };
-  if (isComponentInstance({ widgetType: elementData.widgetType, elType: elementData.elType })) {
-    revertedElement.settings = revertComponentInstanceSettings(elementData.settings);
-  } else if (revertedElement.settings) {
-    const { settings } = revertOverridablePropsFromSettings(revertedElement.settings);
-    revertedElement.settings = settings;
+  const data = window?.elementorCommon?.storage?.get();
+  if (!data?.clipboard?.elements) {
+    return false;
   }
-  if (revertedElement.elements) {
-    revertedElement.elements = revertedElement.elements.map(revertAllOverridablesInElementData);
+  const allComponentIds = extractComponentIdsFromElements(data.clipboard.elements);
+  const hasCircularComponent = allComponentIds.some(wouldCreateCircularNesting);
+  if (hasCircularComponent) {
+    notify3(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
-  return revertedElement;
+  return hasCircularComponent;
 }
-function revertComponentInstanceSettings(settings) {
-  if (!settings?.component_instance) {
-    return settings;
-  }
-  const componentInstance = componentInstancePropTypeUtil.extract(settings.component_instance);
-  const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance?.overrides);
-  if (!overrides?.length) {
-    return settings;
-  }
-  const revertedOverrides = revertComponentInstanceOverrides(overrides);
-  return {
-    ...settings,
-    component_instance: componentInstancePropTypeUtil.create({
-      ...componentInstance,
-      overrides: componentInstanceOverridesPropTypeUtil.create(revertedOverrides)
-    })
-  };
+
+// src/store/actions/remove-component-styles.ts
+import { __dispatch as dispatch6 } from "@elementor/store";
+function removeComponentStyles(id) {
+  apiClient.invalidateComponentConfigCache(id);
+  dispatch6(slice.actions.removeStyles({ id }));
 }
-function revertAllOverridablesInContainer(container) {
-  getAllDescendants(container).forEach((element) => {
-    if (element.model.get("widgetType") === COMPONENT_WIDGET_TYPE2) {
-      revertComponentInstanceOverridesInElement(element);
-    } else {
-      revertElementSettings(element);
+
+// src/store/components-styles-provider.ts
+import { createStylesProvider } from "@elementor/editor-styles-repository";
+import { __getState as getState10, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+var componentsStylesProvider = createStylesProvider({
+  key: "components-styles",
+  priority: 100,
+  subscribe: (cb) => subscribeWithSelector(
+    (state) => state[SLICE_NAME],
+    () => {
+      cb();
+    }
+  ),
+  actions: {
+    all: () => {
+      return selectFlatStyles(getState10());
+    },
+    get: (id) => {
+      return selectFlatStyles(getState10()).find((style) => style.id === id) ?? null;
     }
-  });
-}
-function revertComponentInstanceOverridesInElement(element) {
-  const settings = element.settings?.toJSON() ?? {};
-  const componentInstance = componentInstancePropTypeUtil.extract(settings.component_instance);
-  const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance?.overrides);
-  if (!overrides?.length) {
-    return;
-  }
-  const revertedOverrides = revertComponentInstanceOverrides(overrides);
-  const updatedSetting = componentInstancePropTypeUtil.create({
-    ...componentInstance,
-    overrides: componentInstanceOverridesPropTypeUtil.create(revertedOverrides)
-  });
-  updateElementSettings({
-    id: element.id,
-    props: { component_instance: updatedSetting },
-    withHistory: false
-  });
-}
-function revertElementSettings(element) {
-  const settings = element.settings?.toJSON() ?? {};
-  const { hasChanges, settings: revertedSettings } = revertOverridablePropsFromSettings(settings);
-  if (!hasChanges) {
-    return;
   }
-  updateElementSettings({
-    id: element.id,
-    props: revertedSettings,
-    withHistory: false
-  });
-}
+});
 
-// src/extended/store/actions/delete-overridable-prop.ts
-function deleteOverridableProp({ componentId, propKey, source }) {
-  const overridableProps = componentsSelectors.getOverridableProps(componentId);
-  if (!overridableProps || Object.keys(overridableProps.props).length === 0) {
+// src/sync/publish-draft-components-in-page-before-save.ts
+import { invalidateDocumentData as invalidateDocumentData2, isDocumentDirty as isDocumentDirty2 } from "@elementor/editor-documents";
+async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
+  if (status !== "publish") {
     return;
   }
-  const propKeysToDelete = Array.isArray(propKey) ? propKey : [propKey];
-  const deletedProps = [];
-  for (const key of propKeysToDelete) {
-    const prop = overridableProps.props[key];
-    if (!prop) {
-      continue;
-    }
-    deletedProps.push(prop);
-    revertElementOverridableSetting(prop.elementId, prop.propKey, prop.originValue, key);
-  }
-  if (deletedProps.length === 0) {
+  const documents = await getComponentDocuments(elements);
+  const draftIds = [...documents.values()].filter(isDocumentDirty2).map((document) => document.id);
+  if (draftIds.length === 0) {
     return;
   }
-  const remainingProps = Object.fromEntries(
-    Object.entries(overridableProps.props).filter(([key]) => !propKeysToDelete.includes(key))
-  );
-  const updatedGroups = removePropFromAllGroups(overridableProps.groups, propKey);
-  componentsActions.setOverridableProps(componentId, {
-    ...overridableProps,
-    props: remainingProps,
-    groups: updatedGroups
-  });
-  const currentComponent = componentsSelectors.getCurrentComponent();
-  for (const prop of deletedProps) {
-    trackComponentEvent({
-      action: "propertyRemoved",
-      source,
-      component_uid: currentComponent?.uid,
-      property_id: prop.overrideKey,
-      property_path: prop.propKey,
-      property_name: prop.label,
-      element_type: prop.widgetType ?? prop.elType
-    });
-  }
-}
-
-// src/extended/store/actions/reorder-group-props.ts
-function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
-  const overridableProps = componentsSelectors.getOverridableProps(componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const group = overridableProps.groups.items[groupId];
-  if (!group) {
-    return;
-  }
-  componentsActions.setOverridableProps(componentId, {
-    ...overridableProps,
-    groups: {
-      ...overridableProps.groups,
-      items: {
-        ...overridableProps.groups.items,
-        [groupId]: {
-          ...group,
-          props: newPropsOrder
-        }
-      }
-    }
-  });
-}
-
-// src/extended/store/actions/reorder-overridable-groups.ts
-function reorderOverridableGroups({ componentId, newOrder }) {
-  const overridableProps = componentsSelectors.getOverridableProps(componentId);
-  if (!overridableProps) {
-    return;
-  }
-  componentsActions.setOverridableProps(componentId, {
-    ...overridableProps,
-    groups: {
-      ...overridableProps.groups,
-      order: newOrder
-    }
-  });
-}
-
-// src/extended/store/actions/update-overridable-prop-params.ts
-function updateOverridablePropParams({
-  componentId,
-  overrideKey,
-  label,
-  groupId
-}) {
-  const overridableProps = componentsSelectors.getOverridableProps(componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const prop = overridableProps.props[overrideKey];
-  if (!prop) {
-    return;
-  }
-  const oldGroupId = prop.groupId;
-  const newGroupId = groupId ?? oldGroupId;
-  const updatedProp = {
-    ...prop,
-    label,
-    groupId: newGroupId
-  };
-  const updatedGroups = movePropBetweenGroups(overridableProps.groups, overrideKey, oldGroupId, newGroupId);
-  componentsActions.setOverridableProps(componentId, {
-    ...overridableProps,
-    props: {
-      ...overridableProps.props,
-      [overrideKey]: updatedProp
-    },
-    groups: updatedGroups
-  });
-  return updatedProp;
-}
-
-// src/extended/components/component-properties-panel/properties-empty-state.tsx
-import * as React21 from "react";
-import { useState as useState2 } from "react";
-import { ComponentPropListIcon as ComponentPropListIcon2 } from "@elementor/icons";
-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] = useState2(false);
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
-    Stack13,
-    {
-      alignItems: "center",
-      justifyContent: "flex-start",
-      height: "100%",
-      color: "text.secondary",
-      sx: { px: 2.5, pt: 10, pb: 5.5 },
-      gap: 1
-    },
-    /* @__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",
-        color: "secondary",
-        sx: { textDecorationLine: "underline" },
-        onClick: () => setIsOpen(true)
-      },
-      __13("Learn more", "elementor")
-    )
-  ), /* @__PURE__ */ React21.createElement(
-    ComponentIntroduction,
-    {
-      anchorRef: introductionRef,
-      shouldShowIntroduction: isOpen,
-      onClose: () => setIsOpen(false)
-    }
-  ));
-}
-
-// src/extended/components/component-properties-panel/properties-group.tsx
-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 {
-  bindMenu,
-  bindTrigger as bindTrigger2,
-  Box as Box12,
-  IconButton as IconButton3,
-  List as List2,
-  Menu,
-  Stack as Stack15,
-  Tooltip as Tooltip2,
-  Typography as Typography10,
-  usePopupState as usePopupState2
-} from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
-
-// src/extended/components/component-properties-panel/property-item.tsx
-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 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 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 __14 } from "@wordpress/i18n";
-var ERROR_MESSAGES = {
-  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();
-  if (!trimmedLabel) {
-    return { isValid: false, errorMessage: ERROR_MESSAGES.EMPTY_NAME };
-  }
-  const normalizedLabel = trimmedLabel.toLowerCase();
-  const normalizedCurrentLabel = currentLabel?.trim().toLowerCase();
-  const isDuplicate = existingLabels.some((existingLabel) => {
-    const normalizedExisting = existingLabel.trim().toLowerCase();
-    if (normalizedCurrentLabel && normalizedExisting === normalizedCurrentLabel) {
-      return false;
-    }
-    return normalizedExisting === normalizedLabel;
-  });
-  if (isDuplicate) {
-    return { isValid: false, errorMessage: ERROR_MESSAGES.DUPLICATE_NAME };
-  }
-  return { isValid: true, errorMessage: null };
-}
-
-// src/extended/components/overridable-props/overridable-prop-form.tsx
-var SIZE = "tiny";
-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] = 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 ? __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) {
-      setError(validationResult.errorMessage);
-      return;
-    }
-    onSubmit({ label: propLabel ?? "", group });
-  };
-  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",
-      py: 1,
-      px: 1.5,
-      sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
-    },
-    /* @__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: __15("Enter value", "elementor"),
-      value: propLabel ?? "",
-      onChange: (e) => {
-        const newValue = e.target.value;
-        setPropLabel(newValue);
-        const validationResult = validatePropLabel(
-          newValue,
-          existingLabels,
-          currentValue?.label
-        );
-        setError(validationResult.errorMessage);
-      },
-      error: Boolean(error),
-      helperText: error
-    }
-  ))), /* @__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,
-      size: SIZE,
-      fullWidth: true,
-      value: group ?? null,
-      onChange: (e) => setGroup(e.target.value),
-      displayEmpty: true,
-      renderValue: (selectedValue) => {
-        if (!selectedValue) {
-          return selectGroups[0].label;
-        }
-        return selectGroups.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
-      }
-    },
-    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",
-      disabled: !propLabel || Boolean(error),
-      variant: "contained",
-      color: "primary",
-      size: "small"
-    },
-    ctaLabel
-  ))));
-}
-
-// src/extended/components/component-properties-panel/sortable.tsx
-import * as React23 from "react";
-import { GripVerticalIcon } from "@elementor/icons";
-import {
-  Box as Box10,
-  styled as styled2,
-  UnstableSortableItem,
-  UnstableSortableProvider
-} from "@elementor/ui";
-var SortableProvider = (props) => /* @__PURE__ */ React23.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React23.createElement(
-  StyledSortableTrigger,
-  {
-    ...props,
-    role: "button",
-    className: `sortable-trigger ${triggerClassName ?? ""}`.trim(),
-    "aria-label": "sort"
-  },
-  /* @__PURE__ */ React23.createElement(GripVerticalIcon, { fontSize: "tiny" })
-);
-var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React23.createElement(
-  UnstableSortableItem,
-  {
-    id: id2,
-    render: ({
-      itemProps,
-      isDragged,
-      triggerProps,
-      itemStyle,
-      triggerStyle,
-      dropIndicationStyle,
-      showDropIndication,
-      isDragOverlay,
-      isDragPlaceholder
-    }) => /* @__PURE__ */ React23.createElement(
-      Box10,
-      {
-        ...itemProps,
-        style: itemStyle,
-        component: "div",
-        role: "listitem",
-        sx: {
-          backgroundColor: isDragOverlay ? "background.paper" : void 0
-        }
-      },
-      children({
-        isDragged,
-        isDragPlaceholder,
-        triggerProps,
-        triggerStyle
-      }),
-      showDropIndication && /* @__PURE__ */ React23.createElement(SortableItemIndicator, { style: dropIndicationStyle })
-    )
-  }
-);
-var StyledSortableTrigger = styled2("div")(({ theme }) => ({
-  position: "absolute",
-  left: "-2px",
-  top: "50%",
-  transform: `translate( -${theme.spacing(1.5)}, -50% )`,
-  color: theme.palette.action.active,
-  cursor: "grab"
-}));
-var SortableItemIndicator = styled2(Box10)`
-	width: 100%;
-	height: 1px;
-	background-color: ${({ theme }) => theme.palette.text.primary};
-`;
-
-// src/extended/components/component-properties-panel/property-item.tsx
-function PropertyItem({
-  prop,
-  sortableTriggerProps,
-  isDragPlaceholder,
-  groups,
-  existingLabels,
-  onDelete,
-  onUpdate
-}) {
-  const popoverState = usePopupState({
-    variant: "popover"
-  });
-  const icon = getElementIcon(prop);
-  const popoverProps = bindPopover(popoverState);
-  const handleSubmit = (data) => {
-    onUpdate(data);
-    popoverState.close();
-  };
-  const handleDelete = (event) => {
-    event.stopPropagation();
-    onDelete(prop.overrideKey);
-  };
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
-    Box11,
-    {
-      ...bindTrigger(popoverState),
-      sx: {
-        position: "relative",
-        pl: 0.5,
-        pr: 1,
-        py: 0.25,
-        minHeight: 28,
-        borderRadius: 1,
-        border: "1px solid",
-        borderColor: "divider",
-        display: "flex",
-        alignItems: "center",
-        gap: 0.5,
-        opacity: isDragPlaceholder ? 0.5 : 1,
-        cursor: "pointer",
-        "&:hover": {
-          backgroundColor: "action.hover"
-        },
-        "&:hover .sortable-trigger": {
-          visibility: "visible"
-        },
-        "& .sortable-trigger": {
-          visibility: "hidden"
-        },
-        "&:hover .delete-button": {
-          visibility: "visible"
-        },
-        "& .delete-button": {
-          visibility: "hidden"
-        }
-      }
-    },
-    /* @__PURE__ */ React24.createElement(SortableTrigger, { ...sortableTriggerProps }),
-    /* @__PURE__ */ React24.createElement(
-      Box11,
-      {
-        sx: { display: "flex", alignItems: "center", color: "text.primary", fontSize: 12, padding: 0.25 }
-      },
-      /* @__PURE__ */ React24.createElement("i", { className: icon })
-    ),
-    /* @__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,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      PaperProps: { sx: { width: popoverState.anchorEl?.getBoundingClientRect().width } }
-    },
-    /* @__PURE__ */ React24.createElement(
-      OverridablePropForm,
-      {
-        onSubmit: handleSubmit,
-        currentValue: prop,
-        groups,
-        existingLabels,
-        sx: { width: "100%" }
-      }
-    )
-  ));
-}
-function getElementIcon(prop) {
-  const elType = prop.elType === "widget" ? prop.widgetType : prop.elType;
-  const widgetsCache = getWidgetsCache2();
-  if (!widgetsCache) {
-    return "eicon-apps";
-  }
-  const widgetConfig = widgetsCache[elType];
-  return widgetConfig?.icon || "eicon-apps";
-}
-
-// src/extended/components/component-properties-panel/properties-group.tsx
-function PropertiesGroup({
-  group,
-  props,
-  allGroups,
-  sortableTriggerProps,
-  isDragPlaceholder,
-  onPropsReorder,
-  onPropertyDelete,
-  onPropertyUpdate,
-  onGroupDelete,
-  editableLabelProps
-}) {
-  const groupProps = group.props.map((propId) => props[propId]).filter((prop) => Boolean(prop));
-  const popupState = usePopupState2({
-    variant: "popover",
-    disableAutoFocus: true
-  });
-  const { editableRef, isEditing, error, getEditableProps, setEditingGroupId, editingGroupId } = editableLabelProps;
-  const hasProperties = group.props.length > 0;
-  const isThisGroupEditing = isEditing && editingGroupId === group.id;
-  const handleRenameClick = () => {
-    popupState.close();
-    setEditingGroupId(group.id);
-  };
-  const handleDeleteClick = () => {
-    popupState.close();
-    onGroupDelete(group.id);
-  };
-  return /* @__PURE__ */ React25.createElement(
-    Box12,
-    {
-      sx: {
-        opacity: isDragPlaceholder ? 0.5 : 1
-      }
-    },
-    /* @__PURE__ */ React25.createElement(Stack15, { gap: 1 }, /* @__PURE__ */ React25.createElement(
-      Box12,
-      {
-        className: "group-header",
-        sx: {
-          position: "relative",
-          "&:hover .group-sortable-trigger": {
-            visibility: "visible"
-          },
-          "& .group-sortable-trigger": {
-            visibility: "hidden"
-          },
-          "&:hover .group-menu": {
-            visibility: "visible"
-          },
-          "& .group-menu": {
-            visibility: "hidden"
-          }
-        }
-      },
-      /* @__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: {
-            height: 28,
-            display: "flex",
-            alignItems: "center",
-            border: 2,
-            borderColor: "text.secondary",
-            borderRadius: 1,
-            pl: 0.5,
-            flexGrow: 1,
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            width: "100%"
-          }
-        },
-        /* @__PURE__ */ React25.createElement(
-          EditableField2,
-          {
-            ref: editableRef,
-            as: Typography10,
-            variant: "caption",
-            error: error ?? void 0,
-            sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 },
-            ...getEditableProps()
-          }
-        )
-      ) : /* @__PURE__ */ React25.createElement(
-        EllipsisWithTooltip3,
-        {
-          title: group.label,
-          as: Typography10,
-          variant: "caption",
-          sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
-        }
-      ), /* @__PURE__ */ React25.createElement(
-        IconButton3,
-        {
-          className: "group-menu",
-          size: "tiny",
-          sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
-          "aria-label": __16("Group actions", "elementor"),
-          ...bindTrigger2(popupState)
-        },
-        /* @__PURE__ */ React25.createElement(DotsVerticalIcon, { fontSize: "tiny" })
-      ))
-    ), /* @__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,
-        sortableTriggerProps: { ...triggerProps, style: triggerStyle },
-        isDragPlaceholder: isItemDragPlaceholder,
-        groups: allGroups,
-        existingLabels: Object.values(props).map((p) => p.label),
-        onDelete: onPropertyDelete,
-        onUpdate: (data) => onPropertyUpdate(prop.overrideKey, data)
-      }
-    )))))),
-    /* @__PURE__ */ React25.createElement(
-      Menu,
-      {
-        ...bindMenu(popupState),
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" }
-      },
-      /* @__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 ? __16("To delete the group, first remove all the properties", "elementor") : "",
-          placement: "right"
-        },
-        /* @__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" }
-          },
-          __16("Delete", "elementor")
-        )))
-      )
-    )
-  );
-}
-
-// src/extended/components/component-properties-panel/use-current-editable-item.ts
-import { useState as useState4 } from "react";
-import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
-import { useEditable } from "@elementor/editor-ui";
-import { __ as __18 } from "@wordpress/i18n";
-
-// src/extended/store/actions/rename-overridable-group.ts
-function renameOverridableGroup({ componentId, groupId, label }) {
-  const overridableProps = componentsSelectors.getOverridableProps(componentId);
-  if (!overridableProps) {
-    return false;
-  }
-  const group = overridableProps.groups.items[groupId];
-  if (!group) {
-    return false;
-  }
-  const updatedGroups = renameGroup(overridableProps.groups, groupId, label);
-  componentsActions.setOverridableProps(componentId, {
-    ...overridableProps,
-    groups: updatedGroups
-  });
-  return true;
-}
-
-// src/extended/components/component-properties-panel/utils/validate-group-label.ts
-import { __ as __17 } from "@wordpress/i18n";
-var ERROR_MESSAGES2 = {
-  EMPTY_NAME: __17("Group name is required", "elementor"),
-  DUPLICATE_NAME: __17("Group name already exists", "elementor")
-};
-function validateGroupLabel(label, existingGroups) {
-  const trimmedLabel = label.trim();
-  if (!trimmedLabel) {
-    return ERROR_MESSAGES2.EMPTY_NAME;
-  }
-  const isDuplicate = Object.values(existingGroups).some((group) => group.label === trimmedLabel);
-  if (isDuplicate) {
-    return ERROR_MESSAGES2.DUPLICATE_NAME;
-  }
-  return "";
-}
-
-// src/extended/components/component-properties-panel/use-current-editable-item.ts
-function useCurrentEditableItem() {
-  const [editingGroupId, setEditingGroupId] = useState4(null);
-  const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps(currentComponentId);
-  const allGroupsRecord = overridableProps?.groups?.items ?? {};
-  const currentGroup = editingGroupId ? allGroupsRecord[editingGroupId] : null;
-  const validateLabel = (newLabel) => {
-    const otherGroups = Object.fromEntries(
-      Object.entries(allGroupsRecord).filter(([id2]) => id2 !== editingGroupId)
-    );
-    return validateGroupLabel(newLabel, otherGroups) || null;
-  };
-  const handleSubmit = (newLabel) => {
-    if (!editingGroupId || !currentComponentId) {
-      throw new Error(__18("Group ID or component ID is missing", "elementor"));
-    }
-    renameOverridableGroup({
-      componentId: currentComponentId,
-      groupId: editingGroupId,
-      label: newLabel
-    });
-    setDocumentModifiedStatus2(true);
-  };
-  const {
-    ref: editableRef,
-    openEditMode,
-    isEditing,
-    error,
-    getProps: getEditableProps
-  } = useEditable({
-    value: currentGroup?.label ?? "",
-    onSubmit: handleSubmit,
-    validation: validateLabel
-  });
-  return {
-    editableRef,
-    isEditing,
-    error,
-    getEditableProps,
-    setEditingGroupId: (groupId) => {
-      setEditingGroupId(groupId);
-      openEditMode();
-    },
-    editingGroupId
-  };
-}
-
-// src/extended/components/component-properties-panel/utils/generate-unique-label.ts
-var DEFAULT_NEW_GROUP_LABEL = "New group";
-function generateUniqueLabel(groups) {
-  const existingLabels = new Set(groups.map((group) => group.label));
-  if (!existingLabels.has(DEFAULT_NEW_GROUP_LABEL)) {
-    return DEFAULT_NEW_GROUP_LABEL;
-  }
-  let index = 1;
-  let newLabel = `${DEFAULT_NEW_GROUP_LABEL}-${index}`;
-  while (existingLabels.has(newLabel)) {
-    index++;
-    newLabel = `${DEFAULT_NEW_GROUP_LABEL}-${index}`;
-  }
-  return newLabel;
-}
-
-// src/extended/components/component-properties-panel/component-properties-panel-content.tsx
-function ComponentPropertiesPanelContent({ onClose }) {
-  const currentComponentId = useCurrentComponentId();
-  const overridableProps = useSanitizeOverridableProps(currentComponentId);
-  const [isAddingGroup, setIsAddingGroup] = useState5(false);
-  const introductionRef = useRef(null);
-  const groupLabelEditable = useCurrentEditableItem();
-  const groups = useMemo(() => {
-    if (!overridableProps) {
-      return [];
-    }
-    return overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(Boolean);
-  }, [overridableProps]);
-  const allGroupsForSelect = useMemo(
-    () => groups.map((group) => ({ value: group.id, label: group.label })),
-    [groups]
-  );
-  if (!currentComponentId || !overridableProps) {
-    return null;
-  }
-  const hasGroups = groups.length > 0;
-  const showEmptyState = !hasGroups && !isAddingGroup;
-  const groupIds = overridableProps.groups.order;
-  const handleAddGroupClick = () => {
-    if (isAddingGroup) {
-      return;
-    }
-    const newGroupId = generateUniqueId2("group");
-    const newLabel = generateUniqueLabel(groups);
-    addOverridableGroup({
-      componentId: currentComponentId,
-      groupId: newGroupId,
-      label: newLabel,
-      source: "user"
-    });
-    setDocumentModifiedStatus3(true);
-    setIsAddingGroup(false);
-    groupLabelEditable.setEditingGroupId(newGroupId);
-  };
-  const handleGroupsReorder = (newOrder) => {
-    reorderOverridableGroups({ componentId: currentComponentId, newOrder });
-    setDocumentModifiedStatus3(true);
-  };
-  const handlePropsReorder = (groupId, newPropsOrder) => {
-    reorderGroupProps({ componentId: currentComponentId, groupId, newPropsOrder });
-    setDocumentModifiedStatus3(true);
-  };
-  const handlePropertyDelete = (propKey) => {
-    deleteOverridableProp({ componentId: currentComponentId, propKey, source: "user" });
-    setDocumentModifiedStatus3(true);
-  };
-  const handlePropertyUpdate = (overrideKey, data) => {
-    updateOverridablePropParams({
-      componentId: currentComponentId,
-      overrideKey,
-      label: data.label,
-      groupId: data.group
-    });
-    setDocumentModifiedStatus3(true);
-  };
-  const handleGroupDelete = (groupId) => {
-    deleteOverridableGroup({ componentId: currentComponentId, groupId });
-    setDocumentModifiedStatus3(true);
-  };
-  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": __19("Add new group", "elementor"),
-      onClick: handleAddGroupClick
-    },
-    /* @__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": __19("Close panel", "elementor"),
-      onClick: onClose
-    },
-    /* @__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,
-      props: overridableProps.props,
-      allGroups: allGroupsForSelect,
-      allGroupsRecord: overridableProps.groups.items,
-      sortableTriggerProps: { ...triggerProps, style: triggerStyle },
-      isDragPlaceholder,
-      setIsAddingGroup,
-      onPropsReorder: (newOrder) => handlePropsReorder(group.id, newOrder),
-      onPropertyDelete: handlePropertyDelete,
-      onPropertyUpdate: handlePropertyUpdate,
-      editableLabelProps: groupLabelEditable,
-      onGroupDelete: handleGroupDelete
-    }
-  )))))));
-}
-
-// src/extended/components/component-properties-panel/component-properties-panel.tsx
-var id = "component-properties-panel";
-var { panel, usePanelActions } = createPanel({
-  id,
-  component: ComponentPropertiesPanel
-});
-function ComponentPropertiesPanel() {
-  const { close: closePanel } = usePanelActions();
-  const { open: openEditingPanel } = useEditingPanelActions();
-  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: () => {
-        closePanel();
-        openEditingPanel();
-      }
-    }
-  ))));
-}
-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 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 __21 } from "@wordpress/i18n";
-var ComponentsBadge = React28.forwardRef(({ overridablePropsCount, onClick }, ref) => {
-  const prevCount = usePrevious(overridablePropsCount);
-  const isFirstExposedProperty = prevCount === 0 && overridablePropsCount === 1;
-  return /* @__PURE__ */ React28.createElement(
-    StyledBadge,
-    {
-      ref,
-      color: "primary",
-      key: overridablePropsCount,
-      invisible: overridablePropsCount === 0,
-      animate: isFirstExposedProperty,
-      anchorOrigin: { vertical: "top", horizontal: "right" },
-      badgeContent: /* @__PURE__ */ React28.createElement(Box14, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
-    },
-    /* @__PURE__ */ React28.createElement(Tooltip4, { title: __21("Component properties", "elementor") }, /* @__PURE__ */ React28.createElement(
-      ToggleButton,
-      {
-        value: "exposed properties",
-        size: "tiny",
-        onClick,
-        "aria-label": __21("Component properties", "elementor")
-      },
-      /* @__PURE__ */ React28.createElement(ComponentPropListIcon4, { fontSize: "tiny" })
-    ))
-  );
-});
-var StyledBadge = styled3(Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
-  ({ theme, animate }) => ({
-    "& .MuiBadge-badge": {
-      minWidth: theme.spacing(2),
-      height: theme.spacing(2),
-      minHeight: theme.spacing(2),
-      maxWidth: theme.spacing(2),
-      fontSize: theme.typography.caption.fontSize,
-      animation: animate ? `${bounceIn} 300ms ease-out` : "none"
-    }
-  })
-);
-function usePrevious(value) {
-  const ref = useRef2(value);
-  useEffect2(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-var bounceIn = keyframes`
-	0% { transform: scale(0) translate(50%, 50%); opacity: 0; }
-	70% { transform: scale(1.1) translate(50%, -50%); opacity: 1; }
-	100% { transform: scale(1) translate(50%, -50%); opacity: 1; }
-`;
-var slideUp = keyframes`
-	from { transform: translateY(100%); opacity: 0; }
-	to { transform: translateY(0); opacity: 1; }
-`;
-
-// src/extended/components/component-panel-header/component-panel-header.tsx
-var MESSAGE_KEY = "components-properties-introduction";
-var ComponentPanelHeader = () => {
-  const { id: currentComponentId, uid: componentUid } = useCurrentComponent() ?? { id: null, uid: null };
-  const overridableProps = useSanitizeOverridableProps(currentComponentId);
-  const onBack = useNavigateBack();
-  const componentName = getComponentName();
-  const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
-  const [shouldShowIntroduction, setShouldShowIntroduction] = React29.useState(!isMessageSuppressed);
-  const { open: openPropertiesPanel } = usePanelActions();
-  const overridablePropsCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
-  const anchorRef = React29.useRef(null);
-  if (!currentComponentId) {
-    return null;
-  }
-  const handleCloseIntroduction = () => {
-    suppressMessage();
-    setShouldShowIntroduction(false);
-  };
-  const handleOpenPropertiesPanel = () => {
-    openPropertiesPanel();
-    trackComponentEvent({
-      action: "propertiesPanelOpened",
-      source: "user",
-      component_uid: componentUid,
-      properties_count: overridablePropsCount
-    });
-  };
-  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,
-      as: Typography11,
-      variant: "caption",
-      sx: { fontWeight: 500, flexGrow: 1 }
-    }
-  ), /* @__PURE__ */ React29.createElement(
-    ComponentsBadge,
-    {
-      overridablePropsCount,
-      ref: anchorRef,
-      onClick: handleOpenPropertiesPanel
-    }
-  )), /* @__PURE__ */ React29.createElement(Divider4, null), /* @__PURE__ */ React29.createElement(
-    ComponentIntroduction,
-    {
-      anchorRef,
-      shouldShowIntroduction,
-      onClose: handleCloseIntroduction
-    }
-  ));
-};
-function getComponentName() {
-  const state = getState9();
-  const path = state[SLICE_NAME].path;
-  const { instanceTitle } = path.at(-1) ?? {};
-  if (instanceTitle) {
-    return instanceTitle;
-  }
-  const documentsManager = getV1DocumentsManager3();
-  const currentDocument = documentsManager.getCurrent();
-  return currentDocument?.container?.settings?.get("post_title") ?? "";
-}
-
-// src/extended/components/components-tab/components.tsx
-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 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 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 notify3 } from "@elementor/editor-notifications";
-import { __ as __23 } from "@wordpress/i18n";
-var successNotification = (componentId, componentName) => ({
-  type: "success",
-  /* translators: %s: component name */
-  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);
-  notify3(successNotification(componentId, componentName));
-};
-
-// src/extended/store/actions/rename-component.ts
-import { getV1DocumentsManager as getV1DocumentsManager4, setDocumentModifiedStatus as setDocumentModifiedStatus5 } from "@elementor/editor-documents";
-import { getAllDescendants as getAllDescendants2 } from "@elementor/editor-elements";
-var TITLE_EXTERNAL_CHANGE_COMMAND = "title_external_change";
-var renameComponent = (componentUid, newName) => {
-  componentsActions.rename(componentUid, newName);
-  setDocumentModifiedStatus5(true);
-  refreshComponentInstanceTitles(componentUid);
-};
-function refreshComponentInstanceTitles(componentUid) {
-  const documentContainer = getDocumentContainer();
-  if (!documentContainer) {
-    return;
-  }
-  const componentInstances = findComponentInstancesByUid(documentContainer, componentUid);
-  componentInstances.forEach((element) => {
-    element.model.trigger?.(TITLE_EXTERNAL_CHANGE_COMMAND);
-  });
-}
-function getDocumentContainer() {
-  const documentsManager = getV1DocumentsManager4();
-  return documentsManager?.getCurrent()?.container;
-}
-function findComponentInstancesByUid(documentContainer, componentUid) {
-  const allDescendants = getAllDescendants2(documentContainer);
-  return allDescendants.filter((element) => {
-    const widgetType = element.model.get("widgetType");
-    const editorSettings = element.model.get("editor_settings");
-    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 __24 } from "@wordpress/i18n";
-var MIN_NAME_LENGTH = 2;
-var MAX_NAME_LENGTH = 50;
-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: __24("Component name already exists", "elementor")
-    })
-  });
-};
-var createSubmitComponentSchema = (existingNames) => {
-  const baseSchema = createBaseComponentSchema(existingNames);
-  return baseSchema.extend({
-    componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: __24("Component name is required.", "elementor")
-    }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: __24("Component name is too short. Please enter at least 2 characters.", "elementor")
-    })
-  });
-};
-
-// src/extended/utils/component-name-validation.ts
-function validateComponentName(label) {
-  const existingComponentTitles = componentsSelectors.getComponents()?.map(({ name }) => name) ?? [];
-  const schema = createSubmitComponentSchema(existingComponentTitles);
-  const result = schema.safeParse({ componentName: label.toLowerCase() });
-  if (result.success) {
-    return {
-      isValid: true,
-      errorMessage: null
-    };
-  }
-  const formattedErrors = result.error.format();
-  const errorMessage = formattedErrors.componentName?._errors[0] ?? formattedErrors._errors[0];
-  return {
-    isValid: false,
-    errorMessage
-  };
-}
-
-// src/extended/utils/create-component-model.ts
-var createComponentModel2 = (component) => {
-  return {
-    elType: "widget",
-    widgetType: "e-component",
-    settings: {
-      component_instance: {
-        $$type: "component-instance",
-        value: {
-          component_id: {
-            $$type: "number",
-            value: component.id ?? component.uid
-          }
-        }
-      }
-    },
-    editor_settings: {
-      component_uid: component.uid
-    }
-  };
-};
-
-// src/extended/utils/get-container-for-new-element.ts
-import {
-  getContainer as getContainer4,
-  getCurrentDocumentContainer as getCurrentDocumentContainer2,
-  getSelectedElements
-} from "@elementor/editor-elements";
-var getContainerForNewElement = () => {
-  const currentDocumentContainer = getCurrentDocumentContainer2();
-  const selectedElement = getSelectedElementContainer();
-  let container, options;
-  if (selectedElement) {
-    switch (selectedElement.model.get("elType")) {
-      case "widget": {
-        container = selectedElement?.parent;
-        const selectedElIndex = selectedElement.view?._index ?? -1;
-        if (selectedElIndex > -1) {
-          options = { at: selectedElIndex + 1 };
-        }
-        break;
-      }
-      case "section": {
-        container = selectedElement?.children?.[0];
-        break;
-      }
-      default: {
-        container = selectedElement;
-        break;
-      }
-    }
-  }
-  return { container: container ?? currentDocumentContainer, options };
-};
-function getSelectedElementContainer() {
-  const selectedElements = getSelectedElements();
-  if (selectedElements.length !== 1) {
-    return void 0;
-  }
-  return getContainer4(selectedElements[0].id);
-}
-
-// src/extended/components/components-tab/delete-confirmation-dialog.tsx
-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__ */ 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__ */ React30.createElement(ConfirmationDialog2.Actions, { onClose, onConfirm }));
-}
-
-// src/extended/components/components-tab/component-item.tsx
-function ComponentItem2({ component }) {
-  const itemRef = useRef4(null);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState7(false);
-  const { canRename, canDelete } = useComponentsPermissions();
-  const shouldShowActions = canRename || canDelete;
-  const {
-    ref: editableRef,
-    isEditing,
-    openEditMode,
-    error,
-    getProps: getEditableProps
-  } = useEditable2({
-    value: component.name,
-    onSubmit: (newName) => renameComponent(component.uid, newName),
-    validation: validateComponentTitle
-  });
-  const componentModel = createComponentModel2(component);
-  const popupState = usePopupState3({
-    variant: "popover",
-    disableAutoFocus: true
-  });
-  const handleClick = () => {
-    addComponentToPage(componentModel);
-  };
-  const handleDragEnd = () => {
-    loadComponentsAssets([componentModel]);
-    endDragElementFromPanel();
-  };
-  const handleDeleteClick = () => {
-    setIsDeleteDialogOpen(true);
-    popupState.close();
-  };
-  const handleDeleteConfirm = () => {
-    if (!component.id) {
-      throw new Error("Component ID is required");
-    }
-    setIsDeleteDialogOpen(false);
-    archiveComponent(component.id, component.name);
-  };
-  const handleDeleteDialogClose = () => {
-    setIsDeleteDialogOpen(false);
-  };
-  return /* @__PURE__ */ React31.createElement(Stack17, null, /* @__PURE__ */ React31.createElement(
-    WarningInfotip,
-    {
-      open: Boolean(error),
-      text: error ?? "",
-      placement: "bottom",
-      width: itemRef.current?.getBoundingClientRect().width,
-      offset: [0, -15]
-    },
-    /* @__PURE__ */ React31.createElement(
-      ComponentItem,
-      {
-        ref: itemRef,
-        component,
-        disabled: false,
-        draggable: true,
-        onDragStart: (event) => startDragElementFromPanel(componentModel, event),
-        onDragEnd: handleDragEnd,
-        onClick: handleClick,
-        isEditing,
-        error,
-        nameSlot: /* @__PURE__ */ React31.createElement(
-          ComponentName,
-          {
-            name: component.name,
-            editable: { ref: editableRef, isEditing, getProps: getEditableProps }
-          }
-        ),
-        endSlot: shouldShowActions ? /* @__PURE__ */ React31.createElement(IconButton6, { size: "tiny", ...bindTrigger3(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React31.createElement(DotsVerticalIcon2, { fontSize: "tiny" })) : void 0
-      }
-    )
-  ), shouldShowActions && /* @__PURE__ */ React31.createElement(
-    Menu2,
-    {
-      ...bindMenu2(popupState),
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      }
-    },
-    canRename && /* @__PURE__ */ React31.createElement(
-      MenuListItem3,
-      {
-        sx: { minWidth: "160px" },
-        primaryTypographyProps: { variant: "caption", color: "text.primary" },
-        onClick: () => {
-          popupState.close();
-          openEditMode();
-        }
-      },
-      __26("Rename", "elementor")
-    ),
-    canDelete && /* @__PURE__ */ React31.createElement(
-      MenuListItem3,
-      {
-        sx: { minWidth: "160px" },
-        primaryTypographyProps: { variant: "caption", color: "error.light" },
-        onClick: handleDeleteClick
-      },
-      __26("Delete", "elementor")
-    )
-  ), /* @__PURE__ */ React31.createElement(
-    DeleteConfirmationDialog,
-    {
-      open: isDeleteDialogOpen,
-      onClose: handleDeleteDialogClose,
-      onConfirm: handleDeleteConfirm
-    }
-  ));
-}
-var addComponentToPage = (model) => {
-  const { container, options } = getContainerForNewElement();
-  if (!container) {
-    throw new Error(`Can't find container to drop new component instance at`);
-  }
-  loadComponentsAssets([model]);
-  dropElement({
-    containerId: container.id,
-    model,
-    options: { ...options, useHistory: false, scrollIntoView: true }
-  });
-};
-var validateComponentTitle = (newTitle) => {
-  const result = validateComponentName(newTitle);
-  if (!result.errorMessage) {
-    return null;
-  }
-  return result.errorMessage;
-};
-
-// src/extended/components/components-tab/components.tsx
-var ExtendedComponentsList = () => {
-  const { components, isLoading, searchValue } = useFilteredComponents();
-  if (isLoading) {
-    return /* @__PURE__ */ React32.createElement(LoadingComponents, null);
-  }
-  const isEmpty = !components?.length;
-  if (isEmpty) {
-    return searchValue.length ? /* @__PURE__ */ React32.createElement(EmptySearchResult, null) : /* @__PURE__ */ React32.createElement(EmptyState, null);
-  }
-  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__ */ React32.createElement(React32.Fragment, null, hasComponents && /* @__PURE__ */ React32.createElement(ComponentSearch, null), /* @__PURE__ */ React32.createElement(ExtendedComponentsList, null));
-};
-var ExtendedComponents = () => {
-  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 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 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 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 getContainer5 } from "@elementor/editor-elements";
-import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
-import { generateUniqueId as generateUniqueId3 } from "@elementor/utils";
-import { __ as __27 } from "@wordpress/i18n";
-
-// src/extended/utils/replace-element-with-component.ts
-import { replaceElement as replaceElement2 } from "@elementor/editor-elements";
-var replaceElementWithComponent = (element, component) => {
-  return replaceElement2({
-    currentElementId: element.id,
-    newElement: createComponentModel2(component),
-    withHistory: false
-  });
-};
-
-// src/extended/store/actions/create-unpublished-component.ts
-async function createUnpublishedComponent({
-  name,
-  element,
-  eventData,
-  uid,
-  overridableProps,
-  source
-}) {
-  const generatedUid = uid ?? generateUniqueId3("component");
-  const componentBase = { uid: generatedUid, name };
-  const elementDataWithOverridablesReverted = revertAllOverridablesInElementData(element);
-  const container = getContainer5(element.id);
-  const modelFromContainer = container?.model?.toJSON?.();
-  const originalElement = {
-    model: modelFromContainer ?? element,
-    parentId: container?.parent?.id ?? "",
-    index: container?.view?._index ?? 0
-  };
-  componentsActions.addUnpublished({
-    ...componentBase,
-    elements: [elementDataWithOverridablesReverted],
-    overridableProps
-  });
-  componentsActions.addCreatedThisSession(generatedUid);
-  const componentInstance = replaceElementWithComponent(element, componentBase);
-  trackComponentEvent({
-    action: "created",
-    source,
-    component_uid: generatedUid,
-    component_name: name,
-    ...eventData
-  });
-  try {
-    await runCommand2("document/save/auto");
-  } catch (error) {
-    restoreOriginalElement(originalElement, componentInstance.id);
-    componentsActions.removeUnpublished(generatedUid);
-    componentsActions.removeCreatedThisSession(generatedUid);
-    throw error;
-  }
-  return { uid: generatedUid, instanceId: componentInstance.id };
-}
-function restoreOriginalElement(originalElement, componentInstanceId) {
-  const componentContainer = getContainer5(componentInstanceId);
-  if (componentContainer) {
-    deleteElement({ container: componentContainer, options: { useHistory: false } });
-  }
-  const parentContainer = getContainer5(originalElement.parentId);
-  if (!parentContainer) {
-    return;
-  }
-  const clonedModel = structuredClone(originalElement.model);
-  createElements({
-    title: __27("Restore Element", "elementor"),
-    elements: [
-      {
-        container: parentContainer,
-        model: clonedModel,
-        options: { at: originalElement.index }
-      }
-    ]
-  });
-}
-
-// 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 notify4 } from "@elementor/editor-notifications";
-import { blockCommand } from "@elementor/editor-v1-adapters";
-import { __ as __28 } from "@wordpress/i18n";
-
-// src/extended/utils/is-editing-component.ts
-function isEditingComponent() {
-  return componentsSelectors.getCurrentComponentId() !== null;
-}
-
-// src/extended/sync/prevent-non-atomic-nesting.ts
-var NON_ATOMIC_ELEMENT_ALERT = {
-  type: "default",
-  message: __28("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
-  id: "non-atomic-element-blocked"
-};
-function initNonAtomicNestingPrevention() {
-  blockCommand({
-    command: "document/elements/create",
-    condition: blockNonAtomicCreate
-  });
-  blockCommand({
-    command: "document/elements/move",
-    condition: blockNonAtomicMove
-  });
-  blockCommand({
-    command: "document/elements/paste",
-    condition: blockNonAtomicPaste
-  });
-}
-function isElementAtomic(elementType) {
-  return getElementType3(elementType) !== null;
-}
-function blockNonAtomicCreate(args) {
-  if (!isEditingComponent()) {
-    return false;
-  }
-  const { model } = args;
-  const elementType = model?.widgetType || model?.elType;
-  if (!elementType) {
-    return false;
-  }
-  if (isElementAtomic(elementType)) {
-    return false;
-  }
-  notify4(NON_ATOMIC_ELEMENT_ALERT);
-  return true;
-}
-function blockNonAtomicMove(args) {
-  if (!isEditingComponent()) {
-    return false;
-  }
-  const { containers = [args.container] } = args;
-  const hasNonAtomicElement = containers.some((container) => {
-    if (!container) {
-      return false;
-    }
-    const allElements = getAllDescendants3(container);
-    return allElements.some((element) => !isAtomicWidget(element));
-  });
-  if (hasNonAtomicElement) {
-    notify4(NON_ATOMIC_ELEMENT_ALERT);
-  }
-  return hasNonAtomicElement;
-}
-function blockNonAtomicPaste(args) {
-  if (!isEditingComponent()) {
-    return false;
-  }
-  const { storageType } = args;
-  if (storageType !== "localstorage") {
-    return false;
-  }
-  const data = window?.elementorCommon?.storage?.get();
-  if (!data?.clipboard?.elements) {
-    return false;
-  }
-  const hasNonAtomicElement = hasNonAtomicElementsInTree(data.clipboard.elements);
-  if (hasNonAtomicElement) {
-    notify4(NON_ATOMIC_ELEMENT_ALERT);
-  }
-  return hasNonAtomicElement;
-}
-function hasNonAtomicElementsInTree(elements) {
-  for (const element of elements) {
-    const elementType = element.widgetType || element.elType;
-    if (elementType && !isElementAtomic(elementType)) {
-      return true;
-    }
-    if (element.elements?.length) {
-      if (hasNonAtomicElementsInTree(element.elements)) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-function findNonAtomicElementsInElement(element) {
-  const nonAtomicElements = [];
-  const elementType = element.widgetType || element.elType;
-  if (elementType && !isElementAtomic(elementType)) {
-    nonAtomicElements.push(elementType);
-  }
-  if (element.elements?.length) {
-    for (const child of element.elements) {
-      nonAtomicElements.push(...findNonAtomicElementsInElement(child));
-    }
-  }
-  return [...new Set(nonAtomicElements)];
-}
-
-// src/extended/components/create-component-form/hooks/use-form.ts
-import { useMemo as useMemo2, useState as useState8 } from "react";
-var useForm = (initialValues) => {
-  const [values, setValues] = useState8(initialValues);
-  const [errors, setErrors] = useState8({});
-  const isValid = useMemo2(() => {
-    return !Object.values(errors).some((error) => error);
-  }, [errors]);
-  const handleChange = (e, field, validationSchema) => {
-    const updated = { ...values, [field]: e.target.value };
-    setValues(updated);
-    const { success, errors: validationErrors } = validateForm(updated, validationSchema);
-    if (!success) {
-      setErrors(validationErrors);
-    } else {
-      setErrors({});
-    }
-  };
-  const validate = (validationSchema) => {
-    const { success, errors: validationErrors, parsedValues } = validateForm(values, validationSchema);
-    if (!success) {
-      setErrors(validationErrors);
-      return { success };
-    }
-    setErrors({});
-    return { success, parsedValues };
-  };
-  return {
-    values,
-    errors,
-    isValid,
-    handleChange,
-    validateForm: validate
-  };
-};
-var validateForm = (values, schema) => {
-  const result = schema.safeParse(values);
-  if (result.success) {
-    return { success: true, parsedValues: result.data };
-  }
-  const errors = {};
-  Object.entries(result.error.formErrors.fieldErrors).forEach(
-    ([field, error]) => {
-      errors[field] = error[0];
-    }
-  );
-  return { success: false, errors };
-};
-
-// src/extended/components/create-component-form/utils/get-component-event-data.ts
-var getComponentEventData = (containerElement, options) => {
-  const { elementsCount, componentsCount } = countNestedElements(containerElement);
-  return {
-    nested_elements_count: elementsCount,
-    nested_components_count: componentsCount,
-    top_element_type: containerElement.elType,
-    location: options?.location,
-    secondary_location: options?.secondaryLocation,
-    trigger: options?.trigger
-  };
-};
-function countNestedElements(container) {
-  if (!container.elements || container.elements.length === 0) {
-    return { elementsCount: 0, componentsCount: 0 };
-  }
-  let elementsCount = container.elements.length;
-  let componentsCount = 0;
-  for (const element of container.elements) {
-    if (element.widgetType === "e-component") {
-      componentsCount++;
-    }
-    const { elementsCount: nestedElementsCount, componentsCount: nestedComponentsCount } = countNestedElements(element);
-    elementsCount += nestedElementsCount;
-    componentsCount += nestedComponentsCount;
-  }
-  return { elementsCount, componentsCount };
-}
-
-// src/extended/components/create-component-form/create-component-form.tsx
-var MAX_COMPONENTS = 100;
-function CreateComponentForm() {
-  const [element, setElement] = useState9(null);
-  const [anchorPosition, setAnchorPosition] = useState9();
-  const { components } = useComponents();
-  const eventData = useRef5(null);
-  useEffect3(() => {
-    const OPEN_SAVE_AS_COMPONENT_FORM_EVENT2 = "elementor/editor/open-save-as-component-form";
-    const openPopup = (event) => {
-      const { shouldOpen, notification } = shouldOpenForm(event.detail.element, components?.length ?? 0);
-      if (!shouldOpen) {
-        notify5(notification);
-        return;
-      }
-      setElement({ element: event.detail.element, elementLabel: getElementLabel(event.detail.element.id) });
-      setAnchorPosition(event.detail.anchorPosition);
-      eventData.current = getComponentEventData(event.detail.element, event.detail.options);
-      trackComponentEvent({
-        action: "createClicked",
-        source: "user",
-        ...eventData.current
-      });
-    };
-    window.addEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT2, openPopup);
-    return () => {
-      window.removeEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT2, openPopup);
-    };
-  }, [components?.length]);
-  const handleSave = async (values) => {
-    try {
-      if (!element) {
-        throw new Error(`Can't save element as component: element not found`);
-      }
-      const { uid, instanceId } = await createUnpublishedComponent({
-        name: values.componentName,
-        element: element.element,
-        eventData: eventData.current,
-        source: "user"
-      });
-      const publishedComponentId = componentsSelectors.getComponentByUid(uid)?.id;
-      if (publishedComponentId) {
-        switchToComponent(publishedComponentId, instanceId);
-      } else {
-        throw new Error("Failed to find published component");
-      }
-      notify5({
-        type: "success",
-        message: __29("Component created successfully.", "elementor"),
-        id: `component-saved-successfully-${uid}`
-      });
-      resetAndClosePopup();
-    } catch {
-      const errorMessage = __29("Failed to create component. Please try again.", "elementor");
-      notify5({
-        type: "error",
-        message: errorMessage,
-        id: "component-save-failed"
-      });
-      resetAndClosePopup();
-    }
-  };
-  const resetAndClosePopup = () => {
-    setElement(null);
-    setAnchorPosition(void 0);
-  };
-  const cancelSave = () => {
-    resetAndClosePopup();
-    trackComponentEvent({
-      action: "createCancelled",
-      source: "user",
-      ...eventData.current
-    });
-  };
-  return /* @__PURE__ */ React33.createElement(ThemeProvider4, null, /* @__PURE__ */ React33.createElement(
-    Popover3,
-    {
-      open: element !== null,
-      onClose: cancelSave,
-      anchorReference: "anchorPosition",
-      anchorPosition,
-      "data-testid": "create-component-form"
-    },
-    element !== null && /* @__PURE__ */ React33.createElement(
-      Form2,
-      {
-        initialValues: { componentName: element.elementLabel },
-        handleSave,
-        closePopup: cancelSave
-      }
-    )
-  ));
-}
-function shouldOpenForm(element, componentsCount) {
-  const nonAtomicElements = findNonAtomicElementsInElement(element);
-  if (nonAtomicElements.length > 0) {
-    return {
-      shouldOpen: false,
-      notification: {
-        type: "default",
-        message: __29(
-          "Components require atomic elements only. Remove widgets to create this component.",
-          "elementor"
-        ),
-        id: "non-atomic-element-save-blocked"
-      }
-    };
-  }
-  if (componentsCount >= MAX_COMPONENTS) {
-    return {
-      shouldOpen: false,
-      notification: {
-        type: "default",
-        /* translators: %s is the maximum number of components */
-        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()),
-        id: "maximum-number-of-components-exceeded"
-      }
-    };
-  }
-  return { shouldOpen: true, notification: null };
-}
-var FONT_SIZE = "tiny";
-var Form2 = ({
-  initialValues,
-  handleSave,
-  closePopup
-}) => {
-  const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
-  const nameInputRef = useTextFieldAutoSelect();
-  const { components } = useComponents();
-  const existingComponentNames = useMemo3(() => {
-    return components?.map((component) => component.name) ?? [];
-  }, [components]);
-  const changeValidationSchema = useMemo3(
-    () => createBaseComponentSchema(existingComponentNames),
-    [existingComponentNames]
-  );
-  const submitValidationSchema = useMemo3(
-    () => createSubmitComponentSchema(existingComponentNames),
-    [existingComponentNames]
-  );
-  const handleSubmit = () => {
-    const { success, parsedValues } = validateForm2(submitValidationSchema);
-    if (success) {
-      handleSave(parsedValues);
-    }
-  };
-  const texts = {
-    heading: __29("Create component", "elementor"),
-    name: __29("Name", "elementor"),
-    cancel: __29("Cancel", "elementor"),
-    create: __29("Create", "elementor")
-  };
-  const nameInputId = "component-name";
-  return /* @__PURE__ */ React33.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React33.createElement(Stack18, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React33.createElement(
-    Stack18,
-    {
-      direction: "row",
-      alignItems: "center",
-      py: 1,
-      px: 1.5,
-      sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
-    },
-    /* @__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,
-      size: FONT_SIZE,
-      fullWidth: true,
-      value: values.componentName,
-      onChange: (e) => handleChange(e, "componentName", changeValidationSchema),
-      inputProps: { style: { color: "text.primary", fontWeight: "600" } },
-      error: Boolean(errors.componentName),
-      helperText: errors.componentName,
-      inputRef: nameInputRef
-    }
-  ))), /* @__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 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";
-import { throttle as throttle2 } from "@elementor/utils";
-
-// src/extended/consts.ts
-var OVERRIDABLE_PROP_REPLACEMENT_ID = "overridable-prop";
-var COMPONENT_DOCUMENT_TYPE = "elementor_component";
-
-// src/extended/store/actions/reset-sanitized-components.ts
-function resetSanitizedComponents() {
-  componentsActions.resetSanitizedComponents();
-}
-
-// src/extended/store/actions/update-current-component.ts
-function updateCurrentComponent(params) {
-  componentsActions.setPath(params.path);
-  componentsActions.setCurrentComponentId(params.currentComponentId);
-}
-
-// src/extended/components/edit-component/component-modal.tsx
-import * as React34 from "react";
-import { useEffect as useEffect5 } from "react";
-import { createPortal } from "react-dom";
-import { __ as __30 } from "@wordpress/i18n";
-
-// src/extended/components/edit-component/use-canvas-document.ts
-import {
-  __privateUseListenTo as useListenTo,
-  commandEndEvent,
-  getCanvasIframeDocument
-} from "@elementor/editor-v1-adapters";
-function useCanvasDocument() {
-  return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument());
-}
-
-// src/extended/components/edit-component/use-element-rect.ts
-import { useEffect as useEffect4, useState as useState10 } from "react";
-import { throttle } from "@elementor/utils";
-function useElementRect(element) {
-  const [rect, setRect] = useState10(new DOMRect(0, 0, 0, 0));
-  const onChange = throttle(
-    () => {
-      setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
-    },
-    20,
-    true
-  );
-  useScrollListener({ element, onChange });
-  useResizeListener({ element, onChange });
-  useMutationsListener({ element, onChange });
-  useEffect4(
-    () => () => {
-      onChange.cancel();
-    },
-    [onChange]
-  );
-  return rect;
-}
-function useScrollListener({ element, onChange }) {
-  useEffect4(() => {
-    if (!element) {
-      return;
-    }
-    const win = element.ownerDocument?.defaultView;
-    win?.addEventListener("scroll", onChange, { passive: true });
-    return () => {
-      win?.removeEventListener("scroll", onChange);
-    };
-  }, [element, onChange]);
-}
-function useResizeListener({ element, onChange }) {
-  useEffect4(() => {
-    if (!element) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver(onChange);
-    resizeObserver.observe(element);
-    const win = element.ownerDocument?.defaultView;
-    win?.addEventListener("resize", onChange, { passive: true });
-    return () => {
-      resizeObserver.disconnect();
-      win?.removeEventListener("resize", onChange);
-    };
-  }, [element, onChange]);
-}
-function useMutationsListener({ element, onChange }) {
-  useEffect4(() => {
-    if (!element) {
-      return;
-    }
-    const mutationObserver = new MutationObserver(onChange);
-    mutationObserver.observe(element, { childList: true, subtree: true });
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, [element, onChange]);
-}
-
-// src/extended/components/edit-component/component-modal.tsx
-function ComponentModal({ topLevelElementDom, onClose }) {
-  const canvasDocument = useCanvasDocument();
-  useEffect5(() => {
-    const handleEsc = (event) => {
-      if (event.key === "Escape") {
-        onClose();
-      }
-    };
-    canvasDocument?.body.addEventListener("keydown", handleEsc);
-    return () => {
-      canvasDocument?.body.removeEventListener("keydown", handleEsc);
-    };
-  }, [canvasDocument, onClose]);
-  if (!canvasDocument?.body) {
-    return null;
-  }
-  return createPortal(
-    /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(BlockEditPage, null), /* @__PURE__ */ React34.createElement(Backdrop, { canvas: canvasDocument, element: topLevelElementDom, onClose })),
-    canvasDocument.body
-  );
-}
-function Backdrop({
-  canvas,
-  element,
-  onClose
-}) {
-  const rect = useElementRect(element);
-  const clipPath = element ? getRectPath(rect, canvas.defaultView) : void 0;
-  const backdropStyle = {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100vw",
-    height: "100vh",
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    zIndex: 999,
-    pointerEvents: "painted",
-    cursor: "pointer",
-    clipPath
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ React34.createElement(
-    "div",
-    {
-      style: backdropStyle,
-      onClick: onClose,
-      onKeyDown: handleKeyDown,
-      role: "button",
-      tabIndex: 0,
-      "aria-label": __30("Exit component editing mode", "elementor")
-    }
-  );
-}
-function getRectPath(rect, viewport) {
-  const { x, y, width, height } = rect;
-  const { innerWidth: vw, innerHeight: vh } = viewport;
-  const path = `path(evenodd, 'M 0 0 
-		L ${vw} 0
-		L ${vw} ${vh}
-		L 0 ${vh}
-		Z
-		M ${x} ${y}
-		L ${x + width} ${y}
-		L ${x + width} ${y + height}
-		L ${x} ${y + height}
-		L ${x} ${y}
-    	Z'
-	)`;
-  return path.replace(/\s{2,}/g, " ");
-}
-function BlockEditPage() {
-  const blockV3DocumentHandlesStyles = `
-	.elementor-editor-active {
-		& .elementor-section-wrap.ui-sortable {
-			display: contents;
-		}
-
-		& *[data-editable-elementor-document]:not(.elementor-edit-mode):hover {
-			& .elementor-document-handle:not(.elementor-document-save-back-handle) {
-				display: none;
-
-				&::before,
-				& .elementor-document-handle__inner {
-					display: none;
-				}
-			}
-		}
-	}
-	`;
-  return /* @__PURE__ */ React34.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
-}
-
-// src/extended/components/edit-component/edit-component.tsx
-function EditComponent() {
-  const currentComponentId = useCurrentComponentId();
-  useHandleDocumentSwitches();
-  const navigateBack = useNavigateBack();
-  const onClose = throttle2(navigateBack, 100);
-  const topLevelElementDom = useComponentDOMElement(currentComponentId ?? void 0);
-  if (!currentComponentId) {
-    return null;
-  }
-  return /* @__PURE__ */ React35.createElement(ComponentModal, { topLevelElementDom, onClose });
-}
-function useHandleDocumentSwitches() {
-  const documentsManager = getV1DocumentsManager5();
-  const currentComponentId = useCurrentComponentId();
-  const path = useSelector5(selectPath);
-  useEffect6(() => {
-    return listenTo(commandEndEvent2("editor/documents/open"), () => {
-      const nextDocument = documentsManager.getCurrent();
-      if (nextDocument.id === currentComponentId) {
-        return;
-      }
-      if (currentComponentId) {
-        apiClient.unlockComponent(currentComponentId);
-      }
-      resetSanitizedComponents();
-      const isComponent2 = nextDocument.config.type === COMPONENT_DOCUMENT_TYPE;
-      if (!isComponent2) {
-        updateCurrentComponent({ path: [], currentComponentId: null });
-        return;
-      }
-      updateCurrentComponent({
-        path: getUpdatedComponentPath(path, nextDocument),
-        currentComponentId: nextDocument.id
-      });
-    });
-  }, [path, documentsManager, currentComponentId]);
-}
-function getUpdatedComponentPath(path, nextDocument) {
-  const componentIndex = path.findIndex(({ componentId }) => componentId === nextDocument.id);
-  if (componentIndex >= 0) {
-    return path.slice(0, componentIndex + 1);
-  }
-  const instanceId = nextDocument?.container.view?.el?.dataset.id;
-  const instanceTitle = getInstanceTitle(instanceId, path);
-  return [
-    ...path,
-    {
-      instanceId,
-      instanceTitle,
-      componentId: nextDocument.id
-    }
-  ];
-}
-function getInstanceTitle(instanceId, path) {
-  if (!instanceId) {
-    return void 0;
-  }
-  const documentsManager = getV1DocumentsManager5();
-  const parentDocId = path.at(-1)?.componentId ?? documentsManager.getInitialId();
-  const parentDoc = documentsManager.get(parentDocId);
-  const parentContainer = parentDoc?.container;
-  const widget = parentContainer?.children?.findRecursive?.(
-    (container) => container.id === instanceId
-  );
-  const editorSettings = widget?.model?.get?.("editor_settings");
-  return editorSettings?.title;
-}
-function useComponentDOMElement(id2) {
-  const { componentContainerDomElement, topLevelElementDom } = getComponentDOMElements(id2);
-  const [currentElementDom, setCurrentElementDom] = useState11(topLevelElementDom);
-  useEffect6(() => {
-    setCurrentElementDom(topLevelElementDom);
-  }, [topLevelElementDom]);
-  useEffect6(() => {
-    if (!componentContainerDomElement) {
-      return;
-    }
-    const mutationObserver = new MutationObserver(() => {
-      const newElementDom = componentContainerDomElement.children[0];
-      setCurrentElementDom(newElementDom);
-    });
-    mutationObserver.observe(componentContainerDomElement, { childList: true });
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, [componentContainerDomElement]);
-  return currentElementDom;
-}
-function getComponentDOMElements(id2) {
-  if (!id2) {
-    return { componentContainerDomElement: null, topLevelElementDom: null };
-  }
-  const documentsManager = getV1DocumentsManager5();
-  const currentComponent = documentsManager.get(id2);
-  const componentContainer = currentComponent?.container;
-  const componentContainerDomElement = componentContainer?.view?.el?.children?.[0] ?? null;
-  const topLevelElementDom = componentContainerDomElement?.children[0] ?? null;
-  return { componentContainerDomElement, topLevelElementDom };
-}
-
-// src/extended/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React36 from "react";
-import { PencilIcon as PencilIcon3 } from "@elementor/icons";
-import { Box as Box16 } from "@elementor/ui";
-import { __ as __31 } from "@wordpress/i18n";
-function ExtendedInstanceEditingPanel() {
-  const { canEdit } = useComponentsPermissions();
-  const data = useInstancePanelData();
-  if (!data) {
-    return null;
-  }
-  const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
-  const panelTitle = __31("Edit %s", "elementor").replace("%s", component.name);
-  const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
-  return /* @__PURE__ */ React36.createElement(Box16, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React36.createElement(
-    ComponentInstanceProvider,
-    {
-      componentId,
-      overrides,
-      overridableProps
-    },
-    /* @__PURE__ */ React36.createElement(
-      InstancePanelHeader,
-      {
-        componentName: component.name,
-        actions: canEdit ? /* @__PURE__ */ React36.createElement(
-          EditComponentAction,
-          {
-            label: panelTitle,
-            onClick: handleEditComponent,
-            icon: PencilIcon3
-          }
-        ) : void 0
-      }
-    ),
-    /* @__PURE__ */ React36.createElement(
-      InstancePanelBody,
-      {
-        groups,
-        isEmpty,
-        emptyState: /* @__PURE__ */ React36.createElement(EmptyState2, { onEditComponent: canEdit ? handleEditComponent : void 0 }),
-        componentInstanceId
-      }
-    )
-  ));
-}
-
-// src/extended/components/overridable-props/overridable-prop-control.tsx
-import * as React37 from "react";
-import {
-  ControlReplacementsProvider as ControlReplacementsProvider2,
-  getControlReplacements as getControlReplacements2,
-  PropKeyProvider as PropKeyProvider2,
-  PropProvider as PropProvider2,
-  useBoundProp as useBoundProp2,
-  useControlReplacement
-} from "@elementor/editor-controls";
-import { createTopLevelObjectType as createTopLevelObjectType2, useElement as useElement3 } from "@elementor/editor-editing-panel";
-function OverridablePropControl({
-  OriginalControl: OriginalControl2,
-  ...props
-}) {
-  const { elementType } = useElement3();
-  const { value, bind, setValue, placeholder, ...propContext } = useBoundProp2(componentOverridablePropTypeUtil);
-  const componentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps(componentId);
-  const filteredReplacements = getControlReplacements2().filter(
-    (r) => !r.id || r.id !== OVERRIDABLE_PROP_REPLACEMENT_ID
-  );
-  if (!componentId) {
-    return null;
-  }
-  if (!value?.override_key) {
-    throw new Error("Override key is required");
-  }
-  const isComponentInstance2 = elementType.key === "e-component";
-  const overridablePropData = overridableProps?.props?.[value.override_key];
-  const setOverridableValue = (newValue) => {
-    const propValue2 = {
-      ...value,
-      origin_value: newValue[bind]
-    };
-    setValue(propValue2);
-    if (!isComponentInstance2) {
-      updateOverridableProp(componentId, propValue2, overridablePropData?.originPropFields);
-    }
-  };
-  const defaultPropType = elementType.propsSchema[bind];
-  const overridePropType = overridablePropData ? getPropTypeForComponentOverride(overridablePropData) : void 0;
-  const resolvedPropType = overridePropType ?? defaultPropType;
-  if (!resolvedPropType) {
-    return null;
-  }
-  const propType = createTopLevelObjectType2({
-    schema: {
-      [bind]: resolvedPropType
-    }
-  });
-  const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
-  const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React37.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React37.createElement(
-    PropProvider2,
-    {
-      ...propContext,
-      propType,
-      setValue: setOverridableValue,
-      value: {
-        [bind]: propValue
-      },
-      placeholder: objectPlaceholder
-    },
-    /* @__PURE__ */ React37.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React37.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React37.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
-  ));
-}
-function ControlWithReplacements({
-  OriginalControl: OriginalControl2,
-  props
-}) {
-  const { ControlToRender, isReplaced } = useControlReplacement(OriginalControl2);
-  if (isReplaced) {
-    const ReplacementControl = ControlToRender;
-    return /* @__PURE__ */ React37.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
-  }
-  return /* @__PURE__ */ React37.createElement(OriginalControl2, { ...props });
-}
-
-// src/extended/components/overridable-props/overridable-prop-indicator.tsx
-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 __33 } from "@wordpress/i18n";
-
-// src/extended/store/actions/set-overridable-prop.ts
-import { generateUniqueId as generateUniqueId4 } from "@elementor/utils";
-function setOverridableProp({
-  componentId,
-  overrideKey,
-  elementId,
-  label,
-  groupId,
-  propKey,
-  elType,
-  widgetType,
-  originValue,
-  originPropFields,
-  source
-}) {
-  const overridableProps = componentsSelectors.getOverridableProps(componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const existingOverridableProp = overrideKey ? overridableProps.props[overrideKey] : null;
-  const duplicatedTargetProps = Object.values(overridableProps.props).filter(
-    (prop) => prop.elementId === elementId && prop.propKey === propKey && prop !== existingOverridableProp
-  );
-  const { groups: groupsAfterResolve, groupId: currentGroupId } = resolveOrCreateGroup(
-    overridableProps.groups,
-    groupId || existingOverridableProp?.groupId || void 0
-  );
-  const overridableProp = {
-    overrideKey: existingOverridableProp?.overrideKey || generateUniqueId4("prop"),
-    label,
-    elementId,
-    propKey,
-    widgetType,
-    elType,
-    originValue,
-    groupId: currentGroupId,
-    originPropFields
-  };
-  const stateAfterRemovingDuplicates = removePropsFromState(
-    { ...overridableProps, groups: groupsAfterResolve },
-    duplicatedTargetProps
-  );
-  const props = {
-    ...stateAfterRemovingDuplicates.props,
-    [overridableProp.overrideKey]: overridableProp
-  };
-  let groups = addPropToGroup(stateAfterRemovingDuplicates.groups, currentGroupId, overridableProp.overrideKey);
-  groups = ensureGroupInOrder(groups, currentGroupId);
-  const isChangingGroups = existingOverridableProp && existingOverridableProp.groupId !== currentGroupId;
-  if (isChangingGroups) {
-    groups = removePropFromGroup(groups, existingOverridableProp.groupId, overridableProp.overrideKey);
-  }
-  componentsActions.setOverridableProps(componentId, { props, groups });
-  const isNewProperty = !existingOverridableProp;
-  if (isNewProperty) {
-    const currentComponent = componentsSelectors.getCurrentComponent();
-    trackComponentEvent({
-      action: "propertyExposed",
-      source,
-      component_uid: currentComponent?.uid,
-      property_id: overridableProp.overrideKey,
-      property_path: propKey,
-      property_name: label,
-      element_type: widgetType ?? elType
-    });
-  }
-  return overridableProp;
-}
-
-// src/extended/components/overridable-props/indicator.tsx
-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 __32 } from "@wordpress/i18n";
-var SIZE2 = "tiny";
-var IconContainer = styled4(Box17)`
-	pointer-events: none;
-	opacity: 0;
-	transition: opacity 0.2s ease-in-out;
-
-	& > svg {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate( -50%, -50% );
-		width: 10px;
-		height: 10px;
-		fill: ${({ theme }) => theme.palette.primary.contrastText};
-		stroke: ${({ theme }) => theme.palette.primary.contrastText};
-		stroke-width: 2px;
-	}
-`;
-var Content = styled4(Box17)`
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	width: 16px;
-	height: 16px;
-	margin-inline: ${({ theme }) => theme.spacing(0.5)};
-
-	&:before {
-		content: '';
-		display: block;
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate( -50%, -50% ) rotate( 45deg );
-		width: 5px;
-		height: 5px;
-		border-radius: 1px;
-		background-color: ${({ theme }) => theme.palette.primary.main};
-		transition: all 0.1s ease-in-out;
-	}
-
-	&:hover,
-	&.enlarged {
-		&:before {
-			width: 12px;
-			height: 12px;
-			border-radius: 2px;
-		}
-
-		.icon {
-			opacity: 1;
-		}
-	}
-`;
-var Indicator2 = forwardRef3(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React38.createElement(
-  Content,
-  {
-    role: "button",
-    ref,
-    ...props,
-    className: isOpen || isOverridable ? "enlarged" : "",
-    "aria-label": isOverridable ? __32("Overridable property", "elementor") : __32("Make prop overridable", "elementor")
-  },
-  /* @__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
-function OverridablePropIndicator() {
-  const { propType } = useBoundProp3();
-  const componentId = useCurrentComponentId();
-  const overridableProps = useSanitizeOverridableProps(componentId);
-  if (!isPropAllowed(propType) || !componentId || !overridableProps) {
-    return null;
-  }
-  return /* @__PURE__ */ React39.createElement(Content2, { componentId, overridableProps });
-}
-function Content2({ componentId, overridableProps }) {
-  const {
-    element: { id: elementId },
-    elementType
-  } = useElement4();
-  const { value, bind, propType } = useBoundProp3();
-  const contextOverridableValue = useOverridablePropValue();
-  const componentInstanceElement = useComponentInstanceElement();
-  const { value: boundPropOverridableValue, setValue: setOverridableValue } = useBoundProp3(
-    componentOverridablePropTypeUtil
-  );
-  const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
-  const popupState = usePopupState4({
-    variant: "popover"
-  });
-  const triggerProps = bindTrigger4(popupState);
-  const popoverProps = bindPopover2(popupState);
-  const { elType } = getWidgetsCache3()?.[elementType.key] ?? { elType: "widget" };
-  const handleSubmit = ({ label, group }) => {
-    const propTypeDefault = propType.default ?? {};
-    const originValue = resolveOverridePropValue(overridableValue?.origin_value) ?? value ?? propTypeDefault;
-    const matchingOverridableProp = overridableValue ? overridableProps?.props?.[overridableValue.override_key] : void 0;
-    const overridablePropConfig = setOverridableProp({
-      componentId,
-      overrideKey: overridableValue?.override_key ?? null,
-      elementId: componentInstanceElement?.element.id ?? elementId,
-      label,
-      groupId: group,
-      propKey: bind,
-      elType: elType ?? "widget",
-      widgetType: componentInstanceElement?.elementType.key ?? elementType.key,
-      originValue,
-      originPropFields: matchingOverridableProp?.originPropFields,
-      source: "user"
-    });
-    if (!overridableValue && overridablePropConfig) {
-      setOverridableValue({
-        override_key: overridablePropConfig.overrideKey,
-        origin_value: originValue
-      });
-    }
-    popupState.close();
-  };
-  const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  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,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      PaperProps: {
-        sx: { my: 2.5 }
-      },
-      ...popoverProps
-    },
-    /* @__PURE__ */ React39.createElement(
-      OverridablePropForm,
-      {
-        onSubmit: handleSubmit,
-        groups: overridableProps?.groups.order.map((groupId) => ({
-          value: groupId,
-          label: overridableProps.groups.items[groupId].label
-        })),
-        existingLabels: Object.values(overridableProps?.props ?? {}).map((prop) => prop.label),
-        currentValue: overridableConfig
-      }
-    )
-  ));
-}
-function isPropAllowed(propType) {
-  return propType.meta.overridable !== false;
-}
-
-// src/extended/mcp/index.ts
-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 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";
-import { generateUniqueId as generateUniqueId5 } from "@elementor/utils";
-var InputSchema = {
-  element_id: z6.string().describe(
-    'The unique identifier of the element to save as a component. Use the "list-elements" tool to find available element IDs in the current document.'
-  ),
-  component_name: z6.string().describe("The name for the new component. Should be descriptive and unique among existing components."),
-  overridable_props: z6.object({
-    props: z6.record(
-      z6.object({
-        elementId: z6.string().describe("The id of the child element that you want to override its settings"),
-        propKey: z6.string().describe(
-          'The property key of the child element that you want to override its settings (e.g., "text", "url", "tag"). To get the available propKeys for an element, use the "get-element-type-config" tool.'
-        ),
-        label: z6.string().describe(
-          'A unique, user-friendly display name for this property (e.g., "Hero Headline", "CTA Button Text"). Must be unique within the same component.'
-        ),
-        group: z6.string().optional().describe("Non unique, optional property grouping")
-      })
-    )
-  }).optional().describe(
-    'Overridable properties configuration. Specify which CHILD element properties can be customized. Only elementId and propKey are required; To get the available propKeys for a child element you must use the "get-element-type-config" tool.'
-  ),
-  groups: z6.array(z6.string()).describe("Property Groups, by order, unique values").optional()
-};
-var OutputSchema = {
-  message: z6.string().optional().describe("Additional information about the operation result"),
-  component_uid: z6.string().optional().describe("The unique identifier of the newly created component (only present on success)")
-};
-var ERROR_MESSAGES3 = {
-  ELEMENT_NOT_FOUND: "Element not found. Use 'list-elements' to get valid element IDs.",
-  ELEMENT_NOT_ONE_OF_TYPES: (validTypes) => `Element is not one of the following types: ${validTypes.join(", ")}`,
-  ELEMENT_IS_LOCKED: "Cannot save a locked element as a component."
-};
-var handleSaveAsComponent = async (params) => {
-  const {
-    groups = [],
-    element_id: elementId,
-    component_name: componentName,
-    overridable_props: overridablePropsInput
-  } = params;
-  const validElementTypes = getValidElementTypes();
-  const container = getContainer6(elementId);
-  if (!container) {
-    throw new Error(ERROR_MESSAGES3.ELEMENT_NOT_FOUND);
-  }
-  const elType = container.model.get("elType");
-  if (!validElementTypes.includes(elType)) {
-    throw new Error(ERROR_MESSAGES3.ELEMENT_NOT_ONE_OF_TYPES(validElementTypes));
-  }
-  const element = container.model.toJSON({ remove: ["default"] });
-  if (element?.isLocked) {
-    throw new Error(ERROR_MESSAGES3.ELEMENT_IS_LOCKED);
-  }
-  const groupsWithDefaultGroup = groups.indexOf("Default") >= 0 ? [...groups] : ["Default", ...groups];
-  const propertyGroups = groupsWithDefaultGroup.map((groupName) => ({
-    id: generateUniqueId5("group"),
-    label: groupName,
-    props: []
-  }));
-  const overridableProps = overridablePropsInput ? enrichOverridableProps(overridablePropsInput, element, propertyGroups) : void 0;
-  if (overridableProps) {
-    updateElementDataWithOverridableProps(element, overridableProps);
-  }
-  const uid = generateUniqueId5("component");
-  try {
-    await apiClient.validate({
-      items: [
-        { uid, title: componentName, elements: [element], settings: { overridable_props: overridableProps } }
-      ]
-    });
-  } catch (error) {
-    if (error instanceof AxiosError) {
-      throw new Error(error.response?.data.messge);
-    }
-    throw new Error("Unknown error");
-  }
-  await createUnpublishedComponent({
-    name: componentName,
-    element,
-    eventData: null,
-    uid,
-    overridableProps,
-    source: "mcp_tool"
-  });
-  return {
-    status: "ok",
-    message: `Component "${componentName}" created successfully.`,
-    component_uid: uid
-  };
-};
-function enrichOverridableProps(input, rootElement, propertGroups) {
-  const enrichedProps = {};
-  const enrichedGroups = {};
-  const defaultGroup = propertGroups.find((g) => g.label === "Default");
-  if (!defaultGroup) {
-    throw new Error("Internal mcp error: could not generate default group");
-  }
-  Object.entries(input.props).forEach(([, prop]) => {
-    const { elementId, propKey, label, group = "Default" } = prop;
-    const targetGroup = propertGroups.find((g) => g.label === group) || defaultGroup;
-    const targetGroupId = targetGroup.id;
-    const element = findElementById(rootElement, elementId);
-    if (!element) {
-      throw new Error(`Element with ID "${elementId}" not found in component`);
-    }
-    const elType = element.elType;
-    const widgetType = element.widgetType || element.elType;
-    const elementType = getElementType4(widgetType);
-    if (!elementType) {
-      throw new Error(
-        `Element type "${widgetType}" is not atomic or does not have a settings schema. Cannot expose property "${propKey}" for element "${elementId}".`
-      );
-    }
-    if (!elementType.propsSchema[propKey]) {
-      const availableProps = Object.keys(elementType.propsSchema).join(", ");
-      throw new Error(
-        `Property "${propKey}" does not exist in element "${elementId}" (type: ${widgetType}). Available properties: ${availableProps}`
-      );
-    }
-    const overrideKey = generateUniqueId5("prop");
-    const originValue = element.settings?.[propKey] ? element.settings[propKey] : elementType.propsSchema[propKey].default ?? null;
-    if (!enrichedGroups[targetGroupId]) {
-      enrichedGroups[targetGroupId] = {
-        id: targetGroupId,
-        label: targetGroup.label,
-        props: []
-      };
-    }
-    enrichedGroups[targetGroupId].props.push(overrideKey);
-    enrichedProps[overrideKey] = {
-      overrideKey,
-      label,
-      elementId,
-      propKey,
-      elType,
-      widgetType,
-      originValue,
-      groupId: targetGroupId
-    };
-  });
-  return {
-    props: enrichedProps,
-    groups: {
-      items: enrichedGroups,
-      order: [defaultGroup.id]
-    }
-  };
-}
-function updateElementDataWithOverridableProps(rootElement, overridableProps) {
-  Object.values(overridableProps.props).forEach((prop) => {
-    const element = findElementById(rootElement, prop.elementId);
-    if (!element || !element.settings) {
-      return;
-    }
-    element.settings[prop.propKey] = {
-      $$type: "overridable",
-      value: {
-        override_key: prop.overrideKey,
-        origin_value: prop.originValue
-      }
-    };
-  });
-}
-function findElementById(root, targetId) {
-  if (root.id === targetId) {
-    return root;
-  }
-  if (root.elements) {
-    for (const child of root.elements) {
-      const found = findElementById(child, targetId);
-      if (found) {
-        return found;
-      }
-    }
-  }
-  return null;
-}
-function getValidElementTypes() {
-  const types = getWidgetsCache4();
-  if (!types) {
-    return [];
-  }
-  return Object.entries(types).reduce((acc, [type, value]) => {
-    if (!value.atomic_props_schema || !value.show_in_panel || value.elType === "widget") {
-      return acc;
-    }
-    acc.push(type);
-    return acc;
-  }, []);
-}
-var generatePrompt = () => {
-  const saveAsComponentPrompt = toolPrompts("save-as-component");
-  saveAsComponentPrompt.description(`
-Save an existing element as a reusable component in the Elementor editor.
-
-# When to use this tool
-Use this tool when the user wants to:
-- Create a reusable component from an existing element structure
-- Make specific child element properties customizable in component instances
-- Build a library of reusable design patterns
-
-# When NOT to use this tool
-- Element is already a component (widgetType: 'e-component')
-- Element is locked
-- Element is not an atomic element (atomic_props_schema is not defined)
-- Element elType is a 'widget'
-
-# **CRITICAL - REQUIRED RESOURCES (Must read before using this tool)**
-1. [${DOCUMENT_STRUCTURE_URI}]
-   **MANDATORY** - Required to understand the document structure and identify child elements for overridable properties.
-   Use this resource to find element IDs and understand the element hierarchy.
-
-2. [${WIDGET_SCHEMA_URI}]
-   **MANDATORY** - Required to understand which properties are available for each widget type.
-   Use this to identify available propKeys in the atomic_props_schema for child elements.
-
-# Instructions - MUST FOLLOW IN ORDER
-## Step 1: Identify the Target Element
-1. Read the [${DOCUMENT_STRUCTURE_URI}] resource to understand the document structure
-2. Locate the element you want to save as a component by its element_id
-3. Verify the element type is a valid element type
-4. Ensure the element is not locked and is not already a component
-
-## Step 2: Define Overridable Properties
-Do this step to make child element properties customizable.
-Skip that step ONLY if the user explicitly requests to not make any properties customizable.
-
-1. **Identify Child Elements**
-   - Use the [${DOCUMENT_STRUCTURE_URI}] resource to find all child elements
-   - Note the elementId and widgetType/elType of each child element you want to customize
-
-2. **Find Available Properties**
-   - Use the [${WIDGET_SCHEMA_URI}] resource to find the child element's widget type schema
-   - Review the atomic_props_schema to find available propKeys (ONLY use top-level props)
-   - Common propKeys include: "text", "url", "tag", "size", etc.
-   - Use only the top level properties, do not use nested properties.
-
-3. **Build the overridable_props Object**
-   - For each property you want to make overridable, add an entry:
-     \`{ "elementId": "<child-element-id>", "propKey": "<property-key>", "label": "<user-friendly-name>" }\`
-   - The label must be unique within the component and should be meaningful to the user (e.g., "Hero Headline", "CTA Button Text")
-   - Group all entries under the "props" object
-
-## Step 3: Execute the Tool
-Call the tool with:
-- element_id: The ID of the parent element to save as component
-- component_name: A descriptive name for the component
-- overridable_props: (Optional) The properties configuration from Step 2
-
-# CONSTRAINTS
-- NEVER try to override properties of the parent element itself - ONLY child elements
-- NEVER use invalid propKeys - always verify against the widget's atomic_props_schema in [${WIDGET_SCHEMA_URI}]
-- Property keys must exist in the child element's atomic_props_schema
-- Element IDs must exist within the target element's children
-- When tool execution fails, read the error message and adjust accordingly
-- The element being saved must not be inside another component
-`);
-  saveAsComponentPrompt.parameter(
-    "element_id",
-    `**MANDATORY** The unique identifier of the element to save as a component.
-Use the [${DOCUMENT_STRUCTURE_URI}] resource to find available element IDs.`
-  );
-  saveAsComponentPrompt.parameter(
-    "component_name",
-    `**MANDATORY** A descriptive name for the new component.
-Should be unique and clearly describe the component's purpose (e.g., "Hero Section", "Feature Card").`
-  );
-  saveAsComponentPrompt.parameter(
-    "overridable_props",
-    `**OPTIONAL** Configuration for which child element properties can be customized in component instances.
-
-Structure:
-\`\`\`json
-{
-  "props": {
-    "<unique-key>": {
-      "elementId": "<child-element-id>",
-      "propKey": "<property-key>",
-      "label": "<user-friendly-name>"
-    }
-  }
-}
-\`\`\`
-
-To populate this correctly:
-1. Use [${DOCUMENT_STRUCTURE_URI}] to find child element IDs and their widgetType
-2. Use [${WIDGET_SCHEMA_URI}] to find the atomic_props_schema for each child element's widgetType
-3. Only include properties you want to be customizable in component instances
-4. Provide a unique, user-friendly label for each property (e.g., "Hero Headline", "CTA Button Text")`
-  );
-  saveAsComponentPrompt.example(`
-Basic component without overridable properties:
-\`\`\`json
-{
-  "element_id": "abc123",
-  "component_name": "Hero Section"
-}
-\`\`\`
-
-Component with overridable properties:
-\`\`\`json
-{
-  "element_id": "abc123",
-  "component_name": "Feature Card",
-  "overridable_props": {
-    "props": {
-      "heading-text": {
-        "elementId": "heading-123",
-        "propKey": "text",
-        "label": "Card Title",
-        "group": "Content"
-      },
-      "button-text": {
-        "elementId": "button-456",
-        "propKey": "text",
-        "label": "Button Text",
-        "group": "Content"
-      },
-      "button-link": {
-        "elementId": "button-456",
-        "propKey": "url",
-        "label": "Button Link",
-        "group": "Settings"
-      }
-    }
-  }
-}
-\`\`\`
-`);
-  saveAsComponentPrompt.instruction(
-    `After successful creation, the component will be available in the components library and can be inserted into any page or template.`
-  );
-  saveAsComponentPrompt.instruction(
-    `When overridable properties are defined, component instances will show customization controls for those specific properties in the editing panel.`
-  );
-  return saveAsComponentPrompt.prompt();
-};
-var initSaveAsComponentTool = () => {
-  return getMCPByDomain("components").addTool({
-    name: "save-as-component",
-    schema: InputSchema,
-    outputSchema: OutputSchema,
-    description: generatePrompt(),
-    handler: handleSaveAsComponent
-  });
-};
-
-// src/extended/mcp/index.ts
-function initMcp() {
-  const { setMCPDescription } = getMCPByDomain2("components");
-  setMCPDescription(
-    `Elementor Editor Components MCP - Tools for creating and managing reusable components. 
-        Components are reusable blocks of content that can be used multiple times across the pages, its a widget which contains a set of elements and styles.`
-  );
-  initSaveAsComponentTool();
-}
-
-// src/sync/publish-draft-components-in-page-before-save.ts
-import { invalidateDocumentData as invalidateDocumentData2, isDocumentDirty as isDocumentDirty2 } from "@elementor/editor-documents";
-async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
-  if (status !== "publish") {
-    return;
-  }
-  const documents = await getComponentDocuments(elements);
-  const draftIds = [...documents.values()].filter(isDocumentDirty2).map((document) => document.id);
-  if (draftIds.length === 0) {
-    return;
-  }
-  await apiClient.updateStatuses(draftIds, "publish");
-  draftIds.forEach((id2) => invalidateDocumentData2(id2));
-}
-
-// src/extended/sync/set-component-overridable-props-settings-before-save.ts
-var setComponentOverridablePropsSettingsBeforeSave = ({
-  container
-}) => {
-  const currentDocument = container.document;
-  if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
-    return;
-  }
-  const overridableProps = componentsSelectors.getOverridableProps(currentDocument.id);
-  if (overridableProps) {
-    container.settings.set("overridable_props", overridableProps);
-  }
-};
-
-// src/extended/sync/update-archived-component-before-save.ts
-import { notify as notify6 } from "@elementor/editor-notifications";
-var failedNotification = (message) => ({
-  type: "error",
-  message: `Failed to archive components: ${message}`,
-  id: "failed-archived-components-notification"
-});
-var updateArchivedComponentBeforeSave = async (status) => {
-  try {
-    const archivedComponents = componentsSelectors.getArchivedThisSession();
-    if (!archivedComponents.length) {
-      return;
-    }
-    const result = await apiClient.updateArchivedComponents(archivedComponents, status);
-    const failedIds = result.failedIds.join(", ");
-    if (failedIds) {
-      notify6(failedNotification(failedIds));
-    }
-  } catch (error) {
-    throw new Error(`Failed to update archived components: ${error}`);
-  }
-};
-
-// src/extended/sync/update-component-title-before-save.ts
-var updateComponentTitleBeforeSave = async (status) => {
-  const updatedComponentNames = componentsSelectors.getUpdatedComponentNames();
-  if (!updatedComponentNames.length) {
-    return;
-  }
-  const result = await apiClient.updateComponentTitle(updatedComponentNames, status);
-  if (result.failedIds.length === 0) {
-    componentsActions.cleanUpdatedComponentNames();
-  }
-};
-
-// src/extended/sync/create-components-before-save.ts
-import { updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
-async function createComponentsBeforeSave({
-  elements,
-  status
-}) {
-  const unpublishedComponents = componentsSelectors.getUnpublishedComponents();
-  if (!unpublishedComponents.length) {
-    return;
-  }
-  try {
-    const uidToComponentId = await createComponents(unpublishedComponents, status);
-    updateComponentInstances(elements, uidToComponentId);
-    componentsActions.add(
-      unpublishedComponents.map((component) => ({
-        id: uidToComponentId.get(component.uid),
-        name: component.name,
-        uid: component.uid,
-        overridableProps: component.overridableProps ? component.overridableProps : void 0
-      }))
-    );
-    componentsActions.resetUnpublished();
-  } catch (error) {
-    const failedUids = unpublishedComponents.map((component) => component.uid);
-    componentsActions.removeUnpublished(failedUids);
-    throw new Error(`Failed to publish components: ${error}`);
-  }
-}
-async function createComponents(components, status) {
-  const response = await apiClient.create({
-    status,
-    items: components.map((component) => ({
-      uid: component.uid,
-      title: component.name,
-      elements: component.elements,
-      settings: component.overridableProps ? { overridable_props: component.overridableProps } : void 0
-    }))
-  });
-  const map = /* @__PURE__ */ new Map();
-  Object.entries(response).forEach(([key, value]) => {
-    map.set(key, value);
-  });
-  return map;
-}
-function updateComponentInstances(elements, uidToComponentId) {
-  elements.forEach((element) => {
-    const { shouldUpdate, newComponentId } = shouldUpdateElement(element, uidToComponentId);
-    if (shouldUpdate) {
-      updateElementComponentId(element.id, newComponentId);
-    }
-    if (element.elements) {
-      updateComponentInstances(element.elements, uidToComponentId);
-    }
-  });
-}
-function shouldUpdateElement(element, uidToComponentId) {
-  if (element.widgetType === "e-component") {
-    const currentComponentId = element.settings?.component_instance?.value?.component_id.value;
-    if (currentComponentId && uidToComponentId.has(currentComponentId.toString())) {
-      return {
-        shouldUpdate: true,
-        newComponentId: uidToComponentId.get(currentComponentId.toString())
-      };
-    }
-  }
-  return { shouldUpdate: false, newComponentId: null };
-}
-function updateElementComponentId(elementId, componentId) {
-  updateElementSettings2({
-    id: elementId,
-    props: {
-      component_instance: {
-        $$type: "component-instance",
-        value: {
-          component_id: { $$type: "number", value: componentId }
-        }
-      }
-    },
-    withHistory: false
-  });
-}
-
-// src/extended/sync/before-save.ts
-var beforeSave = ({ container, status }) => {
-  const elements = container?.model.get("elements").toJSON?.() ?? [];
-  return Promise.all([
-    syncComponents({ elements, status }),
-    setComponentOverridablePropsSettingsBeforeSave({ container })
-  ]);
-};
-var syncComponents = async ({ elements, status }) => {
-  await updateExistingComponentsBeforeSave({ elements, status });
-  await createComponentsBeforeSave({ elements, status });
-};
-var updateExistingComponentsBeforeSave = async ({
-  elements,
-  status
-}) => {
-  await updateComponentTitleBeforeSave(status);
-  await updateArchivedComponentBeforeSave(status);
-  await publishDraftComponentsInPageBeforeSave({ elements, status });
-};
-
-// src/extended/sync/cleanup-overridable-props-on-delete.ts
-import { getAllDescendants as getAllDescendants4 } from "@elementor/editor-elements";
-import { registerDataHook } from "@elementor/editor-v1-adapters";
-function initCleanupOverridablePropsOnDelete() {
-  registerDataHook("dependency", "document/elements/delete", (args, options) => {
-    if (isPartOfMoveCommand(options)) {
-      return true;
-    }
-    const currentComponentId = componentsSelectors.getCurrentComponentId();
-    if (!currentComponentId) {
-      return true;
-    }
-    const overridableProps = componentsSelectors.getOverridableProps(currentComponentId);
-    if (!overridableProps || Object.keys(overridableProps.props).length === 0) {
-      return true;
-    }
-    const containers = args.containers ?? (args.container ? [args.container] : []);
-    if (containers.length === 0) {
-      return true;
-    }
-    const deletedElementIds = collectDeletedElementIds(containers);
-    if (deletedElementIds.length === 0) {
-      return true;
-    }
-    const propKeysToDelete = Object.entries(overridableProps.props).filter(([, prop]) => deletedElementIds.includes(prop.elementId)).map(([propKey]) => propKey);
-    if (propKeysToDelete.length === 0) {
-      return true;
-    }
-    deleteOverridableProp({ componentId: currentComponentId, propKey: propKeysToDelete, source: "system" });
-    return true;
-  });
-}
-function collectDeletedElementIds(containers) {
-  const elementIds = containers.filter(Boolean).flatMap((container) => [container, ...getAllDescendants4(container)]).map((element) => element.model?.get?.("id") ?? element.id).filter((id2) => Boolean(id2));
-  return elementIds;
-}
-function isPartOfMoveCommand(options) {
-  const isMoveCommandInTrace = options?.commandsCurrentTrace?.includes("document/elements/move") || options?.commandsCurrentTrace?.includes("document/repeater/move");
-  return Boolean(isMoveCommandInTrace);
-}
-
-// src/extended/sync/handle-component-edit-mode-container.ts
-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() {
-  initRedirectDropIntoComponent();
-  initHandleTopLevelElementDelete();
-}
-function initHandleTopLevelElementDelete() {
-  registerDataHook2("after", "document/elements/delete", (args) => {
-    if (!isEditingComponent()) {
-      return;
-    }
-    const containers = args.containers ?? (args.container ? [args.container] : []);
-    for (const container of containers) {
-      if (!container.parent || !isComponent(container.parent)) {
-        continue;
-      }
-      const component = container.parent;
-      const isComponentEmpty = component.children?.length === 0;
-      if (isComponentEmpty) {
-        createEmptyTopLevelContainer(container.parent);
-      }
-    }
-  });
-}
-function initRedirectDropIntoComponent() {
-  registerDataHook2("dependency", "preview/drop", (args) => {
-    if (!isEditingComponent()) {
-      return true;
-    }
-    const containers = args.containers ?? (args.container ? [args.container] : []);
-    for (const container of containers) {
-      if (!isComponent(container)) {
-        continue;
-      }
-      const { shouldRedirect, container: redirectedContainer } = getComponentContainer(container);
-      if (!shouldRedirect) {
-        continue;
-      }
-      if (args.containers) {
-        const index = args.containers.indexOf(container);
-        args.containers[index] = redirectedContainer;
-      } else {
-        args.container = redirectedContainer;
-      }
-    }
-    return true;
-  });
-}
-function createEmptyTopLevelContainer(container) {
-  const newContainer = createElement40({
-    container,
-    model: { elType: V4_DEFAULT_CONTAINER_TYPE }
-  });
-  selectElement2(newContainer.id);
-}
-function getComponentContainer(container) {
-  const topLevelElement = container.children?.[0];
-  if (topLevelElement) {
-    return { shouldRedirect: true, container: topLevelElement };
-  }
-  return { shouldRedirect: false, container };
-}
-function isComponent(container) {
-  const isDocument = container.id === "document";
-  if (!isDocument) {
-    return false;
-  }
-  return container.document?.config.type === COMPONENT_DOCUMENT_TYPE;
-}
-
-// src/extended/sync/revert-overridables-on-copy-or-duplicate.ts
-import { registerDataHook as registerDataHook3 } from "@elementor/editor-v1-adapters";
-function initRevertOverridablesOnCopyOrDuplicate() {
-  registerDataHook3("after", "document/elements/duplicate", (_args, result) => {
-    if (!isEditingComponent()) {
-      return;
-    }
-    revertOverridablesForDuplicatedElements(result);
-  });
-  registerDataHook3("after", "document/elements/copy", (args) => {
-    if (!isEditingComponent()) {
-      return;
-    }
-    revertOverridablesInStorage(args.storageKey ?? "clipboard");
-  });
-}
-function revertOverridablesForDuplicatedElements(duplicatedElements) {
-  const containers = Array.isArray(duplicatedElements) ? duplicatedElements : [duplicatedElements];
-  containers.forEach((container) => {
-    revertAllOverridablesInContainer(container);
-  });
-}
-function revertOverridablesInStorage(storageKey) {
-  const storage = window.elementorCommon?.storage;
-  if (!storage) {
-    return;
-  }
-  const storageData = storage.get(storageKey);
-  if (!storageData?.elements?.length) {
-    return;
-  }
-  const elementsDataWithOverridablesReverted = storageData.elements.map(revertAllOverridablesInElementData);
-  storage.set(storageKey, {
-    ...storageData,
-    elements: elementsDataWithOverridablesReverted
-  });
-}
-
-// src/extended/sync/sanitize-overridable-props.ts
-import { useEffect as useEffect7 } from "react";
-
-// src/extended/store/actions/update-component-sanitized-attribute.ts
-function updateComponentSanitizedAttribute(componentId, attribute) {
-  componentsActions.updateComponentSanitizedAttribute(componentId, attribute);
-}
-
-// src/extended/sync/sanitize-overridable-props.ts
-function SanitizeOverridableProps() {
-  const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps(currentComponentId);
-  const isSanitized = useIsSanitizedComponent(currentComponentId, "overridableProps");
-  useEffect7(() => {
-    if (isSanitized || !overridableProps || !currentComponentId) {
-      return;
-    }
-    const filtered = filterValidOverridableProps(overridableProps);
-    const propsToDelete = Object.keys(overridableProps.props ?? {}).filter((key) => !filtered.props[key]);
-    if (propsToDelete.length > 0) {
-      propsToDelete.forEach((key) => {
-        deleteOverridableProp({ componentId: currentComponentId, propKey: key, source: "system" });
-      });
-    }
-    updateComponentSanitizedAttribute(currentComponentId, "overridableProps");
-  }, [currentComponentId, isSanitized, overridableProps]);
-  return null;
-}
-
-// src/extended/init.ts
-var PRIORITY = 1;
-function initExtended() {
-  registerEditingPanelReplacement({
-    id: "extended-component-instance-edit-panel",
-    priority: PRIORITY,
-    condition: (_, elementType) => elementType.key === "e-component",
-    component: ExtendedInstanceEditingPanel
-  });
-  registerTab({
-    id: "components",
-    label: __34("Components", "elementor"),
-    component: ExtendedComponents,
-    priority: PRIORITY
-  });
-  registerPanel(panel);
-  registerDataHook4("dependency", "editor/documents/close", (args) => {
-    const document = getV1CurrentDocument();
-    if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
-      args.mode = "autosave";
-    }
-    return true;
-  });
-  registerDataHook4("after", "preview/drop", onElementDrop);
-  window.elementorCommon.__beforeSave = beforeSave;
-  injectIntoTop({
-    id: "create-component-popup",
-    component: CreateComponentForm
-  });
-  injectIntoTop({
-    id: "edit-component",
-    component: EditComponent
-  });
-  injectIntoPanelHeaderTop({
-    id: "component-panel-header",
-    component: ComponentPanelHeader
-  });
-  registerFieldIndicator({
-    fieldType: FIELD_TYPE.SETTINGS,
-    id: "component-overridable-prop",
-    priority: 1,
-    indicator: OverridablePropIndicator
-  });
-  registerControlReplacement({
-    id: OVERRIDABLE_PROP_REPLACEMENT_ID,
-    component: OverridablePropControl,
-    condition: ({ value }) => componentOverridablePropTypeUtil.isValid(value)
-  });
-  initCleanupOverridablePropsOnDelete();
-  initMcp();
-  initNonAtomicNestingPrevention();
-  initHandleComponentEditModeContainer();
-  initRevertOverridablesOnCopyOrDuplicate();
-  injectIntoLogic({
-    id: "sanitize-overridable-props",
-    component: SanitizeOverridableProps
-  });
-}
-
-// src/extended/shortcuts/create-component-shortcut.ts
-import { getElementType as getElementType5, getSelectedElements as getSelectedElements2, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
-import { isProActive } from "@elementor/utils";
-var CREATE_COMPONENT_SHORTCUT_KEYS = "ctrl+shift+k";
-var OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
-function isCreateComponentAllowed() {
-  const selectedElements = getSelectedElements2();
-  if (selectedElements.length !== 1) {
-    return { allowed: false };
-  }
-  const element = selectedElements[0];
-  const elementType = getElementType5(element.type);
-  if (!elementType) {
-    return { allowed: false };
-  }
-  if (!isProActive()) {
-    return { allowed: false };
-  }
-  const widgetsCache = getWidgetsCache5();
-  const elementConfig = widgetsCache?.[element.type];
-  if (!elementConfig?.atomic_props_schema || !elementConfig?.show_in_panel || elementConfig?.elType === "widget") {
-    return { allowed: false };
-  }
-  const legacyWindow = window;
-  const container = legacyWindow.elementor.getContainer(element.id);
-  if (!container || container.isLocked()) {
-    return { allowed: false };
-  }
-  return { allowed: true, container };
-}
-function triggerCreateComponentForm(container) {
-  const legacyWindow = window;
-  const elementRect = container.view.el.getBoundingClientRect();
-  const iframeRect = legacyWindow.elementor.$preview[0].getBoundingClientRect();
-  const anchorPosition = {
-    left: iframeRect.left + elementRect.left + elementRect.width / 2,
-    top: iframeRect.top + elementRect.top
-  };
-  window.dispatchEvent(
-    new CustomEvent(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, {
-      detail: {
-        element: container.model.toJSON({ remove: ["default"] }),
-        anchorPosition,
-        options: {
-          trigger: "keyboard",
-          location: "canvas",
-          secondaryLocation: "canvasElement"
-        }
-      }
-    })
-  );
-}
-function initCreateComponentShortcut() {
-  const legacyWindow = window;
-  legacyWindow.$e.shortcuts.register(CREATE_COMPONENT_SHORTCUT_KEYS, {
-    callback: () => {
-      const result = isCreateComponentAllowed();
-      if (!result.allowed) {
-        return;
-      }
-      triggerCreateComponentForm(result.container);
-    },
-    dependency: () => {
-      const result = isCreateComponentAllowed();
-      return result.allowed;
-    },
-    exclude: ["input"]
-  });
-}
-
-// src/populate-store.ts
-import { useEffect as useEffect8 } from "react";
-import { __dispatch as dispatch5 } from "@elementor/store";
-function PopulateStore() {
-  useEffect8(() => {
-    dispatch5(loadComponents());
-  }, []);
-  return null;
-}
-
-// src/prevent-circular-nesting.ts
-import { getAllDescendants as getAllDescendants5 } from "@elementor/editor-elements";
-import { notify as notify7 } from "@elementor/editor-notifications";
-import { blockCommand as blockCommand2 } from "@elementor/editor-v1-adapters";
-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: __35("Can't add this component - components that contain each other can't be nested.", "elementor"),
-  id: "circular-component-nesting-blocked"
-};
-function initCircularNestingPrevention() {
-  blockCommand2({
-    command: "document/elements/create",
-    condition: blockCircularCreate
-  });
-  blockCommand2({
-    command: "document/elements/move",
-    condition: blockCircularMove
-  });
-  blockCommand2({
-    command: "document/elements/paste",
-    condition: blockCircularPaste
-  });
-}
-function wouldCreateCircularNesting(componentIdToAdd) {
-  if (componentIdToAdd === void 0) {
-    return false;
-  }
-  const state = getState10();
-  const currentComponentId = selectCurrentComponentId(state);
-  const path = selectPath(state);
-  if (currentComponentId === null) {
-    return false;
-  }
-  if (componentIdToAdd === currentComponentId) {
-    return true;
-  }
-  return path.some((item) => item.componentId === componentIdToAdd);
-}
-function extractComponentIdFromModel(model) {
-  if (!model) {
-    return null;
-  }
-  const isComponent2 = model.widgetType === COMPONENT_TYPE;
-  if (!isComponent2) {
-    return null;
-  }
-  return model.settings?.component_instance?.value?.component_id?.value ?? null;
-}
-function extractComponentIdFromElement(element) {
-  if (element.widgetType !== COMPONENT_TYPE) {
-    return null;
-  }
-  return element.settings?.component_instance?.value?.component_id?.value ?? null;
-}
-function extractComponentIdsFromElements(elements) {
-  const ids = [];
-  for (const element of elements) {
-    const componentId = extractComponentIdFromElement(element);
-    if (componentId !== null) {
-      ids.push(componentId);
-    }
-    if (element.elements?.length) {
-      ids.push(...extractComponentIdsFromElements(element.elements));
-    }
-  }
-  return ids;
-}
-function extractComponentIdFromContainer(container) {
-  const widgetType = container.model?.get?.("widgetType");
-  if (widgetType !== COMPONENT_TYPE) {
-    return null;
-  }
-  const settings = container.model?.get?.("settings");
-  const componentInstance = settings?.get?.("component_instance");
-  return componentInstance?.value?.component_id?.value ?? null;
-}
-function blockCircularCreate(args) {
-  const componentId = extractComponentIdFromModel(args.model);
-  if (componentId === null) {
-    return false;
-  }
-  const isBlocked = wouldCreateCircularNesting(componentId);
-  if (isBlocked) {
-    notify7(COMPONENT_CIRCULAR_NESTING_ALERT);
-  }
-  return isBlocked;
-}
-function blockCircularMove(args) {
-  const { containers = [args.container] } = args;
-  const hasCircularComponent = containers.some((container) => {
-    if (!container) {
-      return false;
-    }
-    const allElements = getAllDescendants5(container);
-    return allElements.some((element) => {
-      const componentId = extractComponentIdFromContainer(element);
-      if (componentId === null) {
-        return false;
-      }
-      return wouldCreateCircularNesting(componentId);
-    });
-  });
-  if (hasCircularComponent) {
-    notify7(COMPONENT_CIRCULAR_NESTING_ALERT);
-  }
-  return hasCircularComponent;
-}
-function blockCircularPaste(args) {
-  const { storageType } = args;
-  if (storageType !== "localstorage") {
-    return false;
-  }
-  const data = window?.elementorCommon?.storage?.get();
-  if (!data?.clipboard?.elements) {
-    return false;
-  }
-  const allComponentIds = extractComponentIdsFromElements(data.clipboard.elements);
-  const hasCircularComponent = allComponentIds.some(wouldCreateCircularNesting);
-  if (hasCircularComponent) {
-    notify7(COMPONENT_CIRCULAR_NESTING_ALERT);
-  }
-  return hasCircularComponent;
-}
-
-// src/store/actions/remove-component-styles.ts
-import { __dispatch as dispatch6 } from "@elementor/store";
-function removeComponentStyles(id2) {
-  apiClient.invalidateComponentConfigCache(id2);
-  dispatch6(slice.actions.removeStyles({ id: id2 }));
+  await apiClient.updateStatuses(draftIds, "publish");
+  draftIds.forEach((id) => invalidateDocumentData2(id));
 }
 
-// src/store/components-styles-provider.ts
-import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState11, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
-var componentsStylesProvider = createStylesProvider({
-  key: "components-styles",
-  priority: 100,
-  subscribe: (cb) => subscribeWithSelector(
-    (state) => state[SLICE_NAME],
-    () => {
-      cb();
-    }
-  ),
-  actions: {
-    all: () => {
-      return selectFlatStyles(getState11());
-    },
-    get: (id2) => {
-      return selectFlatStyles(getState11()).find((style) => style.id === id2) ?? null;
-    }
-  }
-});
-
 // src/sync/before-save.ts
-var beforeSave2 = ({ container, status }) => {
+var beforeSave = ({ container, status }) => {
   const elements = container?.model.get("elements").toJSON?.() ?? [];
   return publishDraftComponentsInPageBeforeSave({ elements, status });
 };
 
 // src/sync/load-component-data-after-instance-added.ts
-import { registerDataHook as registerDataHook5 } from "@elementor/editor-v1-adapters";
+import { registerDataHook } from "@elementor/editor-v1-adapters";
 function initLoadComponentDataAfterInstanceAdded() {
-  registerDataHook5("after", "document/elements/paste", (_args, result) => {
+  registerDataHook("after", "document/elements/paste", (_args, result) => {
     load(result);
   });
-  registerDataHook5("after", "document/elements/import", (_args, result) => {
+  registerDataHook("after", "document/elements/import", (_args, result) => {
     load(result);
   });
 }
@@ -6444,7 +2731,6 @@ function load(result) {
 }
 
 // src/init.ts
-var PRO_EXTENDED_MIGRATION_VERSION = "4.0.0";
 function init() {
   stylesRepository.register(componentsStylesProvider);
   registerSlice(slice);
@@ -6456,29 +2742,29 @@ function init() {
       showDetachConfirmDialog: openDetachConfirmDialog
     })
   );
-  window.elementorCommon.__beforeSave = beforeSave2;
+  window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __36("Components", "elementor"),
+    label: __12("Components", "elementor"),
     component: Components,
     position: 1
   });
-  injectIntoLogic2({
+  injectIntoLogic({
     id: "components-populate-store",
     component: PopulateStore
   });
-  registerDataHook6("after", "editor/documents/attach-preview", async () => {
-    const { id: id2, config } = getV1CurrentDocument2();
-    if (id2) {
-      removeComponentStyles(id2);
+  registerDataHook2("after", "editor/documents/attach-preview", async () => {
+    const { id, config } = getV1CurrentDocument();
+    if (id) {
+      removeComponentStyles(id);
     }
     await loadComponentsAssets(config?.elements ?? []);
   });
-  injectIntoLogic2({
+  injectIntoLogic({
     id: "templates",
     component: LoadTemplateComponents
   });
-  registerEditingPanelReplacement2({
+  registerEditingPanelReplacement({
     id: "component-instance-edit-panel",
     condition: (_, elementType) => elementType.key === "e-component",
     component: InstanceEditingPanel
@@ -6488,12 +2774,6 @@ function init() {
   settingsTransformersRegistry2.register("override", componentOverrideTransformer);
   initCircularNestingPrevention();
   initLoadComponentDataAfterInstanceAdded();
-  if (!!window.elementorPro && !isProAtLeast(PRO_EXTENDED_MIGRATION_VERSION)) {
-    initExtended();
-  }
-  if (!!window.elementorPro) {
-    initCreateComponentShortcut();
-  }
 }
 export {
   COMPONENT_WIDGET_TYPE2 as COMPONENT_WIDGET_TYPE,