@elementor/editor-components 3.35.0-430 → 3.35.0-432

package/dist/index.js

@@ -44,7 +44,7 @@ var import_editor_panels4 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 var import_store78 = require("@elementor/store");
-var import_i18n29 = require("@wordpress/i18n");
+var import_i18n30 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -379,7 +379,7 @@ var import_editor_documents5 = require("@elementor/editor-documents");
 var import_icons7 = require("@elementor/icons");
 var import_store25 = require("@elementor/store");
 var import_ui10 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 
 // src/hooks/use-navigate-back.ts
 var import_react = require("react");
@@ -463,7 +463,7 @@ var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_ui8 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/components/component-properties-panel/component-properties-panel-content.tsx
 var React7 = __toESM(require("react"));
@@ -473,7 +473,7 @@ var import_editor_panels = require("@elementor/editor-panels");
 var import_icons5 = require("@elementor/icons");
 var import_ui7 = require("@elementor/ui");
 var import_utils2 = require("@elementor/utils");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/store/actions/add-overridable-group.ts
 var import_store7 = require("@elementor/store");
@@ -926,7 +926,7 @@ var React6 = __toESM(require("react"));
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/component-properties-panel/property-item.tsx
 var React5 = __toESM(require("react"));
@@ -939,18 +939,55 @@ var React3 = __toESM(require("react"));
 var import_react3 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui3 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+
+// src/components/overridable-props/utils/validate-prop-label.ts
 var import_i18n4 = require("@wordpress/i18n");
+var ERROR_MESSAGES = {
+  EMPTY_NAME: (0, import_i18n4.__)("Property name is required", "elementor"),
+  DUPLICATE_NAME: (0, import_i18n4.__)("Property name already exists", "elementor")
+};
+function validatePropLabel(label, existingLabels, currentLabel) {
+  const trimmedLabel = label.trim();
+  if (!trimmedLabel) {
+    return { isValid: false, errorMessage: ERROR_MESSAGES.EMPTY_NAME };
+  }
+  const normalizedLabel = trimmedLabel.toLowerCase();
+  const normalizedCurrentLabel = currentLabel?.trim().toLowerCase();
+  const isDuplicate = existingLabels.some((existingLabel) => {
+    const normalizedExisting = existingLabel.trim().toLowerCase();
+    if (normalizedCurrentLabel && normalizedExisting === normalizedCurrentLabel) {
+      return false;
+    }
+    return normalizedExisting === normalizedLabel;
+  });
+  if (isDuplicate) {
+    return { isValid: false, errorMessage: ERROR_MESSAGES.DUPLICATE_NAME };
+  }
+  return { isValid: true, errorMessage: null };
+}
+
+// src/components/overridable-props/overridable-prop-form.tsx
 var SIZE = "tiny";
