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

package/dist/index.mjs

@@ -13,10 +13,11 @@ import {
   registerFieldIndicator
 } from "@elementor/editor-editing-panel";
 import { injectTab } from "@elementor/editor-elements-panel";
+import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer, RenderContext } from "@elementor/editor-canvas";
@@ -36,10 +37,10 @@ import { __createAsyncThunk as createAsyncThunk } from "@elementor/store";
 import { ajax } from "@elementor/editor-v1-adapters";
 import { httpService } from "@elementor/http-client";
 var BASE_URL = "elementor/v1/components";
-var getParams = (id) => ({
+var getParams = (id2) => ({
   action: "get_document_config",
-  unique_id: `document-config-${id}`,
-  data: { id }
+  unique_id: `document-config-${id2}`,
+  data: { id: id2 }
 });
 var apiClient = {
   get: () => httpService().get(`${BASE_URL}`).then((res) => res.data.data),
@@ -48,8 +49,8 @@ var apiClient = {
     ids,
     status
   }),
-  getComponentConfig: (id) => ajax.load(getParams(id)),
-  invalidateComponentConfigCache: (id) => ajax.invalidateCache(getParams(id)),
+  getComponentConfig: (id2) => ajax.load(getParams(id2)),
+  invalidateComponentConfigCache: (id2) => ajax.invalidateCache(getParams(id2)),
   getComponentLockStatus: async (componentId) => await httpService().get(`${BASE_URL}/lock-status`, {
     params: {
       componentId
@@ -232,17 +233,17 @@ var selectArchivedComponents = createSelector(
 
 // src/utils/component-document-data.ts
 import { getV1DocumentsManager } from "@elementor/editor-documents";
-var getComponentDocumentData = async (id) => {
+var getComponentDocumentData = async (id2) => {
   const documentManager = getV1DocumentsManager();
   try {
-    return await documentManager.request(id);
+    return await documentManager.request(id2);
   } catch {
     return null;
   }
 };
-var invalidateComponentDocumentData = (id) => {
+var invalidateComponentDocumentData = (id2) => {
   const documentManager = getV1DocumentsManager();
-  documentManager.invalidateCache(id);
+  documentManager.invalidateCache(id2);
 };
 
 // src/component-instance-transformer.ts
@@ -251,11 +252,11 @@ var componentInstanceContext = new RenderContext("component-instance", {
 });
 var componentInstanceTransformer = createTransformer(
   async ({
-    component_id: id,
+    component_id: id2,
     overrides: overridesValue
   }) => {
     const unpublishedComponents = selectUnpublishedComponents(getState());
-    const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id);
+    const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id2);
     const overrides = overridesValue?.reduce((acc, override) => ({ ...acc, ...override }), {});
     if (unpublishedComponent) {
       return {
@@ -263,10 +264,10 @@ var componentInstanceTransformer = createTransformer(
         overrides
       };
     }
-    if (typeof id !== "number") {
-      throw new Error(`Component ID "${id}" not valid.`);
+    if (typeof id2 !== "number") {
+      throw new Error(`Component ID "${id2}" not valid.`);
     }
-    const data = await getComponentDocumentData(id);
+    const data = await getComponentDocumentData(id2);
     return {
       elements: data?.elements ?? [],
       overrides
@@ -316,11 +317,12 @@ var componentOverrideTransformer = createTransformer3((override) => {
 });
 
 // src/components/component-panel-header/component-panel-header.tsx
-import * as React2 from "react";
+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 { Box as Box2, Divider, IconButton, Stack, Tooltip, Typography } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { Box as Box7, Divider as Divider2, IconButton as IconButton4, Stack as Stack6, Tooltip as Tooltip3, Typography as Typography6 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 
 // src/hooks/use-navigate-back.ts
 import { useCallback } from "react";
@@ -339,43 +341,1108 @@ function switchToComponent(componentId, componentInstanceId) {
   });
 }
 
-// src/hooks/use-navigate-back.ts
-function useNavigateBack() {
-  const path = useSelector2(selectPath);
-  const documentsManager = getV1DocumentsManager2();
-  return useCallback(() => {
-    const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
-    if (prevComponentId && prevComponentInstanceId) {
-      switchToComponent(prevComponentId, prevComponentInstanceId);
+// src/hooks/use-navigate-back.ts
+function useNavigateBack() {
+  const path = useSelector2(selectPath);
+  const documentsManager = getV1DocumentsManager2();
+  return useCallback(() => {
+    const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
+    if (prevComponentId && prevComponentInstanceId) {
+      switchToComponent(prevComponentId, prevComponentInstanceId);
+      return;
+    }
+    switchToComponent(documentsManager.getInitialId());
+  }, [path, documentsManager]);
+}
+
+// src/components/component-properties-panel/component-properties-panel.tsx
+import * as React7 from "react";
+import { ElementProvider, usePanelActions as useEditingPanelActions } from "@elementor/editor-editing-panel";
+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 Box4, ErrorBoundary } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
+
+// src/components/component-properties-panel/component-properties-panel-content.tsx
+import * as React6 from "react";
+import { useMemo, useState as useState3 } from "react";
+import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
+import { PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
+import { ComponentPropListIcon as ComponentPropListIcon2, FolderPlusIcon, XIcon as XIcon2 } from "@elementor/icons";
+import { Divider, IconButton as IconButton3, List as List2, Stack as Stack4, Tooltip as Tooltip2 } from "@elementor/ui";
+import { generateUniqueId as generateUniqueId2 } from "@elementor/utils";
+import { __ as __7 } from "@wordpress/i18n";
+
+// src/store/actions/add-overridable-group.ts
+import { __dispatch as dispatch, __getState as getState2 } from "@elementor/store";
+function addOverridableGroup({
+  componentId,
+  groupId,
+  label
+}) {
+  const overridableProps = selectOverridableProps(getState2(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const newGroup = {
+    id: groupId,
+    label,
+    props: []
+  };
+  dispatch(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: {
+          ...overridableProps.groups,
+          items: {
+            ...overridableProps.groups.items,
+            [groupId]: newGroup
+          },
+          order: [groupId, ...overridableProps.groups.order]
+        }
+      }
+    })
+  );
+  return newGroup;
+}
+
+// src/store/actions/delete-overridable-group.ts
+import { __dispatch as dispatch2, __getState as getState3 } from "@elementor/store";
+
+// src/store/utils/groups-transformers.ts
+import { generateUniqueId } from "@elementor/utils";
+import { __ } from "@wordpress/i18n";
+function removePropFromAllGroups(groups, propKey) {
+  return {
+    ...groups,
+    items: Object.fromEntries(
+      Object.entries(groups.items).map(([groupId, group]) => [
+        groupId,
+        {
+          ...group,
+          props: group.props.filter((p) => p !== propKey)
+        }
+      ])
+    )
+  };
+}
+function addPropToGroup(groups, groupId, propKey) {
+  const group = groups.items[groupId];
+  if (!group) {
+    return groups;
+  }
+  if (group.props.includes(propKey)) {
+    return groups;
+  }
+  return {
+    ...groups,
+    items: {
+      ...groups.items,
+      [groupId]: {
+        ...group,
+        props: [...group.props, propKey]
+      }
+    }
+  };
+}
+function movePropBetweenGroups(groups, propKey, fromGroupId, toGroupId) {
+  if (fromGroupId === toGroupId) {
+    return groups;
+  }
+  const withoutProp = removePropFromGroup(groups, fromGroupId, propKey);
+  return addPropToGroup(withoutProp, toGroupId, propKey);
+}
+function removePropFromGroup(groups, groupId, propKey) {
+  const group = groups.items[groupId];
+  if (!group) {
+    return groups;
+  }
+  return {
+    ...groups,
+    items: {
+      ...groups.items,
+      [groupId]: {
+        ...group,
+        props: group.props.filter((p) => p !== propKey)
+      }
+    }
+  };
+}
+function resolveOrCreateGroup(groups, requestedGroupId) {
+  if (requestedGroupId && groups.items[requestedGroupId]) {
+    return { groups, groupId: requestedGroupId };
+  }
+  if (!requestedGroupId && groups.order.length > 0) {
+    return { groups, groupId: groups.order[0] };
+  }
+  return createGroup(groups, requestedGroupId);
+}
+function createGroup(groups, groupId, label) {
+  const newGroupId = groupId || generateUniqueId("group");
+  const newLabel = label || __("Default", "elementor");
+  return {
+    groups: {
+      ...groups,
+      items: {
+        ...groups.items,
+        [newGroupId]: {
+          id: newGroupId,
+          label: newLabel,
+          props: []
+        }
+      },
+      order: [...groups.order, newGroupId]
+    },
+    groupId: newGroupId
+  };
+}
+function removePropsFromState(overridableProps, propsToRemove) {
+  const overrideKeysToRemove = propsToRemove.map((prop) => prop.overrideKey);
+  const remainingProps = Object.fromEntries(
+    Object.entries(overridableProps.props).filter(([, prop]) => !propsToRemove.includes(prop))
+  );
+  const updatedGroupItems = Object.fromEntries(
+    Object.entries(overridableProps.groups.items).map(
+      ([groupId, group]) => [
+        groupId,
+        {
+          ...group,
+          props: group.props.filter((prop) => !overrideKeysToRemove.includes(prop))
+        }
+      ]
+    )
+  );
+  return {
+    props: remainingProps,
+    groups: {
+      items: updatedGroupItems,
+      order: overridableProps.groups.order.filter((groupId) => !overrideKeysToRemove.includes(groupId))
+    }
+  };
+}
+function ensureGroupInOrder(groups, groupId) {
+  if (groups.order.includes(groupId)) {
+    return groups;
+  }
+  return {
+    ...groups,
+    order: [...groups.order, groupId]
+  };
+}
+function deleteGroup(groups, groupId) {
+  const { [groupId]: removed, ...remainingItems } = groups.items;
+  return {
+    items: remainingItems,
+    order: groups.order.filter((id2) => id2 !== groupId)
+  };
+}
+function renameGroup(groups, groupId, newLabel) {
+  const group = groups.items[groupId];
+  if (!group) {
+    return groups;
+  }
+  return {
+    ...groups,
+    items: {
+      ...groups.items,
+      [groupId]: {
+        ...group,
+        label: newLabel
+      }
+    }
+  };
+}
+
+// src/store/actions/delete-overridable-group.ts
+function deleteOverridableGroup({ componentId, groupId }) {
+  const overridableProps = selectOverridableProps(getState3(), componentId);
+  if (!overridableProps) {
+    return false;
+  }
+  const group = overridableProps.groups.items[groupId];
+  if (!group || group.props.length > 0) {
+    return false;
+  }
+  const updatedGroups = deleteGroup(overridableProps.groups, groupId);
+  dispatch2(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: updatedGroups
+      }
+    })
+  );
+  return true;
+}
+
+// src/store/actions/delete-overridable-prop.ts
+import { getContainer, updateElementSettings } from "@elementor/editor-elements";
+import { __dispatch as dispatch3, __getState as getState4 } from "@elementor/store";
+function deleteOverridableProp({ componentId, propKey }) {
+  const overridableProps = selectOverridableProps(getState4(), 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
+      }
+    })
+  );
+}
+function revertElementSetting(elementId, settingKey, originValue) {
+  const container = getContainer(elementId);
+  if (!container) {
+    return;
+  }
+  updateElementSettings({
+    id: elementId,
+    props: { [settingKey]: originValue ?? null },
+    withHistory: false
+  });
+}
+
+// src/store/actions/reorder-group-props.ts
+import { __dispatch as dispatch4, __getState as getState5 } from "@elementor/store";
+function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
+  const overridableProps = selectOverridableProps(getState5(), 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/store/actions/reorder-overridable-groups.ts
+import { __dispatch as dispatch5, __getState as getState6 } from "@elementor/store";
+function reorderOverridableGroups({ componentId, newOrder }) {
+  const overridableProps = selectOverridableProps(getState6(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  dispatch5(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        groups: {
+          ...overridableProps.groups,
+          order: newOrder
+        }
+      }
+    })
+  );
+}
+
+// src/store/actions/update-overridable-prop.ts
+import { __dispatch as dispatch6, __getState as getState7 } from "@elementor/store";
+function updateOverridableProp({
+  componentId,
+  propKey,
+  label,
+  groupId
+}) {
+  const overridableProps = selectOverridableProps(getState7(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const prop = overridableProps.props[propKey];
+  if (!prop) {
+    return;
+  }
+  const oldGroupId = prop.groupId;
+  const newGroupId = groupId ?? oldGroupId;
+  const updatedProp = {
+    ...prop,
+    label,
+    groupId: newGroupId
+  };
+  const updatedGroups = movePropBetweenGroups(overridableProps.groups, propKey, oldGroupId, newGroupId);
+  dispatch6(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        ...overridableProps,
+        props: {
+          ...overridableProps.props,
+          [propKey]: updatedProp
+        },
+        groups: updatedGroups
+      }
+    })
+  );
+  return updatedProp;
+}
+
+// src/components/component-panel-header/use-overridable-props.ts
+import { __useSelector as useSelector3 } from "@elementor/store";
+function useOverridableProps(componentId) {
+  return useSelector3((state) => {
+    if (!componentId) {
+      return void 0;
+    }
+    return selectOverridableProps(state, componentId);
+  });
+}
+
+// src/components/component-properties-panel/properties-empty-state.tsx
+import * as React from "react";
+import { ComponentPropListIcon } from "@elementor/icons";
+import { Link, Stack, Typography } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+var LEARN_MORE_URL = "https://go.elementor.com/tbd/";
+function PropertiesEmptyState() {
+  return /* @__PURE__ */ React.createElement(
+    Stack,
+    {
+      alignItems: "center",
+      justifyContent: "flex-start",
+      height: "100%",
+      color: "text.secondary",
+      sx: { px: 2.5, pt: 10, pb: 5.5 },
+      gap: 1
+    },
+    /* @__PURE__ */ React.createElement(ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React.createElement(Typography, { align: "center", variant: "subtitle2" }, __2("Add your first property", "elementor")),
+    /* @__PURE__ */ React.createElement(Typography, { align: "center", variant: "caption" }, __2("Make instances flexible while keeping design synced.", "elementor")),
+    /* @__PURE__ */ React.createElement(Typography, { align: "center", variant: "caption" }, __2("Select any element, then click + next to a setting to expose it.", "elementor")),
+    /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        variant: "caption",
+        color: "secondary",
+        href: LEARN_MORE_URL,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: { textDecorationLine: "underline" }
+      },
+      __2("Learn more", "elementor")
+    )
+  );
+}
+
+// src/components/component-properties-panel/properties-group.tsx
+import * as React5 from "react";
+import { EditableField, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
+import { DotsVerticalIcon } from "@elementor/icons";
+import {
+  bindMenu,
+  bindTrigger as bindTrigger2,
+  Box as Box3,
+  IconButton as IconButton2,
+  List,
+  Menu,
+  Stack as Stack3,
+  Tooltip,
+  Typography as Typography4,
+  usePopupState as usePopupState2
+} from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+
+// src/components/component-properties-panel/property-item.tsx
+import * as React4 from "react";
+import { getWidgetsCache } from "@elementor/editor-elements";
+import { XIcon } from "@elementor/icons";
+import { bindPopover, bindTrigger, Box as Box2, IconButton, Popover, Typography as Typography3, usePopupState } from "@elementor/ui";
+
+// src/components/overridable-props/overridable-prop-form.tsx
+import * as React2 from "react";
+import { useState } from "react";
+import { Form, MenuListItem } from "@elementor/editor-ui";
+import { Button, FormLabel, Grid, Select, Stack as Stack2, TextField, Typography as Typography2 } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+var SIZE = "tiny";
+var DEFAULT_GROUP = { value: null, label: __3("Default", "elementor") };
+function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
+  const [propLabel, setPropLabel] = useState(currentValue?.label ?? null);
+  const [group, setGroup] = useState(currentValue?.groupId ?? groups?.[0]?.value ?? null);
+  const name = __3("Name", "elementor");
+  const groupName = __3("Group Name", "elementor");
+  const isCreate = currentValue === void 0;
+  const title = isCreate ? __3("Create new property", "elementor") : __3("Update property", "elementor");
+  const ctaLabel = isCreate ? __3("Create", "elementor") : __3("Update", "elementor");
+  return /* @__PURE__ */ React2.createElement(Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React2.createElement(Stack2, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React2.createElement(
+    Stack2,
+    {
+      direction: "row",
+      alignItems: "center",
+      py: 1,
+      px: 1.5,
+      sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
+    },
+    /* @__PURE__ */ React2.createElement(Typography2, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+    TextField,
+    {
+      name,
+      size: SIZE,
+      fullWidth: true,
+      placeholder: __3("Enter value", "elementor"),
+      value: propLabel ?? "",
+      onChange: (e) => setPropLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.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;
+        }
+        return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
+      }
+    },
+    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React2.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React2.createElement(Stack2, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React2.createElement(Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+}
+
+// src/components/component-properties-panel/sortable.tsx
+import * as React3 from "react";
+import { GripVerticalIcon } from "@elementor/icons";
+import {
+  Box,
+  styled,
+  UnstableSortableItem,
+  UnstableSortableProvider
+} from "@elementor/ui";
+var SortableProvider = (props) => /* @__PURE__ */ React3.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React3.createElement(
+  StyledSortableTrigger,
+  {
+    ...props,
+    role: "button",
+    className: `sortable-trigger ${triggerClassName ?? ""}`.trim(),
+    "aria-label": "sort"
+  },
+  /* @__PURE__ */ React3.createElement(GripVerticalIcon, { fontSize: "tiny" })
+);
+var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React3.createElement(
+  UnstableSortableItem,
+  {
+    id: id2,
+    render: ({
+      itemProps,
+      isDragged,
+      triggerProps,
+      itemStyle,
+      triggerStyle,
+      dropIndicationStyle,
+      showDropIndication,
+      isDragOverlay,
+      isDragPlaceholder
+    }) => /* @__PURE__ */ React3.createElement(
+      Box,
+      {
+        ...itemProps,
+        style: itemStyle,
+        component: "div",
+        role: "listitem",
+        sx: {
+          backgroundColor: isDragOverlay ? "background.paper" : void 0
+        }
+      },
+      children({
+        isDragged,
+        isDragPlaceholder,
+        triggerProps,
+        triggerStyle
+      }),
+      showDropIndication && /* @__PURE__ */ React3.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+    )
+  }
+);
+var StyledSortableTrigger = styled("div")(({ theme }) => ({
+  position: "absolute",
+  left: 0,
+  top: "50%",
+  transform: `translate( -${theme.spacing(1.5)}, -50% )`,
+  color: theme.palette.action.active,
+  cursor: "grab"
+}));
+var SortableItemIndicator = styled(Box)`
+	width: 100%;
+	height: 1px;
+	background-color: ${({ theme }) => theme.palette.text.primary};
+`;
+
+// src/components/component-properties-panel/property-item.tsx
+function PropertyItem({
+  prop,
+  sortableTriggerProps,
+  isDragPlaceholder,
+  groups,
+  onDelete,
+  onUpdate
+}) {
+  const popoverState = usePopupState({
+    variant: "popover"
+  });
+  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__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    Box2,
+    {
+      ...bindTrigger(popoverState),
+      sx: {
+        position: "relative",
+        pl: 0.5,
+        pr: 1,
+        py: 0.25,
+        minHeight: 28,
+        borderRadius: 1,
+        border: "1px solid",
+        borderColor: "divider",
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        opacity: isDragPlaceholder ? 0.5 : 1,
+        cursor: "pointer",
+        "&:hover": {
+          backgroundColor: "action.hover"
+        },
+        "&:hover .sortable-trigger": {
+          visibility: "visible"
+        },
+        "& .sortable-trigger": {
+          visibility: "hidden"
+        },
+        "&:hover .delete-button": {
+          visibility: "visible"
+        },
+        "& .delete-button": {
+          visibility: "hidden"
+        }
+      }
+    },
+    /* @__PURE__ */ React4.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React4.createElement(
+      Box2,
+      {
+        sx: { display: "flex", alignItems: "center", color: "text.primary", fontSize: 12, padding: 0.25 }
+      },
+      /* @__PURE__ */ React4.createElement("i", { className: icon })
+    ),
+    /* @__PURE__ */ React4.createElement(Typography3, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
+    /* @__PURE__ */ React4.createElement(IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React4.createElement(XIcon, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React4.createElement(
+    Popover,
+    {
+      ...popoverProps,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      PaperProps: { sx: { width: popoverState.anchorEl?.getBoundingClientRect().width } }
+    },
+    /* @__PURE__ */ React4.createElement(
+      OverridablePropForm,
+      {
+        onSubmit: handleSubmit,
+        currentValue: prop,
+        groups,
+        sx: { width: "100%" }
+      }
+    )
+  ));
+}
+function getElementIcon(prop) {
+  const elType = prop.elType === "widget" ? prop.widgetType : prop.elType;
+  const widgetsCache = getWidgetsCache();
+  if (!widgetsCache) {
+    return "eicon-apps";
+  }
+  const widgetConfig = widgetsCache[elType];
+  return widgetConfig?.icon || "eicon-apps";
+}
+
+// src/components/component-properties-panel/properties-group.tsx
+function PropertiesGroup({
+  group,
+  props,
+  allGroups,
+  sortableTriggerProps,
+  isDragPlaceholder,
+  onPropsReorder,
+  onPropertyDelete,
+  onPropertyUpdate,
+  onGroupDelete,
+  editableLabelProps
+}) {
+  const groupProps = group.props.map((propId) => props[propId]).filter((prop) => Boolean(prop));
+  const popupState = 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__ */ React5.createElement(
+    Box3,
+    {
+      sx: {
+        opacity: isDragPlaceholder ? 0.5 : 1
+      }
+    },
+    /* @__PURE__ */ React5.createElement(Stack3, { gap: 1 }, /* @__PURE__ */ React5.createElement(
+      Box3,
+      {
+        className: "group-header",
+        sx: {
+          position: "relative",
+          "&:hover .group-sortable-trigger": {
+            visibility: "visible"
+          },
+          "& .group-sortable-trigger": {
+            visibility: "hidden"
+          },
+          "&:hover .group-menu": {
+            visibility: "visible"
+          },
+          "& .group-menu": {
+            visibility: "hidden"
+          }
+        }
+      },
+      /* @__PURE__ */ React5.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
+      /* @__PURE__ */ React5.createElement(Stack3, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React5.createElement(
+        Box3,
+        {
+          sx: {
+            flex: 1,
+            height: 28,
+            display: "flex",
+            alignItems: "center",
+            border: 2,
+            borderColor: "text.secondary",
+            borderRadius: 1,
+            pl: 0.5
+          }
+        },
+        /* @__PURE__ */ React5.createElement(
+          EditableField,
+          {
+            ref: editableRef,
+            as: Typography4,
+            variant: "caption",
+            error: error ?? void 0,
+            sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 },
+            ...getEditableProps()
+          }
+        )
+      ) : /* @__PURE__ */ React5.createElement(
+        Typography4,
+        {
+          variant: "caption",
+          sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
+        },
+        group.label
+      ), /* @__PURE__ */ React5.createElement(
+        IconButton2,
+        {
+          className: "group-menu",
+          size: "tiny",
+          sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
+          "aria-label": __4("Group actions", "elementor"),
+          ...bindTrigger2(popupState)
+        },
+        /* @__PURE__ */ React5.createElement(DotsVerticalIcon, { fontSize: "tiny" })
+      ))
+    ), /* @__PURE__ */ React5.createElement(List, { sx: { p: 0, display: "flex", flexDirection: "column", gap: 1 } }, /* @__PURE__ */ React5.createElement(SortableProvider, { value: group.props, onChange: onPropsReorder }, groupProps.map((prop) => /* @__PURE__ */ React5.createElement(SortableItem, { key: prop.overrideKey, id: prop.overrideKey }, ({ triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder }) => /* @__PURE__ */ React5.createElement(
+      PropertyItem,
+      {
+        prop,
+        sortableTriggerProps: { ...triggerProps, style: triggerStyle },
+        isDragPlaceholder: isItemDragPlaceholder,
+        groups: allGroups,
+        onDelete: onPropertyDelete,
+        onUpdate: (data) => onPropertyUpdate(prop.overrideKey, data)
+      }
+    )))))),
+    /* @__PURE__ */ React5.createElement(
+      Menu,
+      {
+        ...bindMenu(popupState),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" }
+      },
+      /* @__PURE__ */ React5.createElement(MenuListItem2, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", sx: { color: "text.primary" } }, __4("Rename", "elementor"))),
+      /* @__PURE__ */ React5.createElement(
+        Tooltip,
+        {
+          title: hasProperties ? __4("To delete the group, first remove all the properties", "elementor") : "",
+          placement: "right"
+        },
+        /* @__PURE__ */ React5.createElement("span", null, /* @__PURE__ */ React5.createElement(MenuListItem2, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React5.createElement(
+          Typography4,
+          {
+            variant: "caption",
+            sx: { color: hasProperties ? "text.disabled" : "error.light" }
+          },
+          __4("Delete", "elementor")
+        )))
+      )
+    )
+  );
+}
+
+// src/components/component-properties-panel/use-current-editable-item.ts
+import { useState as useState2 } from "react";
+import { setDocumentModifiedStatus } from "@elementor/editor-documents";
+import { useEditable } from "@elementor/editor-ui";
+import { __ as __6 } from "@wordpress/i18n";
+
+// src/store/actions/rename-overridable-group.ts
+import { __dispatch as dispatch7, __getState as getState8 } from "@elementor/store";
+function renameOverridableGroup({ componentId, groupId, label }) {
+  const overridableProps = selectOverridableProps(getState8(), 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/utils/validate-group-label.ts
+import { __ as __5 } from "@wordpress/i18n";
+var ERROR_MESSAGES = {
+  EMPTY_NAME: __5("Group name is required", "elementor"),
+  DUPLICATE_NAME: __5("Group name already exists", "elementor")
+};
+function validateGroupLabel(label, existingGroups) {
+  const trimmedLabel = label.trim();
+  if (!trimmedLabel) {
+    return ERROR_MESSAGES.EMPTY_NAME;
+  }
+  const isDuplicate = Object.values(existingGroups).some((group) => group.label === trimmedLabel);
+  if (isDuplicate) {
+    return ERROR_MESSAGES.DUPLICATE_NAME;
+  }
+  return "";
+}
+
+// src/components/component-properties-panel/use-current-editable-item.ts
+function useCurrentEditableItem() {
+  const [editingGroupId, setEditingGroupId] = useState2(null);
+  const currentComponentId = useCurrentComponentId();
+  const overridableProps = useOverridableProps(currentComponentId);
+  const allGroupsRecord = overridableProps?.groups?.items ?? {};
+  const currentGroup = editingGroupId ? allGroupsRecord[editingGroupId] : null;
+  const validateLabel = (newLabel) => {
+    const otherGroups = Object.fromEntries(
+      Object.entries(allGroupsRecord).filter(([id2]) => id2 !== editingGroupId)
+    );
+    return validateGroupLabel(newLabel, otherGroups) || null;
+  };
+  const handleSubmit = (newLabel) => {
+    if (!editingGroupId || !currentComponentId) {
+      throw new Error(__6("Group ID or component ID is missing", "elementor"));
+    }
+    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 = useOverridableProps(currentComponentId);
+  const [isAddingGroup, setIsAddingGroup] = useState3(false);
+  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;
     }
-    switchToComponent(documentsManager.getInitialId());
-  }, [path, documentsManager]);
+    const newGroupId = generateUniqueId2("group");
+    const newLabel = generateUniqueLabel(groups);
+    addOverridableGroup({ componentId: currentComponentId, groupId: newGroupId, label: newLabel });
+    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 });
+    setDocumentModifiedStatus2(true);
+  };
+  const handlePropertyUpdate = (propKey, data) => {
+    updateOverridableProp({
+      componentId: currentComponentId,
+      propKey,
+      label: data.label,
+      groupId: data.group
+    });
+    setDocumentModifiedStatus2(true);
+  };
+  const handleGroupDelete = (groupId) => {
+    deleteOverridableGroup({ componentId: currentComponentId, groupId });
+    setDocumentModifiedStatus2(true);
+  };
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React6.createElement(Stack4, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React6.createElement(ComponentPropListIcon2, { fontSize: "tiny" }), /* @__PURE__ */ React6.createElement(PanelHeaderTitle, { variant: "subtitle2" }, __7("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React6.createElement(Tooltip2, { title: __7("Add new group", "elementor") }, /* @__PURE__ */ React6.createElement(
+    IconButton3,
+    {
+      size: "tiny",
+      "aria-label": __7("Add new group", "elementor"),
+      onClick: handleAddGroupClick
+    },
+    /* @__PURE__ */ React6.createElement(FolderPlusIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React6.createElement(Tooltip2, { title: __7("Close panel", "elementor") }, /* @__PURE__ */ React6.createElement(IconButton3, { size: "tiny", "aria-label": __7("Close panel", "elementor"), onClick: onClose }, /* @__PURE__ */ React6.createElement(XIcon2, { fontSize: "tiny" })))), /* @__PURE__ */ React6.createElement(Divider, null), /* @__PURE__ */ React6.createElement(PanelBody, null, showEmptyState ? /* @__PURE__ */ React6.createElement(PropertiesEmptyState, null) : /* @__PURE__ */ React6.createElement(List2, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React6.createElement(SortableProvider, { value: groupIds, onChange: handleGroupsReorder }, groups.map((group) => /* @__PURE__ */ React6.createElement(SortableItem, { key: group.id, id: group.id }, ({ triggerProps, triggerStyle, isDragPlaceholder }) => /* @__PURE__ */ React6.createElement(
+    PropertiesGroup,
+    {
+      group,
+      props: overridableProps.props,
+      allGroups: allGroupsForSelect,
+      allGroupsRecord: overridableProps.groups.items,
+      sortableTriggerProps: { ...triggerProps, style: triggerStyle },
+      isDragPlaceholder,
+      setIsAddingGroup,
+      onPropsReorder: (newOrder) => handlePropsReorder(group.id, newOrder),
+      onPropertyDelete: handlePropertyDelete,
+      onPropertyUpdate: handlePropertyUpdate,
+      editableLabelProps: groupLabelEditable,
+      onGroupDelete: handleGroupDelete
+    }
+  )))))));
+}
+
+// src/components/component-properties-panel/component-properties-panel.tsx
+var id = "component-properties-panel";
+var { panel, usePanelActions } = 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__ */ React7.createElement(ThemeProvider, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(
+    ComponentPropertiesPanelContent,
+    {
+      onClose: () => {
+        closePanel();
+        openEditingPanel();
+      }
+    }
+  )))));
 }
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, __8("Something went wrong", "elementor"))));
 
-// src/components/component-panel-header/component-badge.tsx
-import * as React from "react";
-import { useEffect, useRef } from "react";
-import { ComponentPropListIcon } from "@elementor/icons";
-import { Badge, Box, keyframes, styled, ToggleButton } from "@elementor/ui";
-import { __ } from "@wordpress/i18n";
-var ComponentsBadge = ({ overridesCount }) => {
-  const prevCount = usePrevious(overridesCount);
-  const isFirstOverride = prevCount === 0 && overridesCount === 1;
-  return /* @__PURE__ */ React.createElement(
-    StyledBadge,
+// src/components/components-tab/component-introduction.tsx
+import * as React8 from "react";
+import { PopoverContent } from "@elementor/editor-controls";
+import { PopoverHeader } from "@elementor/editor-ui";
+import { Box as Box5, Button as Button2, Image, Popover as Popover2, Stack as Stack5, Typography as Typography5 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
+var ComponentIntroduction = ({
+  anchorRef,
+  shouldShowIntroduction,
+  onClose
+}) => {
+  if (!anchorRef.current || !shouldShowIntroduction) {
+    return null;
+  }
+  return /* @__PURE__ */ React8.createElement(
+    Popover2,
     {
-      color: "primary",
-      key: overridesCount,
-      invisible: overridesCount === 0,
-      animate: isFirstOverride,
-      anchorOrigin: { vertical: "top", horizontal: "right" },
-      badgeContent: /* @__PURE__ */ React.createElement(Box, { sx: { animation: !isFirstOverride ? `${slideUp} 300ms ease-out` : "none" } }, overridesCount)
+      anchorEl: anchorRef.current,
+      open: shouldShowIntroduction,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: -30
+      },
+      onClose
     },
-    /* @__PURE__ */ React.createElement(ToggleButton, { value: "overrides", size: "tiny", "aria-label": __("View overrides", "elementor") }, /* @__PURE__ */ React.createElement(ComponentPropListIcon, { fontSize: "tiny" }))
+    /* @__PURE__ */ React8.createElement(Box5, { sx: { width: "296px" } }, /* @__PURE__ */ React8.createElement(PopoverHeader, { title: __9("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React8.createElement(
+      Image,
+      {
+        sx: { width: "296px", height: "160px" },
+        src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
+        alt: ""
+      }
+    ), /* @__PURE__ */ React8.createElement(PopoverContent, null, /* @__PURE__ */ React8.createElement(Stack5, { gap: 1, sx: { p: 2 } }, /* @__PURE__ */ React8.createElement(Typography5, { variant: "body2" }, __9("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React8.createElement(Typography5, { variant: "body2" }, __9(
+      "Click next to any setting you want users to customize - like text, images, or links.",
+      "elementor"
+    )), /* @__PURE__ */ React8.createElement(Typography5, { variant: "body2" }, __9(
+      "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
+      "elementor"
+    )), /* @__PURE__ */ React8.createElement(Stack5, { direction: "row", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React8.createElement(Button2, { size: "medium", variant: "contained", onClick: onClose }, __9("Got it", "elementor"))))))
   );
 };
-var StyledBadge = styled(Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
+
+// src/components/component-panel-header/component-badge.tsx
+import * as React9 from "react";
+import { useEffect, useRef } from "react";
+import { ComponentPropListIcon as ComponentPropListIcon3 } from "@elementor/icons";
+import { Badge, Box as Box6, keyframes, styled as styled2, ToggleButton } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
+var ComponentsBadge = React9.forwardRef(
+  ({ overridesCount, onClick }, ref) => {
+    const prevCount = usePrevious(overridesCount);
+    const isFirstOverride = prevCount === 0 && overridesCount === 1;
+    return /* @__PURE__ */ React9.createElement(
+      StyledBadge,
+      {
+        ref,
+        color: "primary",
+        key: overridesCount,
+        invisible: overridesCount === 0,
+        animate: isFirstOverride,
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        badgeContent: /* @__PURE__ */ React9.createElement(Box6, { sx: { animation: !isFirstOverride ? `${slideUp} 300ms ease-out` : "none" } }, overridesCount)
+      },
+      /* @__PURE__ */ React9.createElement(
+        ToggleButton,
+        {
+          value: "overrides",
+          size: "tiny",
+          onClick,
+          "aria-label": __10("View overrides", "elementor")
+        },
+        /* @__PURE__ */ React9.createElement(ComponentPropListIcon3, { fontSize: "tiny" })
+      )
+    );
+  }
+);
+var StyledBadge = styled2(Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
   ({ theme, animate }) => ({
     "& .MuiBadge-badge": {
       minWidth: theme.spacing(2),
@@ -404,38 +1471,43 @@ var slideUp = keyframes`
 	to { transform: translateY(0); opacity: 1; }
 `;
 
-// src/components/component-panel-header/use-overridable-props.ts
-import { __useSelector as useSelector3 } from "@elementor/store";
-function useOverridableProps(componentId) {
-  return useSelector3((state) => {
-    if (!componentId) {
-      return void 0;
-    }
-    return selectOverridableProps(state, componentId);
-  });
-}
-
 // src/components/component-panel-header/component-panel-header.tsx
+var MESSAGE_KEY = "components-properties-introduction";
 var ComponentPanelHeader = () => {
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(currentComponentId);
   const onBack = useNavigateBack();
   const componentName = getComponentName();
+  const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
+  const [shouldShowIntroduction, setShouldShowIntroduction] = React10.useState(!isMessageSuppressed);
+  const { open: openPropertiesPanel } = usePanelActions();
   const overridesCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
+  const anchorRef = React10.useRef(null);
   if (!currentComponentId) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(Box2, null, /* @__PURE__ */ React2.createElement(
-    Stack,
+  const handleCloseIntroduction = () => {
+    suppressMessage();
+    setShouldShowIntroduction(false);
+  };
+  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__ */ React2.createElement(Stack, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(Tooltip, { title: __2("Back", "elementor") }, /* @__PURE__ */ React2.createElement(IconButton, { size: "tiny", onClick: onBack, "aria-label": __2("Back", "elementor") }, /* @__PURE__ */ React2.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React2.createElement(Stack, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React2.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React2.createElement(Typography, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
-    /* @__PURE__ */ React2.createElement(ComponentsBadge, { overridesCount })
-  ), /* @__PURE__ */ React2.createElement(Divider, null));
+    /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Tooltip3, { title: __11("Back", "elementor") }, /* @__PURE__ */ React10.createElement(IconButton4, { size: "tiny", onClick: onBack, "aria-label": __11("Back", "elementor") }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(Typography6, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
+    /* @__PURE__ */ React10.createElement(ComponentsBadge, { overridesCount, ref: anchorRef, onClick: openPropertiesPanel })
+  ), /* @__PURE__ */ React10.createElement(Divider2, null), /* @__PURE__ */ React10.createElement(
+    ComponentIntroduction,
+    {
+      anchorRef,
+      shouldShowIntroduction,
+      onClose: handleCloseIntroduction
+    }
+  ));
 };
 function getComponentName() {
   const documentsManager = getV1DocumentsManager3();
@@ -444,17 +1516,17 @@ function getComponentName() {
 }
 
 // src/components/components-tab/components.tsx
-import * as React8 from "react";
-import { ThemeProvider } from "@elementor/editor-ui";
+import * as React16 from "react";
+import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 
 // src/components/components-tab/component-search.tsx
-import * as React4 from "react";
+import * as React12 from "react";
 import { SearchIcon } from "@elementor/icons";
-import { Box as Box3, InputAdornment, Stack as Stack2, TextField } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { Box as Box8, InputAdornment, Stack as Stack7, TextField as TextField2 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 
 // src/components/components-tab/search-provider.tsx
-import * as React3 from "react";
+import * as React11 from "react";
 import { createContext, useContext } from "react";
 import { useSearchState } from "@elementor/utils";
 var SearchContext = createContext(void 0);
@@ -466,7 +1538,7 @@ var SearchProvider = ({
   const clearSearch = () => {
     handleChange("");
   };
-  return /* @__PURE__ */ React3.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
+  return /* @__PURE__ */ React11.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
 };
 var useSearch = () => {
   const context = useContext(SearchContext);
@@ -479,27 +1551,27 @@ var useSearch = () => {
 // src/components/components-tab/component-search.tsx
 var ComponentSearch = () => {
   const { inputValue, handleChange } = useSearch();
-  return /* @__PURE__ */ React4.createElement(Stack2, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React4.createElement(Box3, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React4.createElement(
-    TextField,
+  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: __3("Search", "elementor"),
+      placeholder: __12("Search", "elementor"),
       onChange: (e) => handleChange(e.target.value),
       InputProps: {
-        startAdornment: /* @__PURE__ */ React4.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React4.createElement(SearchIcon, { fontSize: "tiny" }))
+        startAdornment: /* @__PURE__ */ React12.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(SearchIcon, { fontSize: "tiny" }))
       }
     }
   )));
 };
 
 // src/components/components-tab/components-list.tsx
-import * as React7 from "react";
+import * as React15 from "react";
 import { ComponentsIcon as ComponentsIcon2, EyeIcon } from "@elementor/icons";
-import { Box as Box6, Divider as Divider2, Icon, Link, List, Stack as Stack5, Typography as Typography3 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { Box as Box11, Divider as Divider3, Icon, Link as Link2, List as List3, Stack as Stack10, Typography as Typography8 } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
 
 // src/hooks/use-components.ts
 import { __useSelector as useSelector4 } from "@elementor/store";
@@ -510,51 +1582,51 @@ var useComponents = () => {
 };
 
 // src/components/components-tab/components-item.tsx
-import * as React5 from "react";
+import * as React13 from "react";
 import { endDragElementFromPanel, startDragElementFromPanel } from "@elementor/editor-canvas";
 import { dropElement } from "@elementor/editor-elements";
-import { EllipsisWithTooltip, MenuListItem } from "@elementor/editor-ui";
-import { ComponentsIcon, DotsVerticalIcon } from "@elementor/icons";
+import { EllipsisWithTooltip, MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
+import { ComponentsIcon, DotsVerticalIcon as DotsVerticalIcon2 } from "@elementor/icons";
 import {
-  bindMenu,
-  bindTrigger,
-  Box as Box4,
-  IconButton as IconButton2,
+  bindMenu as bindMenu2,
+  bindTrigger as bindTrigger3,
+  Box as Box9,
+  IconButton as IconButton5,
   ListItemButton,
   ListItemIcon,
-  Menu,
-  Stack as Stack3,
-  Typography as Typography2,
-  usePopupState
+  Menu as Menu2,
+  Stack as Stack8,
+  Typography as Typography7,
+  usePopupState as usePopupState3
 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 
 // src/store/actions/archive-component.ts
-import { setDocumentModifiedStatus } from "@elementor/editor-documents";
+import { setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
 import { __getStore as getStore } from "@elementor/store";
 var archiveComponent = (componentId) => {
   const store = getStore();
-  const dispatch9 = store?.dispatch;
-  if (!dispatch9) {
+  const dispatch16 = store?.dispatch;
+  if (!dispatch16) {
     return;
   }
-  dispatch9(slice.actions.archive(componentId));
-  setDocumentModifiedStatus(true);
+  dispatch16(slice.actions.archive(componentId));
+  setDocumentModifiedStatus3(true);
 };
 
 // src/store/actions/load-components-assets.ts
-import { isDocumentDirty, setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
+import { isDocumentDirty, setDocumentModifiedStatus as setDocumentModifiedStatus4 } from "@elementor/editor-documents";
 
 // src/create-component-type.ts
 import {
   createTemplatedElementView
 } from "@elementor/editor-canvas";
 import { getCurrentDocument } from "@elementor/editor-documents";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
 import { getMixpanel } from "@elementor/mixpanel";
-import { __getState as getState2 } from "@elementor/store";
+import { __getState as getState9 } from "@elementor/store";
 var trackComponentEvent = ({ action, ...data }) => {
   const { dispatchEvent, config } = getMixpanel();
   if (!config?.names?.components?.[action]) {
@@ -571,7 +1643,7 @@ var onElementDrop = (_args, element) => {
   const componentName = editorSettings?.title;
   const componentUID = editorSettings?.component_uid;
   const instanceId = element.id;
-  const createdThisSession = selectCreatedThisSession(getState2());
+  const createdThisSession = selectCreatedThisSession(getState9());
   const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
   const eventsManagerConfig = window.elementorCommon.eventsManager.config;
   const { locations, secondaryLocations } = eventsManagerConfig;
@@ -670,7 +1742,7 @@ function createComponentView(options) {
           action: {
             name: "edit component",
             icon: "eicon-edit",
-            title: () => __4("Edit Component", "elementor"),
+            title: () => __13("Edit Component", "elementor"),
             isEnabled: () => true,
             callback: (_, eventData) => this.editComponent(eventData)
           }
@@ -765,7 +1837,7 @@ var getComponentIds = async (elements) => {
 };
 
 // src/store/actions/load-components-overridable-props.ts
-import { __dispatch as dispatch, __getState as getState3 } from "@elementor/store";
+import { __dispatch as dispatch8, __getState as getState10 } from "@elementor/store";
 function loadComponentsOverridableProps(componentIds) {
   if (!componentIds.length) {
     return;
@@ -773,7 +1845,7 @@ function loadComponentsOverridableProps(componentIds) {
   componentIds.forEach(loadComponentOverrides);
 }
 async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded(getState3(), componentId);
+  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded(getState10(), componentId);
   if (isOverridablePropsLoaded) {
     return;
   }
@@ -781,7 +1853,7 @@ async function loadComponentOverrides(componentId) {
   if (!overridableProps) {
     return;
   }
-  dispatch(
+  dispatch8(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps
@@ -790,13 +1862,13 @@ async function loadComponentOverrides(componentId) {
 }
 
 // src/store/actions/load-components-styles.ts
-import { __dispatch as dispatch2, __getState as getState4 } from "@elementor/store";
+import { __dispatch as dispatch9, __getState as getState11 } from "@elementor/store";
 async function loadComponentsStyles(componentIds) {
   if (!componentIds.length) {
     return;
   }
-  const knownComponents = selectStyles(getState4());
-  const unknownComponentIds = componentIds.filter((id) => !knownComponents[id]);
+  const knownComponents = selectStyles(getState11());
+  const unknownComponentIds = componentIds.filter((id2) => !knownComponents[id2]);
   if (!unknownComponentIds.length) {
     return;
   }
@@ -807,13 +1879,13 @@ async function addComponentStyles(ids) {
   addStyles(newComponents);
 }
 async function loadStyles(ids) {
-  return Promise.all(ids.map(async (id) => [id, await apiClient.getComponentConfig(id)]));
+  return Promise.all(ids.map(async (id2) => [id2, await apiClient.getComponentConfig(id2)]));
 }
 function addStyles(data) {
   const styles = Object.fromEntries(
     data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
   );
-  dispatch2(slice.actions.addStyles(styles));
+  dispatch9(slice.actions.addStyles(styles));
 }
 function extractStyles(element) {
   return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
@@ -834,13 +1906,13 @@ async function updateDocumentState(componentIds) {
   );
   const isDrafted = components.some(isDocumentDirty);
   if (isDrafted) {
-    setDocumentModifiedStatus2(true);
+    setDocumentModifiedStatus4(true);
   }
 }
 
 // src/utils/get-container-for-new-element.ts
 import {
-  getContainer,
+  getContainer as getContainer2,
   getCurrentDocumentContainer,
   getSelectedElements
 } from "@elementor/editor-elements";
@@ -875,7 +1947,7 @@ function getSelectedElementContainer() {
   if (selectedElements.length !== 1) {
     return void 0;
   }
-  return getContainer(selectedElements[0].id);
+  return getContainer2(selectedElements[0].id);
 }
 
 // src/components/create-component-form/utils/replace-element-with-component.ts
@@ -913,7 +1985,7 @@ var createComponentModel = (component) => {
 // src/components/components-tab/components-item.tsx
 var ComponentItem = ({ component }) => {
   const componentModel = createComponentModel(component);
-  const popupState = usePopupState({
+  const popupState = usePopupState3({
     variant: "popover",
     disableAutoFocus: true
   });
@@ -931,7 +2003,7 @@ var ComponentItem = ({ component }) => {
     }
     archiveComponent(component.id);
   };
-  return /* @__PURE__ */ React5.createElement(Stack3, null, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React13.createElement(Stack8, null, /* @__PURE__ */ React13.createElement(
     ListItemButton,
     {
       draggable: true,
@@ -949,8 +2021,8 @@ var ComponentItem = ({ component }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React5.createElement(
-      Box4,
+    /* @__PURE__ */ React13.createElement(
+      Box9,
       {
         onClick: handleClick,
         sx: {
@@ -961,22 +2033,22 @@ var ComponentItem = ({ component }) => {
           flexGrow: 1
         }
       },
-      /* @__PURE__ */ React5.createElement(ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React5.createElement(ComponentsIcon, { fontSize: "tiny" })),
-      /* @__PURE__ */ React5.createElement(Box4, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, /* @__PURE__ */ React5.createElement(
+      /* @__PURE__ */ React13.createElement(ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React13.createElement(ComponentsIcon, { fontSize: "tiny" })),
+      /* @__PURE__ */ React13.createElement(Box9, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, /* @__PURE__ */ React13.createElement(
         EllipsisWithTooltip,
         {
           title: component.name,
-          as: Typography2,
+          as: Typography7,
           variant: "caption",
           color: "text.primary"
         }
       ))
     ),
-    /* @__PURE__ */ React5.createElement(IconButton2, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
-  ), /* @__PURE__ */ React5.createElement(
-    Menu,
+    /* @__PURE__ */ React13.createElement(IconButton5, { size: "tiny", ...bindTrigger3(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(DotsVerticalIcon2, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React13.createElement(
+    Menu2,
     {
-      ...bindMenu(popupState),
+      ...bindMenu2(popupState),
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "right"
@@ -986,7 +2058,7 @@ var ComponentItem = ({ component }) => {
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React5.createElement(MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, __5("Archive", "elementor"))
+    /* @__PURE__ */ React13.createElement(MenuListItem3, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, __14("Archive", "elementor"))
   ));
 };
 var addComponentToPage = (model) => {
@@ -1003,13 +2075,13 @@ var addComponentToPage = (model) => {
 };
 
 // src/components/components-tab/loading-components.tsx
-import * as React6 from "react";
-import { Box as Box5, ListItemButton as ListItemButton2, Skeleton, Stack as Stack4 } from "@elementor/ui";
+import * as React14 from "react";
+import { Box as Box10, ListItemButton as ListItemButton2, Skeleton, Stack as Stack9 } from "@elementor/ui";
 var ROWS_COUNT = 6;
 var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
 var LoadingComponents = () => {
-  return /* @__PURE__ */ React6.createElement(
-    Stack4,
+  return /* @__PURE__ */ React14.createElement(
+    Stack9,
     {
       "aria-label": "Loading components",
       gap: 1,
@@ -1030,14 +2102,14 @@ var LoadingComponents = () => {
         }
       }
     },
-    rows.map((row) => /* @__PURE__ */ React6.createElement(
+    rows.map((row) => /* @__PURE__ */ React14.createElement(
       ListItemButton2,
       {
         key: row,
         sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
         shape: "rounded"
       },
-      /* @__PURE__ */ React6.createElement(Box5, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React6.createElement(Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React6.createElement(Skeleton, { variant: "text", width: "100%", height: "36px" }))
+      /* @__PURE__ */ React14.createElement(Box10, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React14.createElement(Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React14.createElement(Skeleton, { variant: "text", width: "100%", height: "36px" }))
     ))
   );
 };
@@ -1046,20 +2118,20 @@ var LoadingComponents = () => {
 function ComponentsList() {
   const { components, isLoading, searchValue } = useFilteredComponents();
   if (isLoading) {
-    return /* @__PURE__ */ React7.createElement(LoadingComponents, null);
+    return /* @__PURE__ */ React15.createElement(LoadingComponents, null);
   }
   const isEmpty = !components || components.length === 0;
   if (isEmpty) {
     if (searchValue.length > 0) {
-      return /* @__PURE__ */ React7.createElement(EmptySearchResult, null);
+      return /* @__PURE__ */ React15.createElement(EmptySearchResult, null);
     }
-    return /* @__PURE__ */ React7.createElement(EmptyState, null);
+    return /* @__PURE__ */ React15.createElement(EmptyState, null);
   }
-  return /* @__PURE__ */ React7.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React7.createElement(ComponentItem, { key: component.uid, component })));
+  return /* @__PURE__ */ React15.createElement(List3, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React15.createElement(ComponentItem, { key: component.uid, component })));
 }
 var EmptyState = () => {
-  return /* @__PURE__ */ React7.createElement(
-    Stack5,
+  return /* @__PURE__ */ React15.createElement(
+    Stack10,
     {
       alignItems: "center",
       justifyContent: "center",
@@ -1068,32 +2140,32 @@ var EmptyState = () => {
       gap: 1.75,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React7.createElement(Icon, { fontSize: "large" }, /* @__PURE__ */ React7.createElement(EyeIcon, { fontSize: "large" })),
-    /* @__PURE__ */ React7.createElement(Typography3, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, __6("Text that explains that there are no Components yet.", "elementor")),
-    /* @__PURE__ */ React7.createElement(Typography3, { variant: "caption", align: "center", color: "text.secondary" }, __6(
+    /* @__PURE__ */ React15.createElement(Icon, { fontSize: "large" }, /* @__PURE__ */ React15.createElement(EyeIcon, { fontSize: "large" })),
+    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, __15("Text that explains that there are no Components yet.", "elementor")),
+    /* @__PURE__ */ React15.createElement(Typography8, { variant: "caption", align: "center", color: "text.secondary" }, __15(
       "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
       "elementor"
     )),
-    /* @__PURE__ */ React7.createElement(Divider2, { sx: { width: "100%" }, color: "text.secondary" }),
-    /* @__PURE__ */ React7.createElement(Typography3, { align: "left", variant: "caption", color: "text.secondary" }, __6("To create a component, first design it, then choose one of three options:", "elementor")),
-    /* @__PURE__ */ React7.createElement(
-      Typography3,
+    /* @__PURE__ */ React15.createElement(Divider3, { sx: { width: "100%" }, color: "text.secondary" }),
+    /* @__PURE__ */ React15.createElement(Typography8, { align: "left", variant: "caption", color: "text.secondary" }, __15("To create a component, first design it, then choose one of three options:", "elementor")),
+    /* @__PURE__ */ React15.createElement(
+      Typography8,
       {
         align: "left",
         variant: "caption",
         color: "text.secondary",
         sx: { display: "flex", flexDirection: "column" }
       },
-      /* @__PURE__ */ React7.createElement("span", null, __6("1. Right-click and select Create Component", "elementor")),
-      /* @__PURE__ */ React7.createElement("span", null, __6("2. Use the component icon in the Structure panel", "elementor")),
-      /* @__PURE__ */ React7.createElement("span", null, __6("3. Use the component icon in the Edit panel header", "elementor"))
+      /* @__PURE__ */ React15.createElement("span", null, __15("1. Right-click and select Create Component", "elementor")),
+      /* @__PURE__ */ React15.createElement("span", null, __15("2. Use the component icon in the Structure panel", "elementor")),
+      /* @__PURE__ */ React15.createElement("span", null, __15("3. Use the component icon in the Edit panel header", "elementor"))
     )
   );
 };
 var EmptySearchResult = () => {
   const { searchValue, clearSearch } = useSearch();
-  return /* @__PURE__ */ React7.createElement(
-    Stack5,
+  return /* @__PURE__ */ React15.createElement(
+    Stack10,
     {
       color: "text.secondary",
       pt: 5,
@@ -1102,17 +2174,17 @@ var EmptySearchResult = () => {
       overflow: "hidden",
       justifySelf: "center"
     },
-    /* @__PURE__ */ React7.createElement(ComponentsIcon2, null),
-    /* @__PURE__ */ React7.createElement(
-      Box6,
+    /* @__PURE__ */ React15.createElement(ComponentsIcon2, null),
+    /* @__PURE__ */ React15.createElement(
+      Box11,
       {
         sx: {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React7.createElement(Typography3, { align: "center", variant: "subtitle2", color: "inherit" }, __6("Sorry, nothing matched", "elementor")),
-      searchValue && /* @__PURE__ */ React7.createElement(
-        Typography3,
+      /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "subtitle2", color: "inherit" }, __15("Sorry, nothing matched", "elementor")),
+      searchValue && /* @__PURE__ */ React15.createElement(
+        Typography8,
         {
           variant: "subtitle2",
           color: "inherit",
@@ -1122,8 +2194,8 @@ var EmptySearchResult = () => {
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React7.createElement("span", null, "\u201C"),
-        /* @__PURE__ */ React7.createElement(
+        /* @__PURE__ */ React15.createElement("span", null, "\u201C"),
+        /* @__PURE__ */ React15.createElement(
           "span",
           {
             style: {
@@ -1134,11 +2206,11 @@ var EmptySearchResult = () => {
           },
           searchValue
         ),
-        /* @__PURE__ */ React7.createElement("span", null, "\u201D.")
+        /* @__PURE__ */ React15.createElement("span", null, "\u201D.")
       )
     ),
-    /* @__PURE__ */ React7.createElement(Typography3, { align: "center", variant: "caption", color: "inherit" }, __6("Try something else.", "elementor")),
-    /* @__PURE__ */ React7.createElement(Typography3, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React7.createElement(Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __6("Clear & try again", "elementor")))
+    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, __15("Try something else.", "elementor")),
+    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React15.createElement(Link2, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __15("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -1155,35 +2227,35 @@ var useFilteredComponents = () => {
 
 // src/components/components-tab/components.tsx
 var Components = () => {
-  return /* @__PURE__ */ React8.createElement(ThemeProvider, null, /* @__PURE__ */ React8.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React8.createElement(ComponentSearch, null), /* @__PURE__ */ React8.createElement(ComponentsList, null)));
+  return /* @__PURE__ */ React16.createElement(ThemeProvider2, null, /* @__PURE__ */ React16.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React16.createElement(ComponentSearch, null), /* @__PURE__ */ React16.createElement(ComponentsList, null)));
 };
 
 // src/components/consts.ts
 var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 
 // src/components/create-component-form/create-component-form.tsx
-import * as React9 from "react";
-import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import * as React17 from "react";
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3, useState as useState6 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
-import { Form as FormElement, ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
+import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
 import { StarIcon } from "@elementor/icons";
-import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack as Stack6, TextField as TextField2, Typography as Typography4 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { Alert as Alert2, Button as Button3, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Snackbar, Stack as Stack11, TextField as TextField3, Typography as Typography9 } from "@elementor/ui";
+import { __ as __17 } from "@wordpress/i18n";
 
 // src/store/actions/create-unpublished-component.ts
 import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
-import { __dispatch as dispatch3 } from "@elementor/store";
-import { generateUniqueId } from "@elementor/utils";
+import { __dispatch as dispatch10 } from "@elementor/store";
+import { generateUniqueId as generateUniqueId3 } from "@elementor/utils";
 function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
-  const generatedUid = uid ?? generateUniqueId("component");
+  const generatedUid = uid ?? generateUniqueId3("component");
   const componentBase = { uid: generatedUid, name, overridableProps };
-  dispatch3(
+  dispatch10(
     slice.actions.addUnpublished({
       ...componentBase,
       elements: [element]
     })
   );
-  dispatch3(slice.actions.addCreatedThisSession(generatedUid));
+  dispatch10(slice.actions.addCreatedThisSession(generatedUid));
   replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
@@ -1196,11 +2268,11 @@ function createUnpublishedComponent(name, element, eventData, overridableProps,
 }
 
 // src/components/create-component-form/hooks/use-form.ts
-import { useMemo, useState } from "react";
+import { useMemo as useMemo2, useState as useState5 } from "react";
 var useForm = (initialValues) => {
-  const [values, setValues] = useState(initialValues);
-  const [errors, setErrors] = useState({});
-  const isValid = useMemo(() => {
+  const [values, setValues] = useState5(initialValues);
+  const [errors, setErrors] = useState5({});
+  const isValid = useMemo2(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
   const handleChange = (e, field, validationSchema) => {
@@ -1246,16 +2318,16 @@ var validateForm = (values, schema) => {
 
 // src/components/create-component-form/utils/component-form-schema.ts
 import { z } from "@elementor/schema";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
 var createBaseComponentSchema = (existingNames) => {
   return z.object({
     componentName: z.string().trim().max(
       MAX_NAME_LENGTH,
-      __7("Component name is too long. Please keep it under 50 characters.", "elementor")
+      __16("Component name is too long. Please keep it under 50 characters.", "elementor")
     ).refine((value) => !existingNames.includes(value), {
-      message: __7("Component name already exists", "elementor")
+      message: __16("Component name already exists", "elementor")
     })
   });
 };
@@ -1263,9 +2335,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: __7("Component name is required.", "elementor")
+      message: __16("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: __7("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: __16("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -1301,10 +2373,10 @@ function countNestedElements(container) {
 
 // src/components/create-component-form/create-component-form.tsx
 function CreateComponentForm() {
-  const [element, setElement] = useState2(null);
-  const [anchorPosition, setAnchorPosition] = useState2();
-  const [resultNotification, setResultNotification] = useState2(null);
-  const eventData = useRef2(null);
+  const [element, setElement] = useState6(null);
+  const [anchorPosition, setAnchorPosition] = useState6();
+  const [resultNotification, setResultNotification] = useState6(null);
+  const eventData = useRef3(null);
   useEffect2(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
@@ -1330,12 +2402,12 @@ function CreateComponentForm() {
       setResultNotification({
         show: true,
         // Translators: %1$s: Component name, %2$s: Component UID
-        message: __8("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
+        message: __17("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
         type: "success"
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = __8("Failed to save component. Please try again.", "elementor");
+      const errorMessage = __17("Failed to save component. Please try again.", "elementor");
       setResultNotification({
         show: true,
         message: errorMessage,
@@ -1354,24 +2426,24 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React9.createElement(ThemeProvider2, null, /* @__PURE__ */ React9.createElement(
-    Popover,
+  return /* @__PURE__ */ React17.createElement(ThemeProvider3, null, /* @__PURE__ */ React17.createElement(
+    Popover3,
     {
       open: element !== null,
       onClose: cancelSave,
       anchorReference: "anchorPosition",
       anchorPosition
     },
-    element !== null && /* @__PURE__ */ React9.createElement(
-      Form,
+    element !== null && /* @__PURE__ */ React17.createElement(
+      Form2,
       {
         initialValues: { componentName: element.elementLabel },
         handleSave,
         closePopup: cancelSave
       }
     )
-  ), /* @__PURE__ */ React9.createElement(Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React9.createElement(
-    Alert,
+  ), /* @__PURE__ */ React17.createElement(Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React17.createElement(
+    Alert2,
     {
       onClose: () => setResultNotification(null),
       severity: resultNotification?.type,
@@ -1381,21 +2453,21 @@ function CreateComponentForm() {
   )));
 }
 var FONT_SIZE = "tiny";
-var Form = ({
+var Form2 = ({
   initialValues,
   handleSave,
   closePopup
 }) => {
   const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
   const { components } = useComponents();
-  const existingComponentNames = useMemo2(() => {
+  const existingComponentNames = useMemo3(() => {
     return components?.map((component) => component.name) ?? [];
   }, [components]);
-  const changeValidationSchema = useMemo2(
+  const changeValidationSchema = useMemo3(
     () => createBaseComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
-  const submitValidationSchema = useMemo2(
+  const submitValidationSchema = useMemo3(
     () => createSubmitComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
@@ -1406,14 +2478,14 @@ var Form = ({
     }
   };
   const texts = {
-    heading: __8("Save as a component", "elementor"),
-    name: __8("Name", "elementor"),
-    cancel: __8("Cancel", "elementor"),
-    create: __8("Create", "elementor")
+    heading: __17("Save as a component", "elementor"),
+    name: __17("Name", "elementor"),
+    cancel: __17("Cancel", "elementor"),
+    create: __17("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React9.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React9.createElement(Stack6, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React9.createElement(
-    Stack6,
+  return /* @__PURE__ */ React17.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React17.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React17.createElement(
+    Stack11,
     {
       direction: "row",
       alignItems: "center",
@@ -1421,10 +2493,10 @@ var Form = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__PURE__ */ React9.createElement(StarIcon, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React9.createElement(Typography4, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
-  ), /* @__PURE__ */ React9.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(
-    TextField2,
+    /* @__PURE__ */ React17.createElement(StarIcon, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React17.createElement(Typography9, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
+  ), /* @__PURE__ */ React17.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React17.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React17.createElement(FormLabel2, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React17.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React17.createElement(
+    TextField3,
     {
       id: nameInputId,
       size: FONT_SIZE,
@@ -1435,11 +2507,11 @@ var Form = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React9.createElement(Stack6, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React9.createElement(Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React9.createElement(Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
+  ))), /* @__PURE__ */ React17.createElement(Stack11, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React17.createElement(Button3, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React17.createElement(Button3, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
 };
 
 // src/components/edit-component/edit-component.tsx
-import * as React11 from "react";
+import * as React19 from "react";
 import { useEffect as useEffect5 } from "react";
 import { getV1DocumentsManager as getV1DocumentsManager4 } from "@elementor/editor-documents";
 import { __privateListenTo as listenTo, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
@@ -1447,25 +2519,25 @@ import { __useSelector as useSelector5 } from "@elementor/store";
 import { throttle as throttle2 } from "@elementor/utils";
 
 // src/store/actions/update-current-component.ts
-import { setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
+import { setDocumentModifiedStatus as setDocumentModifiedStatus5 } from "@elementor/editor-documents";
 import { __getStore as getStore2 } from "@elementor/store";
 function updateCurrentComponent({
   path,
   currentComponentId
 }) {
-  const dispatch9 = getStore2()?.dispatch;
-  if (!dispatch9) {
+  const dispatch16 = getStore2()?.dispatch;
+  if (!dispatch16) {
     return;
   }
-  dispatch9(slice.actions.setPath(path));
-  dispatch9(slice.actions.setCurrentComponentId(currentComponentId));
+  dispatch16(slice.actions.setPath(path));
+  dispatch16(slice.actions.setCurrentComponentId(currentComponentId));
 }
 
 // src/components/edit-component/component-modal.tsx
-import * as React10 from "react";
+import * as React18 from "react";
 import { useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 
 // src/hooks/use-canvas-document.ts
 import { getCanvasIframeDocument } from "@elementor/editor-canvas";
@@ -1475,10 +2547,10 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-element-rect.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState7 } from "react";
 import { throttle } from "@elementor/utils";
 function useElementRect(element) {
-  const [rect, setRect] = useState3(new DOMRect(0, 0, 0, 0));
+  const [rect, setRect] = useState7(new DOMRect(0, 0, 0, 0));
   const onChange = throttle(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
@@ -1555,7 +2627,7 @@ function ComponentModal({ element, onClose }) {
     return null;
   }
   return createPortal(
-    /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(BlockEditPage, null), /* @__PURE__ */ React10.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
+    /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(BlockEditPage, null), /* @__PURE__ */ React18.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
     canvasDocument.body
   );
 }
@@ -1579,7 +2651,7 @@ function Backdrop({ canvas, element, onClose }) {
       onClose();
     }
   };
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "div",
     {
       style: backdropStyle,
@@ -1587,7 +2659,7 @@ function Backdrop({ canvas, element, onClose }) {
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": __9("Exit component editing mode", "elementor")
+      "aria-label": __18("Exit component editing mode", "elementor")
     }
   );
 }
@@ -1637,7 +2709,7 @@ function BlockEditPage() {
 		}
 	}
 	`;
-  return /* @__PURE__ */ React10.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
+  return /* @__PURE__ */ React18.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
 }
 
 // src/components/edit-component/edit-component.tsx
@@ -1650,7 +2722,7 @@ function EditComponent() {
   if (!elementDom) {
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(ComponentModal, { element: elementDom, onClose });
+  return /* @__PURE__ */ React19.createElement(ComponentModal, { element: elementDom, onClose });
 }
 function useHandleDocumentSwitches() {
   const documentsManager = getV1DocumentsManager4();
@@ -1690,12 +2762,12 @@ function getUpdatedComponentPath(path, nextDocument) {
     }
   ];
 }
-function getComponentDOMElement(id) {
-  if (!id) {
+function getComponentDOMElement(id2) {
+  if (!id2) {
     return null;
   }
   const documentsManager = getV1DocumentsManager4();
-  const currentComponent = documentsManager.get(id);
+  const currentComponent = documentsManager.get(id2);
   const widget = currentComponent?.container;
   const container = widget?.view?.el?.children?.[0] ?? null;
   const elementDom = container?.children[0];
@@ -1703,33 +2775,33 @@ function getComponentDOMElement(id) {
 }
 
 // src/components/in-edit-mode.tsx
-import * as React12 from "react";
+import * as React20 from "react";
 import { closeDialog, openDialog } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Box as Box7, Button as Button2, DialogActions, DialogContent, DialogHeader, Icon as Icon2, Stack as Stack7, Typography as Typography5 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { Box as Box12, Button as Button4, DialogActions, DialogContent, DialogHeader, Icon as Icon2, Stack as Stack12, Typography as Typography10 } from "@elementor/ui";
+import { __ as __19 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
-    component: /* @__PURE__ */ React12.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React20.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __10("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React12.createElement(Box7, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React12.createElement(Icon2, { color: "secondary" }, /* @__PURE__ */ React12.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React12.createElement(Typography5, { variant: "subtitle1" }, content))), /* @__PURE__ */ React12.createElement(DialogContent, null, /* @__PURE__ */ React12.createElement(Stack7, { spacing: 2, direction: "column" }, /* @__PURE__ */ React12.createElement(Typography5, { variant: "body2" }, __10(
+  const content = __19("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React20.createElement(Box12, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(Icon2, { color: "secondary" }, /* @__PURE__ */ React20.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React20.createElement(Typography10, { variant: "subtitle1" }, content))), /* @__PURE__ */ React20.createElement(DialogContent, null, /* @__PURE__ */ React20.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React20.createElement(Typography10, { variant: "body2" }, __19(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React12.createElement(DialogActions, null, /* @__PURE__ */ React12.createElement(Button2, { color: "secondary", variant: "contained", onClick: closeDialog }, __10("Close", "elementor"))))));
+  )), /* @__PURE__ */ React20.createElement(DialogActions, null, /* @__PURE__ */ React20.createElement(Button4, { color: "secondary", variant: "contained", onClick: closeDialog }, __19("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React15 from "react";
+import * as React23 from "react";
 import { useElement } from "@elementor/editor-editing-panel";
-import { useElementSetting, useSelectedElement } from "@elementor/editor-elements";
-import { PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
+import { useElementSetting, useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
+import { PanelBody as PanelBody2, PanelHeader as PanelHeader2, PanelHeaderTitle as PanelHeaderTitle2 } from "@elementor/editor-panels";
 import { ComponentsIcon as ComponentsIcon3, PencilIcon as PencilIcon2 } from "@elementor/icons";
-import { __getState as getState5 } from "@elementor/store";
-import { IconButton as IconButton3, Stack as Stack10, Tooltip as Tooltip2 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { __getState as getState12 } from "@elementor/store";
+import { IconButton as IconButton6, Stack as Stack15, Tooltip as Tooltip4 } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
 
 // src/prop-types/component-instance-prop-type.ts
 import { createPropUtils as createPropUtils3, numberPropTypeUtil } from "@elementor/editor-props";
@@ -1770,13 +2842,13 @@ var componentInstancePropTypeUtil = createPropUtils3(
 );
 
 // src/components/instance-editing-panel/empty-state.tsx
-import * as React13 from "react";
-import { ComponentPropListIcon as ComponentPropListIcon2, PencilIcon } from "@elementor/icons";
-import { Button as Button3, Stack as Stack8, Typography as Typography6 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import * as React21 from "react";
+import { ComponentPropListIcon as ComponentPropListIcon4, PencilIcon } from "@elementor/icons";
+import { Button as Button5, Stack as Stack13, Typography as Typography11 } from "@elementor/ui";
+import { __ as __20 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
-  return /* @__PURE__ */ React13.createElement(
-    Stack8,
+  return /* @__PURE__ */ React21.createElement(
+    Stack13,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -1785,32 +2857,32 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__PURE__ */ React13.createElement(ComponentPropListIcon2, { fontSize: "large" }),
-    /* @__PURE__ */ React13.createElement(Typography6, { align: "center", variant: "subtitle2" }, __11("No properties yet", "elementor")),
-    /* @__PURE__ */ React13.createElement(Typography6, { align: "center", variant: "caption", maxWidth: "170px" }, __11(
+    /* @__PURE__ */ React21.createElement(ComponentPropListIcon4, { fontSize: "large" }),
+    /* @__PURE__ */ React21.createElement(Typography11, { align: "center", variant: "subtitle2" }, __20("No properties yet", "elementor")),
+    /* @__PURE__ */ React21.createElement(Typography11, { align: "center", variant: "caption", maxWidth: "170px" }, __20(
       "Edit the component to add properties, manage them or update the design across all instances.",
       "elementor"
     )),
-    /* @__PURE__ */ React13.createElement(Button3, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React13.createElement(PencilIcon, { fontSize: "small" }), __11("Edit component", "elementor"))
+    /* @__PURE__ */ React21.createElement(Button5, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React21.createElement(PencilIcon, { fontSize: "small" }), __20("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-import * as React14 from "react";
+import * as React22 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
-import { Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack9 } from "@elementor/ui";
+import { Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack14 } from "@elementor/ui";
 function OverridePropsGroup({ group, props }) {
   const [isOpen, setIsOpen] = useStateByElement(group.id, true);
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id = useId();
-  const labelId = `label-${id}`;
-  const contentId = `content-${id}`;
+  const id2 = useId();
+  const labelId = `label-${id2}`;
+  const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
     ListItemButton3,
     {
       id: labelId,
@@ -1820,7 +2892,7 @@ function OverridePropsGroup({ group, props }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React14.createElement(Stack9, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React22.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React22.createElement(
       ListItemText,
       {
         secondary: title,
@@ -1828,10 +2900,10 @@ function OverridePropsGroup({ group, props }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React14.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React14.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React14.createElement(Stack9, { direction: "column", gap: 1, p: 2 }, group.props.map((propId) => (
+    /* @__PURE__ */ React22.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React22.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React22.createElement(Stack14, { direction: "column", gap: 1, p: 2 }, group.props.map((propId) => (
     // TODO: Render actual controls
-    /* @__PURE__ */ React14.createElement("pre", { key: propId }, JSON.stringify(props[propId], null, 2))
+    /* @__PURE__ */ React22.createElement("pre", { key: propId }, JSON.stringify(props[propId], null, 2))
   )))));
 }
 
@@ -1839,24 +2911,24 @@ function OverridePropsGroup({ group, props }) {
 function InstanceEditingPanel() {
   const { element } = useElement();
   const settings = useElementSetting(element.id, "component_instance");
-  const componentId = (componentInstancePropTypeUtil.extract(settings)?.component_id).value;
-  const component = componentId ? selectComponent(getState5(), componentId) : null;
-  const overridableProps = componentId ? selectOverridableProps(getState5(), componentId) : null;
-  const componentInstanceId = useSelectedElement()?.element?.id ?? null;
+  const componentId = componentInstancePropTypeUtil.extract(settings)?.component_id?.value;
+  const component = componentId ? selectComponent(getState12(), componentId) : null;
+  const overridableProps = componentId ? selectOverridableProps(getState12(), componentId) : null;
+  const componentInstanceId = useSelectedElement2()?.element?.id ?? null;
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = __12("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = __21("Edit %s", "elementor").replace("%s", component.name);
   const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
   const groups = overridableProps.groups.order.map(
     (groupId) => overridableProps.groups.items[groupId] ? overridableProps.groups.items[groupId] : null
   ).filter(Boolean);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React15.createElement(Stack10, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React15.createElement(Stack10, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React15.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React15.createElement(PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React15.createElement(Tooltip2, { title: panelTitle }, /* @__PURE__ */ React15.createElement(IconButton3, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React15.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React15.createElement(PanelBody, null, isEmpty ? /* @__PURE__ */ React15.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React15.createElement(Stack10, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React15.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React23.createElement(Stack15, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React23.createElement(Stack15, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React23.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React23.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React23.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React23.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React23.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React23.createElement(PanelBody2, null, isEmpty ? /* @__PURE__ */ React23.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React23.createElement(Stack15, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React23.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
-import * as React17 from "react";
+import * as React25 from "react";
 import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
 import { createTopLevelObjectType, useElement as useElement2 } from "@elementor/editor-editing-panel";
 
@@ -1875,18 +2947,18 @@ var componentOverridablePropTypeUtil = createPropUtils4(
 );
 
 // src/provider/overridable-prop-context.tsx
-import * as React16 from "react";
+import * as React24 from "react";
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var OverridablePropContext = createContext2(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React16.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => useContext2(OverridablePropContext)?.value;
 
 // src/store/actions/update-overridable-prop-origin-value.ts
-import { __dispatch as dispatch4, __getState as getState6 } from "@elementor/store";
+import { __dispatch as dispatch11, __getState as getState13 } from "@elementor/store";
 function updateOverridablePropOriginValue(componentId, propValue) {
-  const overridableProps = selectOverridableProps(getState6(), componentId);
+  const overridableProps = selectOverridableProps(getState13(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1904,7 +2976,7 @@ function updateOverridablePropOriginValue(componentId, propValue) {
       }
     }
   };
-  dispatch4(
+  dispatch11(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: newOverridableProps
@@ -1940,7 +3012,7 @@ function OverridablePropControl({
     }
   });
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React17.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React25.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React25.createElement(
     PropProvider,
     {
       ...propContext,
@@ -1949,23 +3021,22 @@ function OverridablePropControl({
       value: { [bind]: value.origin_value },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React17.createElement(OriginalControl, { ...props })))
+    /* @__PURE__ */ React25.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React25.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React25.createElement(OriginalControl, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-import * as React20 from "react";
+import * as React27 from "react";
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 import { useElement as useElement3 } from "@elementor/editor-editing-panel";
-import { getWidgetsCache } from "@elementor/editor-elements";
-import { __getState as getState9 } from "@elementor/store";
-import { bindPopover, bindTrigger as bindTrigger2, Popover as Popover2, Tooltip as Tooltip3, usePopupState as usePopupState2 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
+import { __getState as getState16 } from "@elementor/store";
+import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Popover4, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
+import { __ as __23 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
-import { __dispatch as dispatch5, __getState as getState7 } from "@elementor/store";
-import { generateUniqueId as generateUniqueId2 } from "@elementor/utils";
-import { __ as __13 } from "@wordpress/i18n";
+import { __dispatch as dispatch12, __getState as getState14 } from "@elementor/store";
+import { generateUniqueId as generateUniqueId4 } from "@elementor/utils";
 function setOverridableProp({
   componentId,
   overrideKey,
@@ -1977,7 +3048,7 @@ function setOverridableProp({
   widgetType,
   originValue
 }) {
-  const overridableProps = selectOverridableProps(getState7(), componentId);
+  const overridableProps = selectOverridableProps(getState14(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1985,13 +3056,12 @@ function setOverridableProp({
   const duplicatedTargetProps = Object.values(overridableProps.props).filter(
     (prop) => prop.elementId === elementId && prop.propKey === propKey && prop !== existingOverridableProp
   );
-  const { props: prevProps, groups: prevGroups } = { ...overridableProps };
-  const { groups: updatedGroups, currentGroupId } = getUpdatedGroups(
-    prevGroups,
-    groupId || existingOverridableProp?.groupId
+  const { groups: groupsAfterResolve, groupId: currentGroupId } = resolveOrCreateGroup(
+    overridableProps.groups,
+    groupId || existingOverridableProp?.groupId || void 0
   );
   const overridableProp = {
-    overrideKey: existingOverridableProp?.overrideKey || generateUniqueId2("prop"),
+    overrideKey: existingOverridableProp?.overrideKey || generateUniqueId4("prop"),
     label,
     elementId,
     propKey,
@@ -2000,31 +3070,21 @@ function setOverridableProp({
     originValue,
     groupId: currentGroupId
   };
-  const { props: propsWithoutDuplicates, groups: groupsWithoutDuplicates } = removeProps({
-    props: prevProps,
-    groups: updatedGroups,
-    propsToRemove: duplicatedTargetProps
-  });
+  const stateAfterRemovingDuplicates = removePropsFromState(
+    { ...overridableProps, groups: groupsAfterResolve },
+    duplicatedTargetProps
+  );
   const props = {
-    ...propsWithoutDuplicates,
+    ...stateAfterRemovingDuplicates.props,
     [overridableProp.overrideKey]: overridableProp
   };
-  const groups = {
-    items: {
-      ...groupsWithoutDuplicates.items,
-      [currentGroupId]: getGroupWithProp(groupsWithoutDuplicates, currentGroupId, overridableProp)
-    },
-    order: groupsWithoutDuplicates.order.includes(currentGroupId) ? groupsWithoutDuplicates.order : [...groupsWithoutDuplicates.order, currentGroupId]
-  };
+  let groups = addPropToGroup(stateAfterRemovingDuplicates.groups, currentGroupId, overridableProp.overrideKey);
+  groups = ensureGroupInOrder(groups, currentGroupId);
   const isChangingGroups = existingOverridableProp && existingOverridableProp.groupId !== currentGroupId;
   if (isChangingGroups) {
-    groups.items[existingOverridableProp.groupId] = getGroupWithoutProp(
-      groupsWithoutDuplicates,
-      existingOverridableProp.groupId,
-      overridableProp
-    );
+    groups = removePropFromGroup(groups, existingOverridableProp.groupId, overridableProp.overrideKey);
   }
-  dispatch5(
+  dispatch12(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -2035,83 +3095,15 @@ function setOverridableProp({
   );
   return overridableProp;
 }
-function getUpdatedGroups(groups, groupId) {
-  if (!groupId) {
-    if (groups.order.length > 0) {
-      return { groups, currentGroupId: groups.order[0] };
-    }
-    return addNewGroup(groups);
-  }
-  if (!groups.items[groupId]) {
-    return addNewGroup(groups, groupId);
-  }
-  return { groups, currentGroupId: groupId };
-}
-function addNewGroup(groups, groupId) {
-  const currentGroupId = groupId || generateUniqueId2("group");
-  const updatedGroups = {
-    ...groups,
-    items: {
-      ...groups.items,
-      [currentGroupId]: {
-        id: currentGroupId,
-        label: __13("Default", "elementor"),
-        props: []
-      }
-    },
-    order: [...groups.order, currentGroupId]
-  };
-  return { groups: updatedGroups, currentGroupId };
-}
-function getGroupWithProp(groups, groupId, overridableProp) {
-  const group = { ...groups.items[groupId] };
-  if (!group.props.includes(overridableProp.overrideKey)) {
-    group.props = [...group.props, overridableProp.overrideKey];
-  }
-  return group;
-}
-function getGroupWithoutProp(groups, groupId, overridableProp) {
-  const group = { ...groups.items[groupId] };
-  if (group) {
-    group.props = group.props.filter((key) => key !== overridableProp.overrideKey);
-  }
-  return group;
-}
-function removeProps({
-  props,
-  groups,
-  propsToRemove
-}) {
-  const allProps = Object.fromEntries(
-    Object.entries(props).filter(([, prop]) => !propsToRemove.includes(prop))
-  );
-  const overrideKeysToRemove = propsToRemove.map((prop) => prop.overrideKey);
-  const allGroupItems = Object.fromEntries(
-    Object.entries(groups.items).map(([groupId, group]) => [
-      groupId,
-      {
-        ...group,
-        props: group.props.filter((prop) => !overrideKeysToRemove.includes(prop))
-      }
-    ])
-  );
-  return {
-    props: allProps,
-    groups: {
-      items: allGroupItems,
-      order: groups.order.filter((groupId) => !overrideKeysToRemove.includes(groupId))
-    }
-  };
-}
 
 // src/components/overridable-props/indicator.tsx
-import * as React18 from "react";
-import { forwardRef } from "react";
+import * as React26 from "react";
+import { forwardRef as forwardRef2 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
-import { Box as Box8, styled as styled2 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
-var SIZE = "tiny";
-var IconContainer = styled2(Box8)`
+import { Box as Box13, styled as styled3 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
+var SIZE2 = "tiny";
+var IconContainer = styled3(Box13)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -2128,7 +3120,7 @@ var IconContainer = styled2(Box8)`
 		stroke-width: 2px;
 	}
 `;
-var Content = styled2(Box8)`
+var Content = styled3(Box13)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -2165,79 +3157,22 @@ var Content = styled2(Box8)`
 		}
 	}
 `;
-var Indicator = forwardRef(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React18.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React18.createElement(
+var Indicator = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React26.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React26.createElement(
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? __14("Overridable property", "elementor") : __14("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? __22("Overridable property", "elementor") : __22("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React18.createElement(CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React18.createElement(PlusIcon, { fontSize: SIZE })
+  isOverridable ? /* @__PURE__ */ React26.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React26.createElement(PlusIcon, { fontSize: SIZE2 })
 )));
 
-// src/components/overridable-props/overridable-prop-form.tsx
-import * as React19 from "react";
-import { useState as useState4 } from "react";
-import { Form as Form2, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
-import { Button as Button4, FormLabel as FormLabel2, Grid as Grid2, Select, Stack as Stack11, TextField as TextField3, Typography as Typography7 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
-var SIZE2 = "tiny";
-var DEFAULT_GROUP = { value: null, label: __15("Default", "elementor") };
-function OverridablePropForm({ onSubmit, groups, currentValue }) {
-  const [propLabel, setPropLabel] = useState4(currentValue?.label ?? null);
-  const [group, setGroup] = useState4(currentValue?.groupId ?? groups?.[0]?.value ?? null);
-  const name = __15("Name", "elementor");
-  const groupName = __15("Group Name", "elementor");
-  const isCreate = currentValue === void 0;
-  const title = isCreate ? __15("Create new property", "elementor") : __15("Update property", "elementor");
-  const ctaLabel = isCreate ? __15("Create", "elementor") : __15("Update", "elementor");
-  return /* @__PURE__ */ React19.createElement(Form2, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React19.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
-    Stack11,
-    {
-      direction: "row",
-      alignItems: "center",
-      py: 1,
-      px: 1.5,
-      sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
-    },
-    /* @__PURE__ */ React19.createElement(Typography7, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__PURE__ */ React19.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(FormLabel2, { size: "tiny" }, name)), /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
-    TextField3,
-    {
-      name,
-      size: SIZE2,
-      fullWidth: true,
-      placeholder: __15("Enter value", "elementor"),
-      value: propLabel ?? "",
-      onChange: (e) => setPropLabel(e.target.value)
-    }
-  ))), /* @__PURE__ */ React19.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(FormLabel2, { size: "tiny" }, groupName)), /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
-    Select,
-    {
-      name: groupName,
-      size: SIZE2,
-      fullWidth: true,
-      value: group ?? null,
-      onChange: setGroup,
-      displayEmpty: true,
-      renderValue: (selectedValue) => {
-        if (!selectedValue || selectedValue === "") {
-          const [firstGroup = DEFAULT_GROUP] = groups ?? [];
-          return firstGroup.label;
-        }
-        return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
-      }
-    },
-    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React19.createElement(MenuListItem2, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React19.createElement(Stack11, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React19.createElement(Button4, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
-}
-
 // src/components/overridable-props/utils/get-overridable-prop.ts
-import { __getState as getState8 } from "@elementor/store";
+import { __getState as getState15 } from "@elementor/store";
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps(getState8(), componentId);
+  const overridableProps = selectOverridableProps(getState15(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -2252,8 +3187,8 @@ function OverridablePropIndicator() {
   if (!isPropAllowed(bind) || !componentId) {
     return null;
   }
-  const overridableProps = selectOverridableProps(getState9(), componentId);
-  return /* @__PURE__ */ React20.createElement(Content2, { componentId, overridableProps });
+  const overridableProps = selectOverridableProps(getState16(), componentId);
+  return /* @__PURE__ */ React27.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
@@ -2266,12 +3201,12 @@ function Content2({ componentId, overridableProps }) {
     componentOverridablePropTypeUtil
   );
   const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
-  const popupState = usePopupState2({
+  const popupState = usePopupState4({
     variant: "popover"
   });
-  const triggerProps = bindTrigger2(popupState);
-  const popoverProps = bindPopover(popupState);
-  const { elType } = getWidgetsCache()?.[elementType.key] ?? { elType: "widget" };
+  const triggerProps = bindTrigger4(popupState);
+  const popoverProps = bindPopover2(popupState);
+  const { elType } = getWidgetsCache2()?.[elementType.key] ?? { elType: "widget" };
   const handleSubmit = ({ label, group }) => {
     const originValue = !overridableValue ? value ?? propType.default : overridableValue?.origin_value ?? {};
     const overridablePropConfig = setOverridableProp({
@@ -2294,8 +3229,8 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Tooltip3, { placement: "top", title: __16("Override Property", "elementor") }, /* @__PURE__ */ React20.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React20.createElement(
-    Popover2,
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(Tooltip5, { placement: "top", title: __23("Override Property", "elementor") }, /* @__PURE__ */ React27.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React27.createElement(
+    Popover4,
     {
       disableScrollLock: true,
       anchorOrigin: {
@@ -2311,7 +3246,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React27.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -2333,11 +3268,11 @@ import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
 
 // src/mcp/save-as-component-tool.ts
 import { DOCUMENT_STRUCTURE_URI, WIDGET_SCHEMA_URI } from "@elementor/editor-canvas";
-import { getContainer as getContainer2, getElementType, getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
+import { getContainer as getContainer3, getElementType, getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import { getMCPByDomain, toolPrompts } from "@elementor/editor-mcp";
 import { AxiosError } from "@elementor/http-client";
 import { z as z6 } from "@elementor/schema";
-import { generateUniqueId as generateUniqueId3 } from "@elementor/utils";
+import { generateUniqueId as generateUniqueId5 } from "@elementor/utils";
 var InputSchema = {
   element_id: z6.string().describe(
     'The unique identifier of the element to save as a component. Use the "list-elements" tool to find available element IDs in the current document.'
@@ -2360,7 +3295,7 @@ var OutputSchema = {
   message: z6.string().optional().describe("Additional information about the operation result"),
   component_uid: z6.string().optional().describe("The unique identifier of the newly created component (only present on success)")
 };
-var ERROR_MESSAGES = {
+var ERROR_MESSAGES2 = {
   ELEMENT_NOT_FOUND: "Element not found. Use 'list-elements' to get valid element IDs.",
   ELEMENT_NOT_ONE_OF_TYPES: (validTypes) => `Element is not one of the following types: ${validTypes.join(", ")}`,
   ELEMENT_IS_LOCKED: "Cannot save a locked element as a component."
@@ -2368,23 +3303,23 @@ var ERROR_MESSAGES = {
 var handleSaveAsComponent = async (params) => {
   const { element_id: elementId, component_name: componentName, overridable_props: overridablePropsInput } = params;
   const validElementTypes = getValidElementTypes();
-  const container = getContainer2(elementId);
+  const container = getContainer3(elementId);
   if (!container) {
-    throw new Error(ERROR_MESSAGES.ELEMENT_NOT_FOUND);
+    throw new Error(ERROR_MESSAGES2.ELEMENT_NOT_FOUND);
   }
   const elType = container.model.get("elType");
   if (!validElementTypes.includes(elType)) {
-    throw new Error(ERROR_MESSAGES.ELEMENT_NOT_ONE_OF_TYPES(validElementTypes));
+    throw new Error(ERROR_MESSAGES2.ELEMENT_NOT_ONE_OF_TYPES(validElementTypes));
   }
   const element = container.model.toJSON({ remove: ["default"] });
   if (element?.isLocked) {
-    throw new Error(ERROR_MESSAGES.ELEMENT_IS_LOCKED);
+    throw new Error(ERROR_MESSAGES2.ELEMENT_IS_LOCKED);
   }
   const overridableProps = overridablePropsInput ? enrichOverridableProps(overridablePropsInput, element) : void 0;
   if (overridableProps) {
     updateElementDataWithOverridableProps(element, overridableProps);
   }
-  const uid = generateUniqueId3("component");
+  const uid = generateUniqueId5("component");
   try {
     await apiClient.validate({
       items: [
@@ -2406,7 +3341,7 @@ var handleSaveAsComponent = async (params) => {
 };
 function enrichOverridableProps(input, rootElement) {
   const enrichedProps = {};
-  const defaultGroupId = generateUniqueId3("group");
+  const defaultGroupId = generateUniqueId5("group");
   Object.entries(input.props).forEach(([, prop]) => {
     const { elementId, propKey } = prop;
     const element = findElementById(rootElement, elementId);
@@ -2427,7 +3362,7 @@ function enrichOverridableProps(input, rootElement) {
         `Property "${propKey}" does not exist in element "${elementId}" (type: ${widgetType}). Available properties: ${availableProps}`
       );
     }
-    const overrideKey = generateUniqueId3("prop");
+    const overrideKey = generateUniqueId5("prop");
     const originValue = element.settings?.[propKey] ? element.settings[propKey] : elementType.propsSchema[propKey].default ?? null;
     const label = generateLabel(propKey);
     enrichedProps[overrideKey] = {
@@ -2485,11 +3420,11 @@ function findElementById(root, targetId) {
   return null;
 }
 function generateLabel(propKey) {
-  const uniqueId = generateUniqueId3("prop");
+  const uniqueId = generateUniqueId5("prop");
   return `${uniqueId} - ${propKey}`;
 }
 function getValidElementTypes() {
-  const types = getWidgetsCache2();
+  const types = getWidgetsCache3();
   if (!types) {
     return [];
   }
@@ -2662,24 +3597,24 @@ function initMcp() {
 
 // src/populate-store.ts
 import { useEffect as useEffect6 } from "react";
-import { __dispatch as dispatch6 } from "@elementor/store";
+import { __dispatch as dispatch13 } from "@elementor/store";
 function PopulateStore() {
   useEffect6(() => {
-    dispatch6(loadComponents());
+    dispatch13(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/actions/remove-component-styles.ts
-import { __dispatch as dispatch7 } from "@elementor/store";
-function removeComponentStyles(id) {
-  apiClient.invalidateComponentConfigCache(id);
-  dispatch7(slice.actions.removeStyles({ id }));
+import { __dispatch as dispatch14 } from "@elementor/store";
+function removeComponentStyles(id2) {
+  apiClient.invalidateComponentConfigCache(id2);
+  dispatch14(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState10, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+import { __getState as getState17, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
 var componentsStylesProvider = createStylesProvider({
   key: "components-styles",
   priority: 100,
@@ -2691,29 +3626,29 @@ var componentsStylesProvider = createStylesProvider({
   ),
   actions: {
     all: () => {
-      return selectFlatStyles(getState10());
+      return selectFlatStyles(getState17());
     },
-    get: (id) => {
-      return selectFlatStyles(getState10()).find((style) => style.id === id) ?? null;
+    get: (id2) => {
+      return selectFlatStyles(getState17()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
-import { updateElementSettings } from "@elementor/editor-elements";
-import { __dispatch as dispatch8, __getState as getState11 } from "@elementor/store";
+import { updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
+import { __dispatch as dispatch15, __getState as getState18 } from "@elementor/store";
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents(getState11());
+  const unpublishedComponents = selectUnpublishedComponents(getState18());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    dispatch8(
+    dispatch15(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -2723,7 +3658,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    dispatch8(slice.actions.resetUnpublished());
+    dispatch15(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -2765,7 +3700,7 @@ function shouldUpdateElement(element, uidToComponentId) {
   return { shouldUpdate: false, newComponentId: null };
 }
 function updateElementComponentId(elementId, componentId) {
-  updateElementSettings({
+  updateElementSettings2({
     id: elementId,
     props: {
       component_instance: {
@@ -2780,7 +3715,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-import { __getState as getState12 } from "@elementor/store";
+import { __getState as getState19 } from "@elementor/store";
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -2788,7 +3723,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps(getState12(), currentDocument.id);
+  const overridableProps = selectOverridableProps(getState19(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -2796,7 +3731,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 import { notify } from "@elementor/editor-notifications";
-import { __getState as getState13 } from "@elementor/store";
+import { __getState as getState20 } from "@elementor/store";
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -2809,7 +3744,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents(getState13());
+    const archivedComponents = selectArchivedComponents(getState20());
     if (!archivedComponents.length) {
       return;
     }
@@ -2842,7 +3777,7 @@ async function updateComponentsBeforeSave({ status, elements }) {
     return;
   }
   await apiClient.updateStatuses(draftIds, "publish");
-  draftIds.forEach((id) => invalidateComponentDocumentData(id));
+  draftIds.forEach((id2) => invalidateComponentDocumentData(id2));
 }
 
 // src/sync/before-save.ts
@@ -2860,6 +3795,7 @@ var beforeSave = ({ container, status }) => {
 function init() {
   stylesRepository.register(componentsStylesProvider);
   registerSlice(slice);
+  registerPanel(panel);
   registerElementType(
     TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
@@ -2875,7 +3811,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __17("Components", "elementor"),
+    label: __24("Components", "elementor"),
     component: Components
   });
   injectIntoTop({
@@ -2895,9 +3831,9 @@ function init() {
     component: ComponentPanelHeader
   });
   registerDataHook("after", "editor/documents/attach-preview", async () => {
-    const { id, config } = getV1CurrentDocument();
-    if (id) {
-      removeComponentStyles(id);
+    const { id: id2, config } = getV1CurrentDocument();
+    if (id2) {
+      removeComponentStyles(id2);
     }
     await loadComponentsAssets(config?.elements ?? []);
   });