@elementor/editor-components 3.35.0-464 → 3.35.0-466

package/dist/index.js

@@ -377,11 +377,11 @@ var componentOverrideTransformer = (0, import_editor_canvas3.createTransformer)(
 // src/components/component-panel-header/component-panel-header.tsx
 var React10 = __toESM(require("react"));
 var import_editor_current_user = require("@elementor/editor-current-user");
-var import_editor_documents5 = require("@elementor/editor-documents");
+var import_editor_documents6 = require("@elementor/editor-documents");
 var import_icons7 = require("@elementor/icons");
-var import_store27 = require("@elementor/store");
+var import_store29 = require("@elementor/store");
 var import_ui10 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/hooks/use-navigate-back.ts
 var import_react = require("react");
@@ -501,17 +501,17 @@ 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_i18n10 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 
 // src/components/component-properties-panel/component-properties-panel-content.tsx
 var React7 = __toESM(require("react"));
 var import_react5 = require("react");
-var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_documents5 = require("@elementor/editor-documents");
 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_i18n9 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/store/actions/add-overridable-group.ts
 var import_store9 = require("@elementor/store");
@@ -727,1388 +727,1485 @@ function deleteOverridableGroup({ componentId, groupId }) {
 }
 
 // src/store/actions/delete-overridable-prop.ts
+var import_store15 = require("@elementor/store");
+
+// src/utils/revert-element-overridable-setting.ts
 var import_editor_elements2 = require("@elementor/editor-elements");
-var import_store13 = require("@elementor/store");
-function deleteOverridableProp({ componentId, propKey, source }) {
-  const overridableProps = selectOverridableProps((0, import_store13.__getState)(), componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const prop = overridableProps.props[propKey];
-  if (!prop) {
-    return;
-  }
-  revertElementSetting(prop.elementId, prop.propKey, prop.originValue);
-  const { [propKey]: removedProp, ...remainingProps } = overridableProps.props;
-  const updatedGroups = removePropFromAllGroups(overridableProps.groups, propKey);
-  (0, import_store13.__dispatch)(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        props: remainingProps,
-        groups: updatedGroups
-      }
-    })
-  );
-  const currentComponent = selectCurrentComponent((0, import_store13.__getState)());
-  trackComponentEvent({
-    action: "propertyRemoved",
-    source,
-    component_uid: currentComponent?.uid,
-    property_id: removedProp.overrideKey,
-    property_path: removedProp.propKey,
-    property_name: removedProp.label,
-    element_type: removedProp.widgetType ?? removedProp.elType
-  });
-}
-function revertElementSetting(elementId, settingKey, originValue) {
-  const container = (0, import_editor_elements2.getContainer)(elementId);
-  if (!container) {
-    return;
-  }
-  (0, import_editor_elements2.updateElementSettings)({
-    id: elementId,
-    props: { [settingKey]: originValue ?? null },
-    withHistory: false
-  });
-}
 
-// src/store/actions/reorder-group-props.ts
-var import_store15 = require("@elementor/store");
-function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
-  const overridableProps = selectOverridableProps((0, import_store15.__getState)(), componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const group = overridableProps.groups.items[groupId];
-  if (!group) {
-    return;
-  }
-  (0, import_store15.__dispatch)(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        groups: {
-          ...overridableProps.groups,
-          items: {
-            ...overridableProps.groups.items,
-            [groupId]: {
-              ...group,
-              props: newPropsOrder
-            }
-          }
-        }
-      }
+// src/prop-types/component-instance-override-prop-type.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_schema = require("@elementor/schema");
+var componentInstanceOverridePropTypeUtil = (0, import_editor_props.createPropUtils)(
+  "override",
+  import_schema.z.object({
+    override_key: import_schema.z.string(),
+    override_value: import_schema.z.unknown(),
+    schema_source: import_schema.z.object({
+      type: import_schema.z.literal("component"),
+      id: import_schema.z.number()
     })
-  );
-}
+  })
+);
 
-// src/store/actions/reorder-overridable-groups.ts
-var import_store17 = require("@elementor/store");
-function reorderOverridableGroups({ componentId, newOrder }) {
-  const overridableProps = selectOverridableProps((0, import_store17.__getState)(), componentId);
-  if (!overridableProps) {
-    return;
-  }
-  (0, import_store17.__dispatch)(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        groups: {
-          ...overridableProps.groups,
-          order: newOrder
-        }
-      }
-    })
-  );
-}
+// src/prop-types/component-instance-overrides-prop-type.ts
+var import_editor_props3 = require("@elementor/editor-props");
+var import_schema3 = require("@elementor/schema");
 
-// src/store/actions/update-overridable-prop-params.ts
-var import_store19 = require("@elementor/store");
-function updateOverridablePropParams({
-  componentId,
-  overrideKey,
-  label,
-  groupId
-}) {
-  const overridableProps = selectOverridableProps((0, import_store19.__getState)(), componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const prop = overridableProps.props[overrideKey];
-  if (!prop) {
-    return;
-  }
-  const oldGroupId = prop.groupId;
-  const newGroupId = groupId ?? oldGroupId;
-  const updatedProp = {
-    ...prop,
-    label,
-    groupId: newGroupId
-  };
-  const updatedGroups = movePropBetweenGroups(overridableProps.groups, overrideKey, oldGroupId, newGroupId);
-  (0, import_store19.__dispatch)(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        props: {
-          ...overridableProps.props,
-          [overrideKey]: updatedProp
-        },
-        groups: updatedGroups
-      }
-    })
-  );
-  return updatedProp;
-}
+// src/prop-types/component-overridable-prop-type.ts
+var import_editor_props2 = require("@elementor/editor-props");
+var import_schema2 = require("@elementor/schema");
+var componentOverridablePropTypeUtil = (0, import_editor_props2.createPropUtils)(
+  "overridable",
+  import_schema2.z.object({
+    override_key: import_schema2.z.string(),
+    origin_value: import_schema2.z.object({
+      $$type: import_schema2.z.string(),
+      value: import_schema2.z.unknown()
+    }).nullable()
+  })
+);
 
-// src/components/component-panel-header/use-overridable-props.ts
-var import_store21 = require("@elementor/store");
-function useOverridableProps2(componentId) {
-  return (0, import_store21.__useSelector)((state) => {
-    if (!componentId) {
-      return void 0;
-    }
-    return selectOverridableProps(state, componentId);
-  });
-}
+// src/prop-types/component-instance-overrides-prop-type.ts
+var componentInstanceOverridesPropTypeUtil = (0, import_editor_props3.createPropUtils)(
+  "overrides",
+  import_schema3.z.array(import_schema3.z.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([])
+);
 
-// src/components/component-properties-panel/properties-empty-state.tsx
-var React2 = __toESM(require("react"));
-var import_react2 = require("react");
-var import_icons = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+// src/prop-types/component-instance-prop-type.ts
+var import_editor_props4 = require("@elementor/editor-props");
+var import_schema4 = require("@elementor/schema");
+var componentInstancePropTypeUtil = (0, import_editor_props4.createPropUtils)(
+  "component-instance",
+  import_schema4.z.object({
+    component_id: import_editor_props4.numberPropTypeUtil.schema,
+    overrides: import_schema4.z.optional(componentInstanceOverridesPropTypeUtil.schema)
+  })
+);
 
-// src/components/components-tab/component-introduction.tsx
-var React = __toESM(require("react"));
-var import_editor_controls = require("@elementor/editor-controls");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_ui = require("@elementor/ui");
+// src/create-component-type.ts
+var import_editor_canvas4 = require("@elementor/editor-canvas");
+var import_editor_documents3 = require("@elementor/editor-documents");
+var import_store13 = require("@elementor/store");
 var import_i18n2 = require("@wordpress/i18n");
-var ComponentIntroduction = ({
-  anchorRef,
-  shouldShowIntroduction,
-  onClose
-}) => {
-  if (!anchorRef.current || !shouldShowIntroduction) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(
-    import_ui.Popover,
-    {
-      anchorEl: anchorRef.current,
-      open: shouldShowIntroduction,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: -30
-      },
-      onClose
-    },
-    /* @__PURE__ */ React.createElement(import_ui.Box, { sx: { width: "296px" } }, /* @__PURE__ */ React.createElement(import_editor_ui.PopoverHeader, { title: (0, import_i18n2.__)("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React.createElement(
-      import_ui.Image,
-      {
-        sx: { width: "296px", height: "160px" },
-        src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
-        alt: ""
-      }
-    ), /* @__PURE__ */ React.createElement(import_editor_controls.PopoverContent, null, /* @__PURE__ */ React.createElement(import_ui.Stack, { sx: { p: 2 } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
-      "Click next to any setting you want users to customize - like text, images, or links.",
-      "elementor"
-    )), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", sx: { mt: 2 } }, (0, import_i18n2.__)(
-      "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
-      "elementor"
-    )), /* @__PURE__ */ React.createElement(
-      import_ui.Link,
-      {
-        href: "http://go.elementor.com/components-guide",
-        target: "_blank",
-        sx: { mt: 2 },
-        color: "info.main",
-        variant: "body2"
-      },
-      (0, import_i18n2.__)("Learn more", "elementor")
-    ), /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { pt: 1 } }, /* @__PURE__ */ React.createElement(import_ui.Button, { size: "medium", variant: "contained", onClick: onClose }, (0, import_i18n2.__)("Got it", "elementor"))))))
-  );
+var COMPONENT_WIDGET_TYPE = "e-component";
+var updateGroups = (groups, config) => {
+  const disableMap = new Map(Object.entries(config.disable ?? {}));
+  const addMap = new Map(Object.entries(config.add ?? {}));
+  return groups.map((group) => {
+    const disabledActions = disableMap.get(group.name) ?? [];
+    const addConfig = addMap.get(group.name);
+    const updatedActions = group.actions.map(
+      (action) => disabledActions.includes(action.name) ? { ...action, isEnabled: () => false } : action
+    );
+    if (addConfig) {
+      updatedActions.splice(addConfig.index, 0, addConfig.action);
+    }
+    return { ...group, actions: updatedActions };
+  });
 };