-var DEFAULT_GROUP = { value: null, label: (0, import_i18n4.__)("Default", "elementor") };
-function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
+var DEFAULT_GROUP = { value: null, label: (0, import_i18n5.__)("Default", "elementor") };
+function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels = [], sx }) {
   const [propLabel, setPropLabel] = (0, import_react3.useState)(currentValue?.label ?? null);
   const [group, setGroup] = (0, import_react3.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
-  const name = (0, import_i18n4.__)("Name", "elementor");
-  const groupName = (0, import_i18n4.__)("Group Name", "elementor");
+  const [error, setError] = (0, import_react3.useState)(null);
+  const name = (0, import_i18n5.__)("Name", "elementor");
+  const groupName = (0, import_i18n5.__)("Group Name", "elementor");
   const isCreate = currentValue === void 0;
-  const title = isCreate ? (0, import_i18n4.__)("Create new property", "elementor") : (0, import_i18n4.__)("Update property", "elementor");
-  const ctaLabel = isCreate ? (0, import_i18n4.__)("Create", "elementor") : (0, import_i18n4.__)("Update", "elementor");
-  return /* @__PURE__ */ React3.createElement(import_editor_ui2.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React3.createElement(import_ui3.Stack, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
+  const title = isCreate ? (0, import_i18n5.__)("Create new property", "elementor") : (0, import_i18n5.__)("Update property", "elementor");
+  const ctaLabel = isCreate ? (0, import_i18n5.__)("Create", "elementor") : (0, import_i18n5.__)("Update", "elementor");
+  const handleSubmit = () => {
+    const validationResult = validatePropLabel(propLabel ?? "", existingLabels, currentValue?.label);
+    if (!validationResult.isValid) {
+      setError(validationResult.errorMessage);
+      return;
+    }
+    onSubmit({ label: propLabel ?? "", group });
+  };
+  return /* @__PURE__ */ React3.createElement(import_editor_ui2.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React3.createElement(import_ui3.Stack, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
     import_ui3.Stack,
     {
       direction: "row",
@@ -966,9 +1003,20 @@ function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
       name,
       size: SIZE,
       fullWidth: true,
-      placeholder: (0, import_i18n4.__)("Enter value", "elementor"),
+      placeholder: (0, import_i18n5.__)("Enter value", "elementor"),
       value: propLabel ?? "",
-      onChange: (e) => setPropLabel(e.target.value)
+      onChange: (e) => {
+        const newValue = e.target.value;
+        setPropLabel(newValue);
+        const validationResult = validatePropLabel(
+          newValue,
+          existingLabels,
+          currentValue?.label
+        );
+        setError(validationResult.errorMessage);
+      },
+      error: Boolean(error),
+      helperText: error
     }
   ))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
     import_ui3.Select,
@@ -988,7 +1036,17 @@ function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
       }
     },
     (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React3.createElement(import_editor_ui2.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React3.createElement(import_ui3.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React3.createElement(import_ui3.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+  ))), /* @__PURE__ */ React3.createElement(import_ui3.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React3.createElement(
+    import_ui3.Button,
+    {
+      type: "submit",
+      disabled: !propLabel || Boolean(error),
+      variant: "contained",
+      color: "primary",
+      size: "small"
+    },
+    ctaLabel
+  ))));
 }
 
 // src/components/component-properties-panel/sortable.tsx
@@ -1061,6 +1119,7 @@ function PropertyItem({
   sortableTriggerProps,
   isDragPlaceholder,
   groups,
+  existingLabels,
   onDelete,
   onUpdate
 }) {
@@ -1136,6 +1195,7 @@ function PropertyItem({
         onSubmit: handleSubmit,
         currentValue: prop,
         groups,
+        existingLabels,
         sx: { width: "100%" }
       }
     )
@@ -1246,7 +1306,7 @@ function PropertiesGroup({
           className: "group-menu",
           size: "tiny",
           sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
-          "aria-label": (0, import_i18n5.__)("Group actions", "elementor"),
+          "aria-label": (0, import_i18n6.__)("Group actions", "elementor"),
           ...(0, import_ui6.bindTrigger)(popupState)
         },
         /* @__PURE__ */ React6.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" })
@@ -1258,6 +1318,7 @@ function PropertiesGroup({
         sortableTriggerProps: { ...triggerProps, style: triggerStyle },
         isDragPlaceholder: isItemDragPlaceholder,
         groups: allGroups,
+        existingLabels: Object.values(props).map((p) => p.label),
         onDelete: onPropertyDelete,
         onUpdate: (data) => onPropertyUpdate(prop.overrideKey, data)
       }
@@ -1269,11 +1330,11 @@ function PropertiesGroup({
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" }
       },
-      /* @__PURE__ */ React6.createElement(import_editor_ui3.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React6.createElement(import_ui6.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n5.__)("Rename", "elementor"))),
+      /* @__PURE__ */ React6.createElement(import_editor_ui3.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React6.createElement(import_ui6.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n6.__)("Rename", "elementor"))),
       /* @__PURE__ */ React6.createElement(
         import_ui6.Tooltip,
         {
-          title: hasProperties ? (0, import_i18n5.__)("To delete the group, first remove all the properties", "elementor") : "",
+          title: hasProperties ? (0, import_i18n6.__)("To delete the group, first remove all the properties", "elementor") : "",
           placement: "right"
         },
         /* @__PURE__ */ React6.createElement("span", null, /* @__PURE__ */ React6.createElement(import_editor_ui3.MenuListItem, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React6.createElement(
@@ -1282,7 +1343,7 @@ function PropertiesGroup({
             variant: "caption",
             sx: { color: hasProperties ? "text.disabled" : "error.light" }
           },
-          (0, import_i18n5.__)("Delete", "elementor")
+          (0, import_i18n6.__)("Delete", "elementor")
         )))
       )
     )
@@ -1293,7 +1354,7 @@ function PropertiesGroup({
 var import_react4 = require("react");
 var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_ui4 = require("@elementor/editor-ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/store/actions/rename-overridable-group.ts
 var import_store21 = require("@elementor/store");
@@ -1320,19 +1381,19 @@ function renameOverridableGroup({ componentId, groupId, label }) {
 }
 
 // src/components/component-properties-panel/utils/validate-group-label.ts
-var import_i18n6 = require("@wordpress/i18n");
-var ERROR_MESSAGES = {
-  EMPTY_NAME: (0, import_i18n6.__)("Group name is required", "elementor"),
-  DUPLICATE_NAME: (0, import_i18n6.__)("Group name already exists", "elementor")
+var import_i18n7 = require("@wordpress/i18n");
+var ERROR_MESSAGES2 = {
+  EMPTY_NAME: (0, import_i18n7.__)("Group name is required", "elementor"),
+  DUPLICATE_NAME: (0, import_i18n7.__)("Group name already exists", "elementor")
 };
 function validateGroupLabel(label, existingGroups) {
   const trimmedLabel = label.trim();
   if (!trimmedLabel) {
-    return ERROR_MESSAGES.EMPTY_NAME;
+    return ERROR_MESSAGES2.EMPTY_NAME;
   }
   const isDuplicate = Object.values(existingGroups).some((group) => group.label === trimmedLabel);
   if (isDuplicate) {
-    return ERROR_MESSAGES.DUPLICATE_NAME;
+    return ERROR_MESSAGES2.DUPLICATE_NAME;
   }
   return "";
 }
@@ -1352,7 +1413,7 @@ function useCurrentEditableItem() {
   };
   const handleSubmit = (newLabel) => {
     if (!editingGroupId || !currentComponentId) {
-      throw new Error((0, import_i18n7.__)("Group ID or component ID is missing", "elementor"));
+      throw new Error((0, import_i18n8.__)("Group ID or component ID is missing", "elementor"));
     }
     renameOverridableGroup({
       componentId: currentComponentId,
@@ -1460,20 +1521,20 @@ function ComponentPropertiesPanelContent({ onClose }) {
     deleteOverridableGroup({ componentId: currentComponentId, groupId });
     (0, import_editor_documents4.setDocumentModifiedStatus)(true);
   };
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React7.createElement(import_ui7.Stack, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React7.createElement(import_icons5.ComponentPropListIcon, { fontSize: "tiny" }), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { variant: "subtitle2" }, (0, import_i18n8.__)("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n8.__)("Add new group", "elementor") }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React7.createElement(import_ui7.Stack, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React7.createElement(import_icons5.ComponentPropListIcon, { fontSize: "tiny" }), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { variant: "subtitle2" }, (0, import_i18n9.__)("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n9.__)("Add new group", "elementor") }, /* @__PURE__ */ React7.createElement(
     import_ui7.IconButton,
     {
       size: "tiny",
-      "aria-label": (0, import_i18n8.__)("Add new group", "elementor"),
+      "aria-label": (0, import_i18n9.__)("Add new group", "elementor"),
       onClick: handleAddGroupClick
     },
     /* @__PURE__ */ React7.createElement(import_icons5.FolderPlusIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n8.__)("Close panel", "elementor") }, /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n9.__)("Close panel", "elementor") }, /* @__PURE__ */ React7.createElement(
     import_ui7.IconButton,
     {
       ref: introductionRef,
       size: "tiny",
-      "aria-label": (0, import_i18n8.__)("Close panel", "elementor"),
+      "aria-label": (0, import_i18n9.__)("Close panel", "elementor"),
       onClick: onClose
     },
     /* @__PURE__ */ React7.createElement(import_icons5.XIcon, { fontSize: "tiny" })
@@ -1519,14 +1580,14 @@ function ComponentPropertiesPanel() {
     }
   )))));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(import_ui8.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(import_ui8.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, (0, import_i18n9.__)("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(import_ui8.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(import_ui8.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, (0, import_i18n10.__)("Something went wrong", "elementor"))));
 
 // src/components/component-panel-header/component-badge.tsx
 var React9 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_icons6 = require("@elementor/icons");
 var import_ui9 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 var ComponentsBadge = React9.forwardRef(
   ({ overridesCount, onClick }, ref) => {
     const prevCount = usePrevious(overridesCount);
@@ -1548,7 +1609,7 @@ var ComponentsBadge = React9.forwardRef(
           value: "overrides",
           size: "tiny",
           onClick,
-          "aria-label": (0, import_i18n10.__)("View overrides", "elementor")
+          "aria-label": (0, import_i18n11.__)("View overrides", "elementor")
         },
         /* @__PURE__ */ React9.createElement(import_icons6.ComponentPropListIcon, { fontSize: "tiny" })
       )
@@ -1611,7 +1672,7 @@ var ComponentPanelHeader = () => {
       justifyContent: "space-between",
       sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
     },
-    /* @__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(import_ui10.Stack, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Tooltip, { title: (0, import_i18n12.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n12.__)("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,
@@ -1650,7 +1711,7 @@ var useComponents = () => {
 var React12 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/components-tab/search-provider.tsx
 var React11 = __toESM(require("react"));
@@ -1685,7 +1746,7 @@ var ComponentSearch = () => {
       fullWidth: true,
       size: "tiny",
       value: inputValue,
-      placeholder: (0, import_i18n12.__)("Search", "elementor"),
+      placeholder: (0, import_i18n13.__)("Search", "elementor"),
       onChange: (e) => handleChange(e.target.value),
       InputProps: {
         startAdornment: /* @__PURE__ */ React12.createElement(import_ui11.InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(import_icons8.SearchIcon, { fontSize: "tiny" }))
@@ -1700,7 +1761,7 @@ var import_react9 = require("react");
 var import_editor_mcp = require("@elementor/editor-mcp");
 var import_icons10 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
+var import_i18n20 = require("@wordpress/i18n");
 
 // src/store/actions/rename-component.ts
 var import_editor_documents7 = require("@elementor/editor-documents");
@@ -1711,7 +1772,7 @@ var import_store33 = require("@elementor/store");
 var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_documents6 = require("@elementor/editor-documents");
 var import_store31 = require("@elementor/store");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/utils/tracking.ts
 var import_mixpanel = require("@elementor/mixpanel");
@@ -1864,7 +1925,7 @@ function createComponentView(options) {
           action: {
             name: "edit component",
             icon: "eicon-edit",
-            title: () => (0, import_i18n13.__)("Edit Component", "elementor"),
+            title: () => (0, import_i18n14.__)("Edit Component", "elementor"),
             isEnabled: () => true,
             callback: (_, eventData) => this.editComponent(eventData)
           }
@@ -2014,7 +2075,7 @@ function findComponentInstancesByUid(documentContainer, componentUid) {
 // src/components/components-tab/angie-promotion-modal.tsx
 var React13 = __toESM(require("react"));
 var import_ui12 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 var ANGIE_INSTALL_URL = "/wp-admin/plugin-install.php?tab=plugin-information&plugin=angie";
 var PLACEHOLDER_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/components-angie-promo.svg";
 var AngiePromotionModal = ({ children, open, onClose }) => {
@@ -2028,7 +2089,7 @@ function AngiePromotionCard({ onClose }) {
   return /* @__PURE__ */ React13.createElement(import_ui12.ClickAwayListener, { disableReactTree: true, mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onClose }, /* @__PURE__ */ React13.createElement(import_ui12.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
     import_ui12.CardHeader,
     {
-      title: (0, import_i18n14.__)("Add new component with AI", "elementor"),
+      title: (0, import_i18n15.__)("Add new component with AI", "elementor"),
       titleTypographyProps: { variant: "subtitle2" },
       action: /* @__PURE__ */ React13.createElement(import_ui12.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
     }
@@ -2040,10 +2101,10 @@ function AngiePromotionCard({ onClose }) {
       alt: "",
       sx: { width: "100%", aspectRatio: "16 / 9" }
     }
-  ), /* @__PURE__ */ React13.createElement(import_ui12.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n14.__)(
+  ), /* @__PURE__ */ React13.createElement(import_ui12.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n15.__)(
     "Angie our AI assistant can easily create new components and save you the hassle of doing it yourself",
     "elementor"
-  ))), /* @__PURE__ */ React13.createElement(import_ui12.CardActions, { sx: { justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(import_ui12.Button, { size: "medium", variant: "contained", color: "accent", onClick: handleCtaClick }, (0, import_i18n14.__)("Get Angie", "elementor")))));
+  ))), /* @__PURE__ */ React13.createElement(import_ui12.CardActions, { sx: { justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(import_ui12.Button, { size: "medium", variant: "contained", color: "accent", onClick: handleCtaClick }, (0, import_i18n15.__)("Get Angie", "elementor")))));
 }
 
 // src/components/components-tab/components-item.tsx
@@ -2054,17 +2115,17 @@ var import_editor_elements8 = require("@elementor/editor-elements");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
 var import_ui13 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
+var import_i18n19 = require("@wordpress/i18n");
 
 // src/store/actions/archive-component.ts
 var import_editor_documents8 = require("@elementor/editor-documents");
 var import_editor_notifications = require("@elementor/editor-notifications");
 var import_store35 = require("@elementor/store");
-var import_i18n15 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 var successNotification = (componentId, componentName) => ({
   type: "success",
   /* translators: %s: component name */
-  message: (0, import_i18n15.__)("Successfully deleted component %s", "elementor").replace("%s", componentName),
+  message: (0, import_i18n16.__)("Successfully deleted component %s", "elementor").replace("%s", componentName),
   id: `success-archived-components-notification-${componentId}`
 });
 var archiveComponent = (componentId, componentName) => {
@@ -2186,14 +2247,14 @@ var import_store41 = require("@elementor/store");
 
 // src/components/create-component-form/utils/component-form-schema.ts
 var import_schema = require("@elementor/schema");
-var import_i18n16 = require("@wordpress/i18n");
+var import_i18n17 = require("@wordpress/i18n");
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
-var baseComponentSchema = import_schema.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n16.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var baseComponentSchema = import_schema.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n17.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
 var createBaseComponentSchema = (existingNames) => {
   return import_schema.z.object({
     componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
-      message: (0, import_i18n16.__)("Component name already exists", "elementor")
+      message: (0, import_i18n17.__)("Component name already exists", "elementor")
     })
   });
 };
@@ -2201,9 +2262,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: (0, import_i18n16.__)("Component name is required.", "elementor")
+      message: (0, import_i18n17.__)("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: (0, import_i18n16.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: (0, import_i18n17.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -2297,9 +2358,9 @@ var createComponentModel2 = (component) => {
 // src/components/components-tab/delete-confirmation-dialog.tsx
 var React14 = __toESM(require("react"));
 var import_editor_ui6 = require("@elementor/editor-ui");
-var import_i18n17 = require("@wordpress/i18n");
+var import_i18n18 = require("@wordpress/i18n");
 function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
-  return /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Title, null, (0, import_i18n17.__)("Delete this component?", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.ContentText, null, (0, import_i18n17.__)(
+  return /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Title, null, (0, import_i18n18.__)("Delete this component?", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.ContentText, null, (0, import_i18n18.__)(
     "Existing instances on your pages will remain functional. You will no longer find this component in your list.",
     "elementor"
   ))), /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Actions, { onClose, onConfirm }));
@@ -2427,9 +2488,9 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           openEditMode();
         }
       },
-      (0, import_i18n18.__)("Rename", "elementor")
+      (0, import_i18n19.__)("Rename", "elementor")
     ),
-    /* @__PURE__ */ React15.createElement(import_editor_ui7.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleDeleteClick }, /* @__PURE__ */ React15.createElement(import_ui13.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n18.__)("Delete", "elementor")))
+    /* @__PURE__ */ React15.createElement(import_editor_ui7.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleDeleteClick }, /* @__PURE__ */ React15.createElement(import_ui13.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n19.__)("Delete", "elementor")))
   ), /* @__PURE__ */ React15.createElement(
     DeleteConfirmationDialog,
     {
@@ -2555,7 +2616,7 @@ var EmptyState = () => {
     const sdk = (0, import_editor_mcp.getAngieSdk)();
     if (sdk.isAngieReady()) {
       sdk.triggerAngie({
-        prompt: (0, import_i18n19.__)(
+        prompt: (0, import_i18n20.__)(
           "Create a [hero/testimonial/product card/CTA/feature] component for my [business type]. Include [describe what you want]",
           "elementor"
         ),
@@ -2575,7 +2636,7 @@ var EmptyState = () => {
       gap: 2,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n19.__)("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n19.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), (0, import_i18n19.__)("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n20.__)("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n20.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), (0, import_i18n20.__)("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React17.createElement(
       import_ui15.Link,
       {
         href: LEARN_MORE_URL,
@@ -2584,13 +2645,13 @@ var EmptyState = () => {
         variant: "caption",
         color: "info.main"
       },
-      (0, import_i18n19.__)("Learn more about components", "elementor")
+      (0, import_i18n20.__)("Learn more about components", "elementor")
     )),
     /* @__PURE__ */ React17.createElement(import_ui15.Divider, { sx: { width: "100%" } }),
-    /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n19.__)("Create your first one:", "elementor")), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n19.__)(
+    /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n20.__)("Create your first one:", "elementor")), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n20.__)(
       'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
       "elementor"
-    )), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary" }, (0, import_i18n19.__)("Or", "elementor")), /* @__PURE__ */ React17.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React17.createElement(
+    )), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary" }, (0, import_i18n20.__)("Or", "elementor")), /* @__PURE__ */ React17.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React17.createElement(
       import_ui15.Button,
       {
         color: "secondary",
@@ -2599,7 +2660,7 @@ var EmptyState = () => {
         onClick: handleCreateWithAI,
         endIcon: /* @__PURE__ */ React17.createElement(import_icons10.AIIcon, null)
       },
-      (0, import_i18n19.__)("Create component with AI", "elementor")
+      (0, import_i18n20.__)("Create component with AI", "elementor")
     )))
   );
 };
@@ -2623,7 +2684,7 @@ var EmptySearchResult = () => {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n19.__)("Sorry, nothing matched", "elementor")),
+      /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n20.__)("Sorry, nothing matched", "elementor")),
       searchValue && /* @__PURE__ */ React17.createElement(
         import_ui15.Typography,
         {
@@ -2651,8 +2712,8 @@ var EmptySearchResult = () => {
         /* @__PURE__ */ React17.createElement("span", null, "\u201D.")
       )
     ),
-    /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n19.__)("Try something else.", "elementor")),
-    /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React17.createElement(import_ui15.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n19.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n20.__)("Try something else.", "elementor")),
+    /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React17.createElement(import_ui15.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n20.__)("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -2689,7 +2750,7 @@ var import_editor_ui9 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
 var import_store47 = require("@elementor/store");
 var import_ui16 = require("@elementor/ui");
-var import_i18n21 = require("@wordpress/i18n");
+var import_i18n22 = require("@wordpress/i18n");
 
 // src/prevent-non-atomic-nesting.ts
 var import_editor_canvas6 = require("@elementor/editor-canvas");
@@ -2697,10 +2758,10 @@ var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_notifications2 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_store43 = require("@elementor/store");
-var import_i18n20 = require("@wordpress/i18n");
+var import_i18n21 = require("@wordpress/i18n");
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: (0, import_i18n20.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: (0, import_i18n21.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -2920,7 +2981,7 @@ function CreateComponentForm() {
       if (nonAtomicElements.length > 0) {
         (0, import_editor_notifications3.notify)({
           type: "default",
-          message: (0, import_i18n21.__)(
+          message: (0, import_i18n22.__)(
             "Components require atomic elements only. Remove widgets to create this component.",
             "elementor"
           ),
@@ -2959,12 +3020,12 @@ function CreateComponentForm() {
       }
       (0, import_editor_notifications3.notify)({
         type: "success",
-        message: (0, import_i18n21.__)("Component created successfully.", "elementor"),
+        message: (0, import_i18n22.__)("Component created successfully.", "elementor"),
         id: `component-saved-successfully-${uid}`
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = (0, import_i18n21.__)("Failed to create component. Please try again.", "elementor");
+      const errorMessage = (0, import_i18n22.__)("Failed to create component. Please try again.", "elementor");
       (0, import_editor_notifications3.notify)({
         type: "error",
         message: errorMessage,
@@ -3027,10 +3088,10 @@ var Form2 = ({
     }
   };
   const texts = {
-    heading: (0, import_i18n21.__)("Create component", "elementor"),
-    name: (0, import_i18n21.__)("Name", "elementor"),
-    cancel: (0, import_i18n21.__)("Cancel", "elementor"),
-    create: (0, import_i18n21.__)("Create", "elementor")
+    heading: (0, import_i18n22.__)("Create component", "elementor"),
+    name: (0, import_i18n22.__)("Name", "elementor"),
+    cancel: (0, import_i18n22.__)("Cancel", "elementor"),
+    create: (0, import_i18n22.__)("Create", "elementor")
   };
   const nameInputId = "component-name";
   return /* @__PURE__ */ React19.createElement(import_editor_ui9.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
@@ -3086,7 +3147,7 @@ function updateCurrentComponent({
 var React20 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_react_dom = require("react-dom");
-var import_i18n22 = require("@wordpress/i18n");
+var import_i18n23 = require("@wordpress/i18n");
 
 // src/hooks/use-canvas-document.ts
 var import_editor_canvas7 = require("@elementor/editor-canvas");
@@ -3208,7 +3269,7 @@ function Backdrop({ canvas, element, onClose }) {
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": (0, import_i18n22.__)("Exit component editing mode", "elementor")
+      "aria-label": (0, import_i18n23.__)("Exit component editing mode", "elementor")
     }
   );
 }
@@ -3339,18 +3400,18 @@ var React22 = __toESM(require("react"));
 var import_editor_ui10 = require("@elementor/editor-ui");
 var import_icons12 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
-var import_i18n23 = require("@wordpress/i18n");
+var import_i18n24 = require("@wordpress/i18n");
 var openEditModeDialog = (lockedBy) => {
   (0, import_editor_ui10.openDialog)({
     component: /* @__PURE__ */ React22.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = (0, import_i18n23.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui17.DialogHeader, { logo: false }, /* @__PURE__ */ React22.createElement(import_ui17.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(import_ui17.Icon, { color: "secondary" }, /* @__PURE__ */ React22.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React22.createElement(import_ui17.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React22.createElement(import_ui17.DialogContent, null, /* @__PURE__ */ React22.createElement(import_ui17.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React22.createElement(import_ui17.Typography, { variant: "body2" }, (0, import_i18n23.__)(
+  const content = (0, import_i18n24.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui17.DialogHeader, { logo: false }, /* @__PURE__ */ React22.createElement(import_ui17.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(import_ui17.Icon, { color: "secondary" }, /* @__PURE__ */ React22.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React22.createElement(import_ui17.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React22.createElement(import_ui17.DialogContent, null, /* @__PURE__ */ React22.createElement(import_ui17.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React22.createElement(import_ui17.Typography, { variant: "body2" }, (0, import_i18n24.__)(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React22.createElement(import_ui17.DialogActions, null, /* @__PURE__ */ React22.createElement(import_ui17.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui10.closeDialog }, (0, import_i18n23.__)("Close", "elementor"))))));
+  )), /* @__PURE__ */ React22.createElement(import_ui17.DialogActions, null, /* @__PURE__ */ React22.createElement(import_ui17.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui10.closeDialog }, (0, import_i18n24.__)("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
@@ -3361,7 +3422,7 @@ var import_editor_elements14 = require("@elementor/editor-elements");
 var import_editor_panels3 = require("@elementor/editor-panels");
 var import_icons14 = require("@elementor/icons");
 var import_ui22 = require("@elementor/ui");
-var import_i18n25 = require("@wordpress/i18n");
+var import_i18n26 = require("@wordpress/i18n");
 
 // src/hooks/use-component-instance-settings.ts
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
@@ -3430,7 +3491,7 @@ function useComponentInstanceSettings() {
 var React23 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
-var import_i18n24 = require("@wordpress/i18n");
+var import_i18n25 = require("@wordpress/i18n");
 var EmptyState2 = ({ onEditComponent }) => {
   return /* @__PURE__ */ React23.createElement(
     import_ui18.Stack,
@@ -3443,12 +3504,12 @@ var EmptyState2 = ({ onEditComponent }) => {
       gap: 1.5
     },
     /* @__PURE__ */ React23.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n24.__)("No properties yet", "elementor")),
-    /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n24.__)(
+    /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n25.__)("No properties yet", "elementor")),
+    /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n25.__)(
       "Edit the component to add properties, manage them or update the design across all instances.",
       "elementor"
     )),
-    /* @__PURE__ */ React23.createElement(import_ui18.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n24.__)("Edit component", "elementor"))
+    /* @__PURE__ */ React23.createElement(import_ui18.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n25.__)("Edit component", "elementor"))
   );
 };
 
@@ -3722,7 +3783,7 @@ function InstanceEditingPanel() {
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = (0, import_i18n25.__)("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = (0, import_i18n26.__)("Edit %s", "elementor").replace("%s", component.name);
   const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
@@ -3808,7 +3869,7 @@ var import_editor_controls6 = require("@elementor/editor-controls");
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
 var import_editor_elements15 = require("@elementor/editor-elements");
 var import_ui24 = require("@elementor/ui");
-var import_i18n27 = require("@wordpress/i18n");
+var import_i18n28 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
 var import_store58 = require("@elementor/store");
@@ -3879,7 +3940,7 @@ var React30 = __toESM(require("react"));
 var import_react17 = require("react");
 var import_icons15 = require("@elementor/icons");
 var import_ui23 = require("@elementor/ui");
-var import_i18n26 = require("@wordpress/i18n");
+var import_i18n27 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
 var IconContainer = (0, import_ui23.styled)(import_ui23.Box)`
 	pointer-events: none;
@@ -3939,7 +4000,7 @@ var Indicator2 = (0, import_react17.forwardRef)(({ isOpen, isOverridable, ...pro
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? (0, import_i18n26.__)("Overridable property", "elementor") : (0, import_i18n26.__)("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? (0, import_i18n27.__)("Overridable property", "elementor") : (0, import_i18n27.__)("Make prop overridable", "elementor")
   },
   isOverridable ? /* @__PURE__ */ React30.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React30.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
 )));
@@ -4010,7 +4071,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n27.__)("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n28.__)("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
     import_ui24.Popover,
     {
       disableScrollLock: true,
@@ -4035,6 +4096,7 @@ function Content2({ componentId, overridableProps }) {
           value: groupId,
           label: overridableProps.groups.items[groupId].label
         })),
+        existingLabels: Object.values(overridableProps?.props ?? {}).map((prop) => prop.label),
         currentValue: overridableConfig
       }
     )
@@ -4158,7 +4220,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_MESSAGES2 = {
+var ERROR_MESSAGES3 = {
   ELEMENT_NOT_FOUND: "Element not found. Use 'list-elements' to get valid element IDs.",
   ELEMENT_NOT_ONE_OF_TYPES: (validTypes) => `Element is not one of the following types: ${validTypes.join(", ")}`,
   ELEMENT_IS_LOCKED: "Cannot save a locked element as a component."
@@ -4168,15 +4230,15 @@ var handleSaveAsComponent = async (params) => {
   const validElementTypes = getValidElementTypes();
   const container = (0, import_editor_elements17.getContainer)(elementId);
   if (!container) {
-    throw new Error(ERROR_MESSAGES2.ELEMENT_NOT_FOUND);
+    throw new Error(ERROR_MESSAGES3.ELEMENT_NOT_FOUND);
   }
   const elType = container.model.get("elType");
   if (!validElementTypes.includes(elType)) {
-    throw new Error(ERROR_MESSAGES2.ELEMENT_NOT_ONE_OF_TYPES(validElementTypes));
+    throw new Error(ERROR_MESSAGES3.ELEMENT_NOT_ONE_OF_TYPES(validElementTypes));
   }
   const element = container.model.toJSON({ remove: ["default"] });
   if (element?.isLocked) {
-    throw new Error(ERROR_MESSAGES2.ELEMENT_IS_LOCKED);
+    throw new Error(ERROR_MESSAGES3.ELEMENT_IS_LOCKED);
   }
   const overridableProps = overridablePropsInput ? enrichOverridableProps(overridablePropsInput, element) : void 0;
   if (overridableProps) {
@@ -4473,11 +4535,11 @@ var import_editor_elements18 = require("@elementor/editor-elements");
 var import_editor_notifications4 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 var import_store64 = require("@elementor/store");
-var import_i18n28 = require("@wordpress/i18n");
+var import_i18n29 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: (0, import_i18n28.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: (0, import_i18n29.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -4809,7 +4871,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n29.__)("Components", "elementor"),
+    label: (0, import_i18n30.__)("Components", "elementor"),
     component: Components,
     position: 1
   });