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

package/dist/index.mjs

@@ -356,9 +356,9 @@ import * as React10 from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { getV1DocumentsManager as getV1DocumentsManager3 } from "@elementor/editor-documents";
 import { ArrowLeftIcon, ComponentsFilledIcon } from "@elementor/icons";
-import { __getState as getState10 } from "@elementor/store";
+import { __getState as getState11 } from "@elementor/store";
 import { Box as Box7, Divider as Divider2, IconButton as IconButton4, Stack as Stack6, Tooltip as Tooltip3, Typography as Typography6 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 
 // src/hooks/use-navigate-back.ts
 import { useCallback } from "react";
@@ -478,7 +478,7 @@ import { useSelectedElement } from "@elementor/editor-elements";
 import { __createPanel as createPanel, Panel } from "@elementor/editor-panels";
 import { ThemeProvider } from "@elementor/editor-ui";
 import { Alert, Box as Box5, ErrorBoundary } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 
 // src/components/component-properties-panel/component-properties-panel-content.tsx
 import * as React7 from "react";
@@ -488,7 +488,7 @@ import { PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-pane
 import { ComponentPropListIcon as ComponentPropListIcon2, FolderPlusIcon, XIcon as XIcon2 } from "@elementor/icons";
 import { Divider, IconButton as IconButton3, List as List2, Stack as Stack5, Tooltip as Tooltip2 } from "@elementor/ui";
 import { generateUniqueId as generateUniqueId2 } from "@elementor/utils";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/store/actions/add-overridable-group.ts
 import { __dispatch as dispatch, __getState as getState3 } from "@elementor/store";
@@ -704,1406 +704,1503 @@ function deleteOverridableGroup({ componentId, groupId }) {
 }
 
 // src/store/actions/delete-overridable-prop.ts
-import { getContainer, updateElementSettings } from "@elementor/editor-elements";
-import { __dispatch as dispatch3, __getState as getState5 } from "@elementor/store";
-function deleteOverridableProp({ componentId, propKey, source }) {
-  const overridableProps = selectOverridableProps(getState5(), 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);
-  dispatch3(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        props: remainingProps,
-        groups: updatedGroups
-      }
-    })
-  );
-  const currentComponent = selectCurrentComponent(getState5());
-  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 = getContainer(elementId);
-  if (!container) {
-    return;
-  }
-  updateElementSettings({
-    id: elementId,
-    props: { [settingKey]: originValue ?? null },
-    withHistory: false
-  });
-}
+import { __dispatch as dispatch3, __getState as getState6 } from "@elementor/store";
 
-// src/store/actions/reorder-group-props.ts
-import { __dispatch as dispatch4, __getState as getState6 } from "@elementor/store";
-function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
-  const overridableProps = selectOverridableProps(getState6(), componentId);
-  if (!overridableProps) {
-    return;
-  }
-  const group = overridableProps.groups.items[groupId];
-  if (!group) {
-    return;
-  }
-  dispatch4(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        groups: {
-          ...overridableProps.groups,
-          items: {
-            ...overridableProps.groups.items,
-            [groupId]: {
-              ...group,
-              props: newPropsOrder
-            }
-          }
-        }
-      }
-    })
-  );
-}
+// src/utils/revert-element-overridable-setting.ts
+import { getContainer, getElementSetting, updateElementSettings } from "@elementor/editor-elements";
 
-// src/store/actions/reorder-overridable-groups.ts
-import { __dispatch as dispatch5, __getState as getState7 } from "@elementor/store";
-function reorderOverridableGroups({ componentId, newOrder }) {
-  const overridableProps = selectOverridableProps(getState7(), componentId);
-  if (!overridableProps) {
-    return;
-  }
-  dispatch5(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        groups: {
-          ...overridableProps.groups,
-          order: newOrder
-        }
-      }
+// src/prop-types/component-instance-override-prop-type.ts
+import { createPropUtils } from "@elementor/editor-props";
+import { z } from "@elementor/schema";
+var componentInstanceOverridePropTypeUtil = createPropUtils(
+  "override",
+  z.object({
+    override_key: z.string(),
+    override_value: z.unknown(),
+    schema_source: z.object({
+      type: z.literal("component"),
+      id: z.number()
     })
-  );
-}
+  })
+);
 
-// src/store/actions/update-overridable-prop-params.ts
-import { __dispatch as dispatch6, __getState as getState8 } from "@elementor/store";
-function updateOverridablePropParams({
-  componentId,
-  overrideKey,
-  label,
-  groupId
-}) {
-  const overridableProps = selectOverridableProps(getState8(), 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);
-  dispatch6(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        props: {
-          ...overridableProps.props,
-          [overrideKey]: updatedProp
-        },
-        groups: updatedGroups
-      }
-    })
-  );
-  return updatedProp;
-}
+// src/prop-types/component-instance-overrides-prop-type.ts
+import { createPropUtils as createPropUtils3 } from "@elementor/editor-props";
+import { z as z3 } from "@elementor/schema";
 
-// src/components/component-panel-header/use-overridable-props.ts
-import { __useSelector as useSelector3 } from "@elementor/store";
-function useOverridableProps2(componentId) {
-  return useSelector3((state) => {
-    if (!componentId) {
-      return void 0;
-    }
-    return selectOverridableProps(state, componentId);
-  });
-}
+// src/prop-types/component-overridable-prop-type.ts
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+import { z as z2 } from "@elementor/schema";
+var componentOverridablePropTypeUtil = createPropUtils2(
+  "overridable",
+  z2.object({
+    override_key: z2.string(),
+    origin_value: z2.object({
+      $$type: z2.string(),
+      value: z2.unknown()
+    }).nullable()
+  })
+);
 
-// src/components/component-properties-panel/properties-empty-state.tsx
-import * as React2 from "react";
-import { useState } from "react";
-import { ComponentPropListIcon } from "@elementor/icons";
-import { Link as Link2, Stack as Stack2, Typography as Typography2 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+// src/prop-types/component-instance-overrides-prop-type.ts
+var componentInstanceOverridesPropTypeUtil = createPropUtils3(
+  "overrides",
+  z3.array(z3.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([])
+);
 
-// src/components/components-tab/component-introduction.tsx
-import * as React from "react";
-import { PopoverContent } from "@elementor/editor-controls";
-import { PopoverHeader } from "@elementor/editor-ui";
-import { Box, Button, Image, Link, Popover, Stack, Typography } from "@elementor/ui";
+// src/prop-types/component-instance-prop-type.ts
+import { createPropUtils as createPropUtils4, numberPropTypeUtil } from "@elementor/editor-props";
+import { z as z4 } from "@elementor/schema";
+var componentInstancePropTypeUtil = createPropUtils4(
+  "component-instance",
+  z4.object({
+    component_id: numberPropTypeUtil.schema,
+    overrides: z4.optional(componentInstanceOverridesPropTypeUtil.schema)
+  })
+);
+
+// src/create-component-type.ts
+import {
+  createTemplatedElementView
+} from "@elementor/editor-canvas";
+import { getCurrentDocument } from "@elementor/editor-documents";
+import { __getState as getState5 } from "@elementor/store";
 import { __ as __2 } from "@wordpress/i18n";
-var ComponentIntroduction = ({
-  anchorRef,
-  shouldShowIntroduction,
-  onClose
-}) => {
-  if (!anchorRef.current || !shouldShowIntroduction) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(
-    Popover,
-    {
-      anchorEl: anchorRef.current,
-      open: shouldShowIntroduction,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: -30
-      },
-      onClose
-    },
-    /* @__PURE__ */ React.createElement(Box, { sx: { width: "296px" } }, /* @__PURE__ */ React.createElement(PopoverHeader, { title: __2("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React.createElement(
-      Image,
-      {
-        sx: { width: "296px", height: "160px" },
-        src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
-        alt: ""
-      }
-    ), /* @__PURE__ */ React.createElement(PopoverContent, null, /* @__PURE__ */ React.createElement(Stack, { sx: { p: 2 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2(
-      "Click next to any setting you want users to customize - like text, images, or links.",
-      "elementor"
-    )), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { mt: 2 } }, __2(
-      "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
-      "elementor"
-    )), /* @__PURE__ */ React.createElement(
-      Link,
-      {
-        href: "http://go.elementor.com/components-guide",
-        target: "_blank",
-        sx: { mt: 2 },
-        color: "info.main",
-        variant: "body2"
-      },
-      __2("Learn more", "elementor")
-    ), /* @__PURE__ */ React.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { pt: 1 } }, /* @__PURE__ */ React.createElement(Button, { size: "medium", variant: "contained", onClick: onClose }, __2("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] = useState(false);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
-    Stack2,
-    {
-      alignItems: "center",
-      justifyContent: "flex-start",
-      height: "100%",
-      color: "text.secondary",
-      sx: { px: 2.5, pt: 10, pb: 5.5 },
-      gap: 1
-    },
-    /* @__PURE__ */ React2.createElement(ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "subtitle2" }, __3("Add your first property", "elementor")),
-    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "caption" }, __3("Make instances flexible while keeping design synced.", "elementor")),
-    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "caption" }, __3("Select any element, then click + next to a setting to expose it.", "elementor")),
-    /* @__PURE__ */ React2.createElement(
-      Link2,
-      {
-        variant: "caption",
-        color: "secondary",
-        sx: { textDecorationLine: "underline" },
-        onClick: () => setIsOpen(true)
-      },
-      __3("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
-import * as React6 from "react";
-import { EditableField, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
-import { DotsVerticalIcon } from "@elementor/icons";
-import {
-  bindMenu,
-  bindTrigger as bindTrigger2,
-  Box as Box4,
-  IconButton as IconButton2,
-  List,
-  Menu,
-  Stack as Stack4,
-  Tooltip,
-  Typography as Typography5,
-  usePopupState as usePopupState2
-} from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
-
-// src/components/component-properties-panel/property-item.tsx
-import * as React5 from "react";
-import { getWidgetsCache } from "@elementor/editor-elements";
-import { XIcon } from "@elementor/icons";
-import { bindPopover, bindTrigger, Box as Box3, IconButton, Popover as Popover2, Typography as Typography4, usePopupState } from "@elementor/ui";
-
-// src/components/overridable-props/overridable-prop-form.tsx
-import * as React3 from "react";
-import { useState as useState2 } from "react";
-import { Form, MenuListItem } from "@elementor/editor-ui";
-import { Button as Button2, FormLabel, Grid, Select, Stack as Stack3, TextField, Typography as Typography3 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
-
-// src/components/overridable-props/utils/validate-prop-label.ts
-import { __ as __4 } from "@wordpress/i18n";
-var ERROR_MESSAGES = {
-  EMPTY_NAME: __4("Property name is required", "elementor"),
-  DUPLICATE_NAME: __4("Property name already exists", "elementor")
-};
-function validatePropLabel(label, existingLabels, currentLabel) {
-  const trimmedLabel = label.trim();
-  if (!trimmedLabel) {
-    return { isValid: false, errorMessage: ERROR_MESSAGES.EMPTY_NAME };
-  }
-  const normalizedLabel = trimmedLabel.toLowerCase();
-  const normalizedCurrentLabel = currentLabel?.trim().toLowerCase();
-  const isDuplicate = existingLabels.some((existingLabel) => {
-    const normalizedExisting = existingLabel.trim().toLowerCase();
-    if (normalizedCurrentLabel && normalizedExisting === normalizedCurrentLabel) {
-      return false;
+    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: __5("Default", "elementor") };
-function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels = [], sx }) {
-  const [propLabel, setPropLabel] = useState2(currentValue?.label ?? null);
-  const [group, setGroup] = useState2(currentValue?.groupId ?? groups?.[0]?.value ?? null);
-  const [error, setError] = useState2(null);
-  const name = __5("Name", "elementor");
-  const groupName = __5("Group Name", "elementor");
-  const isCreate = currentValue === void 0;
-  const title = isCreate ? __5("Create new property", "elementor") : __5("Update property", "elementor");
-  const ctaLabel = isCreate ? __5("Create", "elementor") : __5("Update", "elementor");
-  const handleSubmit = () => {
-    const validationResult = validatePropLabel(propLabel ?? "", existingLabels, currentValue?.label);
-    if (!validationResult.isValid) {
-      setError(validationResult.errorMessage);
-      return;
+    getModel() {
+      return createComponentModel();
     }
-    onSubmit({ label: propLabel ?? "", group });
   };
-  return /* @__PURE__ */ React3.createElement(Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React3.createElement(Stack3, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
-    Stack3,
-    {
-      direction: "row",
-      alignItems: "center",
-      py: 1,
-      px: 1.5,
-      sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
-    },
-    /* @__PURE__ */ React3.createElement(Typography3, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__PURE__ */ React3.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
-    TextField,
-    {
-      name,
-      size: SIZE,
-      fullWidth: true,
-      placeholder: __5("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 createTemplatedElementView(options) {
+    eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
+    #componentRenderContext;
+    isComponentCurrentlyEdited() {
+      const currentDocument = getCurrentDocument();
+      return currentDocument?.id === this.getComponentId();
     }
-  ))), /* @__PURE__ */ React3.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
-    Select,
-    {
-      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: () => __2("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(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React3.createElement(Stack3, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React3.createElement(
-    Button2,
-    {
-      type: "submit",
-      disabled: !propLabel || 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(getState5(), 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
-import * as React4 from "react";
-import { GripVerticalIcon } from "@elementor/icons";
-import {
-  Box as Box2,
-  styled,
-  UnstableSortableItem,
-  UnstableSortableProvider
-} from "@elementor/ui";
-var SortableProvider = (props) => /* @__PURE__ */ React4.createElement(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(GripVerticalIcon, { fontSize: "tiny" })
-);
-var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React4.createElement(
-  UnstableSortableItem,
-  {
-    id: id2,
-    render: ({
-      itemProps,
-      isDragged,
-      triggerProps,
-      itemStyle,
-      triggerStyle,
-      dropIndicationStyle,
-      showDropIndication,
-      isDragOverlay,
-      isDragPlaceholder
-    }) => /* @__PURE__ */ React4.createElement(
-      Box2,
-      {
-        ...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 })
-    )
-  }
-);
-var StyledSortableTrigger = 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 = styled(Box2)`
-	width: 100%;
-	height: 1px;
-	background-color: ${({ theme }) => theme.palette.text.primary};
-`;
+// src/utils/is-component-instance.ts
+function isComponentInstance(elementModel) {
+  return [elementModel.widgetType, elementModel.elType].includes(COMPONENT_WIDGET_TYPE);
+}
 
-// src/components/component-properties-panel/property-item.tsx
-function PropertyItem({
-  prop,
-  sortableTriggerProps,
-  isDragPlaceholder,
-  groups,
-  existingLabels,
-  onDelete,
-  onUpdate
-}) {
-  const popoverState = usePopupState({
-    variant: "popover"
+// src/utils/revert-element-overridable-setting.ts
+function revertElementOverridableSetting(elementId, settingKey, originValue, overrideKey) {
+  const container = getContainer(elementId);
+  if (!container) {
+    return;
+  }
+  if (isComponentInstance(container.model.toJSON())) {
+    revertComponentInstanceSetting(elementId, overrideKey);
+    return;
+  }
+  updateElementSettings({
+    id: elementId,
+    props: { [settingKey]: originValue ?? null },
+    withHistory: false
   });
-  const icon = getElementIcon(prop);
-  const popoverProps = bindPopover(popoverState);
-  const handleSubmit = (data) => {
-    onUpdate(data);
-    popoverState.close();
-  };
-  const handleDelete = (event) => {
-    event.stopPropagation();
-    onDelete(prop.overrideKey);
-  };
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
-    Box3,
-    {
-      ...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"
-        }
+}
+function revertComponentInstanceSetting(elementId, overrideKey) {
+  const setting = 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)
+  });
+  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/store/actions/delete-overridable-prop.ts
+function deleteOverridableProp({ componentId, propKey, source }) {
+  const overridableProps = selectOverridableProps(getState6(), 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);
+  dispatch3(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        props: remainingProps,
+        groups: updatedGroups
       }
-    },
-    /* @__PURE__ */ React5.createElement(SortableTrigger, { ...sortableTriggerProps }),
-    /* @__PURE__ */ React5.createElement(
-      Box3,
-      {
-        sx: { display: "flex", alignItems: "center", color: "text.primary", fontSize: 12, padding: 0.25 }
-      },
-      /* @__PURE__ */ React5.createElement("i", { className: icon })
-    ),
-    /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
-    /* @__PURE__ */ React5.createElement(IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React5.createElement(XIcon, { fontSize: "tiny" }))
-  ), /* @__PURE__ */ React5.createElement(
-    Popover2,
-    {
-      ...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%" }
+    })
+  );
+  const currentComponent = selectCurrentComponent(getState6());
+  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
+  });
+}
+
+// src/store/actions/reorder-group-props.ts
+import { __dispatch as dispatch4, __getState as getState7 } from "@elementor/store";
+function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
+  const overridableProps = selectOverridableProps(getState7(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const group = overridableProps.groups.items[groupId];
+  if (!group) {
+    return;
+  }
+  dispatch4(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: {
+          ...overridableProps.groups,
+          items: {
+            ...overridableProps.groups.items,
+            [groupId]: {
+              ...group,
+              props: newPropsOrder
+            }
+          }
+        }
       }
-    )
-  ));
+    })
+  );
 }
-function getElementIcon(prop) {
-  const elType = prop.elType === "widget" ? prop.widgetType : prop.elType;
-  const widgetsCache = getWidgetsCache();
-  if (!widgetsCache) {
-    return "eicon-apps";
+
+// src/store/actions/reorder-overridable-groups.ts
+import { __dispatch as dispatch5, __getState as getState8 } from "@elementor/store";
+function reorderOverridableGroups({ componentId, newOrder }) {
+  const overridableProps = selectOverridableProps(getState8(), componentId);
+  if (!overridableProps) {
+    return;
   }
-  const widgetConfig = widgetsCache[elType];
-  return widgetConfig?.icon || "eicon-apps";
+  dispatch5(
+    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
+import { __dispatch as dispatch6, __getState as getState9 } from "@elementor/store";
+function updateOverridablePropParams({
+  componentId,
+  overrideKey,
+  label,
+  groupId
 }) {
-  const groupProps = group.props.map((propId) => props[propId]).filter((prop) => Boolean(prop));
-  const popupState = usePopupState2({
-    variant: "popover",
-    disableAutoFocus: true
-  });
-  const { editableRef, isEditing, error, getEditableProps, setEditingGroupId, editingGroupId } = editableLabelProps;
-  const hasProperties = group.props.length > 0;
-  const isThisGroupEditing = isEditing && editingGroupId === group.id;
-  const handleRenameClick = () => {
-    popupState.close();
-    setEditingGroupId(group.id);
-  };
-  const handleDeleteClick = () => {
-    popupState.close();
-    onGroupDelete(group.id);
+  const overridableProps = selectOverridableProps(getState9(), 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(
-    Box4,
-    {
-      sx: {
-        opacity: isDragPlaceholder ? 0.5 : 1
+  const updatedGroups = movePropBetweenGroups(overridableProps.groups, overrideKey, oldGroupId, newGroupId);
+  dispatch6(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        props: {
+          ...overridableProps.props,
+          [overrideKey]: updatedProp
+        },
+        groups: updatedGroups
       }
-    },
-    /* @__PURE__ */ React6.createElement(Stack4, { gap: 1 }, /* @__PURE__ */ React6.createElement(
-      Box4,
-      {
-        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
+import { __useSelector as useSelector3 } from "@elementor/store";
+function useOverridableProps2(componentId) {
+  return useSelector3((state) => {
+    if (!componentId) {
+      return void 0;
+    }
+    return selectOverridableProps(state, componentId);
+  });
+}
+
+// src/components/component-properties-panel/properties-empty-state.tsx
+import * as React2 from "react";
+import { useState } from "react";
+import { ComponentPropListIcon } from "@elementor/icons";
+import { Link as Link2, Stack as Stack2, Typography as Typography2 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+
+// src/components/components-tab/component-introduction.tsx
+import * as React from "react";
+import { PopoverContent } from "@elementor/editor-controls";
+import { PopoverHeader } from "@elementor/editor-ui";
+import { Box, Button, Image, Link, Popover, Stack, Typography } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+var ComponentIntroduction = ({
+  anchorRef,
+  shouldShowIntroduction,
+  onClose
+}) => {
+  if (!anchorRef.current || !shouldShowIntroduction) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      anchorEl: anchorRef.current,
+      open: shouldShowIntroduction,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
       },
-      /* @__PURE__ */ React6.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
-      /* @__PURE__ */ React6.createElement(Stack4, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React6.createElement(
-        Box4,
-        {
-          sx: {
-            flex: 1,
-            height: 28,
-            display: "flex",
-            alignItems: "center",
-            border: 2,
-            borderColor: "text.secondary",
-            borderRadius: 1,
-            pl: 0.5
-          }
-        },
-        /* @__PURE__ */ React6.createElement(
-          EditableField,
-          {
-            ref: editableRef,
-            as: Typography5,
-            variant: "caption",
-            error: error ?? void 0,
-            sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 },
-            ...getEditableProps()
-          }
-        )
-      ) : /* @__PURE__ */ React6.createElement(
-        Typography5,
-        {
-          variant: "caption",
-          sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
-        },
-        group.label
-      ), /* @__PURE__ */ React6.createElement(
-        IconButton2,
-        {
-          className: "group-menu",
-          size: "tiny",
-          sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
-          "aria-label": __6("Group actions", "elementor"),
-          ...bindTrigger2(popupState)
-        },
-        /* @__PURE__ */ React6.createElement(DotsVerticalIcon, { fontSize: "tiny" })
-      ))
-    ), /* @__PURE__ */ React6.createElement(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(Box, { sx: { width: "296px" } }, /* @__PURE__ */ React.createElement(PopoverHeader, { title: __3("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React.createElement(
+      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(
-      Menu,
+    ), /* @__PURE__ */ React.createElement(PopoverContent, null, /* @__PURE__ */ React.createElement(Stack, { sx: { p: 2 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __3("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __3(
+      "Click next to any setting you want users to customize - like text, images, or links.",
+      "elementor"
+    )), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { mt: 2 } }, __3(
+      "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
+      "elementor"
+    )), /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        href: "http://go.elementor.com/components-guide",
+        target: "_blank",
+        sx: { mt: 2 },
+        color: "info.main",
+        variant: "body2"
+      },
+      __3("Learn more", "elementor")
+    ), /* @__PURE__ */ React.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { pt: 1 } }, /* @__PURE__ */ React.createElement(Button, { size: "medium", variant: "contained", onClick: onClose }, __3("Got it", "elementor"))))))
+  );
+};
+
+// src/components/component-properties-panel/properties-empty-state.tsx
+function PropertiesEmptyState({ introductionRef }) {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    Stack2,
+    {
+      alignItems: "center",
+      justifyContent: "flex-start",
+      height: "100%",
+      color: "text.secondary",
+      sx: { px: 2.5, pt: 10, pb: 5.5 },
+      gap: 1
+    },
+    /* @__PURE__ */ React2.createElement(ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "subtitle2" }, __4("Add your first property", "elementor")),
+    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "caption" }, __4("Make instances flexible while keeping design synced.", "elementor")),
+    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "caption" }, __4("Select any element, then click + next to a setting to expose it.", "elementor")),
+    /* @__PURE__ */ React2.createElement(
+      Link2,
       {
-        ...bindMenu(popupState),
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" }
+        variant: "caption",
+        color: "secondary",
+        sx: { textDecorationLine: "underline" },
+        onClick: () => setIsOpen(true)
       },
-      /* @__PURE__ */ React6.createElement(MenuListItem2, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React6.createElement(Typography5, { variant: "caption", sx: { color: "text.primary" } }, __6("Rename", "elementor"))),
-      /* @__PURE__ */ React6.createElement(
-        Tooltip,
-        {
-          title: hasProperties ? __6("To delete the group, first remove all the properties", "elementor") : "",
-          placement: "right"
-        },
-        /* @__PURE__ */ React6.createElement("span", null, /* @__PURE__ */ React6.createElement(MenuListItem2, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React6.createElement(
-          Typography5,
-          {
-            variant: "caption",
-            sx: { color: hasProperties ? "text.disabled" : "error.light" }
-          },
-          __6("Delete", "elementor")
-        )))
-      )
+      __4("Learn more", "elementor")
     )
-  );
+  ), /* @__PURE__ */ React2.createElement(
+    ComponentIntroduction,
+    {
+      anchorRef: introductionRef,
+      shouldShowIntroduction: isOpen,
+      onClose: () => setIsOpen(false)
+    }
+  ));
 }
 
-// src/components/component-properties-panel/use-current-editable-item.ts
-import { useState as useState3 } from "react";
-import { setDocumentModifiedStatus } from "@elementor/editor-documents";
-import { useEditable } from "@elementor/editor-ui";
-import { __ as __8 } from "@wordpress/i18n";
+// src/components/component-properties-panel/properties-group.tsx
+import * as React6 from "react";
+import { EditableField, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
+import { DotsVerticalIcon } from "@elementor/icons";
+import {
+  bindMenu,
+  bindTrigger as bindTrigger2,
+  Box as Box4,
+  IconButton as IconButton2,
+  List,
+  Menu,
+  Stack as Stack4,
+  Tooltip,
+  Typography as Typography5,
+  usePopupState as usePopupState2
+} from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
 
-// src/store/actions/rename-overridable-group.ts
-import { __dispatch as dispatch7, __getState as getState9 } from "@elementor/store";
-function renameOverridableGroup({ componentId, groupId, label }) {
-  const overridableProps = selectOverridableProps(getState9(), componentId);
-  if (!overridableProps) {
-    return false;
-  }
-  const group = overridableProps.groups.items[groupId];
-  if (!group) {
-    return false;
-  }
-  const updatedGroups = renameGroup(overridableProps.groups, groupId, label);
-  dispatch7(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps: {
-        ...overridableProps,
-        groups: updatedGroups
-      }
-    })
-  );
-  return true;
-}
+// src/components/component-properties-panel/property-item.tsx
+import * as React5 from "react";
+import { getWidgetsCache } from "@elementor/editor-elements";
+import { XIcon } from "@elementor/icons";
+import { bindPopover, bindTrigger, Box as Box3, IconButton, Popover as Popover2, Typography as Typography4, usePopupState } from "@elementor/ui";
 
-// src/components/component-properties-panel/utils/validate-group-label.ts
-import { __ as __7 } from "@wordpress/i18n";
-var ERROR_MESSAGES2 = {
-  EMPTY_NAME: __7("Group name is required", "elementor"),
-  DUPLICATE_NAME: __7("Group name already exists", "elementor")
+// src/components/overridable-props/overridable-prop-form.tsx
+import * as React3 from "react";
+import { useState as useState2 } from "react";
+import { Form, MenuListItem } from "@elementor/editor-ui";
+import { Button as Button2, FormLabel, Grid, Select, Stack as Stack3, TextField, Typography as Typography3 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+
+// src/components/overridable-props/utils/validate-prop-label.ts
+import { __ as __5 } from "@wordpress/i18n";
+var ERROR_MESSAGES = {
+  EMPTY_NAME: __5("Property name is required", "elementor"),
+  DUPLICATE_NAME: __5("Property name already exists", "elementor")
 };
-function validateGroupLabel(label, existingGroups) {
+function validatePropLabel(label, existingLabels, currentLabel) {
   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 { isValid: false, errorMessage: ERROR_MESSAGES.EMPTY_NAME };
   }
-  return "";
-}
-
-// src/components/component-properties-panel/use-current-editable-item.ts
-function useCurrentEditableItem() {
-  const [editingGroupId, setEditingGroupId] = useState3(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(__8("Group ID or component ID is missing", "elementor"));
+  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;
     }
-    renameOverridableGroup({
-      componentId: currentComponentId,
-      groupId: editingGroupId,
-      label: newLabel
-    });
-    setDocumentModifiedStatus(true);
-  };
-  const {
-    ref: editableRef,
-    openEditMode,
-    isEditing,
-    error,
-    getProps: getEditableProps
-  } = useEditable({
-    value: currentGroup?.label ?? "",
-    onSubmit: handleSubmit,
-    validation: validateLabel
+    return normalizedExisting === normalizedLabel;
   });
-  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}`;
+  if (isDuplicate) {
+    return { isValid: false, errorMessage: ERROR_MESSAGES.DUPLICATE_NAME };
   }
-  return newLabel;
+  return { isValid: true, errorMessage: null };
 }
 
-// src/components/component-properties-panel/component-properties-panel-content.tsx
-function ComponentPropertiesPanelContent({ onClose }) {
-  const currentComponentId = useCurrentComponentId();
-  const overridableProps = useOverridableProps2(currentComponentId);
-  const [isAddingGroup, setIsAddingGroup] = useState4(false);
-  const introductionRef = useRef(null);
-  const groupLabelEditable = useCurrentEditableItem();
-  const groups = useMemo(() => {
-    if (!overridableProps) {
-      return [];
-    }
-    return overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(Boolean);
-  }, [overridableProps]);
-  const allGroupsForSelect = useMemo(
-    () => groups.map((group) => ({ value: group.id, label: group.label })),
-    [groups]
-  );
-  if (!currentComponentId || !overridableProps) {
-    return null;
-  }
-  const hasGroups = groups.length > 0;
-  const showEmptyState = !hasGroups && !isAddingGroup;
-  const groupIds = overridableProps.groups.order;
-  const handleAddGroupClick = () => {
-    if (isAddingGroup) {
-      return;
-    }
-    const newGroupId = generateUniqueId2("group");
-    const newLabel = generateUniqueLabel(groups);
-    addOverridableGroup({
-      componentId: currentComponentId,
-      groupId: newGroupId,
-      label: newLabel,
-      source: "user"
-    });
-    setDocumentModifiedStatus2(true);
-    setIsAddingGroup(false);
-    groupLabelEditable.setEditingGroupId(newGroupId);
-  };
-  const handleGroupsReorder = (newOrder) => {
-    reorderOverridableGroups({ componentId: currentComponentId, newOrder });
-    setDocumentModifiedStatus2(true);
-  };
-  const handlePropsReorder = (groupId, newPropsOrder) => {
-    reorderGroupProps({ componentId: currentComponentId, groupId, newPropsOrder });
-    setDocumentModifiedStatus2(true);
-  };
-  const handlePropertyDelete = (propKey) => {
-    deleteOverridableProp({ componentId: currentComponentId, propKey, source: "user" });
-    setDocumentModifiedStatus2(true);
-  };
-  const handlePropertyUpdate = (overrideKey, data) => {
-    updateOverridablePropParams({
-      componentId: currentComponentId,
-      overrideKey,
-      label: data.label,
-      groupId: data.group
-    });
-    setDocumentModifiedStatus2(true);
-  };
-  const handleGroupDelete = (groupId) => {
-    deleteOverridableGroup({ componentId: currentComponentId, groupId });
-    setDocumentModifiedStatus2(true);
+// src/components/overridable-props/overridable-prop-form.tsx
+var SIZE = "tiny";
+var DEFAULT_GROUP = { value: null, label: __6("Default", "elementor") };
+function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels = [], sx }) {
+  const [propLabel, setPropLabel] = useState2(currentValue?.label ?? null);
+  const [group, setGroup] = useState2(currentValue?.groupId ?? groups?.[0]?.value ?? null);
+  const [error, setError] = useState2(null);
+  const name = __6("Name", "elementor");
+  const groupName = __6("Group Name", "elementor");
+  const isCreate = currentValue === void 0;
+  const title = isCreate ? __6("Create new property", "elementor") : __6("Update property", "elementor");
+  const ctaLabel = isCreate ? __6("Create", "elementor") : __6("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(PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React7.createElement(Stack5, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React7.createElement(ComponentPropListIcon2, { fontSize: "tiny" }), /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { variant: "subtitle2" }, __9("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React7.createElement(Tooltip2, { title: __9("Add new group", "elementor") }, /* @__PURE__ */ React7.createElement(
-    IconButton3,
-    {
-      size: "tiny",
-      "aria-label": __9("Add new group", "elementor"),
-      onClick: handleAddGroupClick
-    },
-    /* @__PURE__ */ React7.createElement(FolderPlusIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React7.createElement(Tooltip2, { title: __9("Close panel", "elementor") }, /* @__PURE__ */ React7.createElement(
-    IconButton3,
+  return /* @__PURE__ */ React3.createElement(Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React3.createElement(Stack3, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
+    Stack3,
     {
-      ref: introductionRef,
-      size: "tiny",
-      "aria-label": __9("Close panel", "elementor"),
-      onClick: onClose
+      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(XIcon2, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(PanelBody, null, showEmptyState ? /* @__PURE__ */ React7.createElement(PropertiesEmptyState, { introductionRef }) : /* @__PURE__ */ React7.createElement(List2, { 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,
+    /* @__PURE__ */ React3.createElement(Typography3, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React3.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    TextField,
     {
-      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
+      name,
+      size: SIZE,
+      fullWidth: true,
+      placeholder: __6("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
     }
-  )))))));
-}
-
-// src/components/component-properties-panel/component-properties-panel.tsx
-var id = "component-properties-panel";
-var { panel, usePanelActions } = createPanel({
-  id,
-  component: ComponentPropertiesPanel
-});
-function ComponentPropertiesPanel() {
-  const { element, elementType } = useSelectedElement();
-  const { close: closePanel } = usePanelActions();
-  const { open: openEditingPanel } = useEditingPanelActions();
-  if (!element || !elementType) {
-    return null;
-  }
-  return /* @__PURE__ */ React8.createElement(ThemeProvider, null, /* @__PURE__ */ React8.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React8.createElement(Panel, null, /* @__PURE__ */ React8.createElement(
-    ComponentPropertiesPanelContent,
+  ))), /* @__PURE__ */ React3.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    Select,
     {
-      onClose: () => {
-        closePanel();
-        openEditingPanel();
+      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;
       }
-    }
-  )))));
-}
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(Box5, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, __10("Something went wrong", "elementor"))));
-
-// src/components/component-panel-header/component-badge.tsx
-import * as React9 from "react";
-import { useEffect, useRef as useRef2 } from "react";
-import { ComponentPropListIcon as ComponentPropListIcon3 } from "@elementor/icons";
-import { Badge, Box as Box6, keyframes, styled as styled2, ToggleButton } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
-var ComponentsBadge = React9.forwardRef(({ overridablePropsCount, onClick }, ref) => {
-  const prevCount = usePrevious(overridablePropsCount);
-  const isFirstExposedProperty = prevCount === 0 && overridablePropsCount === 1;
-  return /* @__PURE__ */ React9.createElement(
-    StyledBadge,
+    },
+    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React3.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React3.createElement(Stack3, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React3.createElement(
+    Button2,
     {
-      ref,
+      type: "submit",
+      disabled: !propLabel || Boolean(error),
+      variant: "contained",
       color: "primary",
-      key: overridablePropsCount,
-      invisible: overridablePropsCount === 0,
-      animate: isFirstExposedProperty,
-      anchorOrigin: { vertical: "top", horizontal: "right" },
-      badgeContent: /* @__PURE__ */ React9.createElement(Box6, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
+      size: "small"
     },
-    /* @__PURE__ */ React9.createElement(
-      ToggleButton,
+    ctaLabel
+  ))));
+}
+
+// src/components/component-properties-panel/sortable.tsx
+import * as React4 from "react";
+import { GripVerticalIcon } from "@elementor/icons";
+import {
+  Box as Box2,
+  styled,
+  UnstableSortableItem,
+  UnstableSortableProvider
+} from "@elementor/ui";
+var SortableProvider = (props) => /* @__PURE__ */ React4.createElement(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(GripVerticalIcon, { fontSize: "tiny" })
+);
+var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React4.createElement(
+  UnstableSortableItem,
+  {
+    id: id2,
+    render: ({
+      itemProps,
+      isDragged,
+      triggerProps,
+      itemStyle,
+      triggerStyle,
+      dropIndicationStyle,
+      showDropIndication,
+      isDragOverlay,
+      isDragPlaceholder
+    }) => /* @__PURE__ */ React4.createElement(
+      Box2,
       {
-        value: "exposed properties",
-        size: "tiny",
-        onClick,
-        "aria-label": __11("View exposed properties", "elementor")
+        ...itemProps,
+        style: itemStyle,
+        component: "div",
+        role: "listitem",
+        sx: {
+          backgroundColor: isDragOverlay ? "background.paper" : void 0
+        }
       },
-      /* @__PURE__ */ React9.createElement(ComponentPropListIcon3, { fontSize: "tiny" })
+      children({
+        isDragged,
+        isDragPlaceholder,
+        triggerProps,
+        triggerStyle
+      }),
+      showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
     )
-  );
-});
-var StyledBadge = styled2(Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
-  ({ theme, animate }) => ({
-    "& .MuiBadge-badge": {
-      minWidth: theme.spacing(2),
-      height: theme.spacing(2),
-      minHeight: theme.spacing(2),
-      maxWidth: theme.spacing(2),
-      fontSize: theme.typography.caption.fontSize,
-      animation: animate ? `${bounceIn} 300ms ease-out` : "none"
-    }
-  })
+  }
 );
-function usePrevious(value) {
-  const ref = useRef2(value);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-var bounceIn = keyframes`
-	0% { transform: scale(0) translate(50%, 50%); opacity: 0; }
-	70% { transform: scale(1.1) translate(50%, -50%); opacity: 1; }
-	100% { transform: scale(1) translate(50%, -50%); opacity: 1; }
-`;
-var slideUp = keyframes`
-	from { transform: translateY(100%); opacity: 0; }
-	to { transform: translateY(0); opacity: 1; }
+var StyledSortableTrigger = 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 = styled(Box2)`
+	width: 100%;
+	height: 1px;
+	background-color: ${({ theme }) => theme.palette.text.primary};
 `;
 
-// 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] = 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 handleCloseIntroduction = () => {
-    suppressMessage();
-    setShouldShowIntroduction(false);
+// src/components/component-properties-panel/property-item.tsx
+function PropertyItem({
+  prop,
+  sortableTriggerProps,
+  isDragPlaceholder,
+  groups,
+  existingLabels,
+  onDelete,
+  onUpdate
+}) {
+  const popoverState = usePopupState({
+    variant: "popover"
+  });
+  const icon = getElementIcon(prop);
+  const popoverProps = bindPopover(popoverState);
+  const handleSubmit = (data) => {
+    onUpdate(data);
+    popoverState.close();
   };
-  const handleOpenPropertiesPanel = () => {
-    openPropertiesPanel();
-    trackComponentEvent({
-      action: "propertiesPanelOpened",
-      source: "user",
-      component_uid: componentUid,
-      properties_count: overridablePropsCount
-    });
+  const handleDelete = (event) => {
+    event.stopPropagation();
+    onDelete(prop.overrideKey);
   };
-  return /* @__PURE__ */ React10.createElement(Box7, null, /* @__PURE__ */ React10.createElement(
-    Stack6,
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    Box3,
     {
-      direction: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
+      ...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__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Tooltip3, { title: __12("Back", "elementor") }, /* @__PURE__ */ React10.createElement(IconButton4, { size: "tiny", onClick: onBack, "aria-label": __12("Back", "elementor") }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(Typography6, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
-    /* @__PURE__ */ React10.createElement(
-      ComponentsBadge,
+    /* @__PURE__ */ React5.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React5.createElement(
+      Box3,
       {
-        overridablePropsCount,
-        ref: anchorRef,
-        onClick: handleOpenPropertiesPanel
+        sx: { display: "flex", alignItems: "center", color: "text.primary", fontSize: 12, padding: 0.25 }
+      },
+      /* @__PURE__ */ React5.createElement("i", { className: icon })
+    ),
+    /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
+    /* @__PURE__ */ React5.createElement(IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React5.createElement(XIcon, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React5.createElement(
+    Popover2,
+    {
+      ...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%" }
       }
     )
-  ), /* @__PURE__ */ React10.createElement(Divider2, null), /* @__PURE__ */ React10.createElement(
-    ComponentIntroduction,
-    {
-      anchorRef,
-      shouldShowIntroduction,
-      onClose: handleCloseIntroduction
-    }
   ));
-};
-function getComponentName() {
-  const state = getState10();
-  const path = state[SLICE_NAME].path;
-  const { instanceTitle } = path.at(-1) ?? {};
-  if (instanceTitle) {
-    return instanceTitle;
+}
+function getElementIcon(prop) {
+  const elType = prop.elType === "widget" ? prop.widgetType : prop.elType;
+  const widgetsCache = getWidgetsCache();
+  if (!widgetsCache) {
+    return "eicon-apps";
   }
-  const documentsManager = getV1DocumentsManager3();
-  const currentDocument = documentsManager.getCurrent();
-  return currentDocument?.container?.settings?.get("post_title") ?? "";
+  const widgetConfig = widgetsCache[elType];
+  return widgetConfig?.icon || "eicon-apps";
 }
 
-// src/components/components-tab/components.tsx
-import * as React19 from "react";
-import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
-
-// src/hooks/use-components.ts
-import { __useSelector as useSelector4 } from "@elementor/store";
-var useComponents = () => {
-  const components = useSelector4(selectComponents);
-  const isLoading = useSelector4(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;
+// 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 = usePopupState2({
+    variant: "popover",
+    disableAutoFocus: true
+  });
+  const { editableRef, isEditing, error, getEditableProps, setEditingGroupId, editingGroupId } = editableLabelProps;
+  const hasProperties = group.props.length > 0;
+  const isThisGroupEditing = isEditing && editingGroupId === group.id;
+  const handleRenameClick = () => {
+    popupState.close();
+    setEditingGroupId(group.id);
+  };
+  const handleDeleteClick = () => {
+    popupState.close();
+    onGroupDelete(group.id);
+  };
+  return /* @__PURE__ */ React6.createElement(
+    Box4,
+    {
+      sx: {
+        opacity: isDragPlaceholder ? 0.5 : 1
+      }
+    },
+    /* @__PURE__ */ React6.createElement(Stack4, { gap: 1 }, /* @__PURE__ */ React6.createElement(
+      Box4,
+      {
+        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(Stack4, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React6.createElement(
+        Box4,
+        {
+          sx: {
+            flex: 1,
+            height: 28,
+            display: "flex",
+            alignItems: "center",
+            border: 2,
+            borderColor: "text.secondary",
+            borderRadius: 1,
+            pl: 0.5
+          }
+        },
+        /* @__PURE__ */ React6.createElement(
+          EditableField,
+          {
+            ref: editableRef,
+            as: Typography5,
+            variant: "caption",
+            error: error ?? void 0,
+            sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 },
+            ...getEditableProps()
+          }
+        )
+      ) : /* @__PURE__ */ React6.createElement(
+        Typography5,
+        {
+          variant: "caption",
+          sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
+        },
+        group.label
+      ), /* @__PURE__ */ React6.createElement(
+        IconButton2,
+        {
+          className: "group-menu",
+          size: "tiny",
+          sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
+          "aria-label": __7("Group actions", "elementor"),
+          ...bindTrigger2(popupState)
+        },
+        /* @__PURE__ */ React6.createElement(DotsVerticalIcon, { fontSize: "tiny" })
+      ))
+    ), /* @__PURE__ */ React6.createElement(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(
+      Menu,
+      {
+        ...bindMenu(popupState),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" }
+      },
+      /* @__PURE__ */ React6.createElement(MenuListItem2, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React6.createElement(Typography5, { variant: "caption", sx: { color: "text.primary" } }, __7("Rename", "elementor"))),
+      /* @__PURE__ */ React6.createElement(
+        Tooltip,
+        {
+          title: hasProperties ? __7("To delete the group, first remove all the properties", "elementor") : "",
+          placement: "right"
+        },
+        /* @__PURE__ */ React6.createElement("span", null, /* @__PURE__ */ React6.createElement(MenuListItem2, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React6.createElement(
+          Typography5,
+          {
+            variant: "caption",
+            sx: { color: hasProperties ? "text.disabled" : "error.light" }
+          },
+          __7("Delete", "elementor")
+        )))
+      )
+    )
+  );
 }
 
-// src/components/components-tab/component-search.tsx
-import * as React12 from "react";
-import { SearchIcon } from "@elementor/icons";
-import { Box as Box8, InputAdornment, Stack as Stack7, TextField as TextField2 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+// src/components/component-properties-panel/use-current-editable-item.ts
+import { useState as useState3 } from "react";
+import { setDocumentModifiedStatus } from "@elementor/editor-documents";
+import { useEditable } from "@elementor/editor-ui";
+import { __ as __9 } from "@wordpress/i18n";
 
-// src/components/components-tab/search-provider.tsx
-import * as React11 from "react";
-import { createContext, useContext } from "react";
-import { useSearchState } from "@elementor/utils";
-var SearchContext = createContext(void 0);
-var SearchProvider = ({
-  children,
-  localStorageKey
-}) => {
-  const { debouncedValue, handleChange, inputValue } = useSearchState({ localStorageKey });
-  const clearSearch = () => {
-    handleChange("");
-  };
-  return /* @__PURE__ */ React11.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
-};
-var useSearch = () => {
-  const context = useContext(SearchContext);
-  if (!context) {
-    throw new Error("useSearch must be used within a SearchProvider");
+// src/store/actions/rename-overridable-group.ts
+import { __dispatch as dispatch7, __getState as getState10 } from "@elementor/store";
+function renameOverridableGroup({ componentId, groupId, label }) {
+  const overridableProps = selectOverridableProps(getState10(), componentId);
+  if (!overridableProps) {
+    return false;
   }
-  return context;
-};
-
-// src/components/components-tab/component-search.tsx
-var ComponentSearch = () => {
-  const { inputValue, handleChange } = useSearch();
-  return /* @__PURE__ */ React12.createElement(Stack7, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React12.createElement(Box8, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React12.createElement(
-    TextField2,
-    {
-      role: "search",
-      fullWidth: true,
-      size: "tiny",
-      value: inputValue,
-      placeholder: __13("Search", "elementor"),
-      onChange: (e) => handleChange(e.target.value),
-      InputProps: {
-        startAdornment: /* @__PURE__ */ React12.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(SearchIcon, { fontSize: "tiny" }))
+  const group = overridableProps.groups.items[groupId];
+  if (!group) {
+    return false;
+  }
+  const updatedGroups = renameGroup(overridableProps.groups, groupId, label);
+  dispatch7(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: updatedGroups
       }
-    }
-  )));
-};
-
-// src/components/components-tab/components-list.tsx
-import * as React17 from "react";
-import { useState as useState7 } from "react";
-import { getAngieSdk } from "@elementor/editor-mcp";
-import { AIIcon, ComponentsIcon as ComponentsIcon2 } from "@elementor/icons";
-import { Box as Box11, Button as Button4, Divider as Divider3, Link as Link3, List as List3, Stack as Stack10, Typography as Typography9 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
+    })
+  );
+  return true;
+}
 
-// src/hooks/use-components-permissions.ts
-import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
-var useComponentsPermissions = () => {
-  const { isAdmin } = useCurrentUserCapabilities();
-  return {
-    canCreate: isAdmin,
-    canEdit: isAdmin,
-    canDelete: isAdmin,
-    canRename: isAdmin
-  };
+// src/components/component-properties-panel/utils/validate-group-label.ts
+import { __ as __8 } from "@wordpress/i18n";
+var ERROR_MESSAGES2 = {
+  EMPTY_NAME: __8("Group name is required", "elementor"),
+  DUPLICATE_NAME: __8("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
-import { getV1DocumentsManager as getV1DocumentsManager4, setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
-import { getAllDescendants } from "@elementor/editor-elements";
-import { __dispatch as dispatch8 } from "@elementor/store";
-
-// src/create-component-type.ts
-import {
-  createTemplatedElementView
-} from "@elementor/editor-canvas";
-import { getCurrentDocument } from "@elementor/editor-documents";
-import { __getState as getState11 } from "@elementor/store";
-import { __ as __14 } from "@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] = useState3(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 createTemplatedElementView(options) {
-    eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
-    #componentRenderContext;
-    isComponentCurrentlyEdited() {
-      const currentDocument = 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(__9("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: () => __14("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
+    });
+    setDocumentModifiedStatus(true);
+  };
+  const {
+    ref: editableRef,
+    openEditMode,
+    isEditing,
+    error,
+    getProps: getEditableProps
+  } = useEditable({
+    value: currentGroup?.label ?? "",
+    onSubmit: handleSubmit,
+    validation: validateLabel
+  });
+  return {
+    editableRef,
+    isEditing,
+    error,
+    getEditableProps,
+    setEditingGroupId: (groupId) => {
+      setEditingGroupId(groupId);
+      openEditMode();
+    },
+    editingGroupId
+  };
+}
+
+// src/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] = useState4(false);
+  const introductionRef = useRef(null);
+  const groupLabelEditable = useCurrentEditableItem();
+  const groups = 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 = 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 = generateUniqueId2("group");
+    const newLabel = generateUniqueLabel(groups);
+    addOverridableGroup({
+      componentId: currentComponentId,
+      groupId: newGroupId,
+      label: newLabel,
+      source: "user"
+    });
+    setDocumentModifiedStatus2(true);
+    setIsAddingGroup(false);
+    groupLabelEditable.setEditingGroupId(newGroupId);
+  };
+  const handleGroupsReorder = (newOrder) => {
+    reorderOverridableGroups({ componentId: currentComponentId, newOrder });
+    setDocumentModifiedStatus2(true);
+  };
+  const handlePropsReorder = (groupId, newPropsOrder) => {
+    reorderGroupProps({ componentId: currentComponentId, groupId, newPropsOrder });
+    setDocumentModifiedStatus2(true);
+  };
+  const handlePropertyDelete = (propKey) => {
+    deleteOverridableProp({ componentId: currentComponentId, propKey, source: "user" });
+    setDocumentModifiedStatus2(true);
+  };
+  const handlePropertyUpdate = (overrideKey, data) => {
+    updateOverridablePropParams({
+      componentId: currentComponentId,
+      overrideKey,
+      label: data.label,
+      groupId: data.group
+    });
+    setDocumentModifiedStatus2(true);
+  };
+  const handleGroupDelete = (groupId) => {
+    deleteOverridableGroup({ componentId: currentComponentId, groupId });
+    setDocumentModifiedStatus2(true);
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React7.createElement(Stack5, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React7.createElement(ComponentPropListIcon2, { fontSize: "tiny" }), /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { variant: "subtitle2" }, __10("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React7.createElement(Tooltip2, { title: __10("Add new group", "elementor") }, /* @__PURE__ */ React7.createElement(
+    IconButton3,
+    {
+      size: "tiny",
+      "aria-label": __10("Add new group", "elementor"),
+      onClick: handleAddGroupClick
+    },
+    /* @__PURE__ */ React7.createElement(FolderPlusIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React7.createElement(Tooltip2, { title: __10("Close panel", "elementor") }, /* @__PURE__ */ React7.createElement(
+    IconButton3,
+    {
+      ref: introductionRef,
+      size: "tiny",
+      "aria-label": __10("Close panel", "elementor"),
+      onClick: onClose
+    },
+    /* @__PURE__ */ React7.createElement(XIcon2, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(PanelBody, null, showEmptyState ? /* @__PURE__ */ React7.createElement(PropertiesEmptyState, { introductionRef }) : /* @__PURE__ */ React7.createElement(List2, { 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 } = createPanel({
+  id,
+  component: ComponentPropertiesPanel
+});
+function ComponentPropertiesPanel() {
+  const { element, elementType } = useSelectedElement();
+  const { close: closePanel } = usePanelActions();
+  const { open: openEditingPanel } = useEditingPanelActions();
+  if (!element || !elementType) {
+    return null;
+  }
+  return /* @__PURE__ */ React8.createElement(ThemeProvider, null, /* @__PURE__ */ React8.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React8.createElement(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(Box5, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, __11("Something went wrong", "elementor"))));
+
+// src/components/component-panel-header/component-badge.tsx
+import * as React9 from "react";
+import { useEffect, useRef as useRef2 } from "react";
+import { ComponentPropListIcon as ComponentPropListIcon3 } from "@elementor/icons";
+import { Badge, Box as Box6, keyframes, styled as styled2, ToggleButton } from "@elementor/ui";
+import { __ as __12 } from "@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(Box6, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
+    },
+    /* @__PURE__ */ React9.createElement(
+      ToggleButton,
+      {
+        value: "exposed properties",
+        size: "tiny",
+        onClick,
+        "aria-label": __12("View exposed properties", "elementor")
+      },
+      /* @__PURE__ */ React9.createElement(ComponentPropListIcon3, { fontSize: "tiny" })
+    )
+  );
+});
+var StyledBadge = styled2(Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
+  ({ theme, animate }) => ({
+    "& .MuiBadge-badge": {
+      minWidth: theme.spacing(2),
+      height: theme.spacing(2),
+      minHeight: theme.spacing(2),
+      maxWidth: theme.spacing(2),
+      fontSize: theme.typography.caption.fontSize,
+      animation: animate ? `${bounceIn} 300ms ease-out` : "none"
     }
-  };
+  })
+);
+function usePrevious(value) {
+  const ref = useRef2(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
 }
-function setInactiveRecursively(model) {
-  const editSettings = model.get("editSettings");
-  if (editSettings) {
-    editSettings.set("inactive", true);
+var bounceIn = keyframes`
+	0% { transform: scale(0) translate(50%, 50%); opacity: 0; }
+	70% { transform: scale(1.1) translate(50%, -50%); opacity: 1; }
+	100% { transform: scale(1) translate(50%, -50%); opacity: 1; }
+`;
+var slideUp = keyframes`
+	from { transform: translateY(100%); opacity: 0; }
+	to { transform: translateY(0); opacity: 1; }
+`;
+
+// src/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] = 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(Box7, null, /* @__PURE__ */ React10.createElement(
+    Stack6,
+    {
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
+    },
+    /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Tooltip3, { title: __13("Back", "elementor") }, /* @__PURE__ */ React10.createElement(IconButton4, { size: "tiny", onClick: onBack, "aria-label": __13("Back", "elementor") }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(Typography6, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
+    /* @__PURE__ */ React10.createElement(
+      ComponentsBadge,
+      {
+        overridablePropsCount,
+        ref: anchorRef,
+        onClick: handleOpenPropertiesPanel
+      }
+    )
+  ), /* @__PURE__ */ React10.createElement(Divider2, null), /* @__PURE__ */ React10.createElement(
+    ComponentIntroduction,
+    {
+      anchorRef,
+      shouldShowIntroduction,
+      onClose: handleCloseIntroduction
+    }
+  ));
+};
+function getComponentName() {
+  const state = getState11();
+  const path = state[SLICE_NAME].path;
+  const { instanceTitle } = path.at(-1) ?? {};
+  if (instanceTitle) {
+    return instanceTitle;
   }
+  const documentsManager = getV1DocumentsManager3();
+  const currentDocument = documentsManager.getCurrent();
+  return currentDocument?.container?.settings?.get("post_title") ?? "";
 }
-function isUserAdministrator() {
-  const legacyWindow = window;
-  return legacyWindow.elementor.config?.user?.is_administrator ?? false;
+
+// src/components/components-tab/components.tsx
+import * as React19 from "react";
+import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
+
+// src/hooks/use-components.ts
+import { __useSelector as useSelector4 } from "@elementor/store";
+var useComponents = () => {
+  const components = useSelector4(selectComponents);
+  const isLoading = useSelector4(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(getState11(), componentUid);
-        if (component?.name) {
-          return component.name;
-        }
+
+// src/components/components-tab/component-search.tsx
+import * as React12 from "react";
+import { SearchIcon } from "@elementor/icons";
+import { Box as Box8, InputAdornment, Stack as Stack7, TextField as TextField2 } from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
+
+// src/components/components-tab/search-provider.tsx
+import * as React11 from "react";
+import { createContext, useContext } from "react";
+import { useSearchState } from "@elementor/utils";
+var SearchContext = createContext(void 0);
+var SearchProvider = ({
+  children,
+  localStorageKey
+}) => {
+  const { debouncedValue, handleChange, inputValue } = useSearchState({ localStorageKey });
+  const clearSearch = () => {
+    handleChange("");
+  };
+  return /* @__PURE__ */ React11.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
+};
+var useSearch = () => {
+  const context = 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(Stack7, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React12.createElement(Box8, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React12.createElement(
+    TextField2,
+    {
+      role: "search",
+      fullWidth: true,
+      size: "tiny",
+      value: inputValue,
+      placeholder: __14("Search", "elementor"),
+      onChange: (e) => handleChange(e.target.value),
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React12.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(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
+import * as React17 from "react";
+import { useState as useState7 } from "react";
+import { getAngieSdk } from "@elementor/editor-mcp";
+import { AIIcon, ComponentsIcon as ComponentsIcon2 } from "@elementor/icons";
+import { Box as Box11, Button as Button4, Divider as Divider3, Link as Link3, List as List3, Stack as Stack10, Typography as Typography9 } from "@elementor/ui";
+import { __ as __20 } from "@wordpress/i18n";
+
+// src/hooks/use-components-permissions.ts
+import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
+var useComponentsPermissions = () => {
+  const { isAdmin } = useCurrentUserCapabilities();
+  return {
+    canCreate: isAdmin,
+    canEdit: isAdmin,
+    canDelete: isAdmin,
+    canRename: isAdmin
+  };
+};
 
 // src/store/actions/rename-component.ts
+import { getV1DocumentsManager as getV1DocumentsManager4, setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
+import { getAllDescendants } from "@elementor/editor-elements";
+import { __dispatch as dispatch8 } from "@elementor/store";
 var TITLE_EXTERNAL_CHANGE_COMMAND = "title_external_change";
 var renameComponent = (componentUid, newName) => {
   dispatch8(slice.actions.rename({ componentUid, name: newName }));
@@ -2222,11 +2319,6 @@ var archiveComponent = (componentId, componentName) => {
 // src/store/actions/load-components-assets.ts
 import { isDocumentDirty, setDocumentModifiedStatus as setDocumentModifiedStatus5 } from "@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 }) => {
@@ -2331,13 +2423,13 @@ async function updateDocumentState(componentIds) {
 import { __getState as getState14 } from "@elementor/store";
 
 // src/components/create-component-form/utils/component-form-schema.ts
-import { z } from "@elementor/schema";
+import { z as z5 } from "@elementor/schema";
 import { __ as __17 } from "@wordpress/i18n";
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
-var baseComponentSchema = z.string().trim().max(MAX_NAME_LENGTH, __17("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var baseComponentSchema = z5.string().trim().max(MAX_NAME_LENGTH, __17("Component name is too long. Please keep it under 50 characters.", "elementor"));
 var createBaseComponentSchema = (existingNames) => {
-  return z.object({
+  return z5.object({
     componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
       message: __17("Component name already exists", "elementor")
     })
@@ -3567,60 +3659,6 @@ import { __ as __27 } from "@wordpress/i18n";
 // src/hooks/use-component-instance-settings.ts
 import { useElement } from "@elementor/editor-editing-panel";
 import { useElementSetting } from "@elementor/editor-elements";
-
-// src/prop-types/component-instance-prop-type.ts
-import { createPropUtils as createPropUtils4, numberPropTypeUtil } from "@elementor/editor-props";
-import { z as z5 } from "@elementor/schema";
-
-// src/prop-types/component-instance-overrides-prop-type.ts
-import { createPropUtils as createPropUtils3 } from "@elementor/editor-props";
-import { z as z4 } from "@elementor/schema";
-
-// src/prop-types/component-instance-override-prop-type.ts
-import { createPropUtils } from "@elementor/editor-props";
-import { z as z2 } from "@elementor/schema";
-var componentInstanceOverridePropTypeUtil = createPropUtils(
-  "override",
-  z2.object({
-    override_key: z2.string(),
-    override_value: z2.unknown(),
-    schema_source: z2.object({
-      type: z2.literal("component"),
-      id: z2.number()
-    })
-  })
-);
-
-// src/prop-types/component-overridable-prop-type.ts
-import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
-import { z as z3 } from "@elementor/schema";
-var componentOverridablePropTypeUtil = createPropUtils2(
-  "overridable",
-  z3.object({
-    override_key: z3.string(),
-    origin_value: z3.object({
-      $$type: z3.string(),
-      value: z3.unknown()
-    }).nullable()
-  })
-);
-
-// src/prop-types/component-instance-overrides-prop-type.ts
-var componentInstanceOverridesPropTypeUtil = createPropUtils3(
-  "overrides",
-  z4.array(z4.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([])
-);
-
-// src/prop-types/component-instance-prop-type.ts
-var componentInstancePropTypeUtil = createPropUtils4(
-  "component-instance",
-  z5.object({
-    component_id: numberPropTypeUtil.schema,
-    overrides: z5.optional(componentInstanceOverridesPropTypeUtil.schema)
-  })
-);
-
-// src/hooks/use-component-instance-settings.ts
 function useComponentInstanceSettings() {
   const { element } = useElement();
   const settings = useElementSetting(element.id, "component_instance");
@@ -4068,10 +4106,10 @@ function InstanceEditingPanel() {
 import * as React30 from "react";
 import {
   ControlReplacementsProvider as ControlReplacementsProvider2,
-  createControl,
   PropKeyProvider as PropKeyProvider2,
   PropProvider as PropProvider2,
-  useBoundProp as useBoundProp2
+  useBoundProp as useBoundProp2,
+  useControlReplacement
 } from "@elementor/editor-controls";
 import { createTopLevelObjectType as createTopLevelObjectType2, getControlReplacements as getControlReplacements2, useElement as useElement3 } from "@elementor/editor-editing-panel";
 function OverridablePropControl({
@@ -4079,7 +4117,6 @@ function OverridablePropControl({
   ...props
 }) {
   const { elementType } = useElement3();
-  const Control = createControl(OriginalControl2);
   const { value, bind, setValue, placeholder, ...propContext } = useBoundProp2(componentOverridablePropTypeUtil);
   const componentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(componentId);
@@ -4128,9 +4165,20 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React30.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React30.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(Control, { ...props })))
+    /* @__PURE__ */ React30.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React30.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
   ));
 }
+function ControlWithReplacements({
+  OriginalControl: OriginalControl2,
+  props
+}) {
+  const { ControlToRender, isReplaced } = 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
 import * as React32 from "react";