@elementor/editor-components 3.35.0-377 → 3.35.0-379

package/dist/index.mjs

@@ -16,7 +16,7 @@ import { injectTab } from "@elementor/editor-elements-panel";
 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 __18 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer, RenderContext } from "@elementor/editor-canvas";
@@ -316,11 +316,12 @@ var componentOverrideTransformer = createTransformer3((override) => {
 });
 
 // src/components/component-panel-header/component-panel-header.tsx
-import * as React2 from "react";
+import * as React3 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 Box3, Divider, IconButton, Stack as Stack2, Tooltip, Typography as Typography2 } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/hooks/use-navigate-back.ts
 import { useCallback } from "react";
@@ -353,28 +354,77 @@ function useNavigateBack() {
   }, [path, documentsManager]);
 }
 
-// src/components/component-panel-header/component-badge.tsx
+// src/components/components-tab/component-introduction.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 { PopoverContent } from "@elementor/editor-controls";
+import { PopoverHeader } from "@elementor/editor-ui";
+import { Box, Button, Image, Popover, Stack, Typography } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
-var ComponentsBadge = ({ overridesCount }) => {
-  const prevCount = usePrevious(overridesCount);
-  const isFirstOverride = prevCount === 0 && overridesCount === 1;
+var ComponentIntroduction = ({
+  anchorRef,
+  shouldShowIntroduction,
+  onClose
+}) => {
+  if (!anchorRef.current || !shouldShowIntroduction) {
+    return null;
+  }
   return /* @__PURE__ */ React.createElement(
-    StyledBadge,
+    Popover,
     {
-      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__ */ React.createElement(Box, { sx: { width: "296px" } }, /* @__PURE__ */ React.createElement(PopoverHeader, { title: __("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        sx: { width: "296px", height: "160px" },
+        src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
+        alt: ""
+      }
+    ), /* @__PURE__ */ React.createElement(PopoverContent, null, /* @__PURE__ */ React.createElement(Stack, { gap: 1, sx: { p: 2 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
+      "Click next to any setting you want users to customize - like text, images, or links.",
+      "elementor"
+    )), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
+      "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
+      "elementor"
+    )), /* @__PURE__ */ React.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(Button, { size: "medium", variant: "contained", onClick: onClose }, __("Got it", "elementor"))))))
   );
 };
