@elementor/editor-components 3.35.0-378 → 3.35.0-380

package/dist/index.js

@@ -37,13 +37,14 @@ module.exports = __toCommonJS(index_exports);
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_canvas8 = require("@elementor/editor-canvas");
-var import_editor_documents10 = require("@elementor/editor-documents");
-var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
+var import_editor_documents12 = require("@elementor/editor-documents");
+var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
+var import_editor_panels4 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store48 = require("@elementor/store");
-var import_i18n17 = require("@wordpress/i18n");
+var import_store64 = require("@elementor/store");
+var import_i18n24 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -59,10 +60,10 @@ var import_store = require("@elementor/store");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_http_client = require("@elementor/http-client");
 var BASE_URL = "elementor/v1/components";
-var getParams = (id) => ({
+var getParams = (id2) => ({
   action: "get_document_config",
-  unique_id: `document-config-${id}`,
-  data: { id }
+  unique_id: `document-config-${id2}`,
+  data: { id: id2 }
 });
 var apiClient = {
   get: () => (0, import_http_client.httpService)().get(`${BASE_URL}`).then((res) => res.data.data),
@@ -71,8 +72,8 @@ var apiClient = {
     ids,
     status
   }),
-  getComponentConfig: (id) => import_editor_v1_adapters.ajax.load(getParams(id)),
-  invalidateComponentConfigCache: (id) => import_editor_v1_adapters.ajax.invalidateCache(getParams(id)),
+  getComponentConfig: (id2) => import_editor_v1_adapters.ajax.load(getParams(id2)),
+  invalidateComponentConfigCache: (id2) => import_editor_v1_adapters.ajax.invalidateCache(getParams(id2)),
   getComponentLockStatus: async (componentId) => await (0, import_http_client.httpService)().get(`${BASE_URL}/lock-status`, {
     params: {
       componentId
@@ -255,17 +256,17 @@ var selectArchivedComponents = (0, import_store2.__createSelector)(
 
 // src/utils/component-document-data.ts
 var import_editor_documents = require("@elementor/editor-documents");
-var getComponentDocumentData = async (id) => {
+var getComponentDocumentData = async (id2) => {
   const documentManager = (0, import_editor_documents.getV1DocumentsManager)();
   try {
-    return await documentManager.request(id);
+    return await documentManager.request(id2);
   } catch {
     return null;
   }
 };
-var invalidateComponentDocumentData = (id) => {
+var invalidateComponentDocumentData = (id2) => {
   const documentManager = (0, import_editor_documents.getV1DocumentsManager)();
-  documentManager.invalidateCache(id);
+  documentManager.invalidateCache(id2);
 };
 
 // src/component-instance-transformer.ts
@@ -274,11 +275,11 @@ var componentInstanceContext = new import_editor_canvas.RenderContext("component
 });
 var componentInstanceTransformer = (0, import_editor_canvas.createTransformer)(
   async ({
-    component_id: id,
+    component_id: id2,
     overrides: overridesValue
   }) => {
     const unpublishedComponents = selectUnpublishedComponents((0, import_store3.__getState)());
-    const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id);
+    const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id2);
     const overrides = overridesValue?.reduce((acc, override) => ({ ...acc, ...override }), {});
     if (unpublishedComponent) {
       return {
@@ -286,10 +287,10 @@ var componentInstanceTransformer = (0, import_editor_canvas.createTransformer)(
         overrides
       };
     }
-    if (typeof id !== "number") {
-      throw new Error(`Component ID "${id}" not valid.`);
+    if (typeof id2 !== "number") {
+      throw new Error(`Component ID "${id2}" not valid.`);
     }
-    const data = await getComponentDocumentData(id);
+    const data = await getComponentDocumentData(id2);
     return {
       elements: data?.elements ?? [],
       overrides
@@ -339,11 +340,12 @@ var componentOverrideTransformer = (0, import_editor_canvas3.createTransformer)(
 });
 
 // src/components/component-panel-header/component-panel-header.tsx
-var React2 = __toESM(require("react"));
-var import_editor_documents3 = require("@elementor/editor-documents");
-var import_icons2 = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var React10 = __toESM(require("react"));
+var import_editor_current_user = require("@elementor/editor-current-user");
+var import_editor_documents5 = require("@elementor/editor-documents");
+var import_icons7 = require("@elementor/icons");
+var import_ui10 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 
 // src/hooks/use-navigate-back.ts
 var import_react = require("react");
@@ -376,29 +378,1078 @@ function useNavigateBack() {
   }, [path, documentsManager]);
 }
 
-// src/components/component-panel-header/component-badge.tsx
+// src/components/component-properties-panel/component-properties-panel.tsx
+var React7 = __toESM(require("react"));
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_panels2 = require("@elementor/editor-panels");
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_ui7 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
+
+// src/components/component-properties-panel/component-properties-panel-content.tsx
+var React6 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_icons5 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_utils2 = require("@elementor/utils");
+var import_i18n7 = require("@wordpress/i18n");
+
+// src/store/actions/add-overridable-group.ts
+var import_store7 = require("@elementor/store");
+function addOverridableGroup({
+  componentId,
+  groupId,
+  label
+}) {
+  const overridableProps = selectOverridableProps((0, import_store7.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const newGroup = {
+    id: groupId,
+    label,
+    props: []
+  };
+  (0, import_store7.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: {
+          ...overridableProps.groups,
+          items: {
+            ...overridableProps.groups.items,
+            [groupId]: newGroup
+          },
+          order: [groupId, ...overridableProps.groups.order]
+        }
+      }
+    })
+  );
+  return newGroup;
+}
+
+// src/store/actions/delete-overridable-group.ts
+var import_store9 = require("@elementor/store");
+
+// src/store/utils/groups-transformers.ts
+var import_utils = require("@elementor/utils");
+var import_i18n = require("@wordpress/i18n");
+function removePropFromAllGroups(groups, propKey) {
+  return {
+    ...groups,
+    items: Object.fromEntries(
+      Object.entries(groups.items).map(([groupId, group]) => [
+        groupId,
+        {
+          ...group,
+          props: group.props.filter((p) => p !== propKey)
+        }
+      ])
+    )
+  };
+}
+function addPropToGroup(groups, groupId, propKey) {
+  const group = groups.items[groupId];
+  if (!group) {
+    return groups;
+  }
+  if (group.props.includes(propKey)) {
+    return groups;
+  }
+  return {
+    ...groups,
+    items: {
+      ...groups.items,
+      [groupId]: {
+        ...group,
+        props: [...group.props, propKey]
+      }
+    }
+  };
+}
+function movePropBetweenGroups(groups, propKey, fromGroupId, toGroupId) {
+  if (fromGroupId === toGroupId) {
+    return groups;
+  }
+  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;
+  }
+  return {
+    ...groups,
+    items: {
+      ...groups.items,
+      [groupId]: {
+        ...group,
+        props: group.props.filter((p) => p !== propKey)
+      }
+    }
+  };
+}
+function resolveOrCreateGroup(groups, requestedGroupId) {
+  if (requestedGroupId && groups.items[requestedGroupId]) {
+    return { groups, groupId: requestedGroupId };
+  }
+  if (!requestedGroupId && groups.order.length > 0) {
+    return { groups, groupId: groups.order[0] };
+  }
+  return createGroup(groups, requestedGroupId);
+}
+function createGroup(groups, groupId, label) {
+  const newGroupId = groupId || (0, import_utils.generateUniqueId)("group");
+  const newLabel = label || (0, import_i18n.__)("Default", "elementor");
+  return {
+    groups: {
+      ...groups,
+      items: {
+        ...groups.items,
+        [newGroupId]: {
+          id: newGroupId,
+          label: newLabel,
+          props: []
+        }
+      },
+      order: [...groups.order, newGroupId]
+    },
+    groupId: newGroupId
+  };
+}
+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 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)
+  };
+}
+function renameGroup(groups, groupId, newLabel) {
+  const group = groups.items[groupId];
+  if (!group) {
+    return groups;
+  }
+  return {
+    ...groups,
+    items: {
+      ...groups.items,
+      [groupId]: {
+        ...group,
+        label: newLabel
+      }
+    }
+  };
+}
+
+// src/store/actions/delete-overridable-group.ts
+function deleteOverridableGroup({ componentId, groupId }) {
+  const overridableProps = selectOverridableProps((0, import_store9.__getState)(), componentId);
+  if (!overridableProps) {
+    return false;
+  }
+  const group = overridableProps.groups.items[groupId];
+  if (!group || group.props.length > 0) {
+    return false;
+  }
+  const updatedGroups = deleteGroup(overridableProps.groups, groupId);
+  (0, import_store9.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: updatedGroups
+      }
+    })
+  );
+  return true;
+}
+
+// src/store/actions/delete-overridable-prop.ts
+var import_editor_elements = require("@elementor/editor-elements");
+var import_store11 = require("@elementor/store");
+function deleteOverridableProp({ componentId, propKey }) {
+  const overridableProps = selectOverridableProps((0, import_store11.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const prop = overridableProps.props[propKey];
+  if (!prop) {
+    return;
+  }
+  revertElementSetting(prop.elementId, prop.propKey, prop.originValue);
+  const { [propKey]: removedProp, ...remainingProps } = overridableProps.props;
+  const updatedGroups = removePropFromAllGroups(overridableProps.groups, propKey);
+  (0, import_store11.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        props: remainingProps,
+        groups: updatedGroups
+      }
+    })
+  );
+}
+function revertElementSetting(elementId, settingKey, originValue) {
+  const container = (0, import_editor_elements.getContainer)(elementId);
+  if (!container) {
+    return;
+  }
+  (0, import_editor_elements.updateElementSettings)({
+    id: elementId,
+    props: { [settingKey]: originValue ?? null },
+    withHistory: false
+  });
+}
+
+// src/store/actions/reorder-group-props.ts
+var import_store13 = require("@elementor/store");
+function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
+  const overridableProps = selectOverridableProps((0, import_store13.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const group = overridableProps.groups.items[groupId];
+  if (!group) {
+    return;
+  }
+  (0, import_store13.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: {
+          ...overridableProps.groups,
+          items: {
+            ...overridableProps.groups.items,
+            [groupId]: {
+              ...group,
+              props: newPropsOrder
+            }
+          }
+        }
+      }
+    })
+  );
+}
+
+// src/store/actions/reorder-overridable-groups.ts
+var import_store15 = require("@elementor/store");
+function reorderOverridableGroups({ componentId, newOrder }) {
+  const overridableProps = selectOverridableProps((0, import_store15.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  (0, import_store15.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: {
+          ...overridableProps.groups,
+          order: newOrder
+        }
+      }
+    })
+  );
+}
+
+// src/store/actions/update-overridable-prop.ts
+var import_store17 = require("@elementor/store");
+function updateOverridableProp({
+  componentId,
+  propKey,
+  label,
+  groupId
+}) {
+  const overridableProps = selectOverridableProps((0, import_store17.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const prop = overridableProps.props[propKey];
+  if (!prop) {
+    return;
+  }
+  const oldGroupId = prop.groupId;
+  const newGroupId = groupId ?? oldGroupId;
+  const updatedProp = {
+    ...prop,
+    label,
+    groupId: newGroupId
+  };
+  const updatedGroups = movePropBetweenGroups(overridableProps.groups, propKey, oldGroupId, newGroupId);
+  (0, import_store17.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        props: {
+          ...overridableProps.props,
+          [propKey]: updatedProp
+        },
+        groups: updatedGroups
+      }
+    })
+  );
+  return updatedProp;
+}
+
+// src/components/component-panel-header/use-overridable-props.ts
+var import_store19 = require("@elementor/store");
+function useOverridableProps(componentId) {
+  return (0, import_store19.__useSelector)((state) => {
+    if (!componentId) {
+      return void 0;
+    }
+    return selectOverridableProps(state, componentId);
+  });
+}
+
+// src/components/component-properties-panel/properties-empty-state.tsx
 var React = __toESM(require("react"));
-var import_react2 = require("react");
 var import_icons = require("@elementor/icons");
 var import_ui = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