-
-// src/components/component-properties-panel/properties-empty-state.tsx
-function PropertiesEmptyState({ introductionRef }) {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
-    import_ui2.Stack,
-    {
-      alignItems: "center",
-      justifyContent: "flex-start",
-      height: "100%",
-      color: "text.secondary",
-      sx: { px: 2.5, pt: 10, pb: 5.5 },
-      gap: 1
-    },
-    /* @__PURE__ */ React2.createElement(import_icons.ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n3.__)("Add your first property", "elementor")),
-    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "caption" }, (0, import_i18n3.__)("Make instances flexible while keeping design synced.", "elementor")),
-    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "caption" }, (0, import_i18n3.__)("Select any element, then click + next to a setting to expose it.", "elementor")),
-    /* @__PURE__ */ React2.createElement(
-      import_ui2.Link,
-      {
-        variant: "caption",
-        color: "secondary",
-        sx: { textDecorationLine: "underline" },
-        onClick: () => setIsOpen(true)
-      },
-      (0, import_i18n3.__)("Learn more", "elementor")
-    )
-  ), /* @__PURE__ */ React2.createElement(
-    ComponentIntroduction,
-    {
-      anchorRef: introductionRef,
-      shouldShowIntroduction: isOpen,
-      onClose: () => setIsOpen(false)
+function createComponentType(options) {
+  const legacyWindow = window;
+  const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
+  const view = createComponentView({ ...options });
+  return class extends WidgetType {
+    getType() {
+      return options.type;
     }
-  ));
-}
-
-// src/components/component-properties-panel/properties-group.tsx
-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_i18n6 = require("@wordpress/i18n");
-
-// src/components/component-properties-panel/property-item.tsx
-var React5 = __toESM(require("react"));
-var import_editor_elements3 = require("@elementor/editor-elements");
-var import_icons3 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
-
-// src/components/overridable-props/overridable-prop-form.tsx
-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;
+    getView() {
+      return view;
     }
-    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_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 [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_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;
+    getModel() {
+      return createComponentModel();
     }
-    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",
-      alignItems: "center",
-      py: 1,
-      px: 1.5,
-      sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
-    },
-    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__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" }, name)), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
-    import_ui3.TextField,
-    {
-      name,
-      size: SIZE,
-      fullWidth: true,
-      placeholder: (0, import_i18n5.__)("Enter value", "elementor"),
-      value: propLabel ?? "",
-      onChange: (e) => {
-        const newValue = e.target.value;
-        setPropLabel(newValue);
-        const validationResult = validatePropLabel(
-          newValue,
-          existingLabels,
-          currentValue?.label
-        );
-        setError(validationResult.errorMessage);
-      },
-      error: Boolean(error),
-      helperText: error
+}
+function createComponentView(options) {
+  const legacyWindow = window;
+  return class extends (0, import_editor_canvas4.createTemplatedElementView)(options) {
+    eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
+    #componentRenderContext;
+    isComponentCurrentlyEdited() {
+      const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
+      return currentDocument?.id === this.getComponentId();
     }
-  ))), /* @__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,
-    {
-      name: groupName,
-      size: SIZE,
-      fullWidth: true,
-      value: group ?? null,
-      onChange: (e) => setGroup(e.target.value),
-      displayEmpty: true,
-      renderValue: (selectedValue) => {
-        if (!selectedValue || selectedValue === "") {
-          const [firstGroup = DEFAULT_GROUP] = groups ?? [];
-          return firstGroup.label;
+    getRenderContext() {
+      const namespaceKey = this.getNamespaceKey();
+      const parentContext = this._parent?.getRenderContext?.();
+      const parentComponentContext = parentContext?.[namespaceKey];
+      if (!this.#componentRenderContext) {
+        return parentContext;
+      }
+      const ownOverrides = this.#componentRenderContext.overrides ?? {};
+      const parentOverrides = parentComponentContext?.overrides ?? {};
+      return {
+        ...parentContext,
+        [namespaceKey]: {
+          overrides: {
+            ...parentOverrides,
+            ...ownOverrides
+          }
+        }
+      };
+    }
+    getResolverRenderContext() {
+      const namespaceKey = this.getNamespaceKey();
+      const context = this.getRenderContext();
+      return context?.[namespaceKey];
+    }
+    afterSettingsResolve(settings) {
+      const componentInstance = settings.component_instance;
+      if (componentInstance) {
+        this.#componentRenderContext = {
+          overrides: componentInstance.overrides ?? {}
+        };
+        this.collection = legacyWindow.elementor.createBackboneElementsCollection(componentInstance.elements);
+        this.collection.models.forEach(setInactiveRecursively);
+        settings.component_instance = "<template data-children-placeholder></template>";
+      }
+      return settings;
+    }
+    getDomElement() {
+      return this.children.findByIndex(0)?.getDomElement() ?? this.$el;
+    }
+    attachBuffer(collectionView, buffer) {
+      const childrenPlaceholder = collectionView.$el.find("[data-children-placeholder]").get(0);
+      if (!childrenPlaceholder) {
+        super.attachBuffer(collectionView, buffer);
+        return;
+      }
+      childrenPlaceholder.replaceWith(buffer);
+    }
+    getComponentId() {
+      const componentInstance = this.options?.model?.get("settings")?.get("component_instance")?.value;
+      return componentInstance.component_id.value;
+    }
+    getContextMenuGroups() {
+      const filteredGroups = super.getContextMenuGroups().filter((group) => group.name !== "save");
+      const componentId = this.getComponentId();
+      if (!componentId) {
+        return filteredGroups;
+      }
+      const newGroups = updateGroups(
+        filteredGroups,
+        this._getContextMenuConfig()
+      );
+      return newGroups;
+    }
+    _getContextMenuConfig() {
+      const isAdministrator = isUserAdministrator();
+      const addedGroup = {
+        general: {
+          index: 1,
+          action: {
+            name: "edit component",
+            icon: "eicon-edit",
+            title: () => (0, import_i18n2.__)("Edit Component", "elementor"),
+            isEnabled: () => true,
+            callback: (_, eventData) => this.editComponent(eventData)
+          }
+        }
+      };
+      const disabledGroup = {
+        clipboard: ["pasteStyle", "resetStyle"]
+      };
+      return { add: isAdministrator ? addedGroup : {}, disable: disabledGroup };
+    }
+    async switchDocument() {
+      const { isAllowedToSwitchDocument, lockedBy } = await apiClient.getComponentLockStatus(
+        this.getComponentId()
+      );
+      if (!isAllowedToSwitchDocument) {
+        options.showLockedByModal?.(lockedBy || "");
+      } else {
+        switchToComponent(this.getComponentId(), this.model.get("id"), this.el);
+      }
+    }
+    editComponent({ trigger, location, secondaryLocation }) {
+      if (this.isComponentCurrentlyEdited()) {
+        return;
+      }
+      this.switchDocument();
+      const editorSettings = this.model.get("editor_settings");
+      trackComponentEvent({
+        action: "edited",
+        source: "user",
+        component_uid: editorSettings?.component_uid,
+        component_name: editorSettings?.title,
+        location,
+        secondary_location: secondaryLocation,
+        trigger
+      });
+    }
+    handleDblClick(e) {
+      e.stopPropagation();
+      const isAdministrator = isUserAdministrator();
+      if (!isAdministrator) {
+        return;
+      }
+      const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
+      this.editComponent({
+        trigger: triggers.doubleClick,
+        location: locations.canvas,
+        secondaryLocation: secondaryLocations.canvasElement
+      });
+    }
+    events() {
+      return {
+        ...super.events(),
+        dblclick: this.handleDblClick
+      };
+    }
+    attributes() {
+      return {
+        ...super.attributes(),
+        "data-elementor-id": this.getComponentId()
+      };
+    }
+  };
+}
+function setInactiveRecursively(model) {
+  const editSettings = model.get("editSettings");
+  if (editSettings) {
+    editSettings.set("inactive", true);
+  }
+  const elements = model.get("elements");
+  if (elements) {
+    elements.forEach((childModel) => {
+      setInactiveRecursively(childModel);
+    });
+  }
+}
+function isUserAdministrator() {
+  const legacyWindow = window;
+  return legacyWindow.elementor.config?.user?.is_administrator ?? false;
+}
+function createComponentModel() {
+  const legacyWindow = window;
+  const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
+  const widgetTypeInstance = new WidgetType();
+  const BaseWidgetModel = widgetTypeInstance.getModel();
+  return BaseWidgetModel.extend({
+    initialize(attributes, options) {
+      BaseWidgetModel.prototype.initialize.call(this, attributes, options);
+      const componentInstance = this.get("settings")?.get("component_instance");
+      if (componentInstance?.value) {
+        const componentId = componentInstance.value.component_id?.value;
+        if (componentId && typeof componentId === "number") {
+          this.set("componentId", componentId);
         }
-        return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
       }
+      this.set("isGlobal", true);
     },
-    (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 || Boolean(error),
-      variant: "contained",
-      color: "primary",
-      size: "small"
+    getTitle() {
+      const editorSettings = this.get("editor_settings");
+      const instanceTitle = editorSettings?.title;
+      if (instanceTitle) {
+        return instanceTitle;
+      }
+      const componentUid = editorSettings?.component_uid;
+      if (componentUid) {
+        const component = selectComponentByUid((0, import_store13.__getState)(), componentUid);
+        if (component?.name) {
+          return component.name;
+        }
+      }
+      return window.elementor.getElementData(this).title;
     },
-    ctaLabel
-  ))));
+    getComponentId() {
+      return this.get("componentId") || null;
+    },
+    getComponentName() {
+      return this.getTitle();
+    },
+    getComponentUid() {
+      const editorSettings = this.get("editor_settings");
+      return editorSettings?.component_uid || null;
+    }
+  });
 }
 
-// src/components/component-properties-panel/sortable.tsx
-var React4 = __toESM(require("react"));
-var import_icons2 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var SortableProvider = (props) => /* @__PURE__ */ React4.createElement(import_ui4.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React4.createElement(
-  StyledSortableTrigger,
-  {
-    ...props,
-    role: "button",
-    className: `sortable-trigger ${triggerClassName ?? ""}`.trim(),
-    "aria-label": "sort"
-  },
-  /* @__PURE__ */ React4.createElement(import_icons2.GripVerticalIcon, { fontSize: "tiny" })
-);
-var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React4.createElement(
-  import_ui4.UnstableSortableItem,
-  {
-    id: id2,
-    render: ({
-      itemProps,
-      isDragged,
-      triggerProps,
-      itemStyle,
-      triggerStyle,
-      dropIndicationStyle,
-      showDropIndication,
-      isDragOverlay,
-      isDragPlaceholder
-    }) => /* @__PURE__ */ React4.createElement(
-      import_ui4.Box,
-      {
-        ...itemProps,
-        style: itemStyle,
-        component: "div",
-        role: "listitem",
-        sx: {
-          backgroundColor: isDragOverlay ? "background.paper" : void 0
-        }
-      },
-      children({
-        isDragged,
-        isDragPlaceholder,
-        triggerProps,
-        triggerStyle
-      }),
-      showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
-    )
+// src/utils/is-component-instance.ts
+function isComponentInstance(elementModel) {
+  return [elementModel.widgetType, elementModel.elType].includes(COMPONENT_WIDGET_TYPE);
+}
+
+// src/utils/revert-element-overridable-setting.ts
+function revertElementOverridableSetting(elementId, settingKey, originValue, overrideKey) {
+  const container = (0, import_editor_elements2.getContainer)(elementId);
+  if (!container) {
+    return;
   }
-);
-var StyledSortableTrigger = (0, import_ui4.styled)("div")(({ theme }) => ({
-  position: "absolute",
-  left: "-2px",
-  top: "50%",
-  transform: `translate( -${theme.spacing(1.5)}, -50% )`,
-  color: theme.palette.action.active,
-  cursor: "grab"
-}));
-var SortableItemIndicator = (0, import_ui4.styled)(import_ui4.Box)`
-	width: 100%;
-	height: 1px;
-	background-color: ${({ theme }) => theme.palette.text.primary};
-`;
+  if (isComponentInstance(container.model.toJSON())) {
+    revertComponentInstanceSetting(elementId, overrideKey);
+    return;
+  }
+  (0, import_editor_elements2.updateElementSettings)({
+    id: elementId,
+    props: { [settingKey]: originValue ?? null },
+    withHistory: false
+  });
+}
+function revertComponentInstanceSetting(elementId, overrideKey) {
+  const setting = (0, import_editor_elements2.getElementSetting)(elementId, "component_instance");
+  const componentInstance = componentInstancePropTypeUtil.extract(setting);
+  const overrides = componentInstanceOverridesPropTypeUtil.extract(componentInstance?.overrides);
+  if (!overrides) {
+    return;
+  }
+  const updatedOverrides = getUpdatedComponentInstanceOverrides(overrides, overrideKey);
+  const updatedSetting = componentInstancePropTypeUtil.create({
+    ...componentInstance,
+    overrides: componentInstanceOverridesPropTypeUtil.create(updatedOverrides)
+  });
+  (0, import_editor_elements2.updateElementSettings)({
+    id: elementId,
+    props: { component_instance: updatedSetting },
+    withHistory: false
+  });
+}
+function getUpdatedComponentInstanceOverrides(overrides, overrideKey) {
+  return overrides.map((item) => {
+    const isOverridable = componentOverridablePropTypeUtil.isValid(item);
+    if (!isOverridable) {
+      return item;
+    }
+    const isOriginValueOverride2 = componentInstanceOverridePropTypeUtil.isValid(item.value.origin_value);
+    if (!isOriginValueOverride2) {
+      return null;
+    }
+    if (item.value.override_key !== overrideKey) {
+      return item;
+    }
+    return item.value.origin_value;
+  }).filter((item) => item !== null);
+}
 
-// src/components/component-properties-panel/property-item.tsx
-function PropertyItem({
-  prop,
-  sortableTriggerProps,
-  isDragPlaceholder,
-  groups,
-  existingLabels,
-  onDelete,
-  onUpdate
-}) {
-  const popoverState = (0, import_ui5.usePopupState)({
-    variant: "popover"
+// src/store/actions/delete-overridable-prop.ts
+function deleteOverridableProp({ componentId, propKey, source }) {
+  const overridableProps = selectOverridableProps((0, import_store15.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const prop = overridableProps.props[propKey];
+  if (!prop) {
+    return;
+  }
+  revertElementOverridableSetting(prop.elementId, prop.propKey, prop.originValue, propKey);
+  const { [propKey]: removedProp, ...remainingProps } = overridableProps.props;
+  const updatedGroups = removePropFromAllGroups(overridableProps.groups, propKey);
+  (0, import_store15.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        props: remainingProps,
+        groups: updatedGroups
+      }
+    })
+  );
+  const currentComponent = selectCurrentComponent((0, import_store15.__getState)());
+  trackComponentEvent({
+    action: "propertyRemoved",
+    source,
+    component_uid: currentComponent?.uid,
+    property_id: removedProp.overrideKey,
+    property_path: removedProp.propKey,
+    property_name: removedProp.label,
+    element_type: removedProp.widgetType ?? removedProp.elType
   });
-  const icon = getElementIcon(prop);
-  const popoverProps = (0, import_ui5.bindPopover)(popoverState);
-  const handleSubmit = (data) => {
-    onUpdate(data);
-    popoverState.close();
-  };
-  const handleDelete = (event) => {
-    event.stopPropagation();
-    onDelete(prop.overrideKey);
-  };
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
-    import_ui5.Box,
-    {
-      ...(0, import_ui5.bindTrigger)(popoverState),
-      sx: {
-        position: "relative",
-        pl: 0.5,
-        pr: 1,
-        py: 0.25,
-        minHeight: 28,
-        borderRadius: 1,
-        border: "1px solid",
-        borderColor: "divider",
-        display: "flex",
-        alignItems: "center",
-        gap: 0.5,
-        opacity: isDragPlaceholder ? 0.5 : 1,
-        cursor: "pointer",
-        "&:hover": {
-          backgroundColor: "action.hover"
-        },
-        "&:hover .sortable-trigger": {
-          visibility: "visible"
-        },
-        "& .sortable-trigger": {
-          visibility: "hidden"
-        },
-        "&:hover .delete-button": {
-          visibility: "visible"
-        },
-        "& .delete-button": {
-          visibility: "hidden"
+}
+
+// src/store/actions/reorder-group-props.ts
+var import_store17 = require("@elementor/store");
+function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
+  const overridableProps = selectOverridableProps((0, import_store17.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const group = overridableProps.groups.items[groupId];
+  if (!group) {
+    return;
+  }
+  (0, import_store17.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: {
+          ...overridableProps.groups,
+          items: {
+            ...overridableProps.groups.items,
+            [groupId]: {
+              ...group,
+              props: newPropsOrder
+            }
+          }
         }
       }
-    },
-    /* @__PURE__ */ React5.createElement(SortableTrigger, { ...sortableTriggerProps }),
-    /* @__PURE__ */ React5.createElement(
-      import_ui5.Box,
-      {
-        sx: { display: "flex", alignItems: "center", color: "text.primary", fontSize: 12, padding: 0.25 }
-      },
-      /* @__PURE__ */ React5.createElement("i", { className: icon })
-    ),
-    /* @__PURE__ */ React5.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
-    /* @__PURE__ */ React5.createElement(import_ui5.IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React5.createElement(import_icons3.XIcon, { fontSize: "tiny" }))
-  ), /* @__PURE__ */ React5.createElement(
-    import_ui5.Popover,
-    {
-      ...popoverProps,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      PaperProps: { sx: { width: popoverState.anchorEl?.getBoundingClientRect().width } }
-    },
-    /* @__PURE__ */ React5.createElement(
-      OverridablePropForm,
-      {
-        onSubmit: handleSubmit,
-        currentValue: prop,
-        groups,
-        existingLabels,
-        sx: { width: "100%" }
-      }
-    )
-  ));
+    })
+  );
 }
-function getElementIcon(prop) {
-  const elType = prop.elType === "widget" ? prop.widgetType : prop.elType;
-  const widgetsCache = (0, import_editor_elements3.getWidgetsCache)();
-  if (!widgetsCache) {
-    return "eicon-apps";
+
+// src/store/actions/reorder-overridable-groups.ts
+var import_store19 = require("@elementor/store");
+function reorderOverridableGroups({ componentId, newOrder }) {
+  const overridableProps = selectOverridableProps((0, import_store19.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
   }
-  const widgetConfig = widgetsCache[elType];
-  return widgetConfig?.icon || "eicon-apps";
+  (0, import_store19.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: {
+          ...overridableProps.groups,
+          order: newOrder
+        }
+      }
+    })
+  );
 }
 
-// src/components/component-properties-panel/properties-group.tsx
-function PropertiesGroup({
-  group,
-  props,
-  allGroups,
-  sortableTriggerProps,
-  isDragPlaceholder,
-  onPropsReorder,
-  onPropertyDelete,
-  onPropertyUpdate,
-  onGroupDelete,
-  editableLabelProps
+// src/store/actions/update-overridable-prop-params.ts
+var import_store21 = require("@elementor/store");
+function updateOverridablePropParams({
+  componentId,
+  overrideKey,
+  label,
+  groupId
 }) {
-  const groupProps = group.props.map((propId) => props[propId]).filter((prop) => Boolean(prop));
-  const popupState = (0, import_ui6.usePopupState)({
-    variant: "popover",
-    disableAutoFocus: true
-  });
-  const { editableRef, isEditing, error, getEditableProps, setEditingGroupId, editingGroupId } = editableLabelProps;
-  const hasProperties = group.props.length > 0;
-  const isThisGroupEditing = isEditing && editingGroupId === group.id;
-  const handleRenameClick = () => {
-    popupState.close();
-    setEditingGroupId(group.id);
-  };
-  const handleDeleteClick = () => {
-    popupState.close();
-    onGroupDelete(group.id);
+  const overridableProps = selectOverridableProps((0, import_store21.__getState)(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const prop = overridableProps.props[overrideKey];
+  if (!prop) {
+    return;
+  }
+  const oldGroupId = prop.groupId;
+  const newGroupId = groupId ?? oldGroupId;
+  const updatedProp = {
+    ...prop,
+    label,
+    groupId: newGroupId
   };
-  return /* @__PURE__ */ React6.createElement(
-    import_ui6.Box,
-    {
-      sx: {
-        opacity: isDragPlaceholder ? 0.5 : 1
+  const updatedGroups = movePropBetweenGroups(overridableProps.groups, overrideKey, oldGroupId, newGroupId);
+  (0, import_store21.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        props: {
+          ...overridableProps.props,
+          [overrideKey]: updatedProp
+        },
+        groups: updatedGroups
       }
-    },
-    /* @__PURE__ */ React6.createElement(import_ui6.Stack, { gap: 1 }, /* @__PURE__ */ React6.createElement(
-      import_ui6.Box,
-      {
-        className: "group-header",
-        sx: {
-          position: "relative",
-          "&:hover .group-sortable-trigger": {
-            visibility: "visible"
-          },
-          "& .group-sortable-trigger": {
-            visibility: "hidden"
-          },
-          "&:hover .group-menu": {
-            visibility: "visible"
-          },
-          "& .group-menu": {
-            visibility: "hidden"
-          }
-        }
+    })
+  );
+  return updatedProp;
+}
+
+// src/components/component-panel-header/use-overridable-props.ts
+var import_store23 = require("@elementor/store");
+function useOverridableProps2(componentId) {
+  return (0, import_store23.__useSelector)((state) => {
+    if (!componentId) {
+      return void 0;
+    }
+    return selectOverridableProps(state, componentId);
+  });
+}
+
+// src/components/component-properties-panel/properties-empty-state.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_icons = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+
+// src/components/components-tab/component-introduction.tsx
+var React = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_ui = require("@elementor/editor-ui");
+var import_ui = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+var ComponentIntroduction = ({
+  anchorRef,
+  shouldShowIntroduction,
+  onClose
+}) => {
+  if (!anchorRef.current || !shouldShowIntroduction) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    import_ui.Popover,
+    {
+      anchorEl: anchorRef.current,
+      open: shouldShowIntroduction,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
       },
-      /* @__PURE__ */ React6.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
-      /* @__PURE__ */ React6.createElement(import_ui6.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React6.createElement(
-        import_ui6.Box,
-        {
-          sx: {
-            flex: 1,
-            height: 28,
-            display: "flex",
-            alignItems: "center",
-            border: 2,
-            borderColor: "text.secondary",
-            borderRadius: 1,
-            pl: 0.5
-          }
-        },
-        /* @__PURE__ */ React6.createElement(
-          import_editor_ui3.EditableField,
-          {
-            ref: editableRef,
-            as: import_ui6.Typography,
-            variant: "caption",
-            error: error ?? void 0,
-            sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 },
-            ...getEditableProps()
-          }
-        )
-      ) : /* @__PURE__ */ React6.createElement(
-        import_ui6.Typography,
-        {
-          variant: "caption",
-          sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
-        },
-        group.label
-      ), /* @__PURE__ */ React6.createElement(
-        import_ui6.IconButton,
-        {
-          className: "group-menu",
-          size: "tiny",
-          sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
-          "aria-label": (0, import_i18n6.__)("Group actions", "elementor"),
-          ...(0, import_ui6.bindTrigger)(popupState)
-        },
-        /* @__PURE__ */ React6.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" })
-      ))
-    ), /* @__PURE__ */ React6.createElement(import_ui6.List, { sx: { p: 0, display: "flex", flexDirection: "column", gap: 1 } }, /* @__PURE__ */ React6.createElement(SortableProvider, { value: group.props, onChange: onPropsReorder }, groupProps.map((prop) => /* @__PURE__ */ React6.createElement(SortableItem, { key: prop.overrideKey, id: prop.overrideKey }, ({ triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder }) => /* @__PURE__ */ React6.createElement(
-      PropertyItem,
+      transformOrigin: {
+        vertical: "top",
+        horizontal: -30
+      },
+      onClose
+    },
+    /* @__PURE__ */ React.createElement(import_ui.Box, { sx: { width: "296px" } }, /* @__PURE__ */ React.createElement(import_editor_ui.PopoverHeader, { title: (0, import_i18n3.__)("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React.createElement(
+      import_ui.Image,
       {
-        prop,
-        sortableTriggerProps: { ...triggerProps, style: triggerStyle },
-        isDragPlaceholder: isItemDragPlaceholder,
-        groups: allGroups,
-        existingLabels: Object.values(props).map((p) => p.label),
-        onDelete: onPropertyDelete,
-        onUpdate: (data) => onPropertyUpdate(prop.overrideKey, data)
+        sx: { width: "296px", height: "160px" },
+        src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
+        alt: ""
       }
-    )))))),
-    /* @__PURE__ */ React6.createElement(
-      import_ui6.Menu,
+    ), /* @__PURE__ */ React.createElement(import_editor_controls.PopoverContent, null, /* @__PURE__ */ React.createElement(import_ui.Stack, { sx: { p: 2 } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n3.__)("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n3.__)(
+      "Click next to any setting you want users to customize - like text, images, or links.",
+      "elementor"
+    )), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", sx: { mt: 2 } }, (0, import_i18n3.__)(
+      "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
+      "elementor"
+    )), /* @__PURE__ */ React.createElement(
+      import_ui.Link,
       {
-        ...(0, import_ui6.bindMenu)(popupState),
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" }
+        href: "http://go.elementor.com/components-guide",
+        target: "_blank",
+        sx: { mt: 2 },
+        color: "info.main",
+        variant: "body2"
       },
-      /* @__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_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(
-          import_ui6.Typography,
-          {
-            variant: "caption",
-            sx: { color: hasProperties ? "text.disabled" : "error.light" }
-          },
-          (0, import_i18n6.__)("Delete", "elementor")
-        )))
-      )
-    )
+      (0, import_i18n3.__)("Learn more", "elementor")
+    ), /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { pt: 1 } }, /* @__PURE__ */ React.createElement(import_ui.Button, { size: "medium", variant: "contained", onClick: onClose }, (0, import_i18n3.__)("Got it", "elementor"))))))
   );
-}
-
-// src/components/component-properties-panel/use-current-editable-item.ts
-var import_react4 = require("react");
-var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_ui4 = require("@elementor/editor-ui");
-var import_i18n8 = require("@wordpress/i18n");
+};
 
-// src/store/actions/rename-overridable-group.ts
-var import_store23 = require("@elementor/store");
-function renameOverridableGroup({ componentId, groupId, label }) {
-  const overridableProps = selectOverridableProps((0, import_store23.__getState)(), componentId);
-  if (!overridableProps) {
-    return false;
-  }
-  const group = overridableProps.groups.items[groupId];
-  if (!group) {
-    return false;
-  }
-  const updatedGroups = renameGroup(overridableProps.groups, groupId, label);
-  (0, import_store23.__dispatch)(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        groups: updatedGroups
-      }
-    })
-  );
-  return true;
+// src/components/component-properties-panel/properties-empty-state.tsx
+function PropertiesEmptyState({ introductionRef }) {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    import_ui2.Stack,
+    {
+      alignItems: "center",
+      justifyContent: "flex-start",
+      height: "100%",
+      color: "text.secondary",
+      sx: { px: 2.5, pt: 10, pb: 5.5 },
+      gap: 1
+    },
+    /* @__PURE__ */ React2.createElement(import_icons.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n4.__)("Add your first property", "elementor")),
+    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "caption" }, (0, import_i18n4.__)("Make instances flexible while keeping design synced.", "elementor")),
+    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "caption" }, (0, import_i18n4.__)("Select any element, then click + next to a setting to expose it.", "elementor")),
+    /* @__PURE__ */ React2.createElement(
+      import_ui2.Link,
+      {
+        variant: "caption",
+        color: "secondary",
+        sx: { textDecorationLine: "underline" },
+        onClick: () => setIsOpen(true)
+      },
+      (0, import_i18n4.__)("Learn more", "elementor")
+    )
+  ), /* @__PURE__ */ React2.createElement(
+    ComponentIntroduction,
+    {
+      anchorRef: introductionRef,
+      shouldShowIntroduction: isOpen,
+      onClose: () => setIsOpen(false)
+    }
+  ));
 }
 
-// src/components/component-properties-panel/utils/validate-group-label.ts
+// src/components/component-properties-panel/properties-group.tsx
+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_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_MESSAGES2.EMPTY_NAME;
-  }
-  const isDuplicate = Object.values(existingGroups).some((group) => group.label === trimmedLabel);
-  if (isDuplicate) {
-    return ERROR_MESSAGES2.DUPLICATE_NAME;
-  }
-  return "";
-}
 
-// src/components/component-properties-panel/use-current-editable-item.ts
-function useCurrentEditableItem() {
-  const [editingGroupId, setEditingGroupId] = (0, import_react4.useState)(null);
-  const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps2(currentComponentId);
-  const allGroupsRecord = overridableProps?.groups?.items ?? {};
-  const currentGroup = editingGroupId ? allGroupsRecord[editingGroupId] : null;
-  const validateLabel = (newLabel) => {
-    const otherGroups = Object.fromEntries(
-      Object.entries(allGroupsRecord).filter(([id2]) => id2 !== editingGroupId)
-    );
-    return validateGroupLabel(newLabel, otherGroups) || null;
-  };
-  const handleSubmit = (newLabel) => {
-    if (!editingGroupId || !currentComponentId) {
-      throw new Error((0, import_i18n8.__)("Group ID or component ID is missing", "elementor"));
-    }
-    renameOverridableGroup({
-      componentId: currentComponentId,
-      groupId: editingGroupId,
-      label: newLabel
-    });
-    (0, import_editor_documents3.setDocumentModifiedStatus)(true);
-  };
-  const {
-    ref: editableRef,
-    openEditMode,
-    isEditing,
-    error,
-    getProps: getEditableProps
-  } = (0, import_editor_ui4.useEditable)({
-    value: currentGroup?.label ?? "",
-    onSubmit: handleSubmit,
-    validation: validateLabel
-  });
-  return {
-    editableRef,
-    isEditing,
-    error,
-    getEditableProps,
-    setEditingGroupId: (groupId) => {
-      setEditingGroupId(groupId);
-      openEditMode();
-    },
-    editingGroupId
-  };
-}
+// src/components/component-properties-panel/property-item.tsx
+var React5 = __toESM(require("react"));
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_icons3 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
 
-// src/components/component-properties-panel/utils/generate-unique-label.ts
-var DEFAULT_NEW_GROUP_LABEL = "New group";
-function generateUniqueLabel(groups) {
-  const existingLabels = new Set(groups.map((group) => group.label));
-  if (!existingLabels.has(DEFAULT_NEW_GROUP_LABEL)) {
-    return DEFAULT_NEW_GROUP_LABEL;
-  }
-  let index = 1;
-  let newLabel = `${DEFAULT_NEW_GROUP_LABEL}-${index}`;
-  while (existingLabels.has(newLabel)) {
-    index++;
-    newLabel = `${DEFAULT_NEW_GROUP_LABEL}-${index}`;
-  }
-  return newLabel;
-}
+// src/components/overridable-props/overridable-prop-form.tsx
+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_i18n6 = require("@wordpress/i18n");
 
-// src/components/component-properties-panel/component-properties-panel-content.tsx
-function ComponentPropertiesPanelContent({ onClose }) {
-  const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps2(currentComponentId);
-  const [isAddingGroup, setIsAddingGroup] = (0, import_react5.useState)(false);
-  const introductionRef = (0, import_react5.useRef)(null);
-  const groupLabelEditable = useCurrentEditableItem();
-  const groups = (0, import_react5.useMemo)(() => {
-    if (!overridableProps) {
-      return [];
-    }
-    return overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(Boolean);
-  }, [overridableProps]);
-  const allGroupsForSelect = (0, import_react5.useMemo)(
-    () => groups.map((group) => ({ value: group.id, label: group.label })),
-    [groups]
-  );
-  if (!currentComponentId || !overridableProps) {
-    return null;
+// src/components/overridable-props/utils/validate-prop-label.ts
+var import_i18n5 = require("@wordpress/i18n");
+var ERROR_MESSAGES = {
+  EMPTY_NAME: (0, import_i18n5.__)("Property name is required", "elementor"),
+  DUPLICATE_NAME: (0, import_i18n5.__)("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 hasGroups = groups.length > 0;
-  const showEmptyState = !hasGroups && !isAddingGroup;
-  const groupIds = overridableProps.groups.order;
-  const handleAddGroupClick = () => {
-    if (isAddingGroup) {
-      return;
-    }
-    const newGroupId = (0, import_utils2.generateUniqueId)("group");
-    const newLabel = generateUniqueLabel(groups);
-    addOverridableGroup({
-      componentId: currentComponentId,
-      groupId: newGroupId,
-      label: newLabel,
-      source: "user"
-    });
-    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
-    setIsAddingGroup(false);
-    groupLabelEditable.setEditingGroupId(newGroupId);
-  };
-  const handleGroupsReorder = (newOrder) => {
-    reorderOverridableGroups({ componentId: currentComponentId, newOrder });
-    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
-  };
-  const handlePropsReorder = (groupId, newPropsOrder) => {
-    reorderGroupProps({ componentId: currentComponentId, groupId, newPropsOrder });
-    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
-  };
-  const handlePropertyDelete = (propKey) => {
-    deleteOverridableProp({ componentId: currentComponentId, propKey, source: "user" });
-    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
-  };
-  const handlePropertyUpdate = (overrideKey, data) => {
-    updateOverridablePropParams({
-      componentId: currentComponentId,
-      overrideKey,
-      label: data.label,
-      groupId: data.group
-    });
-    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
-  };
-  const handleGroupDelete = (groupId) => {
-    deleteOverridableGroup({ componentId: currentComponentId, groupId });
-    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
+  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_i18n6.__)("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 [error, setError] = (0, import_react3.useState)(null);
+  const name = (0, import_i18n6.__)("Name", "elementor");
+  const groupName = (0, import_i18n6.__)("Group Name", "elementor");
+  const isCreate = currentValue === void 0;
+  const title = isCreate ? (0, import_i18n6.__)("Create new property", "elementor") : (0, import_i18n6.__)("Update property", "elementor");
+  const ctaLabel = isCreate ? (0, import_i18n6.__)("Create", "elementor") : (0, import_i18n6.__)("Update", "elementor");
+  const handleSubmit = () => {
+    const validationResult = validatePropLabel(propLabel ?? "", existingLabels, currentValue?.label);
+    if (!validationResult.isValid) {
+      setError(validationResult.errorMessage);
+      return;
+    }
+    onSubmit({ label: propLabel ?? "", group });
   };
-  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,
+  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,
     {
-      size: "tiny",
-      "aria-label": (0, import_i18n9.__)("Add new group", "elementor"),
-      onClick: handleAddGroupClick
+      direction: "row",
+      alignItems: "center",
+      py: 1,
+      px: 1.5,
+      sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
     },
-    /* @__PURE__ */ React7.createElement(import_icons5.FolderPlusIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n9.__)("Close panel", "elementor") }, /* @__PURE__ */ React7.createElement(
-    import_ui7.IconButton,
+    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__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" }, name)), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    import_ui3.TextField,
     {
-      ref: introductionRef,
-      size: "tiny",
-      "aria-label": (0, import_i18n9.__)("Close panel", "elementor"),
-      onClick: onClose
+      name,
+      size: SIZE,
+      fullWidth: true,
+      placeholder: (0, import_i18n6.__)("Enter value", "elementor"),
+      value: propLabel ?? "",
+      onChange: (e) => {
+        const newValue = e.target.value;
+        setPropLabel(newValue);
+        const validationResult = validatePropLabel(
+          newValue,
+          existingLabels,
+          currentValue?.label
+        );
+        setError(validationResult.errorMessage);
+      },
+      error: Boolean(error),
+      helperText: error
+    }
+  ))), /* @__PURE__ */ 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,
+    {
+      name: groupName,
+      size: SIZE,
+      fullWidth: true,
+      value: group ?? null,
+      onChange: (e) => setGroup(e.target.value),
+      displayEmpty: true,
+      renderValue: (selectedValue) => {
+        if (!selectedValue || selectedValue === "") {
+          const [firstGroup = DEFAULT_GROUP] = groups ?? [];
+          return firstGroup.label;
+        }
+        return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
+      }
     },
-    /* @__PURE__ */ React7.createElement(import_icons5.XIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React7.createElement(import_ui7.Divider, null), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelBody, null, showEmptyState ? /* @__PURE__ */ React7.createElement(PropertiesEmptyState, { introductionRef }) : /* @__PURE__ */ React7.createElement(import_ui7.List, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React7.createElement(SortableProvider, { value: groupIds, onChange: handleGroupsReorder }, groups.map((group) => /* @__PURE__ */ React7.createElement(SortableItem, { key: group.id, id: group.id }, ({ triggerProps, triggerStyle, isDragPlaceholder }) => /* @__PURE__ */ React7.createElement(
-    PropertiesGroup,
+    (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,
     {
-      group,
-      props: overridableProps.props,
-      allGroups: allGroupsForSelect,
-      allGroupsRecord: overridableProps.groups.items,
-      sortableTriggerProps: { ...triggerProps, style: triggerStyle },
-      isDragPlaceholder,
-      setIsAddingGroup,
-      onPropsReorder: (newOrder) => handlePropsReorder(group.id, newOrder),
-      onPropertyDelete: handlePropertyDelete,
-      onPropertyUpdate: handlePropertyUpdate,
-      editableLabelProps: groupLabelEditable,
-      onGroupDelete: handleGroupDelete
-    }
-  )))))));
+      type: "submit",
+      disabled: !propLabel || Boolean(error),
+      variant: "contained",
+      color: "primary",
+      size: "small"
+    },
+    ctaLabel
+  ))));
 }
 
-// src/components/component-properties-panel/component-properties-panel.tsx
-var id = "component-properties-panel";
-var { panel, usePanelActions } = (0, import_editor_panels2.__createPanel)({
-  id,
-  component: ComponentPropertiesPanel
-});
-function ComponentPropertiesPanel() {
-  const { element, elementType } = (0, import_editor_elements4.useSelectedElement)();
-  const { close: closePanel } = usePanelActions();
-  const { open: openEditingPanel } = (0, import_editor_editing_panel.usePanelActions)();
-  if (!element || !elementType) {
-    return null;
+// src/components/component-properties-panel/sortable.tsx
+var React4 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var SortableProvider = (props) => /* @__PURE__ */ React4.createElement(import_ui4.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React4.createElement(
+  StyledSortableTrigger,
+  {
+    ...props,
+    role: "button",
+    className: `sortable-trigger ${triggerClassName ?? ""}`.trim(),
+    "aria-label": "sort"
+  },
+  /* @__PURE__ */ React4.createElement(import_icons2.GripVerticalIcon, { fontSize: "tiny" })
+);
+var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React4.createElement(
+  import_ui4.UnstableSortableItem,
+  {
+    id: id2,
+    render: ({
+      itemProps,
+      isDragged,
+      triggerProps,
+      itemStyle,
+      triggerStyle,
+      dropIndicationStyle,
+      showDropIndication,
+      isDragOverlay,
+      isDragPlaceholder
+    }) => /* @__PURE__ */ React4.createElement(
+      import_ui4.Box,
+      {
+        ...itemProps,
+        style: itemStyle,
+        component: "div",
+        role: "listitem",
+        sx: {
+          backgroundColor: isDragOverlay ? "background.paper" : void 0
+        }
+      },
+      children({
+        isDragged,
+        isDragPlaceholder,
+        triggerProps,
+        triggerStyle
+      }),
+      showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+    )
   }
-  return /* @__PURE__ */ React8.createElement(import_editor_ui5.ThemeProvider, null, /* @__PURE__ */ React8.createElement(import_ui8.ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(import_editor_editing_panel.ElementProvider, { element, elementType }, /* @__PURE__ */ React8.createElement(import_editor_panels2.Panel, null, /* @__PURE__ */ React8.createElement(
-    ComponentPropertiesPanelContent,
-    {
-      onClose: () => {
-        closePanel();
-        openEditingPanel();
-      }
-    }
-  )))));
-}
-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"))));
+);
+var StyledSortableTrigger = (0, import_ui4.styled)("div")(({ theme }) => ({
+  position: "absolute",
+  left: "-2px",
+  top: "50%",
+  transform: `translate( -${theme.spacing(1.5)}, -50% )`,
+  color: theme.palette.action.active,
+  cursor: "grab"
+}));
+var SortableItemIndicator = (0, import_ui4.styled)(import_ui4.Box)`
+	width: 100%;
+	height: 1px;
+	background-color: ${({ theme }) => theme.palette.text.primary};
+`;
 
-// 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_i18n11 = require("@wordpress/i18n");
-var ComponentsBadge = React9.forwardRef(({ overridablePropsCount, onClick }, ref) => {
-  const prevCount = usePrevious(overridablePropsCount);
-  const isFirstExposedProperty = prevCount === 0 && overridablePropsCount === 1;
-  return /* @__PURE__ */ React9.createElement(
-    StyledBadge,
+// src/components/component-properties-panel/property-item.tsx
+function PropertyItem({
+  prop,
+  sortableTriggerProps,
+  isDragPlaceholder,
+  groups,
+  existingLabels,
+  onDelete,
+  onUpdate
+}) {
+  const popoverState = (0, import_ui5.usePopupState)({
+    variant: "popover"
+  });
+  const icon = getElementIcon(prop);
+  const popoverProps = (0, import_ui5.bindPopover)(popoverState);
+  const handleSubmit = (data) => {
+    onUpdate(data);
+    popoverState.close();
+  };
+  const handleDelete = (event) => {
+    event.stopPropagation();
+    onDelete(prop.overrideKey);
+  };
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    import_ui5.Box,
     {
-      ref,
-      color: "primary",
-      key: overridablePropsCount,
-      invisible: overridablePropsCount === 0,
-      animate: isFirstExposedProperty,
-      anchorOrigin: { vertical: "top", horizontal: "right" },
-      badgeContent: /* @__PURE__ */ React9.createElement(import_ui9.Box, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
+      ...(0, import_ui5.bindTrigger)(popoverState),
+      sx: {
+        position: "relative",
+        pl: 0.5,
+        pr: 1,
+        py: 0.25,
+        minHeight: 28,
+        borderRadius: 1,
+        border: "1px solid",
+        borderColor: "divider",
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        opacity: isDragPlaceholder ? 0.5 : 1,
+        cursor: "pointer",
+        "&:hover": {
+          backgroundColor: "action.hover"
+        },
+        "&:hover .sortable-trigger": {
+          visibility: "visible"
+        },
+        "& .sortable-trigger": {
+          visibility: "hidden"
+        },
+        "&:hover .delete-button": {
+          visibility: "visible"
+        },
+        "& .delete-button": {
+          visibility: "hidden"
+        }
+      }
     },
-    /* @__PURE__ */ React9.createElement(
-      import_ui9.ToggleButton,
+    /* @__PURE__ */ React5.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React5.createElement(
+      import_ui5.Box,
       {
-        value: "exposed properties",
-        size: "tiny",
-        onClick,
-        "aria-label": (0, import_i18n11.__)("View exposed properties", "elementor")
+        sx: { display: "flex", alignItems: "center", color: "text.primary", fontSize: 12, padding: 0.25 }
       },
-      /* @__PURE__ */ React9.createElement(import_icons6.ComponentPropListIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React5.createElement("i", { className: icon })
+    ),
+    /* @__PURE__ */ React5.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
+    /* @__PURE__ */ React5.createElement(import_ui5.IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React5.createElement(import_icons3.XIcon, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React5.createElement(
+    import_ui5.Popover,
+    {
+      ...popoverProps,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      PaperProps: { sx: { width: popoverState.anchorEl?.getBoundingClientRect().width } }
+    },
+    /* @__PURE__ */ React5.createElement(
+      OverridablePropForm,
+      {
+        onSubmit: handleSubmit,
+        currentValue: prop,
+        groups,
+        existingLabels,
+        sx: { width: "100%" }
+      }
     )
-  );
-});
-var StyledBadge = (0, import_ui9.styled)(import_ui9.Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
-  ({ theme, animate }) => ({
-    "& .MuiBadge-badge": {
-      minWidth: theme.spacing(2),
-      height: theme.spacing(2),
-      minHeight: theme.spacing(2),
-      maxWidth: theme.spacing(2),
-      fontSize: theme.typography.caption.fontSize,
-      animation: animate ? `${bounceIn} 300ms ease-out` : "none"
-    }
-  })
-);
-function usePrevious(value) {
-  const ref = (0, import_react6.useRef)(value);
-  (0, import_react6.useEffect)(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
+  ));
 }
-var bounceIn = import_ui9.keyframes`
-	0% { transform: scale(0) translate(50%, 50%); opacity: 0; }
-	70% { transform: scale(1.1) translate(50%, -50%); opacity: 1; }
-	100% { transform: scale(1) translate(50%, -50%); opacity: 1; }
-`;
-var slideUp = import_ui9.keyframes`
-	from { transform: translateY(100%); opacity: 0; }
-	to { transform: translateY(0); opacity: 1; }
-`;
-
-// src/components/component-panel-header/component-panel-header.tsx
-var MESSAGE_KEY = "components-properties-introduction";
-var ComponentPanelHeader = () => {
-  const { id: currentComponentId, uid: componentUid } = useCurrentComponent() ?? { id: null, uid: null };
-  const overridableProps = useOverridableProps2(currentComponentId);
-  const onBack = useNavigateBack();
-  const componentName = getComponentName();
-  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
-  const [shouldShowIntroduction, setShouldShowIntroduction] = React10.useState(!isMessageSuppressed);
-  const { open: openPropertiesPanel } = usePanelActions();
-  const overridablePropsCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
-  const anchorRef = React10.useRef(null);
-  if (!currentComponentId) {
-    return null;
+function getElementIcon(prop) {
+  const elType = prop.elType === "widget" ? prop.widgetType : prop.elType;
+  const widgetsCache = (0, import_editor_elements3.getWidgetsCache)();
+  if (!widgetsCache) {
+    return "eicon-apps";
   }
-  const handleCloseIntroduction = () => {
-    suppressMessage();
-    setShouldShowIntroduction(false);
+  const widgetConfig = widgetsCache[elType];
+  return widgetConfig?.icon || "eicon-apps";
+}
+
+// src/components/component-properties-panel/properties-group.tsx
+function PropertiesGroup({
+  group,
+  props,
+  allGroups,
+  sortableTriggerProps,
+  isDragPlaceholder,
+  onPropsReorder,
+  onPropertyDelete,
+  onPropertyUpdate,
+  onGroupDelete,
+  editableLabelProps
+}) {
+  const groupProps = group.props.map((propId) => props[propId]).filter((prop) => Boolean(prop));
+  const popupState = (0, import_ui6.usePopupState)({
+    variant: "popover",
+    disableAutoFocus: true
+  });
+  const { editableRef, isEditing, error, getEditableProps, setEditingGroupId, editingGroupId } = editableLabelProps;
+  const hasProperties = group.props.length > 0;
+  const isThisGroupEditing = isEditing && editingGroupId === group.id;
+  const handleRenameClick = () => {
+    popupState.close();
+    setEditingGroupId(group.id);
   };
-  const handleOpenPropertiesPanel = () => {
-    openPropertiesPanel();
-    trackComponentEvent({
-      action: "propertiesPanelOpened",
-      source: "user",
-      component_uid: componentUid,
-      properties_count: overridablePropsCount
-    });
+  const handleDeleteClick = () => {
+    popupState.close();
+    onGroupDelete(group.id);
   };
-  return /* @__PURE__ */ React10.createElement(import_ui10.Box, null, /* @__PURE__ */ React10.createElement(
-    import_ui10.Stack,
+  return /* @__PURE__ */ React6.createElement(
+    import_ui6.Box,
     {
-      direction: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
+      sx: {
+        opacity: isDragPlaceholder ? 0.5 : 1
+      }
     },
-    /* @__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,
+    /* @__PURE__ */ React6.createElement(import_ui6.Stack, { gap: 1 }, /* @__PURE__ */ React6.createElement(
+      import_ui6.Box,
       {
-        overridablePropsCount,
-        ref: anchorRef,
-        onClick: handleOpenPropertiesPanel
+        className: "group-header",
+        sx: {
+          position: "relative",
+          "&:hover .group-sortable-trigger": {
+            visibility: "visible"
+          },
+          "& .group-sortable-trigger": {
+            visibility: "hidden"
+          },
+          "&:hover .group-menu": {
+            visibility: "visible"
+          },
+          "& .group-menu": {
+            visibility: "hidden"
+          }
+        }
+      },
+      /* @__PURE__ */ React6.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
+      /* @__PURE__ */ React6.createElement(import_ui6.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React6.createElement(
+        import_ui6.Box,
+        {
+          sx: {
+            flex: 1,
+            height: 28,
+            display: "flex",
+            alignItems: "center",
+            border: 2,
+            borderColor: "text.secondary",
+            borderRadius: 1,
+            pl: 0.5
+          }
+        },
+        /* @__PURE__ */ React6.createElement(
+          import_editor_ui3.EditableField,
+          {
+            ref: editableRef,
+            as: import_ui6.Typography,
+            variant: "caption",
+            error: error ?? void 0,
+            sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 },
+            ...getEditableProps()
+          }
+        )
+      ) : /* @__PURE__ */ React6.createElement(
+        import_ui6.Typography,
+        {
+          variant: "caption",
+          sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
+        },
+        group.label
+      ), /* @__PURE__ */ React6.createElement(
+        import_ui6.IconButton,
+        {
+          className: "group-menu",
+          size: "tiny",
+          sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
+          "aria-label": (0, import_i18n7.__)("Group actions", "elementor"),
+          ...(0, import_ui6.bindTrigger)(popupState)
+        },
+        /* @__PURE__ */ React6.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" })
+      ))
+    ), /* @__PURE__ */ React6.createElement(import_ui6.List, { sx: { p: 0, display: "flex", flexDirection: "column", gap: 1 } }, /* @__PURE__ */ React6.createElement(SortableProvider, { value: group.props, onChange: onPropsReorder }, groupProps.map((prop) => /* @__PURE__ */ React6.createElement(SortableItem, { key: prop.overrideKey, id: prop.overrideKey }, ({ triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder }) => /* @__PURE__ */ React6.createElement(
+      PropertyItem,
+      {
+        prop,
+        sortableTriggerProps: { ...triggerProps, style: triggerStyle },
+        isDragPlaceholder: isItemDragPlaceholder,
+        groups: allGroups,
+        existingLabels: Object.values(props).map((p) => p.label),
+        onDelete: onPropertyDelete,
+        onUpdate: (data) => onPropertyUpdate(prop.overrideKey, data)
       }
+    )))))),
+    /* @__PURE__ */ React6.createElement(
+      import_ui6.Menu,
+      {
+        ...(0, import_ui6.bindMenu)(popupState),
+        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_i18n7.__)("Rename", "elementor"))),
+      /* @__PURE__ */ React6.createElement(
+        import_ui6.Tooltip,
+        {
+          title: hasProperties ? (0, import_i18n7.__)("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(
+          import_ui6.Typography,
+          {
+            variant: "caption",
+            sx: { color: hasProperties ? "text.disabled" : "error.light" }
+          },
+          (0, import_i18n7.__)("Delete", "elementor")
+        )))
+      )
     )
-  ), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(
-    ComponentIntroduction,
-    {
-      anchorRef,
-      shouldShowIntroduction,
-      onClose: handleCloseIntroduction
-    }
-  ));
-};
-function getComponentName() {
-  const state = (0, import_store27.__getState)();
-  const path = state[SLICE_NAME].path;
-  const { instanceTitle } = path.at(-1) ?? {};
-  if (instanceTitle) {
-    return instanceTitle;
-  }
-  const documentsManager = (0, import_editor_documents5.getV1DocumentsManager)();
-  const currentDocument = documentsManager.getCurrent();
-  return currentDocument?.container?.settings?.get("post_title") ?? "";
+  );
 }
 
-// src/components/components-tab/components.tsx
-var React19 = __toESM(require("react"));
-var import_editor_ui9 = require("@elementor/editor-ui");
-
-// src/hooks/use-components.ts
-var import_store29 = require("@elementor/store");
-var useComponents = () => {
-  const components = (0, import_store29.__useSelector)(selectComponents);
-  const isLoading = (0, import_store29.__useSelector)(selectLoadIsPending);
-  return { components, isLoading };
-};
+// src/components/component-properties-panel/use-current-editable-item.ts
+var import_react4 = require("react");
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_i18n9 = require("@wordpress/i18n");
 
-// src/utils/is-pro-user.ts
-function isProUser() {
-  const extendedWindow = window;
-  const hasPro = extendedWindow.elementor?.helpers?.hasPro?.() ?? false;
-  if (!hasPro) {
+// src/store/actions/rename-overridable-group.ts
+var import_store25 = require("@elementor/store");
+function renameOverridableGroup({ componentId, groupId, label }) {
+  const overridableProps = selectOverridableProps((0, import_store25.__getState)(), componentId);
+  if (!overridableProps) {
     return false;
   }
-  const isProActive = extendedWindow.elementorPro?.config?.isActive ?? false;
-  return isProActive;
-}
-
-// src/components/components-tab/component-search.tsx
-var React12 = __toESM(require("react"));
-var import_icons8 = require("@elementor/icons");
-var import_ui11 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
-
-// src/components/components-tab/search-provider.tsx
-var React11 = __toESM(require("react"));
-var import_react7 = require("react");
-var import_utils3 = require("@elementor/utils");
-var SearchContext = (0, import_react7.createContext)(void 0);
-var SearchProvider = ({
-  children,
-  localStorageKey
-}) => {
-  const { debouncedValue, handleChange, inputValue } = (0, import_utils3.useSearchState)({ localStorageKey });
-  const clearSearch = () => {
-    handleChange("");
-  };
-  return /* @__PURE__ */ React11.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
-};
-var useSearch = () => {
-  const context = (0, import_react7.useContext)(SearchContext);
-  if (!context) {
-    throw new Error("useSearch must be used within a SearchProvider");
+  const group = overridableProps.groups.items[groupId];
+  if (!group) {
+    return false;
   }
-  return context;
-};
-
-// src/components/components-tab/component-search.tsx
-var ComponentSearch = () => {
-  const { inputValue, handleChange } = useSearch();
-  return /* @__PURE__ */ React12.createElement(import_ui11.Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React12.createElement(import_ui11.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React12.createElement(
-    import_ui11.TextField,
-    {
-      role: "search",
-      fullWidth: true,
-      size: "tiny",
-      value: inputValue,
-      placeholder: (0, import_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" }))
+  const updatedGroups = renameGroup(overridableProps.groups, groupId, label);
+  (0, import_store25.__dispatch)(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: updatedGroups
       }
-    }
-  )));
-};
-
-// src/components/components-tab/components-list.tsx
-var React17 = __toESM(require("react"));
-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_i18n20 = require("@wordpress/i18n");
+    })
+  );
+  return true;
+}
 
-// src/hooks/use-components-permissions.ts
-var import_editor_current_user2 = require("@elementor/editor-current-user");
-var useComponentsPermissions = () => {
-  const { isAdmin } = (0, import_editor_current_user2.useCurrentUserCapabilities)();
-  return {
-    canCreate: isAdmin,
-    canEdit: isAdmin,
-    canDelete: isAdmin,
-    canRename: isAdmin
-  };
+// src/components/component-properties-panel/utils/validate-group-label.ts
+var import_i18n8 = require("@wordpress/i18n");
+var ERROR_MESSAGES2 = {
+  EMPTY_NAME: (0, import_i18n8.__)("Group name is required", "elementor"),
+  DUPLICATE_NAME: (0, import_i18n8.__)("Group name already exists", "elementor")
 };
+function validateGroupLabel(label, existingGroups) {
+  const trimmedLabel = label.trim();
+  if (!trimmedLabel) {
+    return ERROR_MESSAGES2.EMPTY_NAME;
+  }
+  const isDuplicate = Object.values(existingGroups).some((group) => group.label === trimmedLabel);
+  if (isDuplicate) {
+    return ERROR_MESSAGES2.DUPLICATE_NAME;
+  }
+  return "";
+}
 
-// src/store/actions/rename-component.ts
-var import_editor_documents7 = require("@elementor/editor-documents");
-var import_editor_elements5 = require("@elementor/editor-elements");
-var import_store33 = require("@elementor/store");
-
-// src/create-component-type.ts
-var import_editor_canvas4 = require("@elementor/editor-canvas");
-var import_editor_documents6 = require("@elementor/editor-documents");
-var import_store31 = require("@elementor/store");
-var import_i18n14 = require("@wordpress/i18n");
-var COMPONENT_WIDGET_TYPE = "e-component";
-var updateGroups = (groups, config) => {
-  const disableMap = new Map(Object.entries(config.disable ?? {}));
-  const addMap = new Map(Object.entries(config.add ?? {}));
-  return groups.map((group) => {
-    const disabledActions = disableMap.get(group.name) ?? [];
-    const addConfig = addMap.get(group.name);
-    const updatedActions = group.actions.map(
-      (action) => disabledActions.includes(action.name) ? { ...action, isEnabled: () => false } : action
+// src/components/component-properties-panel/use-current-editable-item.ts
+function useCurrentEditableItem() {
+  const [editingGroupId, setEditingGroupId] = (0, import_react4.useState)(null);
+  const currentComponentId = useCurrentComponentId();
+  const overridableProps = useOverridableProps2(currentComponentId);
+  const allGroupsRecord = overridableProps?.groups?.items ?? {};
+  const currentGroup = editingGroupId ? allGroupsRecord[editingGroupId] : null;
+  const validateLabel = (newLabel) => {
+    const otherGroups = Object.fromEntries(
+      Object.entries(allGroupsRecord).filter(([id2]) => id2 !== editingGroupId)
     );
-    if (addConfig) {
-      updatedActions.splice(addConfig.index, 0, addConfig.action);
-    }
-    return { ...group, actions: updatedActions };
-  });
-};
-function createComponentType(options) {
-  const legacyWindow = window;
-  const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
-  const view = createComponentView({ ...options });
-  return class extends WidgetType {
-    getType() {
-      return options.type;
-    }
-    getView() {
-      return view;
-    }
-    getModel() {
-      return createComponentModel();
-    }
+    return validateGroupLabel(newLabel, otherGroups) || null;
   };
-}
-function createComponentView(options) {
-  const legacyWindow = window;
-  return class extends (0, import_editor_canvas4.createTemplatedElementView)(options) {
-    eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
-    #componentRenderContext;
-    isComponentCurrentlyEdited() {
-      const currentDocument = (0, import_editor_documents6.getCurrentDocument)();
-      return currentDocument?.id === this.getComponentId();
-    }
-    getRenderContext() {
-      const namespaceKey = this.getNamespaceKey();
-      const parentContext = this._parent?.getRenderContext?.();
-      const parentComponentContext = parentContext?.[namespaceKey];
-      if (!this.#componentRenderContext) {
-        return parentContext;
-      }
-      const ownOverrides = this.#componentRenderContext.overrides ?? {};
-      const parentOverrides = parentComponentContext?.overrides ?? {};
-      return {
-        ...parentContext,
-        [namespaceKey]: {
-          overrides: {
-            ...parentOverrides,
-            ...ownOverrides
-          }
-        }
-      };
-    }
-    getResolverRenderContext() {
-      const namespaceKey = this.getNamespaceKey();
-      const context = this.getRenderContext();
-      return context?.[namespaceKey];
-    }
-    afterSettingsResolve(settings) {
-      const componentInstance = settings.component_instance;
-      if (componentInstance) {
-        this.#componentRenderContext = {
-          overrides: componentInstance.overrides ?? {}
-        };
-        this.collection = legacyWindow.elementor.createBackboneElementsCollection(componentInstance.elements);
-        this.collection.models.forEach(setInactiveRecursively);
-        settings.component_instance = "<template data-children-placeholder></template>";
-      }
-      return settings;
-    }
-    getDomElement() {
-      return this.children.findByIndex(0)?.getDomElement() ?? this.$el;
-    }
-    attachBuffer(collectionView, buffer) {
-      const childrenPlaceholder = collectionView.$el.find("[data-children-placeholder]").get(0);
-      if (!childrenPlaceholder) {
-        super.attachBuffer(collectionView, buffer);
-        return;
-      }
-      childrenPlaceholder.replaceWith(buffer);
-    }
-    getComponentId() {
-      const componentInstance = this.options?.model?.get("settings")?.get("component_instance")?.value;
-      return componentInstance.component_id.value;
-    }
-    getContextMenuGroups() {
-      const filteredGroups = super.getContextMenuGroups().filter((group) => group.name !== "save");
-      const componentId = this.getComponentId();
-      if (!componentId) {
-        return filteredGroups;
-      }
-      const newGroups = updateGroups(
-        filteredGroups,
-        this._getContextMenuConfig()
-      );
-      return newGroups;
+  const handleSubmit = (newLabel) => {
+    if (!editingGroupId || !currentComponentId) {
+      throw new Error((0, import_i18n9.__)("Group ID or component ID is missing", "elementor"));
     }
-    _getContextMenuConfig() {
-      const isAdministrator = isUserAdministrator();
-      const addedGroup = {
-        general: {
-          index: 1,
-          action: {
-            name: "edit component",
-            icon: "eicon-edit",
-            title: () => (0, import_i18n14.__)("Edit Component", "elementor"),
-            isEnabled: () => true,
-            callback: (_, eventData) => this.editComponent(eventData)
-          }
-        }
-      };
-      const disabledGroup = {
-        clipboard: ["pasteStyle", "resetStyle"]
-      };
-      return { add: isAdministrator ? addedGroup : {}, disable: disabledGroup };
+    renameOverridableGroup({
+      componentId: currentComponentId,
+      groupId: editingGroupId,
+      label: newLabel
+    });
+    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
+  };
+  const {
+    ref: editableRef,
+    openEditMode,
+    isEditing,
+    error,
+    getProps: getEditableProps
+  } = (0, import_editor_ui4.useEditable)({
+    value: currentGroup?.label ?? "",
+    onSubmit: handleSubmit,
+    validation: validateLabel
+  });
+  return {
+    editableRef,
+    isEditing,
+    error,
+    getEditableProps,
+    setEditingGroupId: (groupId) => {
+      setEditingGroupId(groupId);
+      openEditMode();
+    },
+    editingGroupId
+  };
+}
+
+// src/components/component-properties-panel/utils/generate-unique-label.ts
+var DEFAULT_NEW_GROUP_LABEL = "New group";
+function generateUniqueLabel(groups) {
+  const existingLabels = new Set(groups.map((group) => group.label));
+  if (!existingLabels.has(DEFAULT_NEW_GROUP_LABEL)) {
+    return DEFAULT_NEW_GROUP_LABEL;
+  }
+  let index = 1;
+  let newLabel = `${DEFAULT_NEW_GROUP_LABEL}-${index}`;
+  while (existingLabels.has(newLabel)) {
+    index++;
+    newLabel = `${DEFAULT_NEW_GROUP_LABEL}-${index}`;
+  }
+  return newLabel;
+}
+
+// src/components/component-properties-panel/component-properties-panel-content.tsx
+function ComponentPropertiesPanelContent({ onClose }) {
+  const currentComponentId = useCurrentComponentId();
+  const overridableProps = useOverridableProps2(currentComponentId);
+  const [isAddingGroup, setIsAddingGroup] = (0, import_react5.useState)(false);
+  const introductionRef = (0, import_react5.useRef)(null);
+  const groupLabelEditable = useCurrentEditableItem();
+  const groups = (0, import_react5.useMemo)(() => {
+    if (!overridableProps) {
+      return [];
     }
-    async switchDocument() {
-      const { isAllowedToSwitchDocument, lockedBy } = await apiClient.getComponentLockStatus(
-        this.getComponentId()
-      );
-      if (!isAllowedToSwitchDocument) {
-        options.showLockedByModal?.(lockedBy || "");
-      } else {
-        switchToComponent(this.getComponentId(), this.model.get("id"), this.el);
-      }
+    return overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(Boolean);
+  }, [overridableProps]);
+  const allGroupsForSelect = (0, import_react5.useMemo)(
+    () => groups.map((group) => ({ value: group.id, label: group.label })),
+    [groups]
+  );
+  if (!currentComponentId || !overridableProps) {
+    return null;
+  }
+  const hasGroups = groups.length > 0;
+  const showEmptyState = !hasGroups && !isAddingGroup;
+  const groupIds = overridableProps.groups.order;
+  const handleAddGroupClick = () => {
+    if (isAddingGroup) {
+      return;
     }
-    editComponent({ trigger, location, secondaryLocation }) {
-      if (this.isComponentCurrentlyEdited()) {
-        return;
-      }
-      this.switchDocument();
-      const editorSettings = this.model.get("editor_settings");
-      trackComponentEvent({
-        action: "edited",
-        source: "user",
-        component_uid: editorSettings?.component_uid,
-        component_name: editorSettings?.title,
-        location,
-        secondary_location: secondaryLocation,
-        trigger
-      });
+    const newGroupId = (0, import_utils2.generateUniqueId)("group");
+    const newLabel = generateUniqueLabel(groups);
+    addOverridableGroup({
+      componentId: currentComponentId,
+      groupId: newGroupId,
+      label: newLabel,
+      source: "user"
+    });
+    (0, import_editor_documents5.setDocumentModifiedStatus)(true);
+    setIsAddingGroup(false);
+    groupLabelEditable.setEditingGroupId(newGroupId);
+  };
+  const handleGroupsReorder = (newOrder) => {
+    reorderOverridableGroups({ componentId: currentComponentId, newOrder });
+    (0, import_editor_documents5.setDocumentModifiedStatus)(true);
+  };
+  const handlePropsReorder = (groupId, newPropsOrder) => {
+    reorderGroupProps({ componentId: currentComponentId, groupId, newPropsOrder });
+    (0, import_editor_documents5.setDocumentModifiedStatus)(true);
+  };
+  const handlePropertyDelete = (propKey) => {
+    deleteOverridableProp({ componentId: currentComponentId, propKey, source: "user" });
+    (0, import_editor_documents5.setDocumentModifiedStatus)(true);
+  };
+  const handlePropertyUpdate = (overrideKey, data) => {
+    updateOverridablePropParams({
+      componentId: currentComponentId,
+      overrideKey,
+      label: data.label,
+      groupId: data.group
+    });
+    (0, import_editor_documents5.setDocumentModifiedStatus)(true);
+  };
+  const handleGroupDelete = (groupId) => {
+    deleteOverridableGroup({ componentId: currentComponentId, groupId });
+    (0, import_editor_documents5.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_i18n10.__)("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n10.__)("Add new group", "elementor") }, /* @__PURE__ */ React7.createElement(
+    import_ui7.IconButton,
+    {
+      size: "tiny",
+      "aria-label": (0, import_i18n10.__)("Add new group", "elementor"),
+      onClick: handleAddGroupClick
+    },
+    /* @__PURE__ */ React7.createElement(import_icons5.FolderPlusIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n10.__)("Close panel", "elementor") }, /* @__PURE__ */ React7.createElement(
+    import_ui7.IconButton,
+    {
+      ref: introductionRef,
+      size: "tiny",
+      "aria-label": (0, import_i18n10.__)("Close panel", "elementor"),
+      onClick: onClose
+    },
+    /* @__PURE__ */ React7.createElement(import_icons5.XIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React7.createElement(import_ui7.Divider, null), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelBody, null, showEmptyState ? /* @__PURE__ */ React7.createElement(PropertiesEmptyState, { introductionRef }) : /* @__PURE__ */ React7.createElement(import_ui7.List, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React7.createElement(SortableProvider, { value: groupIds, onChange: handleGroupsReorder }, groups.map((group) => /* @__PURE__ */ React7.createElement(SortableItem, { key: group.id, id: group.id }, ({ triggerProps, triggerStyle, isDragPlaceholder }) => /* @__PURE__ */ React7.createElement(
+    PropertiesGroup,
+    {
+      group,
+      props: overridableProps.props,
+      allGroups: allGroupsForSelect,
+      allGroupsRecord: overridableProps.groups.items,
+      sortableTriggerProps: { ...triggerProps, style: triggerStyle },
+      isDragPlaceholder,
+      setIsAddingGroup,
+      onPropsReorder: (newOrder) => handlePropsReorder(group.id, newOrder),
+      onPropertyDelete: handlePropertyDelete,
+      onPropertyUpdate: handlePropertyUpdate,
+      editableLabelProps: groupLabelEditable,
+      onGroupDelete: handleGroupDelete
     }
-    handleDblClick(e) {
-      e.stopPropagation();
-      const isAdministrator = isUserAdministrator();
-      if (!isAdministrator) {
-        return;
+  )))))));
+}
+
+// src/components/component-properties-panel/component-properties-panel.tsx
+var id = "component-properties-panel";
+var { panel, usePanelActions } = (0, import_editor_panels2.__createPanel)({
+  id,
+  component: ComponentPropertiesPanel
+});
+function ComponentPropertiesPanel() {
+  const { element, elementType } = (0, import_editor_elements4.useSelectedElement)();
+  const { close: closePanel } = usePanelActions();
+  const { open: openEditingPanel } = (0, import_editor_editing_panel.usePanelActions)();
+  if (!element || !elementType) {
+    return null;
+  }
+  return /* @__PURE__ */ React8.createElement(import_editor_ui5.ThemeProvider, null, /* @__PURE__ */ React8.createElement(import_ui8.ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(import_editor_editing_panel.ElementProvider, { element, elementType }, /* @__PURE__ */ React8.createElement(import_editor_panels2.Panel, null, /* @__PURE__ */ React8.createElement(
+    ComponentPropertiesPanelContent,
+    {
+      onClose: () => {
+        closePanel();
+        openEditingPanel();
       }
-      const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
-      this.editComponent({
-        trigger: triggers.doubleClick,
-        location: locations.canvas,
-        secondaryLocation: secondaryLocations.canvasElement
-      });
-    }
-    events() {
-      return {
-        ...super.events(),
-        dblclick: this.handleDblClick
-      };
     }
-    attributes() {
-      return {
-        ...super.attributes(),
-        "data-elementor-id": this.getComponentId()
-      };
+  )))));
+}
+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_i18n11.__)("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_i18n12 = require("@wordpress/i18n");
+var ComponentsBadge = React9.forwardRef(({ overridablePropsCount, onClick }, ref) => {
+  const prevCount = usePrevious(overridablePropsCount);
+  const isFirstExposedProperty = prevCount === 0 && overridablePropsCount === 1;
+  return /* @__PURE__ */ React9.createElement(
+    StyledBadge,
+    {
+      ref,
+      color: "primary",
+      key: overridablePropsCount,
+      invisible: overridablePropsCount === 0,
+      animate: isFirstExposedProperty,
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      badgeContent: /* @__PURE__ */ React9.createElement(import_ui9.Box, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
+    },
+    /* @__PURE__ */ React9.createElement(
+      import_ui9.ToggleButton,
+      {
+        value: "exposed properties",
+        size: "tiny",
+        onClick,
+        "aria-label": (0, import_i18n12.__)("View exposed properties", "elementor")
+      },
+      /* @__PURE__ */ React9.createElement(import_icons6.ComponentPropListIcon, { fontSize: "tiny" })
+    )
+  );
+});
+var StyledBadge = (0, import_ui9.styled)(import_ui9.Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
+  ({ theme, animate }) => ({
+    "& .MuiBadge-badge": {
+      minWidth: theme.spacing(2),
+      height: theme.spacing(2),
+      minHeight: theme.spacing(2),
+      maxWidth: theme.spacing(2),
+      fontSize: theme.typography.caption.fontSize,
+      animation: animate ? `${bounceIn} 300ms ease-out` : "none"
     }
-  };
+  })
+);
+function usePrevious(value) {
+  const ref = (0, import_react6.useRef)(value);
+  (0, import_react6.useEffect)(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
 }
-function setInactiveRecursively(model) {
-  const editSettings = model.get("editSettings");
-  if (editSettings) {
-    editSettings.set("inactive", true);
+var bounceIn = import_ui9.keyframes`
+	0% { transform: scale(0) translate(50%, 50%); opacity: 0; }
+	70% { transform: scale(1.1) translate(50%, -50%); opacity: 1; }
+	100% { transform: scale(1) translate(50%, -50%); opacity: 1; }
+`;
+var slideUp = import_ui9.keyframes`
+	from { transform: translateY(100%); opacity: 0; }
+	to { transform: translateY(0); opacity: 1; }
+`;
+
+// src/components/component-panel-header/component-panel-header.tsx
+var MESSAGE_KEY = "components-properties-introduction";
+var ComponentPanelHeader = () => {
+  const { id: currentComponentId, uid: componentUid } = useCurrentComponent() ?? { id: null, uid: null };
+  const overridableProps = useOverridableProps2(currentComponentId);
+  const onBack = useNavigateBack();
+  const componentName = getComponentName();
+  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
+  const [shouldShowIntroduction, setShouldShowIntroduction] = React10.useState(!isMessageSuppressed);
+  const { open: openPropertiesPanel } = usePanelActions();
+  const overridablePropsCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
+  const anchorRef = React10.useRef(null);
+  if (!currentComponentId) {
+    return null;
   }
-  const elements = model.get("elements");
-  if (elements) {
-    elements.forEach((childModel) => {
-      setInactiveRecursively(childModel);
+  const handleCloseIntroduction = () => {
+    suppressMessage();
+    setShouldShowIntroduction(false);
+  };
+  const handleOpenPropertiesPanel = () => {
+    openPropertiesPanel();
+    trackComponentEvent({
+      action: "propertiesPanelOpened",
+      source: "user",
+      component_uid: componentUid,
+      properties_count: overridablePropsCount
     });
+  };
+  return /* @__PURE__ */ React10.createElement(import_ui10.Box, null, /* @__PURE__ */ React10.createElement(
+    import_ui10.Stack,
+    {
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
+    },
+    /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Tooltip, { title: (0, import_i18n13.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n13.__)("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,
+      {
+        overridablePropsCount,
+        ref: anchorRef,
+        onClick: handleOpenPropertiesPanel
+      }
+    )
+  ), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(
+    ComponentIntroduction,
+    {
+      anchorRef,
+      shouldShowIntroduction,
+      onClose: handleCloseIntroduction
+    }
+  ));
+};
+function getComponentName() {
+  const state = (0, import_store29.__getState)();
+  const path = state[SLICE_NAME].path;
+  const { instanceTitle } = path.at(-1) ?? {};
+  if (instanceTitle) {
+    return instanceTitle;
   }
+  const documentsManager = (0, import_editor_documents6.getV1DocumentsManager)();
+  const currentDocument = documentsManager.getCurrent();
+  return currentDocument?.container?.settings?.get("post_title") ?? "";
 }
-function isUserAdministrator() {
-  const legacyWindow = window;
-  return legacyWindow.elementor.config?.user?.is_administrator ?? false;
+
+// src/components/components-tab/components.tsx
+var React19 = __toESM(require("react"));
+var import_editor_ui9 = require("@elementor/editor-ui");
+
+// src/hooks/use-components.ts
+var import_store31 = require("@elementor/store");
+var useComponents = () => {
+  const components = (0, import_store31.__useSelector)(selectComponents);
+  const isLoading = (0, import_store31.__useSelector)(selectLoadIsPending);
+  return { components, isLoading };
+};
+
+// src/utils/is-pro-user.ts
+function isProUser() {
+  const extendedWindow = window;
+  const hasPro = extendedWindow.elementor?.helpers?.hasPro?.() ?? false;
+  if (!hasPro) {
+    return false;
+  }
+  const isProActive = extendedWindow.elementorPro?.config?.isActive ?? false;
+  return isProActive;
 }
-function createComponentModel() {
-  const legacyWindow = window;
-  const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
-  const widgetTypeInstance = new WidgetType();
-  const BaseWidgetModel = widgetTypeInstance.getModel();
-  return BaseWidgetModel.extend({
-    initialize(attributes, options) {
-      BaseWidgetModel.prototype.initialize.call(this, attributes, options);
-      const componentInstance = this.get("settings")?.get("component_instance");
-      if (componentInstance?.value) {
-        const componentId = componentInstance.value.component_id?.value;
-        if (componentId && typeof componentId === "number") {
-          this.set("componentId", componentId);
-        }
-      }
-      this.set("isGlobal", true);
-    },
-    getTitle() {
-      const editorSettings = this.get("editor_settings");
-      const instanceTitle = editorSettings?.title;
-      if (instanceTitle) {
-        return instanceTitle;
-      }
-      const componentUid = editorSettings?.component_uid;
-      if (componentUid) {
-        const component = selectComponentByUid((0, import_store31.__getState)(), componentUid);
-        if (component?.name) {
-          return component.name;
-        }
+
+// src/components/components-tab/component-search.tsx
+var React12 = __toESM(require("react"));
+var import_icons8 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
+
+// src/components/components-tab/search-provider.tsx
+var React11 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_utils3 = require("@elementor/utils");
+var SearchContext = (0, import_react7.createContext)(void 0);
+var SearchProvider = ({
+  children,
+  localStorageKey
+}) => {
+  const { debouncedValue, handleChange, inputValue } = (0, import_utils3.useSearchState)({ localStorageKey });
+  const clearSearch = () => {
+    handleChange("");
+  };
+  return /* @__PURE__ */ React11.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
+};
+var useSearch = () => {
+  const context = (0, import_react7.useContext)(SearchContext);
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider");
+  }
+  return context;
+};
+
+// src/components/components-tab/component-search.tsx
+var ComponentSearch = () => {
+  const { inputValue, handleChange } = useSearch();
+  return /* @__PURE__ */ React12.createElement(import_ui11.Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React12.createElement(import_ui11.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React12.createElement(
+    import_ui11.TextField,
+    {
+      role: "search",
+      fullWidth: true,
+      size: "tiny",
+      value: inputValue,
+      placeholder: (0, import_i18n14.__)("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" }))
       }
-      return window.elementor.getElementData(this).title;
-    },
-    getComponentId() {
-      return this.get("componentId") || null;
-    },
-    getComponentName() {
-      return this.getTitle();
-    },
-    getComponentUid() {
-      const editorSettings = this.get("editor_settings");
-      return editorSettings?.component_uid || null;
     }
-  });
-}
+  )));
+};
+
+// src/components/components-tab/components-list.tsx
+var React17 = __toESM(require("react"));
+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_i18n20 = require("@wordpress/i18n");
+
+// src/hooks/use-components-permissions.ts
+var import_editor_current_user2 = require("@elementor/editor-current-user");
+var useComponentsPermissions = () => {
+  const { isAdmin } = (0, import_editor_current_user2.useCurrentUserCapabilities)();
+  return {
+    canCreate: isAdmin,
+    canEdit: isAdmin,
+    canDelete: isAdmin,
+    canRename: isAdmin
+  };
+};
 
 // src/store/actions/rename-component.ts
+var import_editor_documents7 = require("@elementor/editor-documents");
+var import_editor_elements5 = require("@elementor/editor-elements");
+var import_store33 = require("@elementor/store");
 var TITLE_EXTERNAL_CHANGE_COMMAND = "title_external_change";
 var renameComponent = (componentUid, newName) => {
   (0, import_store33.__dispatch)(slice.actions.rename({ componentUid, name: newName }));
@@ -2204,11 +2301,6 @@ var archiveComponent = (componentId, componentName) => {
 // src/store/actions/load-components-assets.ts
 var import_editor_documents9 = require("@elementor/editor-documents");
 
-// src/utils/is-component-instance.ts
-function isComponentInstance(elementModel) {
-  return [elementModel.widgetType, elementModel.elType].includes(COMPONENT_WIDGET_TYPE);
-}
-
 // src/utils/get-component-ids.ts
 var getComponentIds = async (elements) => {
   const components = elements.map(async ({ widgetType, elType, elements: childElements, settings }) => {
@@ -2313,13 +2405,13 @@ async function updateDocumentState(componentIds) {
 var import_store41 = require("@elementor/store");
 
 // src/components/create-component-form/utils/component-form-schema.ts
-var import_schema = require("@elementor/schema");
+var import_schema5 = require("@elementor/schema");
 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_i18n17.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var baseComponentSchema = import_schema5.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({
+  return import_schema5.z.object({
     componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
       message: (0, import_i18n17.__)("Component name already exists", "elementor")
     })
@@ -3541,60 +3633,6 @@ var import_i18n27 = require("@wordpress/i18n");
 // src/hooks/use-component-instance-settings.ts
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_elements11 = require("@elementor/editor-elements");
-
-// src/prop-types/component-instance-prop-type.ts
-var import_editor_props4 = require("@elementor/editor-props");
-var import_schema5 = require("@elementor/schema");
-
-// src/prop-types/component-instance-overrides-prop-type.ts
-var import_editor_props3 = require("@elementor/editor-props");
-var import_schema4 = require("@elementor/schema");
-
-// src/prop-types/component-instance-override-prop-type.ts
-var import_editor_props = require("@elementor/editor-props");
-var import_schema2 = require("@elementor/schema");
-var componentInstanceOverridePropTypeUtil = (0, import_editor_props.createPropUtils)(
-  "override",
-  import_schema2.z.object({
-    override_key: import_schema2.z.string(),
-    override_value: import_schema2.z.unknown(),
-    schema_source: import_schema2.z.object({
-      type: import_schema2.z.literal("component"),
-      id: import_schema2.z.number()
-    })
-  })
-);
-
-// src/prop-types/component-overridable-prop-type.ts
-var import_editor_props2 = require("@elementor/editor-props");
-var import_schema3 = require("@elementor/schema");
-var componentOverridablePropTypeUtil = (0, import_editor_props2.createPropUtils)(
-  "overridable",
-  import_schema3.z.object({
-    override_key: import_schema3.z.string(),
-    origin_value: import_schema3.z.object({
-      $$type: import_schema3.z.string(),
-      value: import_schema3.z.unknown()
-    }).nullable()
-  })
-);
-
-// src/prop-types/component-instance-overrides-prop-type.ts
-var componentInstanceOverridesPropTypeUtil = (0, import_editor_props3.createPropUtils)(
-  "overrides",
-  import_schema4.z.array(import_schema4.z.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([])
-);
-
-// src/prop-types/component-instance-prop-type.ts
-var componentInstancePropTypeUtil = (0, import_editor_props4.createPropUtils)(
-  "component-instance",
-  import_schema5.z.object({
-    component_id: import_editor_props4.numberPropTypeUtil.schema,
-    overrides: import_schema5.z.optional(componentInstanceOverridesPropTypeUtil.schema)
-  })
-);
-
-// src/hooks/use-component-instance-settings.ts
 function useComponentInstanceSettings() {
   const { element } = (0, import_editor_editing_panel2.useElement)();
   const settings = (0, import_editor_elements11.useElementSetting)(element.id, "component_instance");
@@ -4039,7 +4077,6 @@ function OverridablePropControl({
   ...props
 }) {
   const { elementType } = (0, import_editor_editing_panel6.useElement)();
-  const Control = (0, import_editor_controls5.createControl)(OriginalControl2);
   const { value, bind, setValue, placeholder, ...propContext } = (0, import_editor_controls5.useBoundProp)(componentOverridablePropTypeUtil);
   const componentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(componentId);
@@ -4088,9 +4125,20 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React30.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(Control, { ...props })))
+    /* @__PURE__ */ React30.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
   ));
 }
+function ControlWithReplacements({
+  OriginalControl: OriginalControl2,
+  props
+}) {
+  const { ControlToRender, isReplaced } = (0, import_editor_controls5.useControlReplacement)(OriginalControl2);
+  if (isReplaced) {
+    const ReplacementControl = ControlToRender;
+    return /* @__PURE__ */ React30.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
+  }
+  return /* @__PURE__ */ React30.createElement(OriginalControl2, { ...props });
+}
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
 var React32 = __toESM(require("react"));