@elementor/editor-components 3.35.0-431 → 3.35.0-433

package/dist/index.mjs

@@ -17,7 +17,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __29 } from "@wordpress/i18n";
+import { __ as __30 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -356,7 +356,7 @@ import { getV1DocumentsManager as getV1DocumentsManager3 } from "@elementor/edit
 import { ArrowLeftIcon, ComponentsFilledIcon } from "@elementor/icons";
 import { __getState as getState9 } from "@elementor/store";
 import { Box as Box7, Divider as Divider2, IconButton as IconButton4, Stack as Stack6, Tooltip as Tooltip3, Typography as Typography6 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 
 // src/hooks/use-navigate-back.ts
 import { useCallback } from "react";
@@ -440,7 +440,7 @@ import { useSelectedElement } from "@elementor/editor-elements";
 import { __createPanel as createPanel, Panel } from "@elementor/editor-panels";
 import { ThemeProvider } from "@elementor/editor-ui";
 import { Alert, Box as Box5, ErrorBoundary } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/components/component-properties-panel/component-properties-panel-content.tsx
 import * as React7 from "react";
@@ -450,7 +450,7 @@ import { PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-pane
 import { ComponentPropListIcon as ComponentPropListIcon2, FolderPlusIcon, XIcon as XIcon2 } from "@elementor/icons";
 import { Divider, IconButton as IconButton3, List as List2, Stack as Stack5, Tooltip as Tooltip2 } from "@elementor/ui";
 import { generateUniqueId as generateUniqueId2 } from "@elementor/utils";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/store/actions/add-overridable-group.ts
 import { __dispatch as dispatch, __getState as getState2 } from "@elementor/store";
@@ -914,7 +914,7 @@ import {
   Typography as Typography5,
   usePopupState as usePopupState2
 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/components/component-properties-panel/property-item.tsx
 import * as React5 from "react";
@@ -927,18 +927,55 @@ import * as React3 from "react";
 import { useState as useState2 } from "react";
 import { Form, MenuListItem } from "@elementor/editor-ui";
 import { Button as Button2, FormLabel, Grid, Select, Stack as Stack3, TextField, Typography as Typography3 } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+
+// src/components/overridable-props/utils/validate-prop-label.ts
 import { __ as __4 } from "@wordpress/i18n";
+var ERROR_MESSAGES = {
+  EMPTY_NAME: __4("Property name is required", "elementor"),
+  DUPLICATE_NAME: __4("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: __4("Default", "elementor") };
-function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
+var DEFAULT_GROUP = { value: null, label: __5("Default", "elementor") };
+function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels = [], sx }) {
   const [propLabel, setPropLabel] = useState2(currentValue?.label ?? null);
   const [group, setGroup] = useState2(currentValue?.groupId ?? groups?.[0]?.value ?? null);
-  const name = __4("Name", "elementor");
-  const groupName = __4("Group Name", "elementor");
+  const [error, setError] = useState2(null);
+  const name = __5("Name", "elementor");
+  const groupName = __5("Group Name", "elementor");
   const isCreate = currentValue === void 0;
-  const title = isCreate ? __4("Create new property", "elementor") : __4("Update property", "elementor");
-  const ctaLabel = isCreate ? __4("Create", "elementor") : __4("Update", "elementor");
-  return /* @__PURE__ */ React3.createElement(Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React3.createElement(Stack3, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
+  const title = isCreate ? __5("Create new property", "elementor") : __5("Update property", "elementor");
+  const ctaLabel = isCreate ? __5("Create", "elementor") : __5("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(Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React3.createElement(Stack3, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
     Stack3,
     {
       direction: "row",
@@ -954,9 +991,20 @@ function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
       name,
       size: SIZE,
       fullWidth: true,
-      placeholder: __4("Enter value", "elementor"),
+      placeholder: __5("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(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
     Select,
@@ -976,7 +1024,17 @@ function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
       }
     },
     (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React3.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React3.createElement(Stack3, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React3.createElement(Button2, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+  ))), /* @__PURE__ */ React3.createElement(Stack3, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React3.createElement(
+    Button2,
+    {
+      type: "submit",
+      disabled: !propLabel || Boolean(error),
+      variant: "contained",
+      color: "primary",
+      size: "small"
+    },
+    ctaLabel
+  ))));
 }
 
 // src/components/component-properties-panel/sortable.tsx
@@ -1054,6 +1112,7 @@ function PropertyItem({
   sortableTriggerProps,
   isDragPlaceholder,
   groups,
+  existingLabels,
   onDelete,
   onUpdate
 }) {
@@ -1129,6 +1188,7 @@ function PropertyItem({
         onSubmit: handleSubmit,
         currentValue: prop,
         groups,
+        existingLabels,
         sx: { width: "100%" }
       }
     )
@@ -1239,7 +1299,7 @@ function PropertiesGroup({
           className: "group-menu",
           size: "tiny",
           sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
-          "aria-label": __5("Group actions", "elementor"),
+          "aria-label": __6("Group actions", "elementor"),
           ...bindTrigger2(popupState)
         },
         /* @__PURE__ */ React6.createElement(DotsVerticalIcon, { fontSize: "tiny" })
@@ -1251,6 +1311,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)
       }
@@ -1262,11 +1323,11 @@ function PropertiesGroup({
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" }
       },
-      /* @__PURE__ */ React6.createElement(MenuListItem2, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React6.createElement(Typography5, { variant: "caption", sx: { color: "text.primary" } }, __5("Rename", "elementor"))),
+      /* @__PURE__ */ React6.createElement(MenuListItem2, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React6.createElement(Typography5, { variant: "caption", sx: { color: "text.primary" } }, __6("Rename", "elementor"))),
       /* @__PURE__ */ React6.createElement(
         Tooltip,
         {
-          title: hasProperties ? __5("To delete the group, first remove all the properties", "elementor") : "",
+          title: hasProperties ? __6("To delete the group, first remove all the properties", "elementor") : "",
           placement: "right"
         },
         /* @__PURE__ */ React6.createElement("span", null, /* @__PURE__ */ React6.createElement(MenuListItem2, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React6.createElement(
@@ -1275,7 +1336,7 @@ function PropertiesGroup({
             variant: "caption",
             sx: { color: hasProperties ? "text.disabled" : "error.light" }
           },
-          __5("Delete", "elementor")
+          __6("Delete", "elementor")
         )))
       )
     )
@@ -1286,7 +1347,7 @@ function PropertiesGroup({
 import { useState as useState3 } from "react";
 import { setDocumentModifiedStatus } from "@elementor/editor-documents";
 import { useEditable } from "@elementor/editor-ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/store/actions/rename-overridable-group.ts
 import { __dispatch as dispatch7, __getState as getState8 } from "@elementor/store";
@@ -1313,19 +1374,19 @@ function renameOverridableGroup({ componentId, groupId, label }) {
 }
 
 // src/components/component-properties-panel/utils/validate-group-label.ts
-import { __ as __6 } from "@wordpress/i18n";
-var ERROR_MESSAGES = {
-  EMPTY_NAME: __6("Group name is required", "elementor"),
-  DUPLICATE_NAME: __6("Group name already exists", "elementor")
+import { __ as __7 } from "@wordpress/i18n";
+var ERROR_MESSAGES2 = {
+  EMPTY_NAME: __7("Group name is required", "elementor"),
+  DUPLICATE_NAME: __7("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 "";
 }
@@ -1345,7 +1406,7 @@ function useCurrentEditableItem() {
   };
   const handleSubmit = (newLabel) => {
     if (!editingGroupId || !currentComponentId) {
-      throw new Error(__7("Group ID or component ID is missing", "elementor"));
+      throw new Error(__8("Group ID or component ID is missing", "elementor"));
     }
     renameOverridableGroup({
       componentId: currentComponentId,
@@ -1453,20 +1514,20 @@ function ComponentPropertiesPanelContent({ onClose }) {
     deleteOverridableGroup({ componentId: currentComponentId, groupId });
     setDocumentModifiedStatus2(true);
   };
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React7.createElement(Stack5, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React7.createElement(ComponentPropListIcon2, { fontSize: "tiny" }), /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { variant: "subtitle2" }, __8("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React7.createElement(Tooltip2, { title: __8("Add new group", "elementor") }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React7.createElement(Stack5, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React7.createElement(ComponentPropListIcon2, { fontSize: "tiny" }), /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { variant: "subtitle2" }, __9("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React7.createElement(Tooltip2, { title: __9("Add new group", "elementor") }, /* @__PURE__ */ React7.createElement(
     IconButton3,
     {
       size: "tiny",
-      "aria-label": __8("Add new group", "elementor"),
+      "aria-label": __9("Add new group", "elementor"),
       onClick: handleAddGroupClick
     },
     /* @__PURE__ */ React7.createElement(FolderPlusIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React7.createElement(Tooltip2, { title: __8("Close panel", "elementor") }, /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React7.createElement(Tooltip2, { title: __9("Close panel", "elementor") }, /* @__PURE__ */ React7.createElement(
     IconButton3,
     {
       ref: introductionRef,
       size: "tiny",
-      "aria-label": __8("Close panel", "elementor"),
+      "aria-label": __9("Close panel", "elementor"),
       onClick: onClose
     },
     /* @__PURE__ */ React7.createElement(XIcon2, { fontSize: "tiny" })
@@ -1512,14 +1573,14 @@ function ComponentPropertiesPanel() {
     }
   )))));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(Box5, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, __9("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(Box5, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, __10("Something went wrong", "elementor"))));
 
 // src/components/component-panel-header/component-badge.tsx
 import * as React9 from "react";
 import { useEffect, useRef as useRef2 } from "react";
 import { ComponentPropListIcon as ComponentPropListIcon3 } from "@elementor/icons";
 import { Badge, Box as Box6, keyframes, styled as styled2, ToggleButton } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 var ComponentsBadge = React9.forwardRef(
   ({ overridesCount, onClick }, ref) => {
     const prevCount = usePrevious(overridesCount);
@@ -1541,7 +1602,7 @@ var ComponentsBadge = React9.forwardRef(
           value: "overrides",
           size: "tiny",
           onClick,
-          "aria-label": __10("View overrides", "elementor")
+          "aria-label": __11("View overrides", "elementor")
         },
         /* @__PURE__ */ React9.createElement(ComponentPropListIcon3, { fontSize: "tiny" })
       )
@@ -1604,7 +1665,7 @@ var ComponentPanelHeader = () => {
       justifyContent: "space-between",
       sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
     },
-    /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Tooltip3, { title: __11("Back", "elementor") }, /* @__PURE__ */ React10.createElement(IconButton4, { size: "tiny", onClick: onBack, "aria-label": __11("Back", "elementor") }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(Typography6, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
+    /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Tooltip3, { title: __12("Back", "elementor") }, /* @__PURE__ */ React10.createElement(IconButton4, { size: "tiny", onClick: onBack, "aria-label": __12("Back", "elementor") }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(Typography6, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
     /* @__PURE__ */ React10.createElement(ComponentsBadge, { overridesCount, ref: anchorRef, onClick: openPropertiesPanel })
   ), /* @__PURE__ */ React10.createElement(Divider2, null), /* @__PURE__ */ React10.createElement(
     ComponentIntroduction,
@@ -1643,7 +1704,7 @@ var useComponents = () => {
 import * as React12 from "react";
 import { SearchIcon } from "@elementor/icons";
 import { Box as Box8, InputAdornment, Stack as Stack7, TextField as TextField2 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 
 // src/components/components-tab/search-provider.tsx
 import * as React11 from "react";
@@ -1678,7 +1739,7 @@ var ComponentSearch = () => {
       fullWidth: true,
       size: "tiny",
       value: inputValue,
-      placeholder: __12("Search", "elementor"),
+      placeholder: __13("Search", "elementor"),
       onChange: (e) => handleChange(e.target.value),
       InputProps: {
         startAdornment: /* @__PURE__ */ React12.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(SearchIcon, { fontSize: "tiny" }))
@@ -1693,7 +1754,7 @@ import { useState as useState7 } from "react";
 import { getAngieSdk } from "@elementor/editor-mcp";
 import { AIIcon, ComponentsIcon as ComponentsIcon2 } from "@elementor/icons";
 import { Box as Box11, Button as Button4, Divider as Divider3, Link as Link3, List as List3, Stack as Stack10, Typography as Typography9 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 
 // src/store/actions/rename-component.ts
 import { getV1DocumentsManager as getV1DocumentsManager4, setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
@@ -1706,7 +1767,7 @@ import {
 } from "@elementor/editor-canvas";
 import { getCurrentDocument } from "@elementor/editor-documents";
 import { __getState as getState11 } from "@elementor/store";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
 import { getMixpanel } from "@elementor/mixpanel";
@@ -1859,7 +1920,7 @@ function createComponentView(options) {
           action: {
             name: "edit component",
             icon: "eicon-edit",
-            title: () => __13("Edit Component", "elementor"),
+            title: () => __14("Edit Component", "elementor"),
             isEnabled: () => true,
             callback: (_, eventData) => this.editComponent(eventData)
           }
@@ -2020,7 +2081,7 @@ import {
   Infotip,
   Typography as Typography7
 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __15 } from "@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 }) => {
@@ -2034,7 +2095,7 @@ function AngiePromotionCard({ onClose }) {
   return /* @__PURE__ */ React13.createElement(ClickAwayListener, { disableReactTree: true, mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onClose }, /* @__PURE__ */ React13.createElement(Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
     CardHeader,
     {
-      title: __14("Add new component with AI", "elementor"),
+      title: __15("Add new component with AI", "elementor"),
       titleTypographyProps: { variant: "subtitle2" },
       action: /* @__PURE__ */ React13.createElement(CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
     }
@@ -2046,10 +2107,10 @@ function AngiePromotionCard({ onClose }) {
       alt: "",
       sx: { width: "100%", aspectRatio: "16 / 9" }
     }
-  ), /* @__PURE__ */ React13.createElement(CardContent, null, /* @__PURE__ */ React13.createElement(Typography7, { variant: "body2", color: "text.secondary" }, __14(
+  ), /* @__PURE__ */ React13.createElement(CardContent, null, /* @__PURE__ */ React13.createElement(Typography7, { variant: "body2", color: "text.secondary" }, __15(
     "Angie our AI assistant can easily create new components and save you the hassle of doing it yourself",
     "elementor"
-  ))), /* @__PURE__ */ React13.createElement(CardActions, { sx: { justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(Button3, { size: "medium", variant: "contained", color: "accent", onClick: handleCtaClick }, __14("Get Angie", "elementor")))));
+  ))), /* @__PURE__ */ React13.createElement(CardActions, { sx: { justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(Button3, { size: "medium", variant: "contained", color: "accent", onClick: handleCtaClick }, __15("Get Angie", "elementor")))));
 }
 
 // src/components/components-tab/components-item.tsx
@@ -2072,17 +2133,17 @@ import {
   Typography as Typography8,
   usePopupState as usePopupState3
 } from "@elementor/ui";
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __19 } from "@wordpress/i18n";
 
 // src/store/actions/archive-component.ts
 import { setDocumentModifiedStatus as setDocumentModifiedStatus4 } from "@elementor/editor-documents";
 import { notify } from "@elementor/editor-notifications";
 import { __dispatch as dispatch9 } from "@elementor/store";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 var successNotification = (componentId, componentName) => ({
   type: "success",
   /* translators: %s: component name */
-  message: __15("Successfully deleted component %s", "elementor").replace("%s", componentName),
+  message: __16("Successfully deleted component %s", "elementor").replace("%s", componentName),
   id: `success-archived-components-notification-${componentId}`
 });
 var archiveComponent = (componentId, componentName) => {
@@ -2204,14 +2265,14 @@ import { __getState as getState14 } from "@elementor/store";
 
 // src/components/create-component-form/utils/component-form-schema.ts
 import { z } from "@elementor/schema";
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
-var baseComponentSchema = z.string().trim().max(MAX_NAME_LENGTH, __16("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var baseComponentSchema = z.string().trim().max(MAX_NAME_LENGTH, __17("Component name is too long. Please keep it under 50 characters.", "elementor"));
 var createBaseComponentSchema = (existingNames) => {
   return z.object({
     componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
-      message: __16("Component name already exists", "elementor")
+      message: __17("Component name already exists", "elementor")
     })
   });
 };
@@ -2219,9 +2280,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: __16("Component name is required.", "elementor")
+      message: __17("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: __16("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: __17("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -2319,9 +2380,9 @@ var createComponentModel2 = (component) => {
 // src/components/components-tab/delete-confirmation-dialog.tsx
 import * as React14 from "react";
 import { ConfirmationDialog } from "@elementor/editor-ui";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
-  return /* @__PURE__ */ React14.createElement(ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(ConfirmationDialog.Title, null, __17("Delete this component?", "elementor")), /* @__PURE__ */ React14.createElement(ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(ConfirmationDialog.ContentText, null, __17(
+  return /* @__PURE__ */ React14.createElement(ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(ConfirmationDialog.Title, null, __18("Delete this component?", "elementor")), /* @__PURE__ */ React14.createElement(ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(ConfirmationDialog.ContentText, null, __18(
     "Existing instances on your pages will remain functional. You will no longer find this component in your list.",
     "elementor"
   ))), /* @__PURE__ */ React14.createElement(ConfirmationDialog.Actions, { onClose, onConfirm }));
@@ -2449,9 +2510,9 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           openEditMode();
         }
       },
-      __18("Rename", "elementor")
+      __19("Rename", "elementor")
     ),
-    /* @__PURE__ */ React15.createElement(MenuListItem3, { sx: { minWidth: "160px" }, onClick: handleDeleteClick }, /* @__PURE__ */ React15.createElement(Typography8, { variant: "caption", sx: { color: "error.light" } }, __18("Delete", "elementor")))
+    /* @__PURE__ */ React15.createElement(MenuListItem3, { sx: { minWidth: "160px" }, onClick: handleDeleteClick }, /* @__PURE__ */ React15.createElement(Typography8, { variant: "caption", sx: { color: "error.light" } }, __19("Delete", "elementor")))
   ), /* @__PURE__ */ React15.createElement(
     DeleteConfirmationDialog,
     {
@@ -2577,7 +2638,7 @@ var EmptyState = () => {
     const sdk = getAngieSdk();
     if (sdk.isAngieReady()) {
       sdk.triggerAngie({
-        prompt: __19(
+        prompt: __20(
           "Create a [hero/testimonial/product card/CTA/feature] component for my [business type]. Include [describe what you want]",
           "elementor"
         ),
@@ -2597,7 +2658,7 @@ var EmptyState = () => {
       gap: 2,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React17.createElement(Stack10, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __19("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, __19("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), __19("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React17.createElement(Stack10, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __20("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, __20("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), __20("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React17.createElement(
       Link3,
       {
         href: LEARN_MORE_URL,
@@ -2606,13 +2667,13 @@ var EmptyState = () => {
         variant: "caption",
         color: "info.main"
       },
-      __19("Learn more about components", "elementor")
+      __20("Learn more about components", "elementor")
     )),
     /* @__PURE__ */ React17.createElement(Divider3, { sx: { width: "100%" } }),
-    /* @__PURE__ */ React17.createElement(Stack10, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __19("Create your first one:", "elementor")), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, __19(
+    /* @__PURE__ */ React17.createElement(Stack10, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __20("Create your first one:", "elementor")), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, __20(
       'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
       "elementor"
-    )), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary" }, __19("Or", "elementor")), /* @__PURE__ */ React17.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React17.createElement(
+    )), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary" }, __20("Or", "elementor")), /* @__PURE__ */ React17.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React17.createElement(
       Button4,
       {
         color: "secondary",
@@ -2621,7 +2682,7 @@ var EmptyState = () => {
         onClick: handleCreateWithAI,
         endIcon: /* @__PURE__ */ React17.createElement(AIIcon, null)
       },
-      __19("Create component with AI", "elementor")
+      __20("Create component with AI", "elementor")
     )))
   );
 };
@@ -2645,7 +2706,7 @@ var EmptySearchResult = () => {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, __19("Sorry, nothing matched", "elementor")),
+      /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, __20("Sorry, nothing matched", "elementor")),
       searchValue && /* @__PURE__ */ React17.createElement(
         Typography9,
         {
@@ -2673,8 +2734,8 @@ var EmptySearchResult = () => {
         /* @__PURE__ */ React17.createElement("span", null, "\u201D.")
       )
     ),
-    /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "inherit" }, __19("Try something else.", "elementor")),
-    /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React17.createElement(Link3, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __19("Clear & try again", "elementor")))
+    /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "inherit" }, __20("Try something else.", "elementor")),
+    /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React17.createElement(Link3, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __20("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -2701,6 +2762,7 @@ var Components = () => {
 
 // src/components/consts.ts
 var COMPONENT_DOCUMENT_TYPE = "elementor_component";
+var OVERRIDABLE_PROP_REPLACEMENT_ID = "overridable-prop";
 
 // src/components/create-component-form/create-component-form.tsx
 import * as React19 from "react";
@@ -2711,7 +2773,7 @@ import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor
 import { ComponentsIcon as ComponentsIcon3 } from "@elementor/icons";
 import { __getState as getState15 } from "@elementor/store";
 import { Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Stack as Stack11, TextField as TextField3, Typography as Typography10 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
+import { __ as __22 } from "@wordpress/i18n";
 
 // src/prevent-non-atomic-nesting.ts
 import { isAtomicWidget } from "@elementor/editor-canvas";
@@ -2719,10 +2781,10 @@ import { getAllDescendants as getAllDescendants2, getElementType } from "@elemen
 import { notify as notify2 } from "@elementor/editor-notifications";
 import { blockCommand } from "@elementor/editor-v1-adapters";
 import { __getStore as getStore } from "@elementor/store";
-import { __ as __20 } from "@wordpress/i18n";
+import { __ as __21 } from "@wordpress/i18n";
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: __20("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: __21("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -2942,7 +3004,7 @@ function CreateComponentForm() {
       if (nonAtomicElements.length > 0) {
         notify3({
           type: "default",
-          message: __21(
+          message: __22(
             "Components require atomic elements only. Remove widgets to create this component.",
             "elementor"
           ),
@@ -2981,12 +3043,12 @@ function CreateComponentForm() {
       }
       notify3({
         type: "success",
-        message: __21("Component created successfully.", "elementor"),
+        message: __22("Component created successfully.", "elementor"),
         id: `component-saved-successfully-${uid}`
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = __21("Failed to create component. Please try again.", "elementor");
+      const errorMessage = __22("Failed to create component. Please try again.", "elementor");
       notify3({
         type: "error",
         message: errorMessage,
@@ -3049,10 +3111,10 @@ var Form2 = ({
     }
   };
   const texts = {
-    heading: __21("Create component", "elementor"),
-    name: __21("Name", "elementor"),
-    cancel: __21("Cancel", "elementor"),
-    create: __21("Create", "elementor")
+    heading: __22("Create component", "elementor"),
+    name: __22("Name", "elementor"),
+    cancel: __22("Cancel", "elementor"),
+    create: __22("Create", "elementor")
   };
   const nameInputId = "component-name";
   return /* @__PURE__ */ React19.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React19.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
@@ -3108,7 +3170,7 @@ function updateCurrentComponent({
 import * as React20 from "react";
 import { useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
-import { __ as __22 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 
 // src/hooks/use-canvas-document.ts
 import { getCanvasIframeDocument } from "@elementor/editor-canvas";
@@ -3230,7 +3292,7 @@ function Backdrop({ canvas, element, onClose }) {
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": __22("Exit component editing mode", "elementor")
+      "aria-label": __23("Exit component editing mode", "elementor")
     }
   );
 }
@@ -3361,29 +3423,29 @@ import * as React22 from "react";
 import { closeDialog, openDialog } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
 import { Box as Box12, Button as Button6, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack12, Typography as Typography11 } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
     component: /* @__PURE__ */ React22.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __23("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React22.createElement(Box12, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React22.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React22.createElement(Typography11, { variant: "subtitle1" }, content))), /* @__PURE__ */ React22.createElement(DialogContent, null, /* @__PURE__ */ React22.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React22.createElement(Typography11, { variant: "body2" }, __23(
+  const content = __24("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React22.createElement(Box12, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React22.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React22.createElement(Typography11, { variant: "subtitle1" }, content))), /* @__PURE__ */ React22.createElement(DialogContent, null, /* @__PURE__ */ React22.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React22.createElement(Typography11, { variant: "body2" }, __24(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React22.createElement(DialogActions, null, /* @__PURE__ */ React22.createElement(Button6, { color: "secondary", variant: "contained", onClick: closeDialog }, __23("Close", "elementor"))))));
+  )), /* @__PURE__ */ React22.createElement(DialogActions, null, /* @__PURE__ */ React22.createElement(Button6, { color: "secondary", variant: "contained", onClick: closeDialog }, __24("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { ControlAdornmentsProvider } from "@elementor/editor-controls";
 import { getFieldIndicators } from "@elementor/editor-editing-panel";
 import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
 import { PanelBody as PanelBody2, PanelHeader as PanelHeader2, PanelHeaderTitle as PanelHeaderTitle2 } from "@elementor/editor-panels";
 import { ComponentsIcon as ComponentsIcon4, PencilIcon as PencilIcon2 } from "@elementor/icons";
 import { IconButton as IconButton6, Stack as Stack17, Tooltip as Tooltip4 } from "@elementor/ui";
-import { __ as __25 } from "@wordpress/i18n";
+import { __ as __26 } from "@wordpress/i18n";
 
 // src/hooks/use-component-instance-settings.ts
 import { useElement } from "@elementor/editor-editing-panel";
@@ -3452,7 +3514,7 @@ function useComponentInstanceSettings() {
 import * as React23 from "react";
 import { ComponentPropListIcon as ComponentPropListIcon4, PencilIcon } from "@elementor/icons";
 import { Button as Button7, Stack as Stack13, Typography as Typography12 } from "@elementor/ui";
-import { __ as __24 } from "@wordpress/i18n";
+import { __ as __25 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
   return /* @__PURE__ */ React23.createElement(
     Stack13,
@@ -3465,30 +3527,35 @@ var EmptyState2 = ({ onEditComponent }) => {
       gap: 1.5
     },
     /* @__PURE__ */ React23.createElement(ComponentPropListIcon4, { fontSize: "large" }),
-    /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "subtitle2" }, __24("No properties yet", "elementor")),
-    /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "caption", maxWidth: "170px" }, __24(
+    /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "subtitle2" }, __25("No properties yet", "elementor")),
+    /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "caption", maxWidth: "170px" }, __25(
       "Edit the component to add properties, manage them or update the design across all instances.",
       "elementor"
     )),
-    /* @__PURE__ */ React23.createElement(Button7, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(PencilIcon, { fontSize: "small" }), __24("Edit component", "elementor"))
+    /* @__PURE__ */ React23.createElement(Button7, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(PencilIcon, { fontSize: "small" }), __25("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
 import { Box as Box13, Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack16 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-import * as React25 from "react";
-import { PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
+import * as React26 from "react";
+import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
 import {
+  BaseControl,
   controlsRegistry,
   createTopLevelObjectType,
-  SettingsField
+  ElementProvider as ElementProvider2,
+  getControlReplacements,
+  SettingsField,
+  useElement as useElement2
 } from "@elementor/editor-editing-panel";
+import { getElementType as getElementType3 } from "@elementor/editor-elements";
 import { Stack as Stack15 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
@@ -3522,8 +3589,51 @@ function getControlsByBind(controls) {
   );
 }
 
+// src/provider/overridable-prop-context.tsx
+import * as React24 from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var OverridablePropContext = createContext2(null);
+function OverridablePropProvider({ children, ...props }) {
+  return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
+}
+var useOverridablePropValue = () => useContext2(OverridablePropContext)?.value;
+var useComponentInstanceElement = () => useContext2(OverridablePropContext)?.componentInstanceElement;
+
 // src/store/actions/update-overridable-prop.ts
 import { __dispatch as dispatch13, __getState as getState16 } from "@elementor/store";
+
+// src/utils/resolve-override-prop-value.ts
+var resolveOverridePropValue = (originalPropValue) => {
+  const isOverridable = componentOverridablePropTypeUtil.isValid(originalPropValue);
+  if (isOverridable) {
+    return getOverridableValue(originalPropValue);
+  }
+  const isOverride = componentInstanceOverridePropTypeUtil.isValid(originalPropValue);
+  if (isOverride) {
+    return getOverrideValue(originalPropValue);
+  }
+  return originalPropValue;
+};
+function getOverridableValue(overridableProp) {
+  const overridableValue = componentOverridablePropTypeUtil.extract(overridableProp);
+  if (!overridableValue) {
+    return null;
+  }
+  const isOverride = componentInstanceOverridePropTypeUtil.isValid(overridableValue.origin_value);
+  if (isOverride) {
+    return getOverrideValue(overridableValue.origin_value);
+  }
+  return overridableValue.origin_value;
+}
+function getOverrideValue(overrideProp) {
+  const overrideValue = componentInstanceOverridePropTypeUtil.extract(overrideProp);
+  if (!overrideValue) {
+    return null;
+  }
+  return overrideValue.override_value;
+}
+
+// src/store/actions/update-overridable-prop.ts
 function updateOverridableProp(componentId, propValue, originPropFields) {
   const overridableProps = selectOverridableProps(getState16(), componentId);
   if (!overridableProps) {
@@ -3533,11 +3643,12 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
   if (!existingOverridableProp) {
     return;
   }
+  const originValue = resolveOverridePropValue(propValue.origin_value);
   const newOverridableProp = originPropFields ? {
-    originValue: propValue.origin_value,
+    originValue,
     originPropFields
   } : {
-    originValue: propValue.origin_value
+    originValue
   };
   const newOverridableProps = {
     ...overridableProps,
@@ -3563,11 +3674,12 @@ var getPropTypeForComponentOverride = (overridableProp) => {
   if (overridableProp.originPropFields) {
     return getPropType(overridableProp.originPropFields);
   }
-  const { elType, widgetType, propKey } = overridableProp;
+  const { elType, widgetType, propKey, elementId } = overridableProp;
   return getPropType({
     elType,
     widgetType,
-    propKey
+    propKey,
+    elementId
   });
 };
 function getPropType({ widgetType, propKey }) {
@@ -3576,23 +3688,25 @@ function getPropType({ widgetType, propKey }) {
 }
 
 // src/components/control-label.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
 import { Stack as Stack14 } from "@elementor/ui";
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React24.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React24.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React24.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React25.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React25.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React25.createElement(ControlAdornments, null));
 };
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 function OverridePropControl({ overridableProp, overrides }) {
-  return /* @__PURE__ */ React25.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React25.createElement(OverrideControl, { overridableProp, overrides }));
+  return /* @__PURE__ */ React26.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
 }
 function OverrideControl({ overridableProp, overrides }) {
+  const componentInstanceElement = useElement2();
   const componentId = useCurrentComponentId();
   const { value: instanceValue, setValue: setInstanceValue } = useBoundProp(componentInstancePropTypeUtil);
   const controls = useControlsByWidgetType(
     overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
   );
+  const controlReplacements = getControlReplacements();
   const propType = getPropTypeForComponentOverride(overridableProp);
   if (!propType) {
     return null;
@@ -3607,13 +3721,18 @@ function OverrideControl({ overridableProp, overrides }) {
     throw new Error("Component ID is required");
   }
   const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
-  const propValue = matchingOverride ? getPropValue(matchingOverride) : overridableProp.originValue;
+  const propValue = matchingOverride ? resolveOverridePropValue(matchingOverride) : overridableProp.originValue;
   const value = {
     [overridableProp.overrideKey]: propValue
   };
   const setValue = (newValue) => {
     const newPropValue = newValue[overridableProp.overrideKey];
-    const newOverrideValue = createOverrideValue(overridableProp.overrideKey, newPropValue, componentInstanceId);
+    const newOverrideValue = createOverrideValue({
+      matchingOverride,
+      overrideKey: overridableProp.overrideKey,
+      overrideValue: newPropValue,
+      componentId: componentInstanceId
+    });
     let newOverrides = overrides?.map((override) => override === matchingOverride ? newOverrideValue : override) ?? [];
     if (!matchingOverride) {
       newOverrides = [...newOverrides, newOverrideValue];
@@ -3628,33 +3747,41 @@ function OverrideControl({ overridableProp, overrides }) {
         updateOverridableProp(componentId, overridableValue, overridableProp.originPropFields);
         return;
       }
-      const { elType, widgetType, propKey } = overridableProp;
-      updateOverridableProp(componentId, overridableValue, { elType, widgetType, propKey });
+      const { elType: elType2, widgetType: widgetType2, propKey: propKey2, elementId: elementId2 } = overridableProp;
+      updateOverridableProp(componentId, overridableValue, { elType: elType2, widgetType: widgetType2, propKey: propKey2, elementId: elementId2 });
     }
   };
-  return /* @__PURE__ */ React25.createElement(
-    PropProvider,
+  const { control, controlProps, layout } = getControlParams(
+    controls,
+    overridableProp?.originPropFields ?? overridableProp,
+    overridableProp.label
+  );
+  const { elementId, widgetType, elType, propKey } = overridableProp.originPropFields ?? overridableProp;
+  const type = elType === "widget" ? widgetType : elType;
+  const elementType = getElementType3(type);
+  if (!elementType) {
+    return null;
+  }
+  return /* @__PURE__ */ React26.createElement(
+    OverridablePropProvider,
     {
-      propType: propTypeSchema,
-      value,
-      setValue,
-      isDisabled: () => {
-        return false;
-      }
+      value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
+      componentInstanceElement
     },
-    /* @__PURE__ */ React25.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React25.createElement(Stack15, { direction: "column", gap: 1, mb: 1.5 }, /* @__PURE__ */ React25.createElement(ControlLabel, null, overridableProp.label), getControl(controls, overridableProp?.originPropFields ?? overridableProp)))
+    /* @__PURE__ */ React26.createElement(ElementProvider2, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React26.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(
+      PropProvider,
+      {
+        propType: propTypeSchema,
+        value,
+        setValue,
+        isDisabled: () => {
+          return false;
+        }
+      },
+      /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React26.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React26.createElement(Stack15, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React26.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React26.createElement(OriginalControl, { control, controlProps }))))
+    )))
   );
 }
-function getPropValue(value) {
-  const overridableValue = componentOverridablePropTypeUtil.extract(value);
-  if (overridableValue) {
-    return value;
-  }
-  if (componentInstanceOverridePropTypeUtil.isValid(value)) {
-    return value.value.override_value;
-  }
-  return null;
-}
 function getMatchingOverride(overrides, overrideKey) {
   return overrides?.find((override) => {
     const overridableValue = componentOverridablePropTypeUtil.extract(override);
@@ -3667,19 +3794,26 @@ function getMatchingOverride(overrides, overrideKey) {
     return comparedOverrideKey === overrideKey;
   }) ?? null;
 }
-function createOverrideValue(overrideKey, overrideValue, componentId) {
-  const overridableValue = componentOverridablePropTypeUtil.extract(overrideValue);
-  if (overridableValue) {
+function createOverrideValue({
+  matchingOverride,
+  overrideKey,
+  overrideValue,
+  componentId
+}) {
+  const overridableValue = componentOverridablePropTypeUtil.extract(matchingOverride);
+  const newOverridableValue = componentOverridablePropTypeUtil.extract(overrideValue);
+  const anyOverridable = newOverridableValue ?? overridableValue;
+  if (anyOverridable) {
     const innerOverride = componentInstanceOverridePropTypeUtil.create({
       override_key: overrideKey,
-      override_value: overridableValue.origin_value,
+      override_value: resolveOverridePropValue(overrideValue),
       schema_source: {
         type: "component",
         id: componentId
       }
     });
     return componentOverridablePropTypeUtil.create({
-      override_key: overridableValue.override_key,
+      override_key: anyOverridable.override_key,
       origin_value: innerOverride
     });
   }
@@ -3692,10 +3826,41 @@ function createOverrideValue(overrideKey, overrideValue, componentId) {
     }
   });
 }
-function getControl(controls, originPropFields) {
-  const ControlComponent = controlsRegistry.get(controls[originPropFields.propKey].value.type);
-  const controlProps = controls[originPropFields.propKey].value.props;
-  return /* @__PURE__ */ React25.createElement(ControlComponent, { ...controlProps });
+function getControlParams(controls, originPropFields, label) {
+  const control = controls[originPropFields.propKey];
+  const { value } = control;
+  const layout = getControlLayout(control);
+  const controlProps = populateChildControlProps(value.props);
+  if (layout === "custom") {
+    controlProps.label = label ?? value.label;
+  }
+  return {
+    control,
+    controlProps,
+    layout
+  };
+}
+function OriginalControl({ control, controlProps }) {
+  const { value } = control;
+  return /* @__PURE__ */ React26.createElement(BaseControl, { type: value.type, props: controlProps });
+}
+function getControlLayout(control) {
+  return control.value.meta?.layout || controlsRegistry.getLayout(control.value.type);
+}
+function populateChildControlProps(props) {
+  if (props.childControlType) {
+    const childComponent = controlsRegistry.get(props.childControlType);
+    const childPropType = controlsRegistry.getPropTypeUtil(props.childControlType);
+    props = {
+      ...props,
+      childControlConfig: {
+        component: childComponent,
+        props: props.childControlProps || {},
+        propTypeUtil: childPropType
+      }
+    };
+  }
+  return props;
 }
 
 // src/components/instance-editing-panel/override-props-group.tsx
@@ -3708,7 +3873,7 @@ function OverridePropsGroup({ group, props, overrides }) {
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React26.createElement(Box13, { "aria-label": `${title} section` }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(Box13, { "aria-label": `${title} section` }, /* @__PURE__ */ React27.createElement(
     ListItemButton3,
     {
       id: labelId,
@@ -3718,7 +3883,7 @@ function OverridePropsGroup({ group, props, overrides }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React26.createElement(Stack16, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React27.createElement(Stack16, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React27.createElement(
       ListItemText,
       {
         secondary: title,
@@ -3726,8 +3891,8 @@ function OverridePropsGroup({ group, props, overrides }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React26.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React26.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React26.createElement(Stack16, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React27.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React27.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React27.createElement(Stack16, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React27.createElement(
     OverridePropControl,
     {
       key: overrideKey,
@@ -3748,12 +3913,12 @@ function InstanceEditingPanel() {
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = __25("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = __26("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);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React27.createElement(Stack17, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React27.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React27.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React27.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React27.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React27.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React27.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React27.createElement(PanelBody2, null, /* @__PURE__ */ React27.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React27.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React27.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(Stack17, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React28.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React28.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React28.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React28.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(PanelBody2, null, /* @__PURE__ */ React28.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(
     OverridePropsGroup,
     {
       key: group.id,
@@ -3766,27 +3931,19 @@ function InstanceEditingPanel() {
 
 // src/components/overridable-props/overridable-prop-control.tsx
 import * as React29 from "react";
-import { ControlReplacementsProvider, PropKeyProvider as PropKeyProvider2, PropProvider as PropProvider2, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
-import { createTopLevelObjectType as createTopLevelObjectType2, useElement as useElement2 } from "@elementor/editor-editing-panel";
-
-// src/provider/overridable-prop-context.tsx
-import * as React28 from "react";
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var OverridablePropContext = createContext2(null);
-function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React28.createElement(OverridablePropContext.Provider, { value: props }, children);
-}
-var useOverridablePropValue = () => useContext2(OverridablePropContext)?.value;
-
-// src/components/overridable-props/overridable-prop-control.tsx
+import { ControlReplacementsProvider as ControlReplacementsProvider2, PropKeyProvider as PropKeyProvider2, PropProvider as PropProvider2, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { createTopLevelObjectType as createTopLevelObjectType2, getControlReplacements as getControlReplacements2, useElement as useElement3 } from "@elementor/editor-editing-panel";
 function OverridablePropControl({
-  OriginalControl,
+  OriginalControl: OriginalControl2,
   ...props
 }) {
-  const { elementType } = useElement2();
+  const { elementType } = useElement3();
   const { value, bind, setValue, placeholder, ...propContext } = useBoundProp2(componentOverridablePropTypeUtil);
   const componentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(componentId);
+  const filteredReplacements = getControlReplacements2().filter(
+    (r) => !r.id || r.id !== OVERRIDABLE_PROP_REPLACEMENT_ID
+  );
   if (!componentId) {
     return null;
   }
@@ -3794,6 +3951,7 @@ function OverridablePropControl({
     throw new Error("Override key is required");
   }
   const isComponentInstance2 = elementType.key === "e-component";
+  const overridablePropData = overridableProps?.props?.[value.override_key];
   const setOverridableValue = (newValue) => {
     const propValue2 = {
       ...value,
@@ -3801,14 +3959,18 @@ function OverridablePropControl({
     };
     setValue(propValue2);
     if (!isComponentInstance2) {
-      const existingProp = overridableProps?.props?.[propValue2.override_key];
-      updateOverridableProp(componentId, propValue2, existingProp?.originPropFields);
+      updateOverridableProp(componentId, propValue2, overridablePropData?.originPropFields);
     }
   };
   const defaultPropType = elementType.propsSchema[bind];
+  const overridePropType = overridablePropData ? getPropTypeForComponentOverride(overridablePropData) : void 0;
+  const resolvedPropType = overridePropType ?? defaultPropType;
+  if (!resolvedPropType) {
+    return null;
+  }
   const propType = createTopLevelObjectType2({
     schema: {
-      [bind]: isComponentInstance2 && overridableProps ? getPropTypeForComponentOverride(overridableProps.props[value.override_key]) ?? defaultPropType : defaultPropType
+      [bind]: resolvedPropType
     }
   });
   const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
@@ -3824,17 +3986,17 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React29.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React29.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React29.createElement(OriginalControl, { ...props })))
+    /* @__PURE__ */ React29.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React29.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React29.createElement(OriginalControl2, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
 import * as React31 from "react";
 import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
-import { useElement as useElement3 } from "@elementor/editor-editing-panel";
+import { useElement as useElement4 } from "@elementor/editor-editing-panel";
 import { getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Popover4, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __27 } from "@wordpress/i18n";
+import { __ as __28 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
 import { __dispatch as dispatch14, __getState as getState17 } from "@elementor/store";
@@ -3905,7 +4067,7 @@ import * as React30 from "react";
 import { forwardRef as forwardRef2 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
 import { Box as Box14, styled as styled4 } from "@elementor/ui";
-import { __ as __26 } from "@wordpress/i18n";
+import { __ as __27 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
 var IconContainer = styled4(Box14)`
 	pointer-events: none;
@@ -3965,7 +4127,7 @@ var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @_
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? __26("Overridable property", "elementor") : __26("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? __27("Overridable property", "elementor") : __27("Make prop overridable", "elementor")
   },
   isOverridable ? /* @__PURE__ */ React30.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React30.createElement(PlusIcon, { fontSize: SIZE2 })
 )));
@@ -3998,9 +4160,10 @@ function Content2({ componentId, overridableProps }) {
   const {
     element: { id: elementId },
     elementType
-  } = useElement3();
+  } = useElement4();
   const { value, bind, propType } = useBoundProp3();
   const contextOverridableValue = useOverridablePropValue();
+  const componentInstanceElement = useComponentInstanceElement();
   const { value: boundPropOverridableValue, setValue: setOverridableValue } = useBoundProp3(
     componentOverridablePropTypeUtil
   );
@@ -4013,17 +4176,17 @@ function Content2({ componentId, overridableProps }) {
   const { elType } = getWidgetsCache3()?.[elementType.key] ?? { elType: "widget" };
   const handleSubmit = ({ label, group }) => {
     const propTypeDefault = propType.default ?? {};
-    const originValue = (!overridableValue ? value : overridableValue?.origin_value) ?? propTypeDefault;
+    const originValue = resolveOverridePropValue(overridableValue?.origin_value) ?? value ?? propTypeDefault;
     const matchingOverridableProp = overridableValue ? overridableProps?.props?.[overridableValue.override_key] : void 0;
     const overridablePropConfig = setOverridableProp({
       componentId,
       overrideKey: overridableValue?.override_key ?? null,
-      elementId,
+      elementId: componentInstanceElement?.element.id ?? elementId,
       label,
       groupId: group,
       propKey: bind,
       elType: elType ?? "widget",
-      widgetType: elementType.key,
+      widgetType: componentInstanceElement?.elementType.key ?? elementType.key,
       originValue,
       originPropFields: matchingOverridableProp?.originPropFields
     });
@@ -4036,7 +4199,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(Tooltip5, { placement: "top", title: __27("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(Tooltip5, { placement: "top", title: __28("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
     Popover4,
     {
       disableScrollLock: true,
@@ -4061,6 +4224,7 @@ function Content2({ componentId, overridableProps }) {
           value: groupId,
           label: overridableProps.groups.items[groupId].label
         })),
+        existingLabels: Object.values(overridableProps?.props ?? {}).map((prop) => prop.label),
         currentValue: overridableConfig
       }
     )
@@ -4154,7 +4318,7 @@ import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
 
 // src/mcp/save-as-component-tool.ts
 import { DOCUMENT_STRUCTURE_URI, WIDGET_SCHEMA_URI } from "@elementor/editor-canvas";
-import { getContainer as getContainer4, getElementType as getElementType3, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
+import { getContainer as getContainer4, getElementType as getElementType4, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
 import { getMCPByDomain, toolPrompts } from "@elementor/editor-mcp";
 import { AxiosError } from "@elementor/http-client";
 import { z as z6 } from "@elementor/schema";
@@ -4184,7 +4348,7 @@ var OutputSchema = {
   message: z6.string().optional().describe("Additional information about the operation result"),
   component_uid: z6.string().optional().describe("The unique identifier of the newly created component (only present on success)")
 };
-var ERROR_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."
@@ -4194,15 +4358,15 @@ var handleSaveAsComponent = async (params) => {
   const validElementTypes = getValidElementTypes();
   const container = getContainer4(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) {
@@ -4239,7 +4403,7 @@ function enrichOverridableProps(input, rootElement) {
     }
     const elType = element.elType;
     const widgetType = element.widgetType || element.elType;
-    const elementType = getElementType3(widgetType);
+    const elementType = getElementType4(widgetType);
     if (!elementType) {
       throw new Error(
         `Element type "${widgetType}" is not atomic or does not have a settings schema. Cannot expose property "${propKey}" for element "${elementId}".`
@@ -4499,11 +4663,11 @@ import { getAllDescendants as getAllDescendants4 } from "@elementor/editor-eleme
 import { notify as notify4 } from "@elementor/editor-notifications";
 import { blockCommand as blockCommand2 } from "@elementor/editor-v1-adapters";
 import { __getState as getState19 } from "@elementor/store";
-import { __ as __28 } from "@wordpress/i18n";
+import { __ as __29 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: __28("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: __29("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -4835,7 +4999,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __29("Components", "elementor"),
+    label: __30("Components", "elementor"),
     component: Components,
     position: 1
   });
@@ -4869,6 +5033,7 @@ function init() {
     indicator: OverridablePropIndicator
   });
   registerControlReplacement({
+    id: OVERRIDABLE_PROP_REPLACEMENT_ID,
     component: OverridablePropControl,
     condition: ({ value }) => componentOverridablePropTypeUtil.isValid(value)
   });