-var ComponentsBadge = ({ overridesCount }) => {
-  const prevCount = usePrevious(overridesCount);
-  const isFirstOverride = prevCount === 0 && overridesCount === 1;
+var import_i18n2 = require("@wordpress/i18n");
+var LEARN_MORE_URL = "https://go.elementor.com/tbd/";
+function PropertiesEmptyState() {
   return /* @__PURE__ */ React.createElement(
-    StyledBadge,
+    import_ui.Stack,
     {
-      color: "primary",
-      key: overridesCount,
-      invisible: overridesCount === 0,
-      animate: isFirstOverride,
-      anchorOrigin: { vertical: "top", horizontal: "right" },
-      badgeContent: /* @__PURE__ */ React.createElement(import_ui.Box, { sx: { animation: !isFirstOverride ? `${slideUp} 300ms ease-out` : "none" } }, overridesCount)
+      alignItems: "center",
+      justifyContent: "flex-start",
+      height: "100%",
+      color: "text.secondary",
+      sx: { px: 2.5, pt: 10, pb: 5.5 },
+      gap: 1
     },
-    /* @__PURE__ */ React.createElement(import_ui.ToggleButton, { value: "overrides", size: "tiny", "aria-label": (0, import_i18n.__)("View overrides", "elementor") }, /* @__PURE__ */ React.createElement(import_icons.ComponentPropListIcon, { fontSize: "tiny" }))
+    /* @__PURE__ */ React.createElement(import_icons.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React.createElement(import_ui.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n2.__)("Add your first property", "elementor")),
+    /* @__PURE__ */ React.createElement(import_ui.Typography, { align: "center", variant: "caption" }, (0, import_i18n2.__)("Make instances flexible while keeping design synced.", "elementor")),
+    /* @__PURE__ */ React.createElement(import_ui.Typography, { align: "center", variant: "caption" }, (0, import_i18n2.__)("Select any element, then click + next to a setting to expose it.", "elementor")),
+    /* @__PURE__ */ React.createElement(
+      import_ui.Link,
+      {
+        variant: "caption",
+        color: "secondary",
+        href: LEARN_MORE_URL,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: { textDecorationLine: "underline" }
+      },
+      (0, import_i18n2.__)("Learn more", "elementor")
+    )
+  );
+}
+
+// src/components/component-properties-panel/properties-group.tsx
+var React5 = __toESM(require("react"));
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_icons4 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+
+// src/components/component-properties-panel/property-item.tsx
+var React4 = __toESM(require("react"));
+var import_editor_elements2 = require("@elementor/editor-elements");
+var import_icons3 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+
+// src/components/overridable-props/overridable-prop-form.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_editor_ui = require("@elementor/editor-ui");
+var import_ui2 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+var SIZE = "tiny";
+var DEFAULT_GROUP = { value: null, label: (0, import_i18n3.__)("Default", "elementor") };
+function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
+  const [propLabel, setPropLabel] = (0, import_react2.useState)(currentValue?.label ?? null);
+  const [group, setGroup] = (0, import_react2.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
+  const name = (0, import_i18n3.__)("Name", "elementor");
+  const groupName = (0, import_i18n3.__)("Group Name", "elementor");
+  const isCreate = currentValue === void 0;
+  const title = isCreate ? (0, import_i18n3.__)("Create new property", "elementor") : (0, import_i18n3.__)("Update property", "elementor");
+  const ctaLabel = isCreate ? (0, import_i18n3.__)("Create", "elementor") : (0, import_i18n3.__)("Update", "elementor");
+  return /* @__PURE__ */ React2.createElement(import_editor_ui.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React2.createElement(import_ui2.Stack, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React2.createElement(
+    import_ui2.Stack,
+    {
+      direction: "row",
+      alignItems: "center",
+      py: 1,
+      px: 1.5,
+      sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
+    },
+    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui2.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+    import_ui2.TextField,
+    {
+      name,
+      size: SIZE,
+      fullWidth: true,
+      placeholder: (0, import_i18n3.__)("Enter value", "elementor"),
+      value: propLabel ?? "",
+      onChange: (e) => setPropLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui2.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+    import_ui2.Select,
+    {
+      name: groupName,
+      size: SIZE,
+      fullWidth: true,
+      value: group ?? null,
+      onChange: (e) => setGroup(e.target.value),
+      displayEmpty: true,
+      renderValue: (selectedValue) => {
+        if (!selectedValue || selectedValue === "") {
+          const [firstGroup = DEFAULT_GROUP] = groups ?? [];
+          return firstGroup.label;
+        }
+        return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
+      }
+    },
+    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React2.createElement(import_editor_ui.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React2.createElement(import_ui2.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+}
+
+// src/components/component-properties-panel/sortable.tsx
+var React3 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var import_ui3 = require("@elementor/ui");
+var SortableProvider = (props) => /* @__PURE__ */ React3.createElement(import_ui3.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React3.createElement(
+  StyledSortableTrigger,
+  {
+    ...props,
+    role: "button",
+    className: `sortable-trigger ${triggerClassName ?? ""}`.trim(),
+    "aria-label": "sort"
+  },
+  /* @__PURE__ */ React3.createElement(import_icons2.GripVerticalIcon, { fontSize: "tiny" })
+);
+var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React3.createElement(
+  import_ui3.UnstableSortableItem,
+  {
+    id: id2,
+    render: ({
+      itemProps,
+      isDragged,
+      triggerProps,
+      itemStyle,
+      triggerStyle,
+      dropIndicationStyle,
+      showDropIndication,
+      isDragOverlay,
+      isDragPlaceholder
+    }) => /* @__PURE__ */ React3.createElement(
+      import_ui3.Box,
+      {
+        ...itemProps,
+        style: itemStyle,
+        component: "div",
+        role: "listitem",
+        sx: {
+          backgroundColor: isDragOverlay ? "background.paper" : void 0
+        }
+      },
+      children({
+        isDragged,
+        isDragPlaceholder,
+        triggerProps,
+        triggerStyle
+      }),
+      showDropIndication && /* @__PURE__ */ React3.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+    )
+  }
+);
+var StyledSortableTrigger = (0, import_ui3.styled)("div")(({ theme }) => ({
+  position: "absolute",
+  left: 0,
+  top: "50%",
+  transform: `translate( -${theme.spacing(1.5)}, -50% )`,
+  color: theme.palette.action.active,
+  cursor: "grab"
+}));
+var SortableItemIndicator = (0, import_ui3.styled)(import_ui3.Box)`
+	width: 100%;
+	height: 1px;
+	background-color: ${({ theme }) => theme.palette.text.primary};
+`;
+
+// src/components/component-properties-panel/property-item.tsx
+function PropertyItem({
+  prop,
+  sortableTriggerProps,
+  isDragPlaceholder,
+  groups,
+  onDelete,
+  onUpdate
+}) {
+  const popoverState = (0, import_ui4.usePopupState)({
+    variant: "popover"
+  });
+  const icon = getElementIcon(prop);
+  const popoverProps = (0, import_ui4.bindPopover)(popoverState);
+  const handleSubmit = (data) => {
+    onUpdate(data);
+    popoverState.close();
+  };
+  const handleDelete = (event) => {
+    event.stopPropagation();
+    onDelete(prop.overrideKey);
+  };
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    import_ui4.Box,
+    {
+      ...(0, import_ui4.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__ */ React4.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React4.createElement(
+      import_ui4.Box,
+      {
+        sx: { display: "flex", alignItems: "center", color: "text.primary", fontSize: 12, padding: 0.25 }
+      },
+      /* @__PURE__ */ React4.createElement("i", { className: icon })
+    ),
+    /* @__PURE__ */ React4.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
+    /* @__PURE__ */ React4.createElement(import_ui4.IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React4.createElement(import_icons3.XIcon, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React4.createElement(
+    import_ui4.Popover,
+    {
+      ...popoverProps,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      PaperProps: { sx: { width: popoverState.anchorEl?.getBoundingClientRect().width } }
+    },
+    /* @__PURE__ */ React4.createElement(
+      OverridablePropForm,
+      {
+        onSubmit: handleSubmit,
+        currentValue: prop,
+        groups,
+        sx: { width: "100%" }
+      }
+    )
+  ));
+}
+function getElementIcon(prop) {
+  const elType = prop.elType === "widget" ? prop.widgetType : prop.elType;
+  const widgetsCache = (0, import_editor_elements2.getWidgetsCache)();
+  if (!widgetsCache) {
+    return "eicon-apps";
+  }
+  const widgetConfig = widgetsCache[elType];
+  return widgetConfig?.icon || "eicon-apps";
+}
+
+// src/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 = (0, import_ui5.usePopupState)({
+    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__ */ React5.createElement(
+    import_ui5.Box,
+    {
+      sx: {
+        opacity: isDragPlaceholder ? 0.5 : 1
+      }
+    },
+    /* @__PURE__ */ React5.createElement(import_ui5.Stack, { gap: 1 }, /* @__PURE__ */ React5.createElement(
+      import_ui5.Box,
+      {
+        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__ */ React5.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
+      /* @__PURE__ */ React5.createElement(import_ui5.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React5.createElement(
+        import_ui5.Box,
+        {
+          sx: {
+            flex: 1,
+            height: 28,
+            display: "flex",
+            alignItems: "center",
+            border: 2,
+            borderColor: "text.secondary",
+            borderRadius: 1,
+            pl: 0.5
+          }
+        },
+        /* @__PURE__ */ React5.createElement(
+          import_editor_ui2.EditableField,
+          {
+            ref: editableRef,
+            as: import_ui5.Typography,
+            variant: "caption",
+            error: error ?? void 0,
+            sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 },
+            ...getEditableProps()
+          }
+        )
+      ) : /* @__PURE__ */ React5.createElement(
+        import_ui5.Typography,
+        {
+          variant: "caption",
+          sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
+        },
+        group.label
+      ), /* @__PURE__ */ React5.createElement(
+        import_ui5.IconButton,
+        {
+          className: "group-menu",
+          size: "tiny",
+          sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
+          "aria-label": (0, import_i18n4.__)("Group actions", "elementor"),
+          ...(0, import_ui5.bindTrigger)(popupState)
+        },
+        /* @__PURE__ */ React5.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" })
+      ))
+    ), /* @__PURE__ */ React5.createElement(import_ui5.List, { sx: { p: 0, display: "flex", flexDirection: "column", gap: 1 } }, /* @__PURE__ */ React5.createElement(SortableProvider, { value: group.props, onChange: onPropsReorder }, groupProps.map((prop) => /* @__PURE__ */ React5.createElement(SortableItem, { key: prop.overrideKey, id: prop.overrideKey }, ({ triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder }) => /* @__PURE__ */ React5.createElement(
+      PropertyItem,
+      {
+        prop,
+        sortableTriggerProps: { ...triggerProps, style: triggerStyle },
+        isDragPlaceholder: isItemDragPlaceholder,
+        groups: allGroups,
+        onDelete: onPropertyDelete,
+        onUpdate: (data) => onPropertyUpdate(prop.overrideKey, data)
+      }
+    )))))),
+    /* @__PURE__ */ React5.createElement(
+      import_ui5.Menu,
+      {
+        ...(0, import_ui5.bindMenu)(popupState),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" }
+      },
+      /* @__PURE__ */ React5.createElement(import_editor_ui2.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React5.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n4.__)("Rename", "elementor"))),
+      /* @__PURE__ */ React5.createElement(
+        import_ui5.Tooltip,
+        {
+          title: hasProperties ? (0, import_i18n4.__)("To delete the group, first remove all the properties", "elementor") : "",
+          placement: "right"
+        },
+        /* @__PURE__ */ React5.createElement("span", null, /* @__PURE__ */ React5.createElement(import_editor_ui2.MenuListItem, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React5.createElement(
+          import_ui5.Typography,
+          {
+            variant: "caption",
+            sx: { color: hasProperties ? "text.disabled" : "error.light" }
+          },
+          (0, import_i18n4.__)("Delete", "elementor")
+        )))
+      )
+    )
+  );
+}
+
+// src/components/component-properties-panel/use-current-editable-item.ts
+var import_react3 = require("react");
+var import_editor_documents3 = require("@elementor/editor-documents");
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_i18n6 = require("@wordpress/i18n");
+
+// src/store/actions/rename-overridable-group.ts
+var import_store21 = require("@elementor/store");
+function renameOverridableGroup({ componentId, groupId, label }) {
+  const overridableProps = selectOverridableProps((0, import_store21.__getState)(), componentId);
+  if (!overridableProps) {
+    return false;
+  }
+  const group = overridableProps.groups.items[groupId];
+  if (!group) {
+    return false;
+  }
+  const updatedGroups = renameGroup(overridableProps.groups, groupId, label);
+  (0, import_store21.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: updatedGroups
+      }
+    })
+  );
+  return true;
+}
+
+// src/components/component-properties-panel/utils/validate-group-label.ts
+var import_i18n5 = require("@wordpress/i18n");
+var ERROR_MESSAGES = {
+  EMPTY_NAME: (0, import_i18n5.__)("Group name is required", "elementor"),
+  DUPLICATE_NAME: (0, import_i18n5.__)("Group name already exists", "elementor")
+};
+function validateGroupLabel(label, existingGroups) {
+  const trimmedLabel = label.trim();
+  if (!trimmedLabel) {
+    return ERROR_MESSAGES.EMPTY_NAME;
+  }
+  const isDuplicate = Object.values(existingGroups).some((group) => group.label === trimmedLabel);
+  if (isDuplicate) {
+    return ERROR_MESSAGES.DUPLICATE_NAME;
+  }
+  return "";
+}
+
+// src/components/component-properties-panel/use-current-editable-item.ts
+function useCurrentEditableItem() {
+  const [editingGroupId, setEditingGroupId] = (0, import_react3.useState)(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((0, import_i18n6.__)("Group ID or component ID is missing", "elementor"));
+    }
+    renameOverridableGroup({
+      componentId: currentComponentId,
+      groupId: editingGroupId,
+      label: newLabel
+    });
+    (0, import_editor_documents3.setDocumentModifiedStatus)(true);
+  };
+  const {
+    ref: editableRef,
+    openEditMode,
+    isEditing,
+    error,
+    getProps: getEditableProps
+  } = (0, import_editor_ui3.useEditable)({
+    value: currentGroup?.label ?? "",
+    onSubmit: handleSubmit,
+    validation: validateLabel
+  });
+  return {
+    editableRef,
+    isEditing,
+    error,
+    getEditableProps,
+    setEditingGroupId: (groupId) => {
+      setEditingGroupId(groupId);
+      openEditMode();
+    },
+    editingGroupId
+  };
+}
+
+// src/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/components/component-properties-panel/component-properties-panel-content.tsx
+function ComponentPropertiesPanelContent({ onClose }) {
+  const currentComponentId = useCurrentComponentId();
+  const overridableProps = useOverridableProps(currentComponentId);
+  const [isAddingGroup, setIsAddingGroup] = (0, import_react4.useState)(false);
+  const groupLabelEditable = useCurrentEditableItem();
+  const groups = (0, import_react4.useMemo)(() => {
+    if (!overridableProps) {
+      return [];
+    }
+    return overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(Boolean);
+  }, [overridableProps]);
+  const allGroupsForSelect = (0, import_react4.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 = (0, import_utils2.generateUniqueId)("group");
+    const newLabel = generateUniqueLabel(groups);
+    addOverridableGroup({ componentId: currentComponentId, groupId: newGroupId, label: newLabel });
+    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
+    setIsAddingGroup(false);
+    groupLabelEditable.setEditingGroupId(newGroupId);
+  };
+  const handleGroupsReorder = (newOrder) => {
+    reorderOverridableGroups({ componentId: currentComponentId, newOrder });
+    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
+  };
+  const handlePropsReorder = (groupId, newPropsOrder) => {
+    reorderGroupProps({ componentId: currentComponentId, groupId, newPropsOrder });
+    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
+  };
+  const handlePropertyDelete = (propKey) => {
+    deleteOverridableProp({ componentId: currentComponentId, propKey });
+    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
+  };
+  const handlePropertyUpdate = (propKey, data) => {
+    updateOverridableProp({
+      componentId: currentComponentId,
+      propKey,
+      label: data.label,
+      groupId: data.group
+    });
+    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
+  };
+  const handleGroupDelete = (groupId) => {
+    deleteOverridableGroup({ componentId: currentComponentId, groupId });
+    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
+  };
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React6.createElement(import_ui6.Stack, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React6.createElement(import_icons5.ComponentPropListIcon, { fontSize: "tiny" }), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeaderTitle, { variant: "subtitle2" }, (0, import_i18n7.__)("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React6.createElement(import_ui6.Tooltip, { title: (0, import_i18n7.__)("Add new group", "elementor") }, /* @__PURE__ */ React6.createElement(
+    import_ui6.IconButton,
+    {
+      size: "tiny",
+      "aria-label": (0, import_i18n7.__)("Add new group", "elementor"),
+      onClick: handleAddGroupClick
+    },
+    /* @__PURE__ */ React6.createElement(import_icons5.FolderPlusIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React6.createElement(import_ui6.Tooltip, { title: (0, import_i18n7.__)("Close panel", "elementor") }, /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { size: "tiny", "aria-label": (0, import_i18n7.__)("Close panel", "elementor"), onClick: onClose }, /* @__PURE__ */ React6.createElement(import_icons5.XIcon, { fontSize: "tiny" })))), /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelBody, null, showEmptyState ? /* @__PURE__ */ React6.createElement(PropertiesEmptyState, null) : /* @__PURE__ */ React6.createElement(import_ui6.List, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React6.createElement(SortableProvider, { value: groupIds, onChange: handleGroupsReorder }, groups.map((group) => /* @__PURE__ */ React6.createElement(SortableItem, { key: group.id, id: group.id }, ({ triggerProps, triggerStyle, isDragPlaceholder }) => /* @__PURE__ */ React6.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/components/component-properties-panel/component-properties-panel.tsx
+var id = "component-properties-panel";
+var { panel, usePanelActions } = (0, import_editor_panels2.__createPanel)({
+  id,
+  component: ComponentPropertiesPanel
+});
+function ComponentPropertiesPanel() {
+  const { element, elementType } = (0, import_editor_elements3.useSelectedElement)();
+  const { close: closePanel } = usePanelActions();
+  const { open: openEditingPanel } = (0, import_editor_editing_panel.usePanelActions)();
+  if (!element || !elementType) {
+    return null;
+  }
+  return /* @__PURE__ */ React7.createElement(import_editor_ui4.ThemeProvider, null, /* @__PURE__ */ React7.createElement(import_ui7.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_editing_panel.ElementProvider, { element, elementType }, /* @__PURE__ */ React7.createElement(import_editor_panels2.Panel, null, /* @__PURE__ */ React7.createElement(
+    ComponentPropertiesPanelContent,
+    {
+      onClose: () => {
+        closePanel();
+        openEditingPanel();
+      }
+    }
+  )))));
+}
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui7.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui7.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n8.__)("Something went wrong", "elementor"))));
+
+// src/components/components-tab/component-introduction.tsx
+var React8 = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_ui8 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
+var ComponentIntroduction = ({
+  anchorRef,
+  shouldShowIntroduction,
+  onClose
+}) => {
+  if (!anchorRef.current || !shouldShowIntroduction) {
+    return null;
+  }
+  return /* @__PURE__ */ React8.createElement(
+    import_ui8.Popover,
+    {
+      anchorEl: anchorRef.current,
+      open: shouldShowIntroduction,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: -30
+      },
+      onClose
+    },
+    /* @__PURE__ */ React8.createElement(import_ui8.Box, { sx: { width: "296px" } }, /* @__PURE__ */ React8.createElement(import_editor_ui5.PopoverHeader, { title: (0, import_i18n9.__)("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React8.createElement(
+      import_ui8.Image,
+      {
+        sx: { width: "296px", height: "160px" },
+        src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
+        alt: ""
+      }
+    ), /* @__PURE__ */ React8.createElement(import_editor_controls.PopoverContent, null, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { gap: 1, sx: { p: 2 } }, /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "body2" }, (0, import_i18n9.__)("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "body2" }, (0, import_i18n9.__)(
+      "Click next to any setting you want users to customize - like text, images, or links.",
+      "elementor"
+    )), /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "body2" }, (0, import_i18n9.__)(
+      "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
+      "elementor"
+    )), /* @__PURE__ */ React8.createElement(import_ui8.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React8.createElement(import_ui8.Button, { size: "medium", variant: "contained", onClick: onClose }, (0, import_i18n9.__)("Got it", "elementor"))))))
   );
 };
-var StyledBadge = (0, import_ui.styled)(import_ui.Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
+
+// src/components/component-panel-header/component-badge.tsx
+var React9 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_icons6 = require("@elementor/icons");
+var import_ui9 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
+var ComponentsBadge = React9.forwardRef(
+  ({ overridesCount, onClick }, ref) => {
+    const prevCount = usePrevious(overridesCount);
+    const isFirstOverride = prevCount === 0 && overridesCount === 1;
+    return /* @__PURE__ */ React9.createElement(
+      StyledBadge,
+      {
+        ref,
+        color: "primary",
+        key: overridesCount,
+        invisible: overridesCount === 0,
+        animate: isFirstOverride,
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        badgeContent: /* @__PURE__ */ React9.createElement(import_ui9.Box, { sx: { animation: !isFirstOverride ? `${slideUp} 300ms ease-out` : "none" } }, overridesCount)
+      },
+      /* @__PURE__ */ React9.createElement(
+        import_ui9.ToggleButton,
+        {
+          value: "overrides",
+          size: "tiny",
+          onClick,
+          "aria-label": (0, import_i18n10.__)("View overrides", "elementor")
+        },
+        /* @__PURE__ */ React9.createElement(import_icons6.ComponentPropListIcon, { fontSize: "tiny" })
+      )
+    );
+  }
+);
+var StyledBadge = (0, import_ui9.styled)(import_ui9.Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
   ({ theme, animate }) => ({
     "& .MuiBadge-badge": {
       minWidth: theme.spacing(2),
@@ -411,88 +1462,93 @@ var StyledBadge = (0, import_ui.styled)(import_ui.Badge, { shouldForwardProp: (p
   })
 );
 function usePrevious(value) {
-  const ref = (0, import_react2.useRef)(value);
-  (0, import_react2.useEffect)(() => {
+  const ref = (0, import_react5.useRef)(value);
+  (0, import_react5.useEffect)(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
-var bounceIn = import_ui.keyframes`
+var bounceIn = import_ui9.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 = import_ui.keyframes`
+var slideUp = import_ui9.keyframes`
 	from { transform: translateY(100%); opacity: 0; }
 	to { transform: translateY(0); opacity: 1; }
 `;
 
-// src/components/component-panel-header/use-overridable-props.ts
-var import_store7 = require("@elementor/store");
-function useOverridableProps(componentId) {
-  return (0, import_store7.__useSelector)((state) => {
-    if (!componentId) {
-      return void 0;
-    }
-    return selectOverridableProps(state, componentId);
-  });
-}
-
 // src/components/component-panel-header/component-panel-header.tsx
+var MESSAGE_KEY = "components-properties-introduction";
 var ComponentPanelHeader = () => {
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(currentComponentId);
   const onBack = useNavigateBack();
   const componentName = getComponentName();
+  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
+  const [shouldShowIntroduction, setShouldShowIntroduction] = React10.useState(!isMessageSuppressed);
+  const { open: openPropertiesPanel } = usePanelActions();
   const overridesCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
+  const anchorRef = React10.useRef(null);
   if (!currentComponentId) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(import_ui2.Box, null, /* @__PURE__ */ React2.createElement(
-    import_ui2.Stack,
+  const handleCloseIntroduction = () => {
+    suppressMessage();
+    setShouldShowIntroduction(false);
+  };
+  return /* @__PURE__ */ React10.createElement(import_ui10.Box, null, /* @__PURE__ */ React10.createElement(
+    import_ui10.Stack,
     {
       direction: "row",
       alignItems: "center",
       justifyContent: "space-between",
       sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
     },
-    /* @__PURE__ */ React2.createElement(import_ui2.Stack, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui2.Tooltip, { title: (0, import_i18n2.__)("Back", "elementor") }, /* @__PURE__ */ React2.createElement(import_ui2.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n2.__)("Back", "elementor") }, /* @__PURE__ */ React2.createElement(import_icons2.ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React2.createElement(import_ui2.Stack, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React2.createElement(import_icons2.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React2.createElement(import_ui2.Typography, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
-    /* @__PURE__ */ React2.createElement(ComponentsBadge, { overridesCount })
-  ), /* @__PURE__ */ React2.createElement(import_ui2.Divider, null));
+    /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Tooltip, { title: (0, import_i18n11.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n11.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_icons7.ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(import_icons7.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(import_ui10.Typography, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
+    /* @__PURE__ */ React10.createElement(ComponentsBadge, { overridesCount, ref: anchorRef, onClick: openPropertiesPanel })
+  ), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(
+    ComponentIntroduction,
+    {
+      anchorRef,
+      shouldShowIntroduction,
+      onClose: handleCloseIntroduction
+    }
+  ));
 };
 function getComponentName() {
-  const documentsManager = (0, import_editor_documents3.getV1DocumentsManager)();
+  const documentsManager = (0, import_editor_documents5.getV1DocumentsManager)();
   const currentDocument = documentsManager.getCurrent();
   return currentDocument?.container?.settings?.get("post_title") ?? "";
 }
 
 // src/components/components-tab/components.tsx
-var React8 = __toESM(require("react"));
-var import_editor_ui2 = require("@elementor/editor-ui");
+var React16 = __toESM(require("react"));
+var import_editor_ui7 = require("@elementor/editor-ui");
 
 // src/components/components-tab/component-search.tsx
-var React4 = __toESM(require("react"));
-var import_icons3 = require("@elementor/icons");
-var import_ui3 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var React12 = __toESM(require("react"));
+var import_icons8 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/components-tab/search-provider.tsx
-var React3 = __toESM(require("react"));
-var import_react3 = require("react");
-var import_utils = require("@elementor/utils");
-var SearchContext = (0, import_react3.createContext)(void 0);
+var React11 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_utils3 = require("@elementor/utils");
+var SearchContext = (0, import_react6.createContext)(void 0);
 var SearchProvider = ({
   children,
   localStorageKey
 }) => {
-  const { debouncedValue, handleChange, inputValue } = (0, import_utils.useSearchState)({ localStorageKey });
+  const { debouncedValue, handleChange, inputValue } = (0, import_utils3.useSearchState)({ localStorageKey });
   const clearSearch = () => {
     handleChange("");
   };
-  return /* @__PURE__ */ React3.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
+  return /* @__PURE__ */ React11.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
 };
 var useSearch = () => {
-  const context = (0, import_react3.useContext)(SearchContext);
+  const context = (0, import_react6.useContext)(SearchContext);
   if (!context) {
     throw new Error("useSearch must be used within a SearchProvider");
   }
@@ -502,69 +1558,69 @@ var useSearch = () => {
 // src/components/components-tab/component-search.tsx
 var ComponentSearch = () => {
   const { inputValue, handleChange } = useSearch();
-  return /* @__PURE__ */ React4.createElement(import_ui3.Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React4.createElement(import_ui3.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React4.createElement(
-    import_ui3.TextField,
+  return /* @__PURE__ */ React12.createElement(import_ui11.Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React12.createElement(import_ui11.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React12.createElement(
+    import_ui11.TextField,
     {
       role: "search",
       fullWidth: true,
       size: "tiny",
       value: inputValue,
-      placeholder: (0, import_i18n3.__)("Search", "elementor"),
+      placeholder: (0, import_i18n12.__)("Search", "elementor"),
       onChange: (e) => handleChange(e.target.value),
       InputProps: {
-        startAdornment: /* @__PURE__ */ React4.createElement(import_ui3.InputAdornment, { position: "start" }, /* @__PURE__ */ React4.createElement(import_icons3.SearchIcon, { fontSize: "tiny" }))
+        startAdornment: /* @__PURE__ */ React12.createElement(import_ui11.InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(import_icons8.SearchIcon, { fontSize: "tiny" }))
       }
     }
   )));
 };
 
 // src/components/components-tab/components-list.tsx
-var React7 = __toESM(require("react"));
-var import_icons5 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var React15 = __toESM(require("react"));
+var import_icons10 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
 
 // src/hooks/use-components.ts
-var import_store10 = require("@elementor/store");
+var import_store26 = require("@elementor/store");
 var useComponents = () => {
-  const components = (0, import_store10.__useSelector)(selectComponents);
-  const isLoading = (0, import_store10.__useSelector)(selectLoadIsPending);
+  const components = (0, import_store26.__useSelector)(selectComponents);
+  const isLoading = (0, import_store26.__useSelector)(selectLoadIsPending);
   return { components, isLoading };
 };
 
 // src/components/components-tab/components-item.tsx
-var React5 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_editor_canvas5 = require("@elementor/editor-canvas");
-var import_editor_elements3 = require("@elementor/editor-elements");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_icons4 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_icons9 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/store/actions/archive-component.ts
-var import_editor_documents4 = require("@elementor/editor-documents");
-var import_store12 = require("@elementor/store");
+var import_editor_documents6 = require("@elementor/editor-documents");
+var import_store28 = require("@elementor/store");
 var archiveComponent = (componentId) => {
-  const store = (0, import_store12.__getStore)();
-  const dispatch9 = store?.dispatch;
-  if (!dispatch9) {
+  const store = (0, import_store28.__getStore)();
+  const dispatch16 = store?.dispatch;
+  if (!dispatch16) {
     return;
   }
-  dispatch9(slice.actions.archive(componentId));
-  (0, import_editor_documents4.setDocumentModifiedStatus)(true);
+  dispatch16(slice.actions.archive(componentId));
+  (0, import_editor_documents6.setDocumentModifiedStatus)(true);
 };
 
 // src/store/actions/load-components-assets.ts
-var import_editor_documents6 = require("@elementor/editor-documents");
+var import_editor_documents8 = require("@elementor/editor-documents");
 
 // src/create-component-type.ts
 var import_editor_canvas4 = require("@elementor/editor-canvas");
-var import_editor_documents5 = require("@elementor/editor-documents");
-var import_i18n4 = require("@wordpress/i18n");
+var import_editor_documents7 = require("@elementor/editor-documents");
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/utils/tracking.ts
 var import_mixpanel = require("@elementor/mixpanel");
-var import_store14 = require("@elementor/store");
+var import_store30 = require("@elementor/store");
 var trackComponentEvent = ({ action, ...data }) => {
   const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
   if (!config?.names?.components?.[action]) {
@@ -581,7 +1637,7 @@ var onElementDrop = (_args, element) => {
   const componentName = editorSettings?.title;
   const componentUID = editorSettings?.component_uid;
   const instanceId = element.id;
-  const createdThisSession = selectCreatedThisSession((0, import_store14.__getState)());
+  const createdThisSession = selectCreatedThisSession((0, import_store30.__getState)());
   const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
   const eventsManagerConfig = window.elementorCommon.eventsManager.config;
   const { locations, secondaryLocations } = eventsManagerConfig;
@@ -629,7 +1685,7 @@ function createComponentView(options) {
     legacyWindow = window;
     eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
     isComponentCurrentlyEdited() {
-      const currentDocument = (0, import_editor_documents5.getCurrentDocument)();
+      const currentDocument = (0, import_editor_documents7.getCurrentDocument)();
       return currentDocument?.id === this.getComponentId();
     }
     afterSettingsResolve(settings) {
@@ -680,7 +1736,7 @@ function createComponentView(options) {
           action: {
             name: "edit component",
             icon: "eicon-edit",
-            title: () => (0, import_i18n4.__)("Edit Component", "elementor"),
+            title: () => (0, import_i18n13.__)("Edit Component", "elementor"),
             isEnabled: () => true,
             callback: (_, eventData) => this.editComponent(eventData)
           }
@@ -775,7 +1831,7 @@ var getComponentIds = async (elements) => {
 };
 
 // src/store/actions/load-components-overridable-props.ts
-var import_store16 = require("@elementor/store");
+var import_store32 = require("@elementor/store");
 function loadComponentsOverridableProps(componentIds) {
   if (!componentIds.length) {
     return;
@@ -783,7 +1839,7 @@ function loadComponentsOverridableProps(componentIds) {
   componentIds.forEach(loadComponentOverrides);
 }
 async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store16.__getState)(), componentId);
+  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store32.__getState)(), componentId);
   if (isOverridablePropsLoaded) {
     return;
   }
@@ -791,7 +1847,7 @@ async function loadComponentOverrides(componentId) {
   if (!overridableProps) {
     return;
   }
-  (0, import_store16.__dispatch)(
+  (0, import_store32.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps
@@ -800,13 +1856,13 @@ async function loadComponentOverrides(componentId) {
 }
 
 // src/store/actions/load-components-styles.ts
-var import_store18 = require("@elementor/store");
+var import_store34 = require("@elementor/store");
 async function loadComponentsStyles(componentIds) {
   if (!componentIds.length) {
     return;
   }
-  const knownComponents = selectStyles((0, import_store18.__getState)());
-  const unknownComponentIds = componentIds.filter((id) => !knownComponents[id]);
+  const knownComponents = selectStyles((0, import_store34.__getState)());
+  const unknownComponentIds = componentIds.filter((id2) => !knownComponents[id2]);
   if (!unknownComponentIds.length) {
     return;
   }
@@ -817,13 +1873,13 @@ async function addComponentStyles(ids) {
   addStyles(newComponents);
 }
 async function loadStyles(ids) {
-  return Promise.all(ids.map(async (id) => [id, await apiClient.getComponentConfig(id)]));
+  return Promise.all(ids.map(async (id2) => [id2, await apiClient.getComponentConfig(id2)]));
 }
 function addStyles(data) {
   const styles = Object.fromEntries(
     data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
   );
-  (0, import_store18.__dispatch)(slice.actions.addStyles(styles));
+  (0, import_store34.__dispatch)(slice.actions.addStyles(styles));
 }
 function extractStyles(element) {
   return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
@@ -842,16 +1898,16 @@ async function updateDocumentState(componentIds) {
   const components = (await Promise.all(componentIds.map(getComponentDocumentData))).filter(
     (document) => !!document
   );
-  const isDrafted = components.some(import_editor_documents6.isDocumentDirty);
+  const isDrafted = components.some(import_editor_documents8.isDocumentDirty);
   if (isDrafted) {
-    (0, import_editor_documents6.setDocumentModifiedStatus)(true);
+    (0, import_editor_documents8.setDocumentModifiedStatus)(true);
   }
 }
 
 // src/utils/get-container-for-new-element.ts
-var import_editor_elements = require("@elementor/editor-elements");
+var import_editor_elements4 = require("@elementor/editor-elements");
 var getContainerForNewElement = () => {
-  const currentDocumentContainer = (0, import_editor_elements.getCurrentDocumentContainer)();
+  const currentDocumentContainer = (0, import_editor_elements4.getCurrentDocumentContainer)();
   const selectedElement = getSelectedElementContainer();
   let container, options;
   if (selectedElement) {
@@ -877,17 +1933,17 @@ var getContainerForNewElement = () => {
   return { container: container ?? currentDocumentContainer, options };
 };
 function getSelectedElementContainer() {
-  const selectedElements = (0, import_editor_elements.getSelectedElements)();
+  const selectedElements = (0, import_editor_elements4.getSelectedElements)();
   if (selectedElements.length !== 1) {
     return void 0;
   }
-  return (0, import_editor_elements.getContainer)(selectedElements[0].id);
+  return (0, import_editor_elements4.getContainer)(selectedElements[0].id);
 }
 
 // src/components/create-component-form/utils/replace-element-with-component.ts
-var import_editor_elements2 = require("@elementor/editor-elements");
+var import_editor_elements5 = require("@elementor/editor-elements");
 var replaceElementWithComponent = (element, component) => {
-  (0, import_editor_elements2.replaceElement)({
+  (0, import_editor_elements5.replaceElement)({
     currentElement: element,
     newElement: createComponentModel(component),
     withHistory: false
@@ -919,7 +1975,7 @@ var createComponentModel = (component) => {
 // src/components/components-tab/components-item.tsx
 var ComponentItem = ({ component }) => {
   const componentModel = createComponentModel(component);
-  const popupState = (0, import_ui4.usePopupState)({
+  const popupState = (0, import_ui12.usePopupState)({
     variant: "popover",
     disableAutoFocus: true
   });
@@ -937,8 +1993,8 @@ var ComponentItem = ({ component }) => {
     }
     archiveComponent(component.id);
   };
-  return /* @__PURE__ */ React5.createElement(import_ui4.Stack, null, /* @__PURE__ */ React5.createElement(
-    import_ui4.ListItemButton,
+  return /* @__PURE__ */ React13.createElement(import_ui12.Stack, null, /* @__PURE__ */ React13.createElement(
+    import_ui12.ListItemButton,
     {
       draggable: true,
       onDragStart: () => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel),
@@ -955,8 +2011,8 @@ var ComponentItem = ({ component }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React5.createElement(
-      import_ui4.Box,
+    /* @__PURE__ */ React13.createElement(
+      import_ui12.Box,
       {
         onClick: handleClick,
         sx: {
@@ -967,22 +2023,22 @@ var ComponentItem = ({ component }) => {
           flexGrow: 1
         }
       },
-      /* @__PURE__ */ React5.createElement(import_ui4.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React5.createElement(import_icons4.ComponentsIcon, { fontSize: "tiny" })),
-      /* @__PURE__ */ React5.createElement(import_ui4.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, /* @__PURE__ */ React5.createElement(
-        import_editor_ui.EllipsisWithTooltip,
+      /* @__PURE__ */ React13.createElement(import_ui12.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React13.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
+      /* @__PURE__ */ React13.createElement(import_ui12.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, /* @__PURE__ */ React13.createElement(
+        import_editor_ui6.EllipsisWithTooltip,
         {
           title: component.name,
-          as: import_ui4.Typography,
+          as: import_ui12.Typography,
           variant: "caption",
           color: "text.primary"
         }
       ))
     ),
-    /* @__PURE__ */ React5.createElement(import_ui4.IconButton, { size: "tiny", ...(0, import_ui4.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" }))
-  ), /* @__PURE__ */ React5.createElement(
-    import_ui4.Menu,
+    /* @__PURE__ */ React13.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React13.createElement(
+    import_ui12.Menu,
     {
-      ...(0, import_ui4.bindMenu)(popupState),
+      ...(0, import_ui12.bindMenu)(popupState),
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "right"
@@ -992,7 +2048,7 @@ var ComponentItem = ({ component }) => {
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React5.createElement(import_editor_ui.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, (0, import_i18n5.__)("Archive", "elementor"))
+    /* @__PURE__ */ React13.createElement(import_editor_ui6.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, (0, import_i18n14.__)("Archive", "elementor"))
   ));
 };
 var addComponentToPage = (model) => {
@@ -1001,7 +2057,7 @@ var addComponentToPage = (model) => {
     throw new Error(`Can't find container to drop new component instance at`);
   }
   loadComponentsAssets([model]);
-  (0, import_editor_elements3.dropElement)({
+  (0, import_editor_elements6.dropElement)({
     containerId: container.id,
     model,
     options: { ...options, useHistory: false, scrollIntoView: true }
@@ -1009,13 +2065,13 @@ var addComponentToPage = (model) => {
 };
 
 // src/components/components-tab/loading-components.tsx
-var React6 = __toESM(require("react"));
-var import_ui5 = require("@elementor/ui");
+var React14 = __toESM(require("react"));
+var import_ui13 = require("@elementor/ui");
 var ROWS_COUNT = 6;
 var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
 var LoadingComponents = () => {
-  return /* @__PURE__ */ React6.createElement(
-    import_ui5.Stack,
+  return /* @__PURE__ */ React14.createElement(
+    import_ui13.Stack,
     {
       "aria-label": "Loading components",
       gap: 1,
@@ -1036,14 +2092,14 @@ var LoadingComponents = () => {
         }
       }
     },
-    rows.map((row) => /* @__PURE__ */ React6.createElement(
-      import_ui5.ListItemButton,
+    rows.map((row) => /* @__PURE__ */ React14.createElement(
+      import_ui13.ListItemButton,
       {
         key: row,
         sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
         shape: "rounded"
       },
-      /* @__PURE__ */ React6.createElement(import_ui5.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React6.createElement(import_ui5.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React6.createElement(import_ui5.Skeleton, { variant: "text", width: "100%", height: "36px" }))
+      /* @__PURE__ */ React14.createElement(import_ui13.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React14.createElement(import_ui13.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React14.createElement(import_ui13.Skeleton, { variant: "text", width: "100%", height: "36px" }))
     ))
   );
 };
@@ -1052,20 +2108,20 @@ var LoadingComponents = () => {
 function ComponentsList() {
   const { components, isLoading, searchValue } = useFilteredComponents();
   if (isLoading) {
-    return /* @__PURE__ */ React7.createElement(LoadingComponents, null);
+    return /* @__PURE__ */ React15.createElement(LoadingComponents, null);
   }
   const isEmpty = !components || components.length === 0;
   if (isEmpty) {
     if (searchValue.length > 0) {
-      return /* @__PURE__ */ React7.createElement(EmptySearchResult, null);
+      return /* @__PURE__ */ React15.createElement(EmptySearchResult, null);
     }
-    return /* @__PURE__ */ React7.createElement(EmptyState, null);
+    return /* @__PURE__ */ React15.createElement(EmptyState, null);
   }
-  return /* @__PURE__ */ React7.createElement(import_ui6.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React7.createElement(ComponentItem, { key: component.uid, component })));
+  return /* @__PURE__ */ React15.createElement(import_ui14.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React15.createElement(ComponentItem, { key: component.uid, component })));
 }
 var EmptyState = () => {
-  return /* @__PURE__ */ React7.createElement(
-    import_ui6.Stack,
+  return /* @__PURE__ */ React15.createElement(
+    import_ui14.Stack,
     {
       alignItems: "center",
       justifyContent: "center",
@@ -1074,32 +2130,32 @@ var EmptyState = () => {
       gap: 1.75,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React7.createElement(import_ui6.Icon, { fontSize: "large" }, /* @__PURE__ */ React7.createElement(import_icons5.EyeIcon, { fontSize: "large" })),
-    /* @__PURE__ */ React7.createElement(import_ui6.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n6.__)("Text that explains that there are no Components yet.", "elementor")),
-    /* @__PURE__ */ React7.createElement(import_ui6.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n6.__)(
+    /* @__PURE__ */ React15.createElement(import_ui14.Icon, { fontSize: "large" }, /* @__PURE__ */ React15.createElement(import_icons10.EyeIcon, { fontSize: "large" })),
+    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n15.__)("Text that explains that there are no Components yet.", "elementor")),
+    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n15.__)(
       "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
       "elementor"
     )),
-    /* @__PURE__ */ React7.createElement(import_ui6.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
-    /* @__PURE__ */ React7.createElement(import_ui6.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n6.__)("To create a component, first design it, then choose one of three options:", "elementor")),
-    /* @__PURE__ */ React7.createElement(
-      import_ui6.Typography,
+    /* @__PURE__ */ React15.createElement(import_ui14.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
+    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n15.__)("To create a component, first design it, then choose one of three options:", "elementor")),
+    /* @__PURE__ */ React15.createElement(
+      import_ui14.Typography,
       {
         align: "left",
         variant: "caption",
         color: "text.secondary",
         sx: { display: "flex", flexDirection: "column" }
       },
-      /* @__PURE__ */ React7.createElement("span", null, (0, import_i18n6.__)("1. Right-click and select Create Component", "elementor")),
-      /* @__PURE__ */ React7.createElement("span", null, (0, import_i18n6.__)("2. Use the component icon in the Structure panel", "elementor")),
-      /* @__PURE__ */ React7.createElement("span", null, (0, import_i18n6.__)("3. Use the component icon in the Edit panel header", "elementor"))
+      /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n15.__)("1. Right-click and select Create Component", "elementor")),
+      /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n15.__)("2. Use the component icon in the Structure panel", "elementor")),
+      /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n15.__)("3. Use the component icon in the Edit panel header", "elementor"))
     )
   );
 };
 var EmptySearchResult = () => {
   const { searchValue, clearSearch } = useSearch();
-  return /* @__PURE__ */ React7.createElement(
-    import_ui6.Stack,
+  return /* @__PURE__ */ React15.createElement(
+    import_ui14.Stack,
     {
       color: "text.secondary",
       pt: 5,
@@ -1108,17 +2164,17 @@ var EmptySearchResult = () => {
       overflow: "hidden",
       justifySelf: "center"
     },
-    /* @__PURE__ */ React7.createElement(import_icons5.ComponentsIcon, null),
-    /* @__PURE__ */ React7.createElement(
-      import_ui6.Box,
+    /* @__PURE__ */ React15.createElement(import_icons10.ComponentsIcon, null),
+    /* @__PURE__ */ React15.createElement(
+      import_ui14.Box,
       {
         sx: {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React7.createElement(import_ui6.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n6.__)("Sorry, nothing matched", "elementor")),
-      searchValue && /* @__PURE__ */ React7.createElement(
-        import_ui6.Typography,
+      /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n15.__)("Sorry, nothing matched", "elementor")),
+      searchValue && /* @__PURE__ */ React15.createElement(
+        import_ui14.Typography,
         {
           variant: "subtitle2",
           color: "inherit",
@@ -1128,8 +2184,8 @@ var EmptySearchResult = () => {
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React7.createElement("span", null, "\u201C"),
-        /* @__PURE__ */ React7.createElement(
+        /* @__PURE__ */ React15.createElement("span", null, "\u201C"),
+        /* @__PURE__ */ React15.createElement(
           "span",
           {
             style: {
@@ -1140,11 +2196,11 @@ var EmptySearchResult = () => {
           },
           searchValue
         ),
-        /* @__PURE__ */ React7.createElement("span", null, "\u201D.")
+        /* @__PURE__ */ React15.createElement("span", null, "\u201D.")
       )
     ),
-    /* @__PURE__ */ React7.createElement(import_ui6.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n6.__)("Try something else.", "elementor")),
-    /* @__PURE__ */ React7.createElement(import_ui6.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React7.createElement(import_ui6.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n6.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n15.__)("Try something else.", "elementor")),
+    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React15.createElement(import_ui14.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n15.__)("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -1161,35 +2217,35 @@ var useFilteredComponents = () => {
 
 // src/components/components-tab/components.tsx
 var Components = () => {
-  return /* @__PURE__ */ React8.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React8.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React8.createElement(ComponentSearch, null), /* @__PURE__ */ React8.createElement(ComponentsList, null)));
+  return /* @__PURE__ */ React16.createElement(import_editor_ui7.ThemeProvider, null, /* @__PURE__ */ React16.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React16.createElement(ComponentSearch, null), /* @__PURE__ */ React16.createElement(ComponentsList, null)));
 };
 
 // src/components/consts.ts
 var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 
 // src/components/create-component-form/create-component-form.tsx
-var React9 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_icons6 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var React17 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_editor_elements7 = require("@elementor/editor-elements");
+var import_editor_ui8 = require("@elementor/editor-ui");
+var import_icons11 = require("@elementor/icons");
+var import_ui15 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
 
 // src/store/actions/create-unpublished-component.ts
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_store20 = require("@elementor/store");
-var import_utils2 = require("@elementor/utils");
+var import_store36 = require("@elementor/store");
+var import_utils4 = require("@elementor/utils");
 function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
-  const generatedUid = uid ?? (0, import_utils2.generateUniqueId)("component");
+  const generatedUid = uid ?? (0, import_utils4.generateUniqueId)("component");
   const componentBase = { uid: generatedUid, name, overridableProps };
-  (0, import_store20.__dispatch)(
+  (0, import_store36.__dispatch)(
     slice.actions.addUnpublished({
       ...componentBase,
       elements: [element]
     })
   );
-  (0, import_store20.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
+  (0, import_store36.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
   replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
@@ -1202,11 +2258,11 @@ function createUnpublishedComponent(name, element, eventData, overridableProps,
 }
 
 // src/components/create-component-form/hooks/use-form.ts
-var import_react4 = require("react");
+var import_react7 = require("react");
 var useForm = (initialValues) => {
-  const [values, setValues] = (0, import_react4.useState)(initialValues);
-  const [errors, setErrors] = (0, import_react4.useState)({});
-  const isValid = (0, import_react4.useMemo)(() => {
+  const [values, setValues] = (0, import_react7.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react7.useState)({});
+  const isValid = (0, import_react7.useMemo)(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
   const handleChange = (e, field, validationSchema) => {
@@ -1252,16 +2308,16 @@ var validateForm = (values, schema) => {
 
 // src/components/create-component-form/utils/component-form-schema.ts
 var import_schema = require("@elementor/schema");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
 var createBaseComponentSchema = (existingNames) => {
   return import_schema.z.object({
     componentName: import_schema.z.string().trim().max(
       MAX_NAME_LENGTH,
-      (0, import_i18n7.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
+      (0, import_i18n16.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
     ).refine((value) => !existingNames.includes(value), {
-      message: (0, import_i18n7.__)("Component name already exists", "elementor")
+      message: (0, import_i18n16.__)("Component name already exists", "elementor")
     })
   });
 };
@@ -1269,9 +2325,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: (0, import_i18n7.__)("Component name is required.", "elementor")
+      message: (0, import_i18n16.__)("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: (0, import_i18n7.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: (0, import_i18n16.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -1307,14 +2363,14 @@ function countNestedElements(container) {
 
 // src/components/create-component-form/create-component-form.tsx
 function CreateComponentForm() {
-  const [element, setElement] = (0, import_react5.useState)(null);
-  const [anchorPosition, setAnchorPosition] = (0, import_react5.useState)();
-  const [resultNotification, setResultNotification] = (0, import_react5.useState)(null);
-  const eventData = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [element, setElement] = (0, import_react8.useState)(null);
+  const [anchorPosition, setAnchorPosition] = (0, import_react8.useState)();
+  const [resultNotification, setResultNotification] = (0, import_react8.useState)(null);
+  const eventData = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
-      setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements4.getElementLabel)(event.detail.element.id) });
+      setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements7.getElementLabel)(event.detail.element.id) });
       setAnchorPosition(event.detail.anchorPosition);
       eventData.current = getComponentEventData(event.detail.element, event.detail.options);
       trackComponentEvent({
@@ -1336,12 +2392,12 @@ function CreateComponentForm() {
       setResultNotification({
         show: true,
         // Translators: %1$s: Component name, %2$s: Component UID
-        message: (0, import_i18n8.__)("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
+        message: (0, import_i18n17.__)("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
         type: "success"
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = (0, import_i18n8.__)("Failed to save component. Please try again.", "elementor");
+      const errorMessage = (0, import_i18n17.__)("Failed to save component. Please try again.", "elementor");
       setResultNotification({
         show: true,
         message: errorMessage,
@@ -1360,24 +2416,24 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React9.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React9.createElement(
-    import_ui7.Popover,
+  return /* @__PURE__ */ React17.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React17.createElement(
+    import_ui15.Popover,
     {
       open: element !== null,
       onClose: cancelSave,
       anchorReference: "anchorPosition",
       anchorPosition
     },
-    element !== null && /* @__PURE__ */ React9.createElement(
-      Form,
+    element !== null && /* @__PURE__ */ React17.createElement(
+      Form2,
       {
         initialValues: { componentName: element.elementLabel },
         handleSave,
         closePopup: cancelSave
       }
     )
-  ), /* @__PURE__ */ React9.createElement(import_ui7.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React9.createElement(
-    import_ui7.Alert,
+  ), /* @__PURE__ */ React17.createElement(import_ui15.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React17.createElement(
+    import_ui15.Alert,
     {
       onClose: () => setResultNotification(null),
       severity: resultNotification?.type,
@@ -1387,21 +2443,21 @@ function CreateComponentForm() {
   )));
 }
 var FONT_SIZE = "tiny";
-var Form = ({
+var Form2 = ({
   initialValues,
   handleSave,
   closePopup
 }) => {
   const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
   const { components } = useComponents();
-  const existingComponentNames = (0, import_react5.useMemo)(() => {
+  const existingComponentNames = (0, import_react8.useMemo)(() => {
     return components?.map((component) => component.name) ?? [];
   }, [components]);
-  const changeValidationSchema = (0, import_react5.useMemo)(
+  const changeValidationSchema = (0, import_react8.useMemo)(
     () => createBaseComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
-  const submitValidationSchema = (0, import_react5.useMemo)(
+  const submitValidationSchema = (0, import_react8.useMemo)(
     () => createSubmitComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
@@ -1412,14 +2468,14 @@ var Form = ({
     }
   };
   const texts = {
-    heading: (0, import_i18n8.__)("Save as a component", "elementor"),
-    name: (0, import_i18n8.__)("Name", "elementor"),
-    cancel: (0, import_i18n8.__)("Cancel", "elementor"),
-    create: (0, import_i18n8.__)("Create", "elementor")
+    heading: (0, import_i18n17.__)("Save as a component", "elementor"),
+    name: (0, import_i18n17.__)("Name", "elementor"),
+    cancel: (0, import_i18n17.__)("Cancel", "elementor"),
+    create: (0, import_i18n17.__)("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React9.createElement(import_editor_ui3.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React9.createElement(import_ui7.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React9.createElement(
-    import_ui7.Stack,
+  return /* @__PURE__ */ React17.createElement(import_editor_ui8.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React17.createElement(
+    import_ui15.Stack,
     {
       direction: "row",
       alignItems: "center",
@@ -1427,10 +2483,10 @@ var Form = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__PURE__ */ React9.createElement(import_icons6.StarIcon, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
-  ), /* @__PURE__ */ React9.createElement(import_ui7.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui7.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_ui7.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React9.createElement(import_ui7.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(
-    import_ui7.TextField,
+    /* @__PURE__ */ React17.createElement(import_icons11.StarIcon, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React17.createElement(import_ui15.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
+  ), /* @__PURE__ */ React17.createElement(import_ui15.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React17.createElement(import_ui15.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React17.createElement(import_ui15.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React17.createElement(import_ui15.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React17.createElement(
+    import_ui15.TextField,
     {
       id: nameInputId,
       size: FONT_SIZE,
@@ -1441,37 +2497,37 @@ var Form = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React9.createElement(import_ui7.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui7.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React9.createElement(import_ui7.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
+  ))), /* @__PURE__ */ React17.createElement(import_ui15.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React17.createElement(import_ui15.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React17.createElement(import_ui15.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
 };
 
 // src/components/edit-component/edit-component.tsx
-var React11 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_editor_documents8 = require("@elementor/editor-documents");
+var React19 = __toESM(require("react"));
+var import_react11 = require("react");
+var import_editor_documents10 = require("@elementor/editor-documents");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_store24 = require("@elementor/store");
-var import_utils4 = require("@elementor/utils");
+var import_store40 = require("@elementor/store");
+var import_utils6 = require("@elementor/utils");
 
 // src/store/actions/update-current-component.ts
-var import_editor_documents7 = require("@elementor/editor-documents");
-var import_store22 = require("@elementor/store");
+var import_editor_documents9 = require("@elementor/editor-documents");
+var import_store38 = require("@elementor/store");
 function updateCurrentComponent({
   path,
   currentComponentId
 }) {
-  const dispatch9 = (0, import_store22.__getStore)()?.dispatch;
-  if (!dispatch9) {
+  const dispatch16 = (0, import_store38.__getStore)()?.dispatch;
+  if (!dispatch16) {
     return;
   }
-  dispatch9(slice.actions.setPath(path));
-  dispatch9(slice.actions.setCurrentComponentId(currentComponentId));
+  dispatch16(slice.actions.setPath(path));
+  dispatch16(slice.actions.setCurrentComponentId(currentComponentId));
 }
 
 // src/components/edit-component/component-modal.tsx
-var React10 = __toESM(require("react"));
-var import_react7 = require("react");
+var React18 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_react_dom = require("react-dom");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n18 = require("@wordpress/i18n");
 
 // src/hooks/use-canvas-document.ts
 var import_editor_canvas6 = require("@elementor/editor-canvas");
@@ -1481,11 +2537,11 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-element-rect.ts
-var import_react6 = require("react");
-var import_utils3 = require("@elementor/utils");
+var import_react9 = require("react");
+var import_utils5 = require("@elementor/utils");
 function useElementRect(element) {
-  const [rect, setRect] = (0, import_react6.useState)(new DOMRect(0, 0, 0, 0));
-  const onChange = (0, import_utils3.throttle)(
+  const [rect, setRect] = (0, import_react9.useState)(new DOMRect(0, 0, 0, 0));
+  const onChange = (0, import_utils5.throttle)(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
     },
@@ -1495,7 +2551,7 @@ function useElementRect(element) {
   useScrollListener({ element, onChange });
   useResizeListener({ element, onChange });
   useMutationsListener({ element, onChange });
-  (0, import_react6.useEffect)(
+  (0, import_react9.useEffect)(
     () => () => {
       onChange.cancel();
     },
@@ -1504,7 +2560,7 @@ function useElementRect(element) {
   return rect;
 }
 function useScrollListener({ element, onChange }) {
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -1516,7 +2572,7 @@ function useScrollListener({ element, onChange }) {
   }, [element, onChange]);
 }
 function useResizeListener({ element, onChange }) {
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -1531,7 +2587,7 @@ function useResizeListener({ element, onChange }) {
   }, [element, onChange]);
 }
 function useMutationsListener({ element, onChange }) {
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -1546,7 +2602,7 @@ function useMutationsListener({ element, onChange }) {
 // src/components/edit-component/component-modal.tsx
 function ComponentModal({ element, onClose }) {
   const canvasDocument = useCanvasDocument();
-  (0, import_react7.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const handleEsc = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -1561,7 +2617,7 @@ function ComponentModal({ element, onClose }) {
     return null;
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(BlockEditPage, null), /* @__PURE__ */ React10.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
+    /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(BlockEditPage, null), /* @__PURE__ */ React18.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
     canvasDocument.body
   );
 }
@@ -1585,7 +2641,7 @@ function Backdrop({ canvas, element, onClose }) {
       onClose();
     }
   };
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "div",
     {
       style: backdropStyle,
@@ -1593,7 +2649,7 @@ function Backdrop({ canvas, element, onClose }) {
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": (0, import_i18n9.__)("Exit component editing mode", "elementor")
+      "aria-label": (0, import_i18n18.__)("Exit component editing mode", "elementor")
     }
   );
 }
@@ -1643,7 +2699,7 @@ function BlockEditPage() {
 		}
 	}
 	`;
-  return /* @__PURE__ */ React10.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
+  return /* @__PURE__ */ React18.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
 }
 
 // src/components/edit-component/edit-component.tsx
@@ -1651,18 +2707,18 @@ function EditComponent() {
   const currentComponentId = useCurrentComponentId();
   useHandleDocumentSwitches();
   const navigateBack = useNavigateBack();
-  const onClose = (0, import_utils4.throttle)(navigateBack, 100);
+  const onClose = (0, import_utils6.throttle)(navigateBack, 100);
   const elementDom = getComponentDOMElement(currentComponentId ?? void 0);
   if (!elementDom) {
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(ComponentModal, { element: elementDom, onClose });
+  return /* @__PURE__ */ React19.createElement(ComponentModal, { element: elementDom, onClose });
 }
 function useHandleDocumentSwitches() {
-  const documentsManager = (0, import_editor_documents8.getV1DocumentsManager)();
+  const documentsManager = (0, import_editor_documents10.getV1DocumentsManager)();
   const currentComponentId = useCurrentComponentId();
-  const path = (0, import_store24.__useSelector)(selectPath);
-  (0, import_react8.useEffect)(() => {
+  const path = (0, import_store40.__useSelector)(selectPath);
+  (0, import_react11.useEffect)(() => {
     return (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.commandEndEvent)("editor/documents/open"), () => {
       const nextDocument = documentsManager.getCurrent();
       if (nextDocument.id === currentComponentId) {
@@ -1696,12 +2752,12 @@ function getUpdatedComponentPath(path, nextDocument) {
     }
   ];
 }
-function getComponentDOMElement(id) {
-  if (!id) {
+function getComponentDOMElement(id2) {
+  if (!id2) {
     return null;
   }
-  const documentsManager = (0, import_editor_documents8.getV1DocumentsManager)();
-  const currentComponent = documentsManager.get(id);
+  const documentsManager = (0, import_editor_documents10.getV1DocumentsManager)();
+  const currentComponent = documentsManager.get(id2);
   const widget = currentComponent?.container;
   const container = widget?.view?.el?.children?.[0] ?? null;
   const elementDom = container?.children[0];
@@ -1709,33 +2765,33 @@ function getComponentDOMElement(id) {
 }
 
 // src/components/in-edit-mode.tsx
-var React12 = __toESM(require("react"));
-var import_editor_ui4 = require("@elementor/editor-ui");
-var import_icons7 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var React20 = __toESM(require("react"));
+var import_editor_ui9 = require("@elementor/editor-ui");
+var import_icons12 = require("@elementor/icons");
+var import_ui16 = require("@elementor/ui");
+var import_i18n19 = require("@wordpress/i18n");
 var openEditModeDialog = (lockedBy) => {
-  (0, import_editor_ui4.openDialog)({
-    component: /* @__PURE__ */ React12.createElement(EditModeDialog, { lockedBy })
+  (0, import_editor_ui9.openDialog)({
+    component: /* @__PURE__ */ React20.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = (0, import_i18n10.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(import_ui8.DialogHeader, { logo: false }, /* @__PURE__ */ React12.createElement(import_ui8.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React12.createElement(import_ui8.Icon, { color: "secondary" }, /* @__PURE__ */ React12.createElement(import_icons7.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React12.createElement(import_ui8.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React12.createElement(import_ui8.DialogContent, null, /* @__PURE__ */ React12.createElement(import_ui8.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React12.createElement(import_ui8.Typography, { variant: "body2" }, (0, import_i18n10.__)(
+  const content = (0, import_i18n19.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui16.DialogHeader, { logo: false }, /* @__PURE__ */ React20.createElement(import_ui16.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(import_ui16.Icon, { color: "secondary" }, /* @__PURE__ */ React20.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React20.createElement(import_ui16.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React20.createElement(import_ui16.DialogContent, null, /* @__PURE__ */ React20.createElement(import_ui16.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React20.createElement(import_ui16.Typography, { variant: "body2" }, (0, import_i18n19.__)(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React12.createElement(import_ui8.DialogActions, null, /* @__PURE__ */ React12.createElement(import_ui8.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui4.closeDialog }, (0, import_i18n10.__)("Close", "elementor"))))));
+  )), /* @__PURE__ */ React20.createElement(import_ui16.DialogActions, null, /* @__PURE__ */ React20.createElement(import_ui16.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui9.closeDialog }, (0, import_i18n19.__)("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-var React15 = __toESM(require("react"));
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_elements5 = require("@elementor/editor-elements");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_icons9 = require("@elementor/icons");
-var import_store26 = require("@elementor/store");
-var import_ui11 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var React23 = __toESM(require("react"));
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_panels3 = require("@elementor/editor-panels");
+var import_icons14 = require("@elementor/icons");
+var import_store42 = require("@elementor/store");
+var import_ui19 = require("@elementor/ui");
+var import_i18n21 = require("@wordpress/i18n");
 
 // src/prop-types/component-instance-prop-type.ts
 var import_editor_props3 = require("@elementor/editor-props");
@@ -1776,13 +2832,13 @@ var componentInstancePropTypeUtil = (0, import_editor_props3.createPropUtils)(
 );
 
 // src/components/instance-editing-panel/empty-state.tsx
-var React13 = __toESM(require("react"));
-var import_icons8 = require("@elementor/icons");
-var import_ui9 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var React21 = __toESM(require("react"));
+var import_icons13 = require("@elementor/icons");
+var import_ui17 = require("@elementor/ui");
+var import_i18n20 = require("@wordpress/i18n");
 var EmptyState2 = ({ onEditComponent }) => {
-  return /* @__PURE__ */ React13.createElement(
-    import_ui9.Stack,
+  return /* @__PURE__ */ React21.createElement(
+    import_ui17.Stack,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -1791,33 +2847,33 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__PURE__ */ React13.createElement(import_icons8.ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React13.createElement(import_ui9.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("No properties yet", "elementor")),
-    /* @__PURE__ */ React13.createElement(import_ui9.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n11.__)(
+    /* @__PURE__ */ React21.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React21.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n20.__)("No properties yet", "elementor")),
+    /* @__PURE__ */ React21.createElement(import_ui17.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n20.__)(
       "Edit the component to add properties, manage them or update the design across all instances.",
       "elementor"
     )),
-    /* @__PURE__ */ React13.createElement(import_ui9.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React13.createElement(import_icons8.PencilIcon, { fontSize: "small" }), (0, import_i18n11.__)("Edit component", "elementor"))
+    /* @__PURE__ */ React21.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React21.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n20.__)("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-var React14 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_ui10 = require("@elementor/ui");
+var React22 = __toESM(require("react"));
+var import_react12 = require("react");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_ui10 = require("@elementor/editor-ui");
+var import_ui18 = require("@elementor/ui");
 function OverridePropsGroup({ group, props }) {
-  const [isOpen, setIsOpen] = (0, import_editor_editing_panel.useStateByElement)(group.id, true);
+  const [isOpen, setIsOpen] = (0, import_editor_editing_panel2.useStateByElement)(group.id, true);
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id = (0, import_react9.useId)();
-  const labelId = `label-${id}`;
-  const contentId = `content-${id}`;
+  const id2 = (0, import_react12.useId)();
+  const labelId = `label-${id2}`;
+  const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
-    import_ui10.ListItemButton,
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
+    import_ui18.ListItemButton,
     {
       id: labelId,
       "aria-controls": contentId,
@@ -1826,45 +2882,45 @@ function OverridePropsGroup({ group, props }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React14.createElement(import_ui10.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React14.createElement(
-      import_ui10.ListItemText,
+    /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React22.createElement(
+      import_ui18.ListItemText,
       {
         secondary: title,
         secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React14.createElement(import_editor_ui5.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React14.createElement(import_ui10.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React14.createElement(import_ui10.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((propId) => (
+    /* @__PURE__ */ React22.createElement(import_editor_ui10.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React22.createElement(import_ui18.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((propId) => (
     // TODO: Render actual controls
-    /* @__PURE__ */ React14.createElement("pre", { key: propId }, JSON.stringify(props[propId], null, 2))
+    /* @__PURE__ */ React22.createElement("pre", { key: propId }, JSON.stringify(props[propId], null, 2))
   )))));
 }
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
 function InstanceEditingPanel() {
-  const { element } = (0, import_editor_editing_panel2.useElement)();
-  const settings = (0, import_editor_elements5.useElementSetting)(element.id, "component_instance");
-  const componentId = (componentInstancePropTypeUtil.extract(settings)?.component_id).value;
-  const component = componentId ? selectComponent((0, import_store26.__getState)(), componentId) : null;
-  const overridableProps = componentId ? selectOverridableProps((0, import_store26.__getState)(), componentId) : null;
-  const componentInstanceId = (0, import_editor_elements5.useSelectedElement)()?.element?.id ?? null;
+  const { element } = (0, import_editor_editing_panel3.useElement)();
+  const settings = (0, import_editor_elements8.useElementSetting)(element.id, "component_instance");
+  const componentId = componentInstancePropTypeUtil.extract(settings)?.component_id?.value;
+  const component = componentId ? selectComponent((0, import_store42.__getState)(), componentId) : null;
+  const overridableProps = componentId ? selectOverridableProps((0, import_store42.__getState)(), componentId) : null;
+  const componentInstanceId = (0, import_editor_elements8.useSelectedElement)()?.element?.id ?? null;
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = (0, import_i18n12.__)("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = (0, import_i18n21.__)("Edit %s", "elementor").replace("%s", component.name);
   const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
   const groups = overridableProps.groups.order.map(
     (groupId) => overridableProps.groups.items[groupId] ? overridableProps.groups.items[groupId] : null
   ).filter(Boolean);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React15.createElement(import_ui11.Stack, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React15.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React15.createElement(import_icons9.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React15.createElement(import_editor_panels.PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React15.createElement(import_ui11.Tooltip, { title: panelTitle }, /* @__PURE__ */ React15.createElement(import_ui11.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React15.createElement(import_icons9.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React15.createElement(import_editor_panels.PanelBody, null, isEmpty ? /* @__PURE__ */ React15.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React15.createElement(import_ui11.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React15.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React23.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React23.createElement(import_editor_panels3.PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React23.createElement(import_ui19.Tooltip, { title: panelTitle }, /* @__PURE__ */ React23.createElement(import_ui19.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React23.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React23.createElement(import_editor_panels3.PanelBody, null, isEmpty ? /* @__PURE__ */ React23.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React23.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
-var React17 = __toESM(require("react"));
-var import_editor_controls = require("@elementor/editor-controls");
-var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var React25 = __toESM(require("react"));
+var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 
 // src/prop-types/component-overridable-prop-type.ts
 var import_editor_props4 = require("@elementor/editor-props");
@@ -1881,18 +2937,18 @@ var componentOverridablePropTypeUtil = (0, import_editor_props4.createPropUtils)
 );
 
 // src/provider/overridable-prop-context.tsx
-var React16 = __toESM(require("react"));
-var import_react10 = require("react");
-var OverridablePropContext = (0, import_react10.createContext)(null);
+var React24 = __toESM(require("react"));
+var import_react13 = require("react");
+var OverridablePropContext = (0, import_react13.createContext)(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React16.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
-var useOverridablePropValue = () => (0, import_react10.useContext)(OverridablePropContext)?.value;
+var useOverridablePropValue = () => (0, import_react13.useContext)(OverridablePropContext)?.value;
 
 // src/store/actions/update-overridable-prop-origin-value.ts
-var import_store28 = require("@elementor/store");
+var import_store44 = require("@elementor/store");
 function updateOverridablePropOriginValue(componentId, propValue) {
-  const overridableProps = selectOverridableProps((0, import_store28.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store44.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1910,7 +2966,7 @@ function updateOverridablePropOriginValue(componentId, propValue) {
       }
     }
   };
-  (0, import_store28.__dispatch)(
+  (0, import_store44.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: newOverridableProps
@@ -1923,8 +2979,8 @@ function OverridablePropControl({
   OriginalControl,
   ...props
 }) {
-  const { elementType } = (0, import_editor_editing_panel3.useElement)();
-  const { value, bind, setValue, placeholder, ...propContext } = (0, import_editor_controls.useBoundProp)(componentOverridablePropTypeUtil);
+  const { elementType } = (0, import_editor_editing_panel4.useElement)();
+  const { value, bind, setValue, placeholder, ...propContext } = (0, import_editor_controls2.useBoundProp)(componentOverridablePropTypeUtil);
   const componentId = useCurrentComponentId();
   if (!componentId) {
     return null;
@@ -1940,14 +2996,14 @@ function OverridablePropControl({
     setValue(propValue);
     updateOverridablePropOriginValue(componentId, propValue);
   };
-  const propType = (0, import_editor_editing_panel3.createTopLevelObjectType)({
+  const propType = (0, import_editor_editing_panel4.createTopLevelObjectType)({
     schema: {
       [bind]: elementType.propsSchema[bind]
     }
   });
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React17.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React17.createElement(
-    import_editor_controls.PropProvider,
+  return /* @__PURE__ */ React25.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React25.createElement(
+    import_editor_controls2.PropProvider,
     {
       ...propContext,
       propType,
@@ -1955,23 +3011,22 @@ function OverridablePropControl({
       value: { [bind]: value.origin_value },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React17.createElement(import_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(import_editor_controls.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React17.createElement(OriginalControl, { ...props })))
+    /* @__PURE__ */ React25.createElement(import_editor_controls2.PropKeyProvider, { bind }, /* @__PURE__ */ React25.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React25.createElement(OriginalControl, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-var React20 = __toESM(require("react"));
-var import_editor_controls2 = require("@elementor/editor-controls");
-var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
-var import_editor_elements6 = require("@elementor/editor-elements");
-var import_store35 = require("@elementor/store");
-var import_ui14 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var React27 = __toESM(require("react"));
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
+var import_editor_elements9 = require("@elementor/editor-elements");
+var import_store51 = require("@elementor/store");
+var import_ui21 = require("@elementor/ui");
+var import_i18n23 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
-var import_store31 = require("@elementor/store");
-var import_utils5 = require("@elementor/utils");
-var import_i18n13 = require("@wordpress/i18n");
+var import_store47 = require("@elementor/store");
+var import_utils7 = require("@elementor/utils");
 function setOverridableProp({
   componentId,
   overrideKey,
@@ -1983,7 +3038,7 @@ function setOverridableProp({
   widgetType,
   originValue
 }) {
-  const overridableProps = selectOverridableProps((0, import_store31.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store47.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1991,13 +3046,12 @@ function setOverridableProp({
   const duplicatedTargetProps = Object.values(overridableProps.props).filter(
     (prop) => prop.elementId === elementId && prop.propKey === propKey && prop !== existingOverridableProp
   );
-  const { props: prevProps, groups: prevGroups } = { ...overridableProps };
-  const { groups: updatedGroups, currentGroupId } = getUpdatedGroups(
-    prevGroups,
-    groupId || existingOverridableProp?.groupId
+  const { groups: groupsAfterResolve, groupId: currentGroupId } = resolveOrCreateGroup(
+    overridableProps.groups,
+    groupId || existingOverridableProp?.groupId || void 0
   );
   const overridableProp = {
-    overrideKey: existingOverridableProp?.overrideKey || (0, import_utils5.generateUniqueId)("prop"),
+    overrideKey: existingOverridableProp?.overrideKey || (0, import_utils7.generateUniqueId)("prop"),
     label,
     elementId,
     propKey,
@@ -2006,31 +3060,21 @@ function setOverridableProp({
     originValue,
     groupId: currentGroupId
   };
-  const { props: propsWithoutDuplicates, groups: groupsWithoutDuplicates } = removeProps({
-    props: prevProps,
-    groups: updatedGroups,
-    propsToRemove: duplicatedTargetProps
-  });
+  const stateAfterRemovingDuplicates = removePropsFromState(
+    { ...overridableProps, groups: groupsAfterResolve },
+    duplicatedTargetProps
+  );
   const props = {
-    ...propsWithoutDuplicates,
+    ...stateAfterRemovingDuplicates.props,
     [overridableProp.overrideKey]: overridableProp
   };
-  const groups = {
-    items: {
-      ...groupsWithoutDuplicates.items,
-      [currentGroupId]: getGroupWithProp(groupsWithoutDuplicates, currentGroupId, overridableProp)
-    },
-    order: groupsWithoutDuplicates.order.includes(currentGroupId) ? groupsWithoutDuplicates.order : [...groupsWithoutDuplicates.order, currentGroupId]
-  };
+  let groups = addPropToGroup(stateAfterRemovingDuplicates.groups, currentGroupId, overridableProp.overrideKey);
+  groups = ensureGroupInOrder(groups, currentGroupId);
   const isChangingGroups = existingOverridableProp && existingOverridableProp.groupId !== currentGroupId;
   if (isChangingGroups) {
-    groups.items[existingOverridableProp.groupId] = getGroupWithoutProp(
-      groupsWithoutDuplicates,
-      existingOverridableProp.groupId,
-      overridableProp
-    );
+    groups = removePropFromGroup(groups, existingOverridableProp.groupId, overridableProp.overrideKey);
   }
-  (0, import_store31.__dispatch)(
+  (0, import_store47.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -2041,83 +3085,15 @@ function setOverridableProp({
   );
   return overridableProp;
 }
-function getUpdatedGroups(groups, groupId) {
-  if (!groupId) {
-    if (groups.order.length > 0) {
-      return { groups, currentGroupId: groups.order[0] };
-    }
-    return addNewGroup(groups);
-  }
-  if (!groups.items[groupId]) {
-    return addNewGroup(groups, groupId);
-  }
-  return { groups, currentGroupId: groupId };
-}
-function addNewGroup(groups, groupId) {
-  const currentGroupId = groupId || (0, import_utils5.generateUniqueId)("group");
-  const updatedGroups = {
-    ...groups,
-    items: {
-      ...groups.items,
-      [currentGroupId]: {
-        id: currentGroupId,
-        label: (0, import_i18n13.__)("Default", "elementor"),
-        props: []
-      }
-    },
-    order: [...groups.order, currentGroupId]
-  };
-  return { groups: updatedGroups, currentGroupId };
-}
-function getGroupWithProp(groups, groupId, overridableProp) {
-  const group = { ...groups.items[groupId] };
-  if (!group.props.includes(overridableProp.overrideKey)) {
-    group.props = [...group.props, overridableProp.overrideKey];
-  }
-  return group;
-}
-function getGroupWithoutProp(groups, groupId, overridableProp) {
-  const group = { ...groups.items[groupId] };
-  if (group) {
-    group.props = group.props.filter((key) => key !== overridableProp.overrideKey);
-  }
-  return group;
-}
-function removeProps({
-  props,
-  groups,
-  propsToRemove
-}) {
-  const allProps = Object.fromEntries(
-    Object.entries(props).filter(([, prop]) => !propsToRemove.includes(prop))
-  );
-  const overrideKeysToRemove = propsToRemove.map((prop) => prop.overrideKey);
-  const allGroupItems = Object.fromEntries(
-    Object.entries(groups.items).map(([groupId, group]) => [
-      groupId,
-      {
-        ...group,
-        props: group.props.filter((prop) => !overrideKeysToRemove.includes(prop))
-      }
-    ])
-  );
-  return {
-    props: allProps,
-    groups: {
-      items: allGroupItems,
-      order: groups.order.filter((groupId) => !overrideKeysToRemove.includes(groupId))
-    }
-  };
-}
 
 // src/components/overridable-props/indicator.tsx
-var React18 = __toESM(require("react"));
-var import_react11 = require("react");
-var import_icons10 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
-var SIZE = "tiny";
-var IconContainer = (0, import_ui12.styled)(import_ui12.Box)`
+var React26 = __toESM(require("react"));
+var import_react14 = require("react");
+var import_icons15 = require("@elementor/icons");
+var import_ui20 = require("@elementor/ui");
+var import_i18n22 = require("@wordpress/i18n");
+var SIZE2 = "tiny";
+var IconContainer = (0, import_ui20.styled)(import_ui20.Box)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -2134,7 +3110,7 @@ var IconContainer = (0, import_ui12.styled)(import_ui12.Box)`
 		stroke-width: 2px;
 	}
 `;
-var Content = (0, import_ui12.styled)(import_ui12.Box)`
+var Content = (0, import_ui20.styled)(import_ui20.Box)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -2171,79 +3147,22 @@ var Content = (0, import_ui12.styled)(import_ui12.Box)`
 		}
 	}
 `;
-var Indicator = (0, import_react11.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React18.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React18.createElement(
+var Indicator = (0, import_react14.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React26.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React26.createElement(
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? (0, import_i18n14.__)("Overridable property", "elementor") : (0, import_i18n14.__)("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? (0, import_i18n22.__)("Overridable property", "elementor") : (0, import_i18n22.__)("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React18.createElement(import_icons10.CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React18.createElement(import_icons10.PlusIcon, { fontSize: SIZE })
+  isOverridable ? /* @__PURE__ */ React26.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React26.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
 )));
 
-// src/components/overridable-props/overridable-prop-form.tsx
-var React19 = __toESM(require("react"));
-var import_react12 = require("react");
-var import_editor_ui6 = require("@elementor/editor-ui");
-var import_ui13 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
-var SIZE2 = "tiny";
-var DEFAULT_GROUP = { value: null, label: (0, import_i18n15.__)("Default", "elementor") };
-function OverridablePropForm({ onSubmit, groups, currentValue }) {
-  const [propLabel, setPropLabel] = (0, import_react12.useState)(currentValue?.label ?? null);
-  const [group, setGroup] = (0, import_react12.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
-  const name = (0, import_i18n15.__)("Name", "elementor");
-  const groupName = (0, import_i18n15.__)("Group Name", "elementor");
-  const isCreate = currentValue === void 0;
-  const title = isCreate ? (0, import_i18n15.__)("Create new property", "elementor") : (0, import_i18n15.__)("Update property", "elementor");
-  const ctaLabel = isCreate ? (0, import_i18n15.__)("Create", "elementor") : (0, import_i18n15.__)("Update", "elementor");
-  return /* @__PURE__ */ React19.createElement(import_editor_ui6.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React19.createElement(import_ui13.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
-    import_ui13.Stack,
-    {
-      direction: "row",
-      alignItems: "center",
-      py: 1,
-      px: 1.5,
-      sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
-    },
-    /* @__PURE__ */ React19.createElement(import_ui13.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__PURE__ */ React19.createElement(import_ui13.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui13.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(import_ui13.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React19.createElement(import_ui13.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
-    import_ui13.TextField,
-    {
-      name,
-      size: SIZE2,
-      fullWidth: true,
-      placeholder: (0, import_i18n15.__)("Enter value", "elementor"),
-      value: propLabel ?? "",
-      onChange: (e) => setPropLabel(e.target.value)
-    }
-  ))), /* @__PURE__ */ React19.createElement(import_ui13.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui13.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(import_ui13.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React19.createElement(import_ui13.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
-    import_ui13.Select,
-    {
-      name: groupName,
-      size: SIZE2,
-      fullWidth: true,
-      value: group ?? null,
-      onChange: setGroup,
-      displayEmpty: true,
-      renderValue: (selectedValue) => {
-        if (!selectedValue || selectedValue === "") {
-          const [firstGroup = DEFAULT_GROUP] = groups ?? [];
-          return firstGroup.label;
-        }
-        return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
-      }
-    },
-    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React19.createElement(import_editor_ui6.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React19.createElement(import_ui13.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui13.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
-}
-
 // src/components/overridable-props/utils/get-overridable-prop.ts
-var import_store33 = require("@elementor/store");
+var import_store49 = require("@elementor/store");
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps((0, import_store33.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store49.__getState)(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -2253,31 +3172,31 @@ function getOverridableProp({
 // src/components/overridable-props/overridable-prop-indicator.tsx
 var FORBIDDEN_KEYS = ["_cssid", "attributes"];
 function OverridablePropIndicator() {
-  const { bind } = (0, import_editor_controls2.useBoundProp)();
+  const { bind } = (0, import_editor_controls3.useBoundProp)();
   const componentId = useCurrentComponentId();
   if (!isPropAllowed(bind) || !componentId) {
     return null;
   }
-  const overridableProps = selectOverridableProps((0, import_store35.__getState)(), componentId);
-  return /* @__PURE__ */ React20.createElement(Content2, { componentId, overridableProps });
+  const overridableProps = selectOverridableProps((0, import_store51.__getState)(), componentId);
+  return /* @__PURE__ */ React27.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
     element: { id: elementId },
     elementType
-  } = (0, import_editor_editing_panel4.useElement)();
-  const { value, bind, propType } = (0, import_editor_controls2.useBoundProp)();
+  } = (0, import_editor_editing_panel5.useElement)();
+  const { value, bind, propType } = (0, import_editor_controls3.useBoundProp)();
   const contextOverridableValue = useOverridablePropValue();
-  const { value: boundPropOverridableValue, setValue: setOverridableValue } = (0, import_editor_controls2.useBoundProp)(
+  const { value: boundPropOverridableValue, setValue: setOverridableValue } = (0, import_editor_controls3.useBoundProp)(
     componentOverridablePropTypeUtil
   );
   const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
-  const popupState = (0, import_ui14.usePopupState)({
+  const popupState = (0, import_ui21.usePopupState)({
     variant: "popover"
   });
-  const triggerProps = (0, import_ui14.bindTrigger)(popupState);
-  const popoverProps = (0, import_ui14.bindPopover)(popupState);
-  const { elType } = (0, import_editor_elements6.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
+  const triggerProps = (0, import_ui21.bindTrigger)(popupState);
+  const popoverProps = (0, import_ui21.bindPopover)(popupState);
+  const { elType } = (0, import_editor_elements9.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
   const handleSubmit = ({ label, group }) => {
     const originValue = !overridableValue ? value ?? propType.default : overridableValue?.origin_value ?? {};
     const overridablePropConfig = setOverridableProp({
@@ -2300,8 +3219,8 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui14.Tooltip, { placement: "top", title: (0, import_i18n16.__)("Override Property", "elementor") }, /* @__PURE__ */ React20.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React20.createElement(
-    import_ui14.Popover,
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(import_ui21.Tooltip, { placement: "top", title: (0, import_i18n23.__)("Override Property", "elementor") }, /* @__PURE__ */ React27.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React27.createElement(
+    import_ui21.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: {
@@ -2317,7 +3236,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React27.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -2339,11 +3258,11 @@ var import_editor_mcp2 = require("@elementor/editor-mcp");
 
 // src/mcp/save-as-component-tool.ts
 var import_editor_canvas7 = require("@elementor/editor-canvas");
-var import_editor_elements7 = require("@elementor/editor-elements");
+var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_mcp = require("@elementor/editor-mcp");
 var import_http_client2 = require("@elementor/http-client");
 var import_schema6 = require("@elementor/schema");
-var import_utils6 = require("@elementor/utils");
+var import_utils8 = require("@elementor/utils");
 var InputSchema = {
   element_id: import_schema6.z.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.'
@@ -2366,7 +3285,7 @@ var OutputSchema = {
   message: import_schema6.z.string().optional().describe("Additional information about the operation result"),
   component_uid: import_schema6.z.string().optional().describe("The unique identifier of the newly created component (only present on success)")
 };
-var ERROR_MESSAGES = {
+var ERROR_MESSAGES2 = {
   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."
@@ -2374,23 +3293,23 @@ var ERROR_MESSAGES = {
 var handleSaveAsComponent = async (params) => {
   const { element_id: elementId, component_name: componentName, overridable_props: overridablePropsInput } = params;
   const validElementTypes = getValidElementTypes();
-  const container = (0, import_editor_elements7.getContainer)(elementId);
+  const container = (0, import_editor_elements10.getContainer)(elementId);
   if (!container) {
-    throw new Error(ERROR_MESSAGES.ELEMENT_NOT_FOUND);
+    throw new Error(ERROR_MESSAGES2.ELEMENT_NOT_FOUND);
   }
   const elType = container.model.get("elType");
   if (!validElementTypes.includes(elType)) {
-    throw new Error(ERROR_MESSAGES.ELEMENT_NOT_ONE_OF_TYPES(validElementTypes));
+    throw new Error(ERROR_MESSAGES2.ELEMENT_NOT_ONE_OF_TYPES(validElementTypes));
   }
   const element = container.model.toJSON({ remove: ["default"] });
   if (element?.isLocked) {
-    throw new Error(ERROR_MESSAGES.ELEMENT_IS_LOCKED);
+    throw new Error(ERROR_MESSAGES2.ELEMENT_IS_LOCKED);
   }
   const overridableProps = overridablePropsInput ? enrichOverridableProps(overridablePropsInput, element) : void 0;
   if (overridableProps) {
     updateElementDataWithOverridableProps(element, overridableProps);
   }
-  const uid = (0, import_utils6.generateUniqueId)("component");
+  const uid = (0, import_utils8.generateUniqueId)("component");
   try {
     await apiClient.validate({
       items: [
@@ -2412,7 +3331,7 @@ var handleSaveAsComponent = async (params) => {
 };
 function enrichOverridableProps(input, rootElement) {
   const enrichedProps = {};
-  const defaultGroupId = (0, import_utils6.generateUniqueId)("group");
+  const defaultGroupId = (0, import_utils8.generateUniqueId)("group");
   Object.entries(input.props).forEach(([, prop]) => {
     const { elementId, propKey } = prop;
     const element = findElementById(rootElement, elementId);
@@ -2421,7 +3340,7 @@ function enrichOverridableProps(input, rootElement) {
     }
     const elType = element.elType;
     const widgetType = element.widgetType || element.elType;
-    const elementType = (0, import_editor_elements7.getElementType)(widgetType);
+    const elementType = (0, import_editor_elements10.getElementType)(widgetType);
     if (!elementType) {
       throw new Error(
         `Element type "${widgetType}" is not atomic or does not have a settings schema. Cannot expose property "${propKey}" for element "${elementId}".`
@@ -2433,7 +3352,7 @@ function enrichOverridableProps(input, rootElement) {
         `Property "${propKey}" does not exist in element "${elementId}" (type: ${widgetType}). Available properties: ${availableProps}`
       );
     }
-    const overrideKey = (0, import_utils6.generateUniqueId)("prop");
+    const overrideKey = (0, import_utils8.generateUniqueId)("prop");
     const originValue = element.settings?.[propKey] ? element.settings[propKey] : elementType.propsSchema[propKey].default ?? null;
     const label = generateLabel(propKey);
     enrichedProps[overrideKey] = {
@@ -2491,11 +3410,11 @@ function findElementById(root, targetId) {
   return null;
 }
 function generateLabel(propKey) {
-  const uniqueId = (0, import_utils6.generateUniqueId)("prop");
+  const uniqueId = (0, import_utils8.generateUniqueId)("prop");
   return `${uniqueId} - ${propKey}`;
 }
 function getValidElementTypes() {
-  const types = (0, import_editor_elements7.getWidgetsCache)();
+  const types = (0, import_editor_elements10.getWidgetsCache)();
   if (!types) {
     return [];
   }
@@ -2667,29 +3586,29 @@ function initMcp() {
 }
 
 // src/populate-store.ts
-var import_react13 = require("react");
-var import_store37 = require("@elementor/store");
+var import_react15 = require("react");
+var import_store53 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react13.useEffect)(() => {
-    (0, import_store37.__dispatch)(loadComponents());
+  (0, import_react15.useEffect)(() => {
+    (0, import_store53.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store38 = require("@elementor/store");
-function removeComponentStyles(id) {
-  apiClient.invalidateComponentConfigCache(id);
-  (0, import_store38.__dispatch)(slice.actions.removeStyles({ id }));
+var import_store54 = require("@elementor/store");
+function removeComponentStyles(id2) {
+  apiClient.invalidateComponentConfigCache(id2);
+  (0, import_store54.__dispatch)(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store40 = require("@elementor/store");
+var import_store56 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store40.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store56.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -2697,29 +3616,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store40.__getState)());
+      return selectFlatStyles((0, import_store56.__getState)());
     },
-    get: (id) => {
-      return selectFlatStyles((0, import_store40.__getState)()).find((style) => style.id === id) ?? null;
+    get: (id2) => {
+      return selectFlatStyles((0, import_store56.__getState)()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
-var import_editor_elements8 = require("@elementor/editor-elements");
-var import_store42 = require("@elementor/store");
+var import_editor_elements11 = require("@elementor/editor-elements");
+var import_store58 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store42.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store58.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store42.__dispatch)(
+    (0, import_store58.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -2729,7 +3648,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store42.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store58.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -2771,7 +3690,7 @@ function shouldUpdateElement(element, uidToComponentId) {
   return { shouldUpdate: false, newComponentId: null };
 }
 function updateElementComponentId(elementId, componentId) {
-  (0, import_editor_elements8.updateElementSettings)({
+  (0, import_editor_elements11.updateElementSettings)({
     id: elementId,
     props: {
       component_instance: {
@@ -2786,7 +3705,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-var import_store44 = require("@elementor/store");
+var import_store60 = require("@elementor/store");
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -2794,7 +3713,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps((0, import_store44.__getState)(), currentDocument.id);
+  const overridableProps = selectOverridableProps((0, import_store60.__getState)(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -2802,7 +3721,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_store46 = require("@elementor/store");
+var import_store62 = require("@elementor/store");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -2815,7 +3734,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents((0, import_store46.__getState)());
+    const archivedComponents = selectArchivedComponents((0, import_store62.__getState)());
     if (!archivedComponents.length) {
       return;
     }
@@ -2836,19 +3755,19 @@ var updateArchivedComponentBeforeSave = async () => {
 };
 
 // src/sync/update-components-before-save.ts
-var import_editor_documents9 = require("@elementor/editor-documents");
+var import_editor_documents11 = require("@elementor/editor-documents");
 async function updateComponentsBeforeSave({ status, elements }) {
   if (status !== "publish") {
     return;
   }
   const componentIds = await getComponentIds(elements);
   const componentDocumentData = await Promise.all(componentIds.map(getComponentDocumentData));
-  const draftIds = componentDocumentData.filter((document) => !!document).filter(import_editor_documents9.isDocumentDirty).map((document) => document.id);
+  const draftIds = componentDocumentData.filter((document) => !!document).filter(import_editor_documents11.isDocumentDirty).map((document) => document.id);
   if (draftIds.length === 0) {
     return;
   }
   await apiClient.updateStatuses(draftIds, "publish");
-  draftIds.forEach((id) => invalidateComponentDocumentData(id));
+  draftIds.forEach((id2) => invalidateComponentDocumentData(id2));
 }
 
 // src/sync/before-save.ts
@@ -2865,13 +3784,14 @@ var beforeSave = ({ container, status }) => {
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store48.__registerSlice)(slice);
+  (0, import_store64.__registerSlice)(slice);
+  (0, import_editor_panels4.__registerPanel)(panel);
   (0, import_editor_canvas8.registerElementType)(
     TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
   (0, import_editor_v1_adapters6.registerDataHook)("dependency", "editor/documents/close", (args) => {
-    const document = (0, import_editor_documents10.getV1CurrentDocument)();
+    const document = (0, import_editor_documents12.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
       args.mode = "autosave";
     }
@@ -2881,7 +3801,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n17.__)("Components", "elementor"),
+    label: (0, import_i18n24.__)("Components", "elementor"),
     component: Components
   });
   (0, import_editor.injectIntoTop)({
@@ -2896,28 +3816,28 @@ function init() {
     id: "edit-component",
     component: EditComponent
   });
-  (0, import_editor_editing_panel5.injectIntoPanelHeaderTop)({
+  (0, import_editor_editing_panel6.injectIntoPanelHeaderTop)({
     id: "component-panel-header",
     component: ComponentPanelHeader
   });
   (0, import_editor_v1_adapters6.registerDataHook)("after", "editor/documents/attach-preview", async () => {
-    const { id, config } = (0, import_editor_documents10.getV1CurrentDocument)();
-    if (id) {
-      removeComponentStyles(id);
+    const { id: id2, config } = (0, import_editor_documents12.getV1CurrentDocument)();
+    if (id2) {
+      removeComponentStyles(id2);
     }
     await loadComponentsAssets(config?.elements ?? []);
   });
-  (0, import_editor_editing_panel5.registerFieldIndicator)({
-    fieldType: import_editor_editing_panel5.FIELD_TYPE.SETTINGS,
+  (0, import_editor_editing_panel6.registerFieldIndicator)({
+    fieldType: import_editor_editing_panel6.FIELD_TYPE.SETTINGS,
     id: "component-overridable-prop",
     priority: 1,
     indicator: OverridablePropIndicator
   });
-  (0, import_editor_editing_panel5.registerControlReplacement)({
+  (0, import_editor_editing_panel6.registerControlReplacement)({
     component: OverridablePropControl,
     condition: ({ value }) => componentOverridablePropTypeUtil.isValid(value)
   });
-  (0, import_editor_editing_panel5.registerEditingPanelReplacement)({
+  (0, import_editor_editing_panel6.registerEditingPanelReplacement)({
     id: "component-instance-edit-panel",
     condition: (_, elementType) => elementType.key === "e-component",
     component: InstanceEditingPanel