+
+// src/components/component-panel-header/component-badge.tsx
+import * as React2 from "react";
+import { useEffect, useRef } from "react";
+import { ComponentPropListIcon } from "@elementor/icons";
+import { Badge, Box as Box2, keyframes, styled, ToggleButton } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+var ComponentsBadge = React2.forwardRef(
+  ({ overridesCount }, ref) => {
+    const prevCount = usePrevious(overridesCount);
+    const isFirstOverride = prevCount === 0 && overridesCount === 1;
+    return /* @__PURE__ */ React2.createElement(
+      StyledBadge,
+      {
+        ref,
+        color: "primary",
+        key: overridesCount,
+        invisible: overridesCount === 0,
+        animate: isFirstOverride,
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        badgeContent: /* @__PURE__ */ React2.createElement(Box2, { sx: { animation: !isFirstOverride ? `${slideUp} 300ms ease-out` : "none" } }, overridesCount)
+      },
+      /* @__PURE__ */ React2.createElement(ToggleButton, { value: "overrides", size: "tiny", "aria-label": __2("View overrides", "elementor") }, /* @__PURE__ */ React2.createElement(ComponentPropListIcon, { fontSize: "tiny" }))
+    );
+  }
+);
 var StyledBadge = styled(Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
   ({ theme, animate }) => ({
     "& .MuiBadge-badge": {
@@ -416,26 +466,41 @@ function useOverridableProps(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] = React3.useState(!isMessageSuppressed);
   const overridesCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
+  const anchorRef = React3.useRef(null);
   if (!currentComponentId) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(Box2, null, /* @__PURE__ */ React2.createElement(
-    Stack,
+  const handleCloseIntroduction = () => {
+    suppressMessage();
+    setShouldShowIntroduction(false);
+  };
+  return /* @__PURE__ */ React3.createElement(Box3, null, /* @__PURE__ */ React3.createElement(
+    Stack2,
     {
       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__ */ React3.createElement(Stack2, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React3.createElement(Tooltip, { title: __3("Back", "elementor") }, /* @__PURE__ */ React3.createElement(IconButton, { size: "tiny", onClick: onBack, "aria-label": __3("Back", "elementor") }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React3.createElement(Stack2, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React3.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React3.createElement(Typography2, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
+    /* @__PURE__ */ React3.createElement(ComponentsBadge, { overridesCount, ref: anchorRef })
+  ), /* @__PURE__ */ React3.createElement(Divider, null), /* @__PURE__ */ React3.createElement(
+    ComponentIntroduction,
+    {
+      anchorRef,
+      shouldShowIntroduction,
+      onClose: handleCloseIntroduction
+    }
+  ));
 };
 function getComponentName() {
   const documentsManager = getV1DocumentsManager3();
@@ -444,17 +509,17 @@ function getComponentName() {
 }
 
 // src/components/components-tab/components.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { ThemeProvider } from "@elementor/editor-ui";
 
 // src/components/components-tab/component-search.tsx
-import * as React4 from "react";
+import * as React5 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 Box4, InputAdornment, Stack as Stack3, TextField } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/components/components-tab/search-provider.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { createContext, useContext } from "react";
 import { useSearchState } from "@elementor/utils";
 var SearchContext = createContext(void 0);
@@ -466,7 +531,7 @@ var SearchProvider = ({
   const clearSearch = () => {
     handleChange("");
   };
-  return /* @__PURE__ */ React3.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
+  return /* @__PURE__ */ React4.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
 };
 var useSearch = () => {
   const context = useContext(SearchContext);
@@ -479,27 +544,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(
+  return /* @__PURE__ */ React5.createElement(Stack3, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React5.createElement(Box4, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React5.createElement(
     TextField,
     {
       role: "search",
       fullWidth: true,
       size: "tiny",
       value: inputValue,
-      placeholder: __3("Search", "elementor"),
+      placeholder: __4("Search", "elementor"),
       onChange: (e) => handleChange(e.target.value),
       InputProps: {
-        startAdornment: /* @__PURE__ */ React4.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React4.createElement(SearchIcon, { fontSize: "tiny" }))
+        startAdornment: /* @__PURE__ */ React5.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React5.createElement(SearchIcon, { fontSize: "tiny" }))
       }
     }
   )));
 };
 
 // src/components/components-tab/components-list.tsx
-import * as React7 from "react";
+import * as React8 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 Box7, Divider as Divider2, Icon, Link, List, Stack as Stack6, Typography as Typography4 } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
 
 // src/hooks/use-components.ts
 import { __useSelector as useSelector4 } from "@elementor/store";
@@ -510,7 +575,7 @@ var useComponents = () => {
 };
 
 // src/components/components-tab/components-item.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { endDragElementFromPanel, startDragElementFromPanel } from "@elementor/editor-canvas";
 import { dropElement } from "@elementor/editor-elements";
 import { EllipsisWithTooltip, MenuListItem } from "@elementor/editor-ui";
@@ -518,16 +583,16 @@ import { ComponentsIcon, DotsVerticalIcon } from "@elementor/icons";
 import {
   bindMenu,
   bindTrigger,
-  Box as Box4,
+  Box as Box5,
   IconButton as IconButton2,
   ListItemButton,
   ListItemIcon,
   Menu,
-  Stack as Stack3,
-  Typography as Typography2,
+  Stack as Stack4,
+  Typography as Typography3,
   usePopupState
 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/store/actions/archive-component.ts
 import { setDocumentModifiedStatus } from "@elementor/editor-documents";
@@ -550,7 +615,7 @@ import {
   createTemplatedElementView
 } from "@elementor/editor-canvas";
 import { getCurrentDocument } from "@elementor/editor-documents";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
 import { getMixpanel } from "@elementor/mixpanel";
@@ -670,7 +735,7 @@ function createComponentView(options) {
           action: {
             name: "edit component",
             icon: "eicon-edit",
-            title: () => __4("Edit Component", "elementor"),
+            title: () => __5("Edit Component", "elementor"),
             isEnabled: () => true,
             callback: (_, eventData) => this.editComponent(eventData)
           }
@@ -931,7 +996,7 @@ var ComponentItem = ({ component }) => {
     }
     archiveComponent(component.id);
   };
-  return /* @__PURE__ */ React5.createElement(Stack3, null, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(Stack4, null, /* @__PURE__ */ React6.createElement(
     ListItemButton,
     {
       draggable: true,
@@ -949,8 +1014,8 @@ var ComponentItem = ({ component }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React5.createElement(
-      Box4,
+    /* @__PURE__ */ React6.createElement(
+      Box5,
       {
         onClick: handleClick,
         sx: {
@@ -961,19 +1026,19 @@ 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__ */ React6.createElement(ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React6.createElement(ComponentsIcon, { fontSize: "tiny" })),
+      /* @__PURE__ */ React6.createElement(Box5, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, /* @__PURE__ */ React6.createElement(
         EllipsisWithTooltip,
         {
           title: component.name,
-          as: Typography2,
+          as: Typography3,
           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(
+    /* @__PURE__ */ React6.createElement(IconButton2, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React6.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React6.createElement(
     Menu,
     {
       ...bindMenu(popupState),
@@ -986,7 +1051,7 @@ var ComponentItem = ({ component }) => {
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React5.createElement(MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, __5("Archive", "elementor"))
+    /* @__PURE__ */ React6.createElement(MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, __6("Archive", "elementor"))
   ));
 };
 var addComponentToPage = (model) => {
@@ -1003,13 +1068,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 React7 from "react";
+import { Box as Box6, ListItemButton as ListItemButton2, Skeleton, Stack as Stack5 } 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__ */ React7.createElement(
+    Stack5,
     {
       "aria-label": "Loading components",
       gap: 1,
@@ -1030,14 +1095,14 @@ var LoadingComponents = () => {
         }
       }
     },
-    rows.map((row) => /* @__PURE__ */ React6.createElement(
+    rows.map((row) => /* @__PURE__ */ React7.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__ */ React7.createElement(Box6, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React7.createElement(Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React7.createElement(Skeleton, { variant: "text", width: "100%", height: "36px" }))
     ))
   );
 };
@@ -1046,20 +1111,20 @@ var LoadingComponents = () => {
 function ComponentsList() {
   const { components, isLoading, searchValue } = useFilteredComponents();
   if (isLoading) {
-    return /* @__PURE__ */ React7.createElement(LoadingComponents, null);
+    return /* @__PURE__ */ React8.createElement(LoadingComponents, null);
   }
   const isEmpty = !components || components.length === 0;
   if (isEmpty) {
     if (searchValue.length > 0) {
-      return /* @__PURE__ */ React7.createElement(EmptySearchResult, null);
+      return /* @__PURE__ */ React8.createElement(EmptySearchResult, null);
     }
-    return /* @__PURE__ */ React7.createElement(EmptyState, null);
+    return /* @__PURE__ */ React8.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__ */ React8.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React8.createElement(ComponentItem, { key: component.uid, component })));
 }
 var EmptyState = () => {
-  return /* @__PURE__ */ React7.createElement(
-    Stack5,
+  return /* @__PURE__ */ React8.createElement(
+    Stack6,
     {
       alignItems: "center",
       justifyContent: "center",
@@ -1068,32 +1133,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__ */ React8.createElement(Icon, { fontSize: "large" }, /* @__PURE__ */ React8.createElement(EyeIcon, { fontSize: "large" })),
+    /* @__PURE__ */ React8.createElement(Typography4, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, __7("Text that explains that there are no Components yet.", "elementor")),
+    /* @__PURE__ */ React8.createElement(Typography4, { variant: "caption", align: "center", color: "text.secondary" }, __7(
       "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__ */ React8.createElement(Divider2, { sx: { width: "100%" }, color: "text.secondary" }),
+    /* @__PURE__ */ React8.createElement(Typography4, { align: "left", variant: "caption", color: "text.secondary" }, __7("To create a component, first design it, then choose one of three options:", "elementor")),
+    /* @__PURE__ */ React8.createElement(
+      Typography4,
       {
         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__ */ React8.createElement("span", null, __7("1. Right-click and select Create Component", "elementor")),
+      /* @__PURE__ */ React8.createElement("span", null, __7("2. Use the component icon in the Structure panel", "elementor")),
+      /* @__PURE__ */ React8.createElement("span", null, __7("3. Use the component icon in the Edit panel header", "elementor"))
     )
   );
 };
 var EmptySearchResult = () => {
   const { searchValue, clearSearch } = useSearch();
-  return /* @__PURE__ */ React7.createElement(
-    Stack5,
+  return /* @__PURE__ */ React8.createElement(
+    Stack6,
     {
       color: "text.secondary",
       pt: 5,
@@ -1102,17 +1167,17 @@ var EmptySearchResult = () => {
       overflow: "hidden",
       justifySelf: "center"
     },
-    /* @__PURE__ */ React7.createElement(ComponentsIcon2, null),
-    /* @__PURE__ */ React7.createElement(
-      Box6,
+    /* @__PURE__ */ React8.createElement(ComponentsIcon2, null),
+    /* @__PURE__ */ React8.createElement(
+      Box7,
       {
         sx: {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React7.createElement(Typography3, { align: "center", variant: "subtitle2", color: "inherit" }, __6("Sorry, nothing matched", "elementor")),
-      searchValue && /* @__PURE__ */ React7.createElement(
-        Typography3,
+      /* @__PURE__ */ React8.createElement(Typography4, { align: "center", variant: "subtitle2", color: "inherit" }, __7("Sorry, nothing matched", "elementor")),
+      searchValue && /* @__PURE__ */ React8.createElement(
+        Typography4,
         {
           variant: "subtitle2",
           color: "inherit",
@@ -1122,8 +1187,8 @@ var EmptySearchResult = () => {
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React7.createElement("span", null, "\u201C"),
-        /* @__PURE__ */ React7.createElement(
+        /* @__PURE__ */ React8.createElement("span", null, "\u201C"),
+        /* @__PURE__ */ React8.createElement(
           "span",
           {
             style: {
@@ -1134,11 +1199,11 @@ var EmptySearchResult = () => {
           },
           searchValue
         ),
-        /* @__PURE__ */ React7.createElement("span", null, "\u201D.")
+        /* @__PURE__ */ React8.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__ */ React8.createElement(Typography4, { align: "center", variant: "caption", color: "inherit" }, __7("Try something else.", "elementor")),
+    /* @__PURE__ */ React8.createElement(Typography4, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React8.createElement(Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __7("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -1155,20 +1220,20 @@ 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__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React9.createElement(ComponentSearch, null), /* @__PURE__ */ React9.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 React10 from "react";
+import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
 import { Form as FormElement, ThemeProvider as ThemeProvider2 } 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, Button as Button2, FormLabel, Grid, Popover as Popover2, Snackbar, Stack as Stack7, TextField as TextField2, Typography as Typography5 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/store/actions/create-unpublished-component.ts
 import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
@@ -1196,10 +1261,10 @@ function createUnpublishedComponent(name, element, eventData, overridableProps,
 }
 
 // src/components/create-component-form/hooks/use-form.ts
-import { useMemo, useState } from "react";
+import { useMemo, useState as useState2 } from "react";
 var useForm = (initialValues) => {
-  const [values, setValues] = useState(initialValues);
-  const [errors, setErrors] = useState({});
+  const [values, setValues] = useState2(initialValues);
+  const [errors, setErrors] = useState2({});
   const isValid = useMemo(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
@@ -1246,16 +1311,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 __8 } 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")
+      __8("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: __8("Component name already exists", "elementor")
     })
   });
 };
@@ -1263,9 +1328,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: __8("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: __8("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -1301,10 +1366,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] = useState3(null);
+  const [anchorPosition, setAnchorPosition] = useState3();
+  const [resultNotification, setResultNotification] = useState3(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 +1395,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: __9("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 = __9("Failed to save component. Please try again.", "elementor");
       setResultNotification({
         show: true,
         message: errorMessage,
@@ -1354,15 +1419,15 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React9.createElement(ThemeProvider2, null, /* @__PURE__ */ React9.createElement(
-    Popover,
+  return /* @__PURE__ */ React10.createElement(ThemeProvider2, null, /* @__PURE__ */ React10.createElement(
+    Popover2,
     {
       open: element !== null,
       onClose: cancelSave,
       anchorReference: "anchorPosition",
       anchorPosition
     },
-    element !== null && /* @__PURE__ */ React9.createElement(
+    element !== null && /* @__PURE__ */ React10.createElement(
       Form,
       {
         initialValues: { componentName: element.elementLabel },
@@ -1370,7 +1435,7 @@ function CreateComponentForm() {
         closePopup: cancelSave
       }
     )
-  ), /* @__PURE__ */ React9.createElement(Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React10.createElement(
     Alert,
     {
       onClose: () => setResultNotification(null),
@@ -1406,14 +1471,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: __9("Save as a component", "elementor"),
+    name: __9("Name", "elementor"),
+    cancel: __9("Cancel", "elementor"),
+    create: __9("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__ */ React10.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React10.createElement(Stack7, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React10.createElement(
+    Stack7,
     {
       direction: "row",
       alignItems: "center",
@@ -1421,9 +1486,9 @@ 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(
+    /* @__PURE__ */ React10.createElement(StarIcon, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React10.createElement(Typography5, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
+  ), /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(
     TextField2,
     {
       id: nameInputId,
@@ -1435,11 +1500,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__ */ React10.createElement(Stack7, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React10.createElement(Button2, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React10.createElement(Button2, { 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 React12 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";
@@ -1462,10 +1527,10 @@ function updateCurrentComponent({
 }
 
 // src/components/edit-component/component-modal.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/hooks/use-canvas-document.ts
 import { getCanvasIframeDocument } from "@elementor/editor-canvas";
@@ -1475,10 +1540,10 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-element-rect.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import { throttle } from "@elementor/utils";
 function useElementRect(element) {
-  const [rect, setRect] = useState3(new DOMRect(0, 0, 0, 0));
+  const [rect, setRect] = useState4(new DOMRect(0, 0, 0, 0));
   const onChange = throttle(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
@@ -1555,7 +1620,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__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(BlockEditPage, null), /* @__PURE__ */ React11.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
     canvasDocument.body
   );
 }
@@ -1579,7 +1644,7 @@ function Backdrop({ canvas, element, onClose }) {
       onClose();
     }
   };
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       style: backdropStyle,
@@ -1587,7 +1652,7 @@ function Backdrop({ canvas, element, onClose }) {
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": __9("Exit component editing mode", "elementor")
+      "aria-label": __10("Exit component editing mode", "elementor")
     }
   );
 }
@@ -1637,7 +1702,7 @@ function BlockEditPage() {
 		}
 	}
 	`;
-  return /* @__PURE__ */ React10.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
+  return /* @__PURE__ */ React11.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
 }
 
 // src/components/edit-component/edit-component.tsx
@@ -1650,7 +1715,7 @@ function EditComponent() {
   if (!elementDom) {
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(ComponentModal, { element: elementDom, onClose });
+  return /* @__PURE__ */ React12.createElement(ComponentModal, { element: elementDom, onClose });
 }
 function useHandleDocumentSwitches() {
   const documentsManager = getV1DocumentsManager4();
@@ -1703,33 +1768,33 @@ function getComponentDOMElement(id) {
 }
 
 // src/components/in-edit-mode.tsx
-import * as React12 from "react";
+import * as React13 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 Box8, Button as Button3, DialogActions, DialogContent, DialogHeader, Icon as Icon2, Stack as Stack8, Typography as Typography6 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
-    component: /* @__PURE__ */ React12.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React13.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 = __11("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React13.createElement(Box8, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React13.createElement(Icon2, { color: "secondary" }, /* @__PURE__ */ React13.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React13.createElement(Typography6, { variant: "subtitle1" }, content))), /* @__PURE__ */ React13.createElement(DialogContent, null, /* @__PURE__ */ React13.createElement(Stack8, { spacing: 2, direction: "column" }, /* @__PURE__ */ React13.createElement(Typography6, { variant: "body2" }, __11(
     "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__ */ React13.createElement(DialogActions, null, /* @__PURE__ */ React13.createElement(Button3, { color: "secondary", variant: "contained", onClick: closeDialog }, __11("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React15 from "react";
+import * as React16 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 { 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 { IconButton as IconButton3, Stack as Stack11, Tooltip as Tooltip2 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
 
 // src/prop-types/component-instance-prop-type.ts
 import { createPropUtils as createPropUtils3, numberPropTypeUtil } from "@elementor/editor-props";
@@ -1770,13 +1835,13 @@ var componentInstancePropTypeUtil = createPropUtils3(
 );
 
 // src/components/instance-editing-panel/empty-state.tsx
-import * as React13 from "react";
+import * as React14 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 { Button as Button4, Stack as Stack9, Typography as Typography7 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
-  return /* @__PURE__ */ React13.createElement(
-    Stack8,
+  return /* @__PURE__ */ React14.createElement(
+    Stack9,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -1785,22 +1850,22 @@ 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__ */ React14.createElement(ComponentPropListIcon2, { fontSize: "large" }),
+    /* @__PURE__ */ React14.createElement(Typography7, { align: "center", variant: "subtitle2" }, __12("No properties yet", "elementor")),
+    /* @__PURE__ */ React14.createElement(Typography7, { align: "center", variant: "caption", maxWidth: "170px" }, __12(
       "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__ */ React14.createElement(Button4, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React14.createElement(PencilIcon, { fontSize: "small" }), __12("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-import * as React14 from "react";
+import * as React15 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 Stack10 } from "@elementor/ui";
 function OverridePropsGroup({ group, props }) {
   const [isOpen, setIsOpen] = useStateByElement(group.id, true);
   const handleClick = () => {
@@ -1810,7 +1875,7 @@ function OverridePropsGroup({ group, props }) {
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   const title = group.label;
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
     ListItemButton3,
     {
       id: labelId,
@@ -1820,7 +1885,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__ */ React15.createElement(Stack10, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React15.createElement(
       ListItemText,
       {
         secondary: title,
@@ -1828,10 +1893,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__ */ React15.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React15.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React15.createElement(Stack10, { 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__ */ React15.createElement("pre", { key: propId }, JSON.stringify(props[propId], null, 2))
   )))));
 }
 
@@ -1846,17 +1911,17 @@ function InstanceEditingPanel() {
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = __12("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = __13("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__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React16.createElement(Stack11, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React16.createElement(Stack11, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React16.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React16.createElement(PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React16.createElement(Tooltip2, { title: panelTitle }, /* @__PURE__ */ React16.createElement(IconButton3, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React16.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React16.createElement(PanelBody, null, isEmpty ? /* @__PURE__ */ React16.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React16.createElement(Stack11, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React16.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
 import { createTopLevelObjectType, useElement as useElement2 } from "@elementor/editor-editing-panel";
 
@@ -1875,11 +1940,11 @@ var componentOverridablePropTypeUtil = createPropUtils4(
 );
 
 // src/provider/overridable-prop-context.tsx
-import * as React16 from "react";
+import * as React17 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__ */ React17.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => useContext2(OverridablePropContext)?.value;
 
@@ -1940,7 +2005,7 @@ function OverridablePropControl({
     }
   });
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React17.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React18.createElement(
     PropProvider,
     {
       ...propContext,
@@ -1949,23 +2014,23 @@ 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__ */ React18.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React18.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React18.createElement(OriginalControl, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-import * as React20 from "react";
+import * as React21 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 { bindPopover, bindTrigger as bindTrigger2, Popover as Popover3, Tooltip as Tooltip3, usePopupState as usePopupState2 } from "@elementor/ui";
+import { __ as __17 } 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 { __ as __14 } from "@wordpress/i18n";
 function setOverridableProp({
   componentId,
   overrideKey,
@@ -2055,7 +2120,7 @@ function addNewGroup(groups, groupId) {
       ...groups.items,
       [currentGroupId]: {
         id: currentGroupId,
-        label: __13("Default", "elementor"),
+        label: __14("Default", "elementor"),
         props: []
       }
     },
@@ -2105,13 +2170,13 @@ function removeProps({
 }
 
 // src/components/overridable-props/indicator.tsx
-import * as React18 from "react";
-import { forwardRef } from "react";
+import * as React19 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";
+import { Box as Box9, styled as styled2 } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
 var SIZE = "tiny";
-var IconContainer = styled2(Box8)`
+var IconContainer = styled2(Box9)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -2128,7 +2193,7 @@ var IconContainer = styled2(Box8)`
 		stroke-width: 2px;
 	}
 `;
-var Content = styled2(Box8)`
+var Content = styled2(Box9)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -2165,33 +2230,33 @@ 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__ */ React19.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React19.createElement(
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? __14("Overridable property", "elementor") : __14("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? __15("Overridable property", "elementor") : __15("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React18.createElement(CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React18.createElement(PlusIcon, { fontSize: SIZE })
+  isOverridable ? /* @__PURE__ */ React19.createElement(CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React19.createElement(PlusIcon, { fontSize: SIZE })
 )));
 
 // src/components/overridable-props/overridable-prop-form.tsx
-import * as React19 from "react";
-import { useState as useState4 } from "react";
+import * as React20 from "react";
+import { useState as useState5 } 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";
+import { Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Select, Stack as Stack12, TextField as TextField3, Typography as Typography8 } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
-var DEFAULT_GROUP = { value: null, label: __15("Default", "elementor") };
+var DEFAULT_GROUP = { value: null, label: __16("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 [propLabel, setPropLabel] = useState5(currentValue?.label ?? null);
+  const [group, setGroup] = useState5(currentValue?.groupId ?? groups?.[0]?.value ?? null);
+  const name = __16("Name", "elementor");
+  const groupName = __16("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,
+  const title = isCreate ? __16("Create new property", "elementor") : __16("Update property", "elementor");
+  const ctaLabel = isCreate ? __16("Create", "elementor") : __16("Update", "elementor");
+  return /* @__PURE__ */ React20.createElement(Form2, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React20.createElement(Stack12, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
+    Stack12,
     {
       direction: "row",
       alignItems: "center",
@@ -2199,18 +2264,18 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
       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(
+    /* @__PURE__ */ React20.createElement(Typography8, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React20.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React20.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(FormLabel2, { size: "tiny" }, name)), /* @__PURE__ */ React20.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
     TextField3,
     {
       name,
       size: SIZE2,
       fullWidth: true,
-      placeholder: __15("Enter value", "elementor"),
+      placeholder: __16("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(
+  ))), /* @__PURE__ */ React20.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React20.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(FormLabel2, { size: "tiny" }, groupName)), /* @__PURE__ */ React20.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
     Select,
     {
       name: groupName,
@@ -2227,8 +2292,8 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
         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))));
+    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React20.createElement(MenuListItem2, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React20.createElement(Stack12, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React20.createElement(Button5, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
 }
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
@@ -2253,7 +2318,7 @@ function OverridablePropIndicator() {
     return null;
   }
   const overridableProps = selectOverridableProps(getState9(), componentId);
-  return /* @__PURE__ */ React20.createElement(Content2, { componentId, overridableProps });
+  return /* @__PURE__ */ React21.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
@@ -2294,8 +2359,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__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Tooltip3, { placement: "top", title: __17("Override Property", "elementor") }, /* @__PURE__ */ React21.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React21.createElement(
+    Popover3,
     {
       disableScrollLock: true,
       anchorOrigin: {
@@ -2311,7 +2376,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -2875,7 +2940,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __17("Components", "elementor"),
+    label: __18("Components", "elementor"),
     component: Components
   });
   injectIntoTop({