@elementor/editor-components 3.35.0-420 → 3.35.0-422

package/dist/index.mjs

@@ -17,7 +17,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __26 } from "@wordpress/i18n";
+import { __ as __27 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -1628,9 +1628,17 @@ function getComponentName() {
 }
 
 // src/components/components-tab/components.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 
+// src/hooks/use-components.ts
+import { __useSelector as useSelector4 } from "@elementor/store";
+var useComponents = () => {
+  const components = useSelector4(selectComponents);
+  const isLoading = useSelector4(selectLoadIsPending);
+  return { components, isLoading };
+};
+
 // src/components/components-tab/component-search.tsx
 import * as React12 from "react";
 import { SearchIcon } from "@elementor/icons";
@@ -1680,62 +1688,17 @@ var ComponentSearch = () => {
 };
 
 // src/components/components-tab/components-list.tsx
-import * as React15 from "react";
-import { ComponentsIcon as ComponentsIcon2, EyeIcon } from "@elementor/icons";
-import { Box as Box11, Divider as Divider3, Icon, Link as Link3, List as List3, Stack as Stack10, Typography as Typography8 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
-
-// src/hooks/use-components.ts
-import { __useSelector as useSelector4 } from "@elementor/store";
-var useComponents = () => {
-  const components = useSelector4(selectComponents);
-  const isLoading = useSelector4(selectLoadIsPending);
-  return { components, isLoading };
-};
+import * as React16 from "react";
+import { useState as useState6 } from "react";
+import { getAngieSdk } from "@elementor/editor-mcp";
+import { AIIcon, ComponentsIcon as ComponentsIcon2 } from "@elementor/icons";
+import { Box as Box11, Button as Button4, Divider as Divider3, Link as Link3, List as List3, Stack as Stack10, Typography as Typography9 } from "@elementor/ui";
+import { __ as __17 } from "@wordpress/i18n";
 
 // src/store/actions/rename-component.ts
+import { getV1DocumentsManager as getV1DocumentsManager4, setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
+import { getAllDescendants } from "@elementor/editor-elements";
 import { __dispatch as dispatch8 } from "@elementor/store";
-var renameComponent = (componentUid, newName) => {
-  dispatch8(slice.actions.rename({ componentUid, name: newName }));
-};
-
-// src/components/components-tab/components-item.tsx
-import * as React13 from "react";
-import { useRef as useRef4 } from "react";
-import { endDragElementFromPanel, startDragElementFromPanel } from "@elementor/editor-canvas";
-import { dropElement } from "@elementor/editor-elements";
-import { EditableField as EditableField2, EllipsisWithTooltip, MenuListItem as MenuListItem3, useEditable as useEditable2, WarningInfotip } from "@elementor/editor-ui";
-import { ComponentsIcon, DotsVerticalIcon as DotsVerticalIcon2 } from "@elementor/icons";
-import {
-  bindMenu as bindMenu2,
-  bindTrigger as bindTrigger3,
-  Box as Box9,
-  IconButton as IconButton5,
-  ListItemButton,
-  ListItemIcon,
-  Menu as Menu2,
-  Stack as Stack8,
-  styled as styled3,
-  Typography as Typography7,
-  usePopupState as usePopupState3
-} from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
-
-// src/store/actions/archive-component.ts
-import { setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
-import { __getStore as getStore } from "@elementor/store";
-var archiveComponent = (componentId) => {
-  const store = getStore();
-  const dispatch18 = store?.dispatch;
-  if (!dispatch18) {
-    return;
-  }
-  dispatch18(slice.actions.archive(componentId));
-  setDocumentModifiedStatus3(true);
-};
-
-// src/store/actions/load-components-assets.ts
-import { isDocumentDirty, setDocumentModifiedStatus as setDocumentModifiedStatus4 } from "@elementor/editor-documents";
 
 // src/create-component-type.ts
 import {
@@ -2010,6 +1973,121 @@ function createComponentModel() {
   });
 }
 
+// src/store/actions/rename-component.ts
+var TITLE_EXTERNAL_CHANGE_COMMAND = "title_external_change";
+var renameComponent = (componentUid, newName) => {
+  dispatch8(slice.actions.rename({ componentUid, name: newName }));
+  setDocumentModifiedStatus3(true);
+  refreshComponentInstanceTitles(componentUid);
+};
+function refreshComponentInstanceTitles(componentUid) {
+  const documentContainer = getDocumentContainer();
+  if (!documentContainer) {
+    return;
+  }
+  const componentInstances = findComponentInstancesByUid(documentContainer, componentUid);
+  componentInstances.forEach((element) => {
+    element.model.trigger?.(TITLE_EXTERNAL_CHANGE_COMMAND);
+  });
+}
+function getDocumentContainer() {
+  const documentsManager = getV1DocumentsManager4();
+  return documentsManager?.getCurrent()?.container;
+}
+function findComponentInstancesByUid(documentContainer, componentUid) {
+  const allDescendants = getAllDescendants(documentContainer);
+  return allDescendants.filter((element) => {
+    const widgetType = element.model.get("widgetType");
+    const editorSettings = element.model.get("editor_settings");
+    const isMatch = widgetType === COMPONENT_WIDGET_TYPE && editorSettings?.component_uid === componentUid;
+    return isMatch;
+  });
+}
+
+// src/components/components-tab/angie-promotion-modal.tsx
+import * as React13 from "react";
+import {
+  Button as Button3,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  ClickAwayListener,
+  CloseButton,
+  Infotip,
+  Typography as Typography7
+} from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
+var ANGIE_INSTALL_URL = "/wp-admin/plugin-install.php?tab=plugin-information&plugin=angie";
+var PLACEHOLDER_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/components-angie-promo.svg";
+var AngiePromotionModal = ({ children, open, onClose }) => {
+  return /* @__PURE__ */ React13.createElement(Infotip, { placement: "right-end", arrow: true, content: /* @__PURE__ */ React13.createElement(AngiePromotionCard, { onClose }), open }, children);
+};
+function AngiePromotionCard({ onClose }) {
+  const handleCtaClick = () => {
+    window.open(ANGIE_INSTALL_URL, "_blank");
+    onClose();
+  };
+  return /* @__PURE__ */ React13.createElement(ClickAwayListener, { disableReactTree: true, mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onClose }, /* @__PURE__ */ React13.createElement(Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
+    CardHeader,
+    {
+      title: __14("Add new component with AI", "elementor"),
+      titleTypographyProps: { variant: "subtitle2" },
+      action: /* @__PURE__ */ React13.createElement(CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    CardMedia,
+    {
+      component: "img",
+      image: PLACEHOLDER_IMAGE_URL,
+      alt: "",
+      sx: { width: "100%", aspectRatio: "16 / 9" }
+    }
+  ), /* @__PURE__ */ React13.createElement(CardContent, null, /* @__PURE__ */ React13.createElement(Typography7, { variant: "body2", color: "text.secondary" }, __14(
+    "Angie our AI assistant can easily create new components and save you the hassle of doing it yourself",
+    "elementor"
+  ))), /* @__PURE__ */ React13.createElement(CardActions, { sx: { justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(Button3, { size: "medium", variant: "contained", color: "accent", onClick: handleCtaClick }, __14("Get Angie", "elementor")))));
+}
+
+// src/components/components-tab/components-item.tsx
+import * as React14 from "react";
+import { useRef as useRef4 } from "react";
+import { endDragElementFromPanel, startDragElementFromPanel } from "@elementor/editor-canvas";
+import { dropElement } from "@elementor/editor-elements";
+import { EditableField as EditableField2, EllipsisWithTooltip, MenuListItem as MenuListItem3, useEditable as useEditable2, WarningInfotip } from "@elementor/editor-ui";
+import { ComponentsIcon, DotsVerticalIcon as DotsVerticalIcon2 } from "@elementor/icons";
+import {
+  bindMenu as bindMenu2,
+  bindTrigger as bindTrigger3,
+  Box as Box9,
+  IconButton as IconButton5,
+  ListItemButton,
+  ListItemIcon,
+  Menu as Menu2,
+  Stack as Stack8,
+  styled as styled3,
+  Typography as Typography8,
+  usePopupState as usePopupState3
+} from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
+
+// src/store/actions/archive-component.ts
+import { setDocumentModifiedStatus as setDocumentModifiedStatus4 } from "@elementor/editor-documents";
+import { __getStore as getStore } from "@elementor/store";
+var archiveComponent = (componentId) => {
+  const store = getStore();
+  const dispatch18 = store?.dispatch;
+  if (!dispatch18) {
+    return;
+  }
+  dispatch18(slice.actions.archive(componentId));
+  setDocumentModifiedStatus4(true);
+};
+
+// src/store/actions/load-components-assets.ts
+import { isDocumentDirty, setDocumentModifiedStatus as setDocumentModifiedStatus5 } from "@elementor/editor-documents";
+
 // src/utils/is-component-instance.ts
 function isComponentInstance(elementModel) {
   return [elementModel.widgetType, elementModel.elType].includes(COMPONENT_WIDGET_TYPE);
@@ -2111,7 +2189,7 @@ async function updateDocumentState(componentIds) {
   );
   const isDrafted = components.some(isDocumentDirty);
   if (isDrafted) {
-    setDocumentModifiedStatus4(true);
+    setDocumentModifiedStatus5(true);
   }
 }
 
@@ -2120,14 +2198,14 @@ import { __getState as getState14 } from "@elementor/store";
 
 // src/components/create-component-form/utils/component-form-schema.ts
 import { z } from "@elementor/schema";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
-var baseComponentSchema = z.string().trim().max(MAX_NAME_LENGTH, __14("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var baseComponentSchema = z.string().trim().max(MAX_NAME_LENGTH, __15("Component name is too long. Please keep it under 50 characters.", "elementor"));
 var createBaseComponentSchema = (existingNames) => {
   return z.object({
     componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
-      message: __14("Component name already exists", "elementor")
+      message: __15("Component name already exists", "elementor")
     })
   });
 };
@@ -2135,9 +2213,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: __14("Component name is required.", "elementor")
+      message: __15("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: __14("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: __15("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -2265,7 +2343,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
     }
     archiveComponent(component.id);
   };
-  return /* @__PURE__ */ React13.createElement(Stack8, null, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(Stack8, null, /* @__PURE__ */ React14.createElement(
     WarningInfotip,
     {
       open: Boolean(error),
@@ -2274,7 +2352,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
       width: itemRef.current?.getBoundingClientRect().width,
       offset: [0, -15]
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       ListItemButton,
       {
         draggable: true,
@@ -2293,7 +2371,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           gap: 1
         }
       },
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React14.createElement(
         Box9,
         {
           display: "flex",
@@ -2303,28 +2381,28 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           flexGrow: 1,
           onClick: handleClick
         },
-        /* @__PURE__ */ React13.createElement(ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React13.createElement(ComponentsIcon, { fontSize: "tiny" })),
-        /* @__PURE__ */ React13.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React13.createElement(Box9, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React13.createElement(
+        /* @__PURE__ */ React14.createElement(ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React14.createElement(ComponentsIcon, { fontSize: "tiny" })),
+        /* @__PURE__ */ React14.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React14.createElement(Box9, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React14.createElement(
           EditableField2,
           {
             ref: editableRef,
-            as: Typography7,
+            as: Typography8,
             variant: "caption",
             ...getEditableProps()
           }
-        ) : /* @__PURE__ */ React13.createElement(
+        ) : /* @__PURE__ */ React14.createElement(
           EllipsisWithTooltip,
           {
             title: component.name,
-            as: Typography7,
+            as: Typography8,
             variant: "caption",
             color: "text.primary"
           }
         )))
       ),
-      /* @__PURE__ */ React13.createElement(IconButton5, { size: "tiny", ...bindTrigger3(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(DotsVerticalIcon2, { fontSize: "tiny" }))
+      /* @__PURE__ */ React14.createElement(IconButton5, { size: "tiny", ...bindTrigger3(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React14.createElement(DotsVerticalIcon2, { fontSize: "tiny" }))
     )
-  ), /* @__PURE__ */ React13.createElement(
+  ), /* @__PURE__ */ React14.createElement(
     Menu2,
     {
       ...bindMenu2(popupState),
@@ -2337,7 +2415,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       MenuListItem3,
       {
         sx: { minWidth: "160px" },
@@ -2346,9 +2424,9 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           openEditMode();
         }
       },
-      __15("Rename", "elementor")
+      __16("Rename", "elementor")
     ),
-    /* @__PURE__ */ React13.createElement(MenuListItem3, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, /* @__PURE__ */ React13.createElement(Typography7, { variant: "caption", sx: { color: "error.light" } }, __15("Archive", "elementor")))
+    /* @__PURE__ */ React14.createElement(MenuListItem3, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, /* @__PURE__ */ React14.createElement(Typography8, { variant: "caption", sx: { color: "error.light" } }, __16("Archive", "elementor")))
   ));
 };
 var addComponentToPage = (model) => {
@@ -2393,12 +2471,12 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
 };
 
 // src/components/components-tab/loading-components.tsx
-import * as React14 from "react";
+import * as React15 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__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     Stack9,
     {
       "aria-label": "Loading components",
@@ -2420,32 +2498,37 @@ var LoadingComponents = () => {
         }
       }
     },
-    rows.map((row) => /* @__PURE__ */ React14.createElement(
+    rows.map((row) => /* @__PURE__ */ React15.createElement(
       ListItemButton2,
       {
         key: row,
         sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
         shape: "rounded"
       },
-      /* @__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" }))
+      /* @__PURE__ */ React15.createElement(Box10, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React15.createElement(Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React15.createElement(Skeleton, { variant: "text", width: "100%", height: "36px" }))
     ))
   );
 };
 
 // src/components/components-tab/components-list.tsx
+var LEARN_MORE_URL = "http://go.elementor.com/components-guide-article";
+var SUBTITLE_OVERRIDE_SX = {
+  fontSize: "0.875rem !important",
+  fontWeight: "500 !important"
+};
 function ComponentsList() {
   const { components, isLoading, searchValue } = useFilteredComponents();
   if (isLoading) {
-    return /* @__PURE__ */ React15.createElement(LoadingComponents, null);
+    return /* @__PURE__ */ React16.createElement(LoadingComponents, null);
   }
   const isEmpty = !components || components.length === 0;
   if (isEmpty) {
     if (searchValue.length > 0) {
-      return /* @__PURE__ */ React15.createElement(EmptySearchResult, null);
+      return /* @__PURE__ */ React16.createElement(EmptySearchResult, null);
     }
-    return /* @__PURE__ */ React15.createElement(EmptyState, null);
+    return /* @__PURE__ */ React16.createElement(EmptyState, null);
   }
-  return /* @__PURE__ */ React15.createElement(List3, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(List3, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React16.createElement(
     ComponentItem,
     {
       key: component.uid,
@@ -2457,41 +2540,62 @@ function ComponentsList() {
   )));
 }
 var EmptyState = () => {
-  return /* @__PURE__ */ React15.createElement(
+  const [isAngieModalOpen, setIsAngieModalOpen] = useState6(false);
+  const handleCreateWithAI = () => {
+    const sdk = getAngieSdk();
+    if (sdk.isAngieReady()) {
+      sdk.triggerAngie({
+        prompt: __17(
+          "Create a [hero/testimonial/product card/CTA/feature] component for my [business type]. Include [describe what you want]",
+          "elementor"
+        ),
+        context: { source: "components-panel-empty-state" }
+      });
+    } else {
+      setIsAngieModalOpen(true);
+    }
+  };
+  return /* @__PURE__ */ React16.createElement(
     Stack10,
     {
       alignItems: "center",
-      justifyContent: "center",
+      justifyContent: "start",
       height: "100%",
-      sx: { px: 2.5, pt: 10 },
-      gap: 1.75,
+      sx: { px: 2, py: 4 },
+      gap: 2,
       overflow: "hidden"
     },
-    /* @__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" }, __16("Text that explains that there are no Components yet.", "elementor")),
-    /* @__PURE__ */ React15.createElement(Typography8, { variant: "caption", align: "center", color: "text.secondary" }, __16(
-      "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
-      "elementor"
-    )),
-    /* @__PURE__ */ React15.createElement(Divider3, { sx: { width: "100%" }, color: "text.secondary" }),
-    /* @__PURE__ */ React15.createElement(Typography8, { align: "left", variant: "caption", color: "text.secondary" }, __16("To create a component, first design it, then choose one of three options:", "elementor")),
-    /* @__PURE__ */ React15.createElement(
-      Typography8,
+    /* @__PURE__ */ React16.createElement(Stack10, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __17("No components yet", "elementor")), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, __17("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React16.createElement("br", null), __17("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React16.createElement(
+      Link3,
       {
-        align: "left",
+        href: LEARN_MORE_URL,
+        target: "_blank",
+        rel: "noopener noreferrer",
         variant: "caption",
-        color: "text.secondary",
-        sx: { display: "flex", flexDirection: "column" }
+        color: "info.main"
       },
-      /* @__PURE__ */ React15.createElement("span", null, __16("1. Right-click and select Create Component", "elementor")),
-      /* @__PURE__ */ React15.createElement("span", null, __16("2. Use the component icon in the Structure panel", "elementor")),
-      /* @__PURE__ */ React15.createElement("span", null, __16("3. Use the component icon in the Edit panel header", "elementor"))
-    )
+      __17("Learn more about components", "elementor")
+    )),
+    /* @__PURE__ */ React16.createElement(Divider3, { sx: { width: "100%" } }),
+    /* @__PURE__ */ React16.createElement(Stack10, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __17("Create your first one:", "elementor")), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, __17(
+      'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
+      "elementor"
+    )), /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "secondary" }, __17("Or", "elementor")), /* @__PURE__ */ React16.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React16.createElement(
+      Button4,
+      {
+        color: "secondary",
+        variant: "outlined",
+        size: "small",
+        onClick: handleCreateWithAI,
+        endIcon: /* @__PURE__ */ React16.createElement(AIIcon, null)
+      },
+      __17("Create component with AI", "elementor")
+    )))
   );
 };
 var EmptySearchResult = () => {
   const { searchValue, clearSearch } = useSearch();
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     Stack10,
     {
       color: "text.secondary",
@@ -2501,28 +2605,29 @@ var EmptySearchResult = () => {
       overflow: "hidden",
       justifySelf: "center"
     },
-    /* @__PURE__ */ React15.createElement(ComponentsIcon2, null),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(ComponentsIcon2, null),
+    /* @__PURE__ */ React16.createElement(
       Box11,
       {
         sx: {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "subtitle2", color: "inherit" }, __16("Sorry, nothing matched", "elementor")),
-      searchValue && /* @__PURE__ */ React15.createElement(
-        Typography8,
+      /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, __17("Sorry, nothing matched", "elementor")),
+      searchValue && /* @__PURE__ */ React16.createElement(
+        Typography9,
         {
           variant: "subtitle2",
           color: "inherit",
           sx: {
+            ...SUBTITLE_OVERRIDE_SX,
             display: "flex",
             width: "100%",
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React15.createElement("span", null, "\u201C"),
-        /* @__PURE__ */ React15.createElement(
+        /* @__PURE__ */ React16.createElement("span", null, "\u201C"),
+        /* @__PURE__ */ React16.createElement(
           "span",
           {
             style: {
@@ -2533,11 +2638,11 @@ var EmptySearchResult = () => {
           },
           searchValue
         ),
-        /* @__PURE__ */ React15.createElement("span", null, "\u201D.")
+        /* @__PURE__ */ React16.createElement("span", null, "\u201D.")
       )
     ),
-    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, __16("Try something else.", "elementor")),
-    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React15.createElement(Link3, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __16("Clear & try again", "elementor")))
+    /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "inherit" }, __17("Try something else.", "elementor")),
+    /* @__PURE__ */ React16.createElement(Typography9, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(Link3, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __17("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -2553,34 +2658,39 @@ var useFilteredComponents = () => {
 };
 
 // src/components/components-tab/components.tsx
+var ComponentsContent = () => {
+  const { components, isLoading } = useComponents();
+  const hasComponents = !isLoading && components.length > 0;
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, hasComponents && /* @__PURE__ */ React17.createElement(ComponentSearch, null), /* @__PURE__ */ React17.createElement(ComponentsList, null));
+};
 var Components = () => {
-  return /* @__PURE__ */ React16.createElement(ThemeProvider2, null, /* @__PURE__ */ React16.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React16.createElement(ComponentSearch, null), /* @__PURE__ */ React16.createElement(ComponentsList, null)));
+  return /* @__PURE__ */ React17.createElement(ThemeProvider2, null, /* @__PURE__ */ React17.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React17.createElement(ComponentsContent, null)));
 };
 
 // src/components/consts.ts
 var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 
 // src/components/create-component-form/create-component-form.tsx
-import * as React17 from "react";
-import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef5, useState as useState7 } from "react";
+import * as React18 from "react";
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef5, useState as useState8 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
 import { notify as notify2 } from "@elementor/editor-notifications";
 import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
 import { StarIcon } from "@elementor/icons";
 import { __getState as getState15 } from "@elementor/store";
-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 __18 } from "@wordpress/i18n";
+import { Alert as Alert2, Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Snackbar, Stack as Stack11, TextField as TextField3, Typography as Typography10 } from "@elementor/ui";
+import { __ as __19 } from "@wordpress/i18n";
 
 // src/prevent-non-atomic-nesting.ts
 import { isAtomicWidget } from "@elementor/editor-canvas";
-import { getAllDescendants, getElementType } from "@elementor/editor-elements";
+import { getAllDescendants as getAllDescendants2, getElementType } from "@elementor/editor-elements";
 import { notify } from "@elementor/editor-notifications";
 import { blockCommand } from "@elementor/editor-v1-adapters";
 import { __getStore as getStore2 } from "@elementor/store";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: __17("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: __18("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -2631,7 +2741,7 @@ function blockNonAtomicMove(args) {
     if (!container) {
       return false;
     }
-    const allElements = getAllDescendants(container);
+    const allElements = getAllDescendants2(container);
     return allElements.some((element) => !isAtomicWidget(element));
   });
   if (hasNonAtomicElement) {
@@ -2711,10 +2821,10 @@ async function createUnpublishedComponent(name, element, eventData, overridableP
 }
 
 // src/components/create-component-form/hooks/use-form.ts
-import { useMemo as useMemo2, useState as useState6 } from "react";
+import { useMemo as useMemo2, useState as useState7 } from "react";
 var useForm = (initialValues) => {
-  const [values, setValues] = useState6(initialValues);
-  const [errors, setErrors] = useState6({});
+  const [values, setValues] = useState7(initialValues);
+  const [errors, setErrors] = useState7({});
   const isValid = useMemo2(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
@@ -2790,9 +2900,9 @@ function countNestedElements(container) {
 
 // src/components/create-component-form/create-component-form.tsx
 function CreateComponentForm() {
-  const [element, setElement] = useState7(null);
-  const [anchorPosition, setAnchorPosition] = useState7();
-  const [resultNotification, setResultNotification] = useState7(null);
+  const [element, setElement] = useState8(null);
+  const [anchorPosition, setAnchorPosition] = useState8();
+  const [resultNotification, setResultNotification] = useState8(null);
   const eventData = useRef5(null);
   useEffect2(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
@@ -2801,7 +2911,7 @@ function CreateComponentForm() {
       if (nonAtomicElements.length > 0) {
         notify2({
           type: "default",
-          message: __18(
+          message: __19(
             "Components require atomic elements only. Remove widgets to create this component.",
             "elementor"
           ),
@@ -2841,12 +2951,12 @@ function CreateComponentForm() {
       setResultNotification({
         show: true,
         // Translators: %1$s: Component name, %2$s: Component UID
-        message: __18("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
+        message: __19("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 = __18("Failed to save component. Please try again.", "elementor");
+      const errorMessage = __19("Failed to save component. Please try again.", "elementor");
       setResultNotification({
         show: true,
         message: errorMessage,
@@ -2865,7 +2975,7 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React17.createElement(ThemeProvider3, null, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(ThemeProvider3, null, /* @__PURE__ */ React18.createElement(
     Popover3,
     {
       open: element !== null,
@@ -2873,7 +2983,7 @@ function CreateComponentForm() {
       anchorReference: "anchorPosition",
       anchorPosition
     },
-    element !== null && /* @__PURE__ */ React17.createElement(
+    element !== null && /* @__PURE__ */ React18.createElement(
       Form2,
       {
         initialValues: { componentName: element.elementLabel },
@@ -2881,7 +2991,7 @@ function CreateComponentForm() {
         closePopup: cancelSave
       }
     )
-  ), /* @__PURE__ */ React17.createElement(Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React18.createElement(Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React18.createElement(
     Alert2,
     {
       onClose: () => setResultNotification(null),
@@ -2917,13 +3027,13 @@ var Form2 = ({
     }
   };
   const texts = {
-    heading: __18("Save as a component", "elementor"),
-    name: __18("Name", "elementor"),
-    cancel: __18("Cancel", "elementor"),
-    create: __18("Create", "elementor")
+    heading: __19("Save as a component", "elementor"),
+    name: __19("Name", "elementor"),
+    cancel: __19("Cancel", "elementor"),
+    create: __19("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React17.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React17.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React18.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React18.createElement(
     Stack11,
     {
       direction: "row",
@@ -2932,9 +3042,9 @@ var Form2 = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__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(
+    /* @__PURE__ */ React18.createElement(StarIcon, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React18.createElement(Typography10, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
+  ), /* @__PURE__ */ React18.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React18.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(FormLabel2, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React18.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(
     TextField3,
     {
       id: nameInputId,
@@ -2946,19 +3056,19 @@ var Form2 = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__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))));
+  ))), /* @__PURE__ */ React18.createElement(Stack11, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React18.createElement(Button5, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React18.createElement(Button5, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
 };
 
 // src/components/edit-component/edit-component.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { useEffect as useEffect5 } from "react";
-import { getV1DocumentsManager as getV1DocumentsManager4 } from "@elementor/editor-documents";
+import { getV1DocumentsManager as getV1DocumentsManager5 } from "@elementor/editor-documents";
 import { __privateListenTo as listenTo, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
 import { __useSelector as useSelector5 } from "@elementor/store";
 import { throttle as throttle2 } from "@elementor/utils";
 
 // src/store/actions/update-current-component.ts
-import { setDocumentModifiedStatus as setDocumentModifiedStatus5 } from "@elementor/editor-documents";
+import { setDocumentModifiedStatus as setDocumentModifiedStatus6 } from "@elementor/editor-documents";
 import { __getStore as getStore3 } from "@elementor/store";
 function updateCurrentComponent({
   path,
@@ -2973,10 +3083,10 @@ function updateCurrentComponent({
 }
 
 // src/components/edit-component/component-modal.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 
 // src/hooks/use-canvas-document.ts
 import { getCanvasIframeDocument } from "@elementor/editor-canvas";
@@ -2986,10 +3096,10 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-element-rect.ts
-import { useEffect as useEffect3, useState as useState8 } from "react";
+import { useEffect as useEffect3, useState as useState9 } from "react";
 import { throttle } from "@elementor/utils";
 function useElementRect(element) {
-  const [rect, setRect] = useState8(new DOMRect(0, 0, 0, 0));
+  const [rect, setRect] = useState9(new DOMRect(0, 0, 0, 0));
   const onChange = throttle(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
@@ -3066,7 +3176,7 @@ function ComponentModal({ element, onClose }) {
     return null;
   }
   return createPortal(
-    /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(BlockEditPage, null), /* @__PURE__ */ React18.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
+    /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(BlockEditPage, null), /* @__PURE__ */ React19.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
     canvasDocument.body
   );
 }
@@ -3090,7 +3200,7 @@ function Backdrop({ canvas, element, onClose }) {
       onClose();
     }
   };
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "div",
     {
       style: backdropStyle,
@@ -3098,7 +3208,7 @@ function Backdrop({ canvas, element, onClose }) {
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": __19("Exit component editing mode", "elementor")
+      "aria-label": __20("Exit component editing mode", "elementor")
     }
   );
 }
@@ -3148,7 +3258,7 @@ function BlockEditPage() {
 		}
 	}
 	`;
-  return /* @__PURE__ */ React18.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
+  return /* @__PURE__ */ React19.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
 }
 
 // src/components/edit-component/edit-component.tsx
@@ -3161,10 +3271,10 @@ function EditComponent() {
   if (!elementDom) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement(ComponentModal, { element: elementDom, onClose });
+  return /* @__PURE__ */ React20.createElement(ComponentModal, { element: elementDom, onClose });
 }
 function useHandleDocumentSwitches() {
-  const documentsManager = getV1DocumentsManager4();
+  const documentsManager = getV1DocumentsManager5();
   const currentComponentId = useCurrentComponentId();
   const path = useSelector5(selectPath);
   useEffect5(() => {
@@ -3208,7 +3318,7 @@ function getInstanceTitle(instanceId, path) {
   if (!instanceId) {
     return void 0;
   }
-  const documentsManager = getV1DocumentsManager4();
+  const documentsManager = getV1DocumentsManager5();
   const parentDocId = path.at(-1)?.componentId ?? documentsManager.getInitialId();
   const parentDoc = documentsManager.get(parentDocId);
   const parentContainer = parentDoc?.container;
@@ -3222,7 +3332,7 @@ function getComponentDOMElement(id2) {
   if (!id2) {
     return null;
   }
-  const documentsManager = getV1DocumentsManager4();
+  const documentsManager = getV1DocumentsManager5();
   const currentComponent = documentsManager.get(id2);
   const widget = currentComponent?.container;
   const container = widget?.view?.el?.children?.[0] ?? null;
@@ -3231,33 +3341,33 @@ function getComponentDOMElement(id2) {
 }
 
 // src/components/in-edit-mode.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import { closeDialog, openDialog } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Box as Box12, Button as Button4, DialogActions, DialogContent, DialogHeader, Icon as Icon2, Stack as Stack12, Typography as Typography10 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
+import { Box as Box12, Button as Button6, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack12, Typography as Typography11 } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
-    component: /* @__PURE__ */ React20.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React21.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __20("%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" }, __20(
+  const content = __21("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React21.createElement(Box12, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React21.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React21.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React21.createElement(Typography11, { variant: "subtitle1" }, content))), /* @__PURE__ */ React21.createElement(DialogContent, null, /* @__PURE__ */ React21.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React21.createElement(Typography11, { variant: "body2" }, __21(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React20.createElement(DialogActions, null, /* @__PURE__ */ React20.createElement(Button4, { color: "secondary", variant: "contained", onClick: closeDialog }, __20("Close", "elementor"))))));
+  )), /* @__PURE__ */ React21.createElement(DialogActions, null, /* @__PURE__ */ React21.createElement(Button6, { color: "secondary", variant: "contained", onClick: closeDialog }, __21("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import { ControlAdornmentsProvider } from "@elementor/editor-controls";
 import { getFieldIndicators } from "@elementor/editor-editing-panel";
 import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
 import { PanelBody as PanelBody2, PanelHeader as PanelHeader2, PanelHeaderTitle as PanelHeaderTitle2 } from "@elementor/editor-panels";
 import { ComponentsIcon as ComponentsIcon3, PencilIcon as PencilIcon2 } from "@elementor/icons";
 import { IconButton as IconButton6, Stack as Stack17, Tooltip as Tooltip4 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 
 // src/hooks/use-component-instance-settings.ts
 import { useElement } from "@elementor/editor-editing-panel";
@@ -3323,12 +3433,12 @@ function useComponentInstanceSettings() {
 }
 
 // src/components/instance-editing-panel/empty-state.tsx
-import * as React21 from "react";
+import * as React22 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 __21 } from "@wordpress/i18n";
+import { Button as Button7, Stack as Stack13, Typography as Typography12 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     Stack13,
     {
       alignItems: "center",
@@ -3338,25 +3448,25 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__PURE__ */ React21.createElement(ComponentPropListIcon4, { fontSize: "large" }),
-    /* @__PURE__ */ React21.createElement(Typography11, { align: "center", variant: "subtitle2" }, __21("No properties yet", "elementor")),
-    /* @__PURE__ */ React21.createElement(Typography11, { align: "center", variant: "caption", maxWidth: "170px" }, __21(
+    /* @__PURE__ */ React22.createElement(ComponentPropListIcon4, { fontSize: "large" }),
+    /* @__PURE__ */ React22.createElement(Typography12, { align: "center", variant: "subtitle2" }, __22("No properties yet", "elementor")),
+    /* @__PURE__ */ React22.createElement(Typography12, { align: "center", variant: "caption", maxWidth: "170px" }, __22(
       "Edit the component to add properties, manage them or update the design across all instances.",
       "elementor"
     )),
-    /* @__PURE__ */ React21.createElement(Button5, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React21.createElement(PencilIcon, { fontSize: "small" }), __21("Edit component", "elementor"))
+    /* @__PURE__ */ React22.createElement(Button7, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React22.createElement(PencilIcon, { fontSize: "small" }), __22("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
 import { Box as Box13, Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack16 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 import { PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
 import {
   controlsRegistry,
@@ -3450,16 +3560,16 @@ function getPropType({ widgetType, propKey }) {
 }
 
 // src/components/control-label.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
 import { Stack as Stack14 } from "@elementor/ui";
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React22.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React22.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React22.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React23.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React23.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React23.createElement(ControlAdornments, null));
 };
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 function OverridePropControl({ overridableProp, overrides }) {
-  return /* @__PURE__ */ React23.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React23.createElement(OverrideControl, { overridableProp, overrides }));
+  return /* @__PURE__ */ React24.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React24.createElement(OverrideControl, { overridableProp, overrides }));
 }
 function OverrideControl({ overridableProp, overrides }) {
   const componentId = useCurrentComponentId();
@@ -3506,7 +3616,7 @@ function OverrideControl({ overridableProp, overrides }) {
       updateOverridableProp(componentId, overridableValue, { elType, widgetType, propKey });
     }
   };
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     PropProvider,
     {
       propType: propTypeSchema,
@@ -3516,7 +3626,7 @@ function OverrideControl({ overridableProp, overrides }) {
         return false;
       }
     },
-    /* @__PURE__ */ React23.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React23.createElement(Stack15, { direction: "column", gap: 1, mb: 1.5 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, overridableProp.label), getControl(controls, overridableProp?.originPropFields ?? overridableProp)))
+    /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React24.createElement(Stack15, { direction: "column", gap: 1, mb: 1.5 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, overridableProp.label), getControl(controls, overridableProp?.originPropFields ?? overridableProp)))
   );
 }
 function getPropValue(value) {
@@ -3569,7 +3679,7 @@ function createOverrideValue(overrideKey, overrideValue, componentId) {
 function getControl(controls, originPropFields) {
   const ControlComponent = controlsRegistry.get(controls[originPropFields.propKey].value.type);
   const controlProps = controls[originPropFields.propKey].value.props;
-  return /* @__PURE__ */ React23.createElement(ControlComponent, { ...controlProps });
+  return /* @__PURE__ */ React24.createElement(ControlComponent, { ...controlProps });
 }
 
 // src/components/instance-editing-panel/override-props-group.tsx
@@ -3582,7 +3692,7 @@ function OverridePropsGroup({ group, props, overrides }) {
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React24.createElement(Box13, { "aria-label": `${title} section` }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(Box13, { "aria-label": `${title} section` }, /* @__PURE__ */ React25.createElement(
     ListItemButton3,
     {
       id: labelId,
@@ -3592,7 +3702,7 @@ function OverridePropsGroup({ group, props, overrides }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React24.createElement(Stack16, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React25.createElement(Stack16, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React25.createElement(
       ListItemText,
       {
         secondary: title,
@@ -3600,8 +3710,8 @@ function OverridePropsGroup({ group, props, overrides }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React24.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React24.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React24.createElement(Stack16, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React25.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React25.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React25.createElement(Stack16, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React25.createElement(
     OverridePropControl,
     {
       key: overrideKey,
@@ -3622,12 +3732,12 @@ function InstanceEditingPanel() {
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = __22("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = __23("Edit %s", "elementor").replace("%s", component.name);
   const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React25.createElement(Stack17, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React25.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React25.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React25.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React25.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React25.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React25.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React25.createElement(PanelBody2, null, /* @__PURE__ */ React25.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React25.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React25.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React26.createElement(Stack17, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React26.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React26.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React26.createElement(PanelHeaderTitle2, null, component.name)), /* @__PURE__ */ React26.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React26.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React26.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React26.createElement(PanelBody2, null, /* @__PURE__ */ React26.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React26.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React26.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React26.createElement(
     OverridePropsGroup,
     {
       key: group.id,
@@ -3639,16 +3749,16 @@ function InstanceEditingPanel() {
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { ControlReplacementsProvider, PropKeyProvider as PropKeyProvider2, PropProvider as PropProvider2, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 import { createTopLevelObjectType as createTopLevelObjectType2, useElement as useElement2 } from "@elementor/editor-editing-panel";
 
 // src/provider/overridable-prop-context.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var OverridablePropContext = createContext2(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React26.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React27.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => useContext2(OverridablePropContext)?.value;
 
@@ -3687,7 +3797,7 @@ function OverridablePropControl({
   });
   const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React27.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React28.createElement(
     PropProvider2,
     {
       ...propContext,
@@ -3698,17 +3808,17 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React27.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React27.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React27.createElement(OriginalControl, { ...props })))
+    /* @__PURE__ */ React28.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React28.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React28.createElement(OriginalControl, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { useElement as useElement3 } from "@elementor/editor-editing-panel";
 import { getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Popover4, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __24 } from "@wordpress/i18n";
+import { __ as __25 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
 import { __dispatch as dispatch13, __getState as getState17 } from "@elementor/store";
@@ -3775,11 +3885,11 @@ function setOverridableProp({
 }
 
 // src/components/overridable-props/indicator.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { forwardRef as forwardRef2 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
 import { Box as Box14, styled as styled4 } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
 var IconContainer = styled4(Box14)`
 	pointer-events: none;
@@ -3835,13 +3945,13 @@ var Content = styled4(Box14)`
 		}
 	}
 `;
-var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React28.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React28.createElement(
+var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React29.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React29.createElement(
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? __23("Overridable property", "elementor") : __23("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? __24("Overridable property", "elementor") : __24("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React28.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React28.createElement(PlusIcon, { fontSize: SIZE2 })
+  isOverridable ? /* @__PURE__ */ React29.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React29.createElement(PlusIcon, { fontSize: SIZE2 })
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
@@ -3866,7 +3976,7 @@ function OverridablePropIndicator() {
   if (!isPropAllowed(bind) || !componentId || !overridableProps) {
     return null;
   }
-  return /* @__PURE__ */ React29.createElement(Content2, { componentId, overridableProps });
+  return /* @__PURE__ */ React30.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
@@ -3910,7 +4020,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Tooltip5, { placement: "top", title: __24("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(Tooltip5, { placement: "top", title: __25("Override Property", "elementor") }, /* @__PURE__ */ React30.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React30.createElement(
     Popover4,
     {
       disableScrollLock: true,
@@ -3927,7 +4037,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -3945,7 +4055,7 @@ function isPropAllowed(bind) {
 }
 
 // src/hooks/regenerate-override-keys.ts
-import { getAllDescendants as getAllDescendants2, getContainer as getContainer3, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
+import { getAllDescendants as getAllDescendants3, getContainer as getContainer3, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 import { generateUniqueId as generateUniqueId5 } from "@elementor/utils";
 function initRegenerateOverrideKeys() {
@@ -3970,7 +4080,7 @@ function regenerateOverrideKeysRecursive(elementId) {
   if (!container) {
     return;
   }
-  getAllDescendants2(container).forEach(regenerateOverrideKeys);
+  getAllDescendants3(container).forEach(regenerateOverrideKeys);
 }
 function regenerateOverrideKeys(element) {
   if (!isComponentInstance(element.model.toJSON())) {
@@ -4369,15 +4479,15 @@ function PopulateStore() {
 }
 
 // src/prevent-circular-nesting.ts
-import { getAllDescendants as getAllDescendants3 } from "@elementor/editor-elements";
+import { getAllDescendants as getAllDescendants4 } from "@elementor/editor-elements";
 import { notify as notify3 } from "@elementor/editor-notifications";
 import { blockCommand as blockCommand2 } from "@elementor/editor-v1-adapters";
 import { __getState as getState19 } from "@elementor/store";
-import { __ as __25 } from "@wordpress/i18n";
+import { __ as __26 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: __25("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: __26("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -4464,7 +4574,7 @@ function blockCircularMove(args) {
     if (!container) {
       return false;
     }
-    const allElements = getAllDescendants3(container);
+    const allElements = getAllDescendants4(container);
     return allElements.some((element) => {
       const componentId = extractComponentIdFromContainer(element);
       if (componentId === null) {
@@ -4718,7 +4828,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __26("Components", "elementor"),
+    label: __27("Components", "elementor"),
     component: Components
   });
   injectIntoTop({