@elementor/editor-components 3.35.0-381 → 3.35.0-382

package/dist/index.js

@@ -379,23 +379,23 @@ function useNavigateBack() {
 }
 
 // src/components/component-properties-panel/component-properties-panel.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_ui4 = require("@elementor/editor-ui");
-var import_ui7 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_ui8 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/component-properties-panel/component-properties-panel-content.tsx
-var React6 = __toESM(require("react"));
-var import_react4 = require("react");
+var React7 = __toESM(require("react"));
+var import_react5 = require("react");
 var import_editor_documents4 = require("@elementor/editor-documents");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_icons5 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
+var import_ui7 = require("@elementor/ui");
 var import_utils2 = require("@elementor/utils");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/store/actions/add-overridable-group.ts
 var import_store7 = require("@elementor/store");
@@ -744,14 +744,63 @@ function useOverridableProps(componentId) {
 }
 
 // src/components/component-properties-panel/properties-empty-state.tsx
-var React = __toESM(require("react"));
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
 var import_icons = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+
+// src/components/components-tab/component-introduction.tsx
+var React = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_ui = require("@elementor/editor-ui");
 var import_ui = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
-var LEARN_MORE_URL = "https://go.elementor.com/tbd/";
-function PropertiesEmptyState() {
+var ComponentIntroduction = ({
+  anchorRef,
+  shouldShowIntroduction,
+  onClose
+}) => {
+  if (!anchorRef.current || !shouldShowIntroduction) {
+    return null;
+  }
   return /* @__PURE__ */ React.createElement(
-    import_ui.Stack,
+    import_ui.Popover,
+    {
+      anchorEl: anchorRef.current,
+      open: shouldShowIntroduction,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: -30
+      },
+      onClose
+    },
+    /* @__PURE__ */ React.createElement(import_ui.Box, { sx: { width: "296px" } }, /* @__PURE__ */ React.createElement(import_editor_ui.PopoverHeader, { title: (0, import_i18n2.__)("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React.createElement(
+      import_ui.Image,
+      {
+        sx: { width: "296px", height: "160px" },
+        src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
+        alt: ""
+      }
+    ), /* @__PURE__ */ React.createElement(import_editor_controls.PopoverContent, null, /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 1, sx: { p: 2 } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
+      "Click next to any setting you want users to customize - like text, images, or links.",
+      "elementor"
+    )), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
+      "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
+      "elementor"
+    )), /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(import_ui.Button, { size: "medium", variant: "contained", onClick: onClose }, (0, import_i18n2.__)("Got it", "elementor"))))))
+  );
+};
+
+// src/components/component-properties-panel/properties-empty-state.tsx
+function PropertiesEmptyState({ introductionRef }) {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    import_ui2.Stack,
     {
       alignItems: "center",
       justifyContent: "flex-start",
@@ -760,56 +809,61 @@ function PropertiesEmptyState() {
       sx: { px: 2.5, pt: 10, pb: 5.5 },
       gap: 1
     },
-    /* @__PURE__ */ React.createElement(import_icons.ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React.createElement(import_ui.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n2.__)("Add your first property", "elementor")),
-    /* @__PURE__ */ React.createElement(import_ui.Typography, { align: "center", variant: "caption" }, (0, import_i18n2.__)("Make instances flexible while keeping design synced.", "elementor")),
-    /* @__PURE__ */ React.createElement(import_ui.Typography, { align: "center", variant: "caption" }, (0, import_i18n2.__)("Select any element, then click + next to a setting to expose it.", "elementor")),
-    /* @__PURE__ */ React.createElement(
-      import_ui.Link,
+    /* @__PURE__ */ React2.createElement(import_icons.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n3.__)("Add your first property", "elementor")),
+    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "caption" }, (0, import_i18n3.__)("Make instances flexible while keeping design synced.", "elementor")),
+    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "caption" }, (0, import_i18n3.__)("Select any element, then click + next to a setting to expose it.", "elementor")),
+    /* @__PURE__ */ React2.createElement(
+      import_ui2.Link,
       {
         variant: "caption",
         color: "secondary",
-        href: LEARN_MORE_URL,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        sx: { textDecorationLine: "underline" }
+        sx: { textDecorationLine: "underline" },
+        onClick: () => setIsOpen(true)
       },
-      (0, import_i18n2.__)("Learn more", "elementor")
+      (0, import_i18n3.__)("Learn more", "elementor")
     )
-  );
+  ), /* @__PURE__ */ React2.createElement(
+    ComponentIntroduction,
+    {
+      anchorRef: introductionRef,
+      shouldShowIntroduction: isOpen,
+      onClose: () => setIsOpen(false)
+    }
+  ));
 }
 
 // src/components/component-properties-panel/properties-group.tsx
-var React5 = __toESM(require("react"));
-var import_editor_ui2 = require("@elementor/editor-ui");
+var React6 = __toESM(require("react"));
+var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+var import_ui6 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
 
 // src/components/component-properties-panel/property-item.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_icons3 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
+var import_ui5 = require("@elementor/ui");
 
 // src/components/overridable-props/overridable-prop-form.tsx
-var React2 = __toESM(require("react"));
-var import_react2 = require("react");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_ui2 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var React3 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_ui3 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 var SIZE = "tiny";
-var DEFAULT_GROUP = { value: null, label: (0, import_i18n3.__)("Default", "elementor") };
+var DEFAULT_GROUP = { value: null, label: (0, import_i18n4.__)("Default", "elementor") };
 function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
-  const [propLabel, setPropLabel] = (0, import_react2.useState)(currentValue?.label ?? null);
-  const [group, setGroup] = (0, import_react2.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
-  const name = (0, import_i18n3.__)("Name", "elementor");
-  const groupName = (0, import_i18n3.__)("Group Name", "elementor");
+  const [propLabel, setPropLabel] = (0, import_react3.useState)(currentValue?.label ?? null);
+  const [group, setGroup] = (0, import_react3.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
+  const name = (0, import_i18n4.__)("Name", "elementor");
+  const groupName = (0, import_i18n4.__)("Group Name", "elementor");
   const isCreate = currentValue === void 0;
-  const title = isCreate ? (0, import_i18n3.__)("Create new property", "elementor") : (0, import_i18n3.__)("Update property", "elementor");
-  const ctaLabel = isCreate ? (0, import_i18n3.__)("Create", "elementor") : (0, import_i18n3.__)("Update", "elementor");
-  return /* @__PURE__ */ React2.createElement(import_editor_ui.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React2.createElement(import_ui2.Stack, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React2.createElement(
-    import_ui2.Stack,
+  const title = isCreate ? (0, import_i18n4.__)("Create new property", "elementor") : (0, import_i18n4.__)("Update property", "elementor");
+  const ctaLabel = isCreate ? (0, import_i18n4.__)("Create", "elementor") : (0, import_i18n4.__)("Update", "elementor");
+  return /* @__PURE__ */ React3.createElement(import_editor_ui2.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React3.createElement(import_ui3.Stack, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
+    import_ui3.Stack,
     {
       direction: "row",
       alignItems: "center",
@@ -817,19 +871,19 @@ function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
     },
-    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui2.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
-    import_ui2.TextField,
+    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    import_ui3.TextField,
     {
       name,
       size: SIZE,
       fullWidth: true,
-      placeholder: (0, import_i18n3.__)("Enter value", "elementor"),
+      placeholder: (0, import_i18n4.__)("Enter value", "elementor"),
       value: propLabel ?? "",
       onChange: (e) => setPropLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui2.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
-    import_ui2.Select,
+  ))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    import_ui3.Select,
     {
       name: groupName,
       size: SIZE,
@@ -845,16 +899,16 @@ function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
         return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
       }
     },
-    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React2.createElement(import_editor_ui.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React2.createElement(import_ui2.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React3.createElement(import_editor_ui2.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React3.createElement(import_ui3.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React3.createElement(import_ui3.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
 }
 
 // src/components/component-properties-panel/sortable.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_icons2 = require("@elementor/icons");
-var import_ui3 = require("@elementor/ui");
-var SortableProvider = (props) => /* @__PURE__ */ React3.createElement(import_ui3.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React3.createElement(
+var import_ui4 = require("@elementor/ui");
+var SortableProvider = (props) => /* @__PURE__ */ React4.createElement(import_ui4.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React4.createElement(
   StyledSortableTrigger,
   {
     ...props,
@@ -862,10 +916,10 @@ var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React3
     className: `sortable-trigger ${triggerClassName ?? ""}`.trim(),
     "aria-label": "sort"
   },
-  /* @__PURE__ */ React3.createElement(import_icons2.GripVerticalIcon, { fontSize: "tiny" })
+  /* @__PURE__ */ React4.createElement(import_icons2.GripVerticalIcon, { fontSize: "tiny" })
 );
-var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React3.createElement(
-  import_ui3.UnstableSortableItem,
+var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React4.createElement(
+  import_ui4.UnstableSortableItem,
   {
     id: id2,
     render: ({
@@ -878,8 +932,8 @@ var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React3.createEleme
       showDropIndication,
       isDragOverlay,
       isDragPlaceholder
-    }) => /* @__PURE__ */ React3.createElement(
-      import_ui3.Box,
+    }) => /* @__PURE__ */ React4.createElement(
+      import_ui4.Box,
       {
         ...itemProps,
         style: itemStyle,
@@ -895,19 +949,19 @@ var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React3.createEleme
         triggerProps,
         triggerStyle
       }),
-      showDropIndication && /* @__PURE__ */ React3.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+      showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
     )
   }
 );
-var StyledSortableTrigger = (0, import_ui3.styled)("div")(({ theme }) => ({
+var StyledSortableTrigger = (0, import_ui4.styled)("div")(({ theme }) => ({
   position: "absolute",
-  left: 0,
+  left: "-2px",
   top: "50%",
   transform: `translate( -${theme.spacing(1.5)}, -50% )`,
   color: theme.palette.action.active,
   cursor: "grab"
 }));
-var SortableItemIndicator = (0, import_ui3.styled)(import_ui3.Box)`
+var SortableItemIndicator = (0, import_ui4.styled)(import_ui4.Box)`
 	width: 100%;
 	height: 1px;
 	background-color: ${({ theme }) => theme.palette.text.primary};
@@ -922,11 +976,11 @@ function PropertyItem({
   onDelete,
   onUpdate
 }) {
-  const popoverState = (0, import_ui4.usePopupState)({
+  const popoverState = (0, import_ui5.usePopupState)({
     variant: "popover"
   });
   const icon = getElementIcon(prop);
-  const popoverProps = (0, import_ui4.bindPopover)(popoverState);
+  const popoverProps = (0, import_ui5.bindPopover)(popoverState);
   const handleSubmit = (data) => {
     onUpdate(data);
     popoverState.close();
@@ -935,10 +989,10 @@ function PropertyItem({
     event.stopPropagation();
     onDelete(prop.overrideKey);
   };
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
-    import_ui4.Box,
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    import_ui5.Box,
     {
-      ...(0, import_ui4.bindTrigger)(popoverState),
+      ...(0, import_ui5.bindTrigger)(popoverState),
       sx: {
         position: "relative",
         pl: 0.5,
@@ -970,25 +1024,25 @@ function PropertyItem({
         }
       }
     },
-    /* @__PURE__ */ React4.createElement(SortableTrigger, { ...sortableTriggerProps }),
-    /* @__PURE__ */ React4.createElement(
-      import_ui4.Box,
+    /* @__PURE__ */ React5.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React5.createElement(
+      import_ui5.Box,
       {
         sx: { display: "flex", alignItems: "center", color: "text.primary", fontSize: 12, padding: 0.25 }
       },
-      /* @__PURE__ */ React4.createElement("i", { className: icon })
+      /* @__PURE__ */ React5.createElement("i", { className: icon })
     ),
-    /* @__PURE__ */ React4.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
-    /* @__PURE__ */ React4.createElement(import_ui4.IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React4.createElement(import_icons3.XIcon, { fontSize: "tiny" }))
-  ), /* @__PURE__ */ React4.createElement(
-    import_ui4.Popover,
+    /* @__PURE__ */ React5.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
+    /* @__PURE__ */ React5.createElement(import_ui5.IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React5.createElement(import_icons3.XIcon, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React5.createElement(
+    import_ui5.Popover,
     {
       ...popoverProps,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       PaperProps: { sx: { width: popoverState.anchorEl?.getBoundingClientRect().width } }
     },
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -1023,7 +1077,7 @@ function PropertiesGroup({
   editableLabelProps
 }) {
   const groupProps = group.props.map((propId) => props[propId]).filter((prop) => Boolean(prop));
-  const popupState = (0, import_ui5.usePopupState)({
+  const popupState = (0, import_ui6.usePopupState)({
     variant: "popover",
     disableAutoFocus: true
   });
@@ -1038,15 +1092,15 @@ function PropertiesGroup({
     popupState.close();
     onGroupDelete(group.id);
   };
-  return /* @__PURE__ */ React5.createElement(
-    import_ui5.Box,
+  return /* @__PURE__ */ React6.createElement(
+    import_ui6.Box,
     {
       sx: {
         opacity: isDragPlaceholder ? 0.5 : 1
       }
     },
-    /* @__PURE__ */ React5.createElement(import_ui5.Stack, { gap: 1 }, /* @__PURE__ */ React5.createElement(
-      import_ui5.Box,
+    /* @__PURE__ */ React6.createElement(import_ui6.Stack, { gap: 1 }, /* @__PURE__ */ React6.createElement(
+      import_ui6.Box,
       {
         className: "group-header",
         sx: {
@@ -1065,9 +1119,9 @@ function PropertiesGroup({
           }
         }
       },
-      /* @__PURE__ */ React5.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
-      /* @__PURE__ */ React5.createElement(import_ui5.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React5.createElement(
-        import_ui5.Box,
+      /* @__PURE__ */ React6.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
+      /* @__PURE__ */ React6.createElement(import_ui6.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React6.createElement(
+        import_ui6.Box,
         {
           sx: {
             flex: 1,
@@ -1080,36 +1134,36 @@ function PropertiesGroup({
             pl: 0.5
           }
         },
-        /* @__PURE__ */ React5.createElement(
-          import_editor_ui2.EditableField,
+        /* @__PURE__ */ React6.createElement(
+          import_editor_ui3.EditableField,
           {
             ref: editableRef,
-            as: import_ui5.Typography,
+            as: import_ui6.Typography,
             variant: "caption",
             error: error ?? void 0,
             sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 },
             ...getEditableProps()
           }
         )
-      ) : /* @__PURE__ */ React5.createElement(
-        import_ui5.Typography,
+      ) : /* @__PURE__ */ React6.createElement(
+        import_ui6.Typography,
         {
           variant: "caption",
           sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
         },
         group.label
-      ), /* @__PURE__ */ React5.createElement(
-        import_ui5.IconButton,
+      ), /* @__PURE__ */ React6.createElement(
+        import_ui6.IconButton,
         {
           className: "group-menu",
           size: "tiny",
           sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
-          "aria-label": (0, import_i18n4.__)("Group actions", "elementor"),
-          ...(0, import_ui5.bindTrigger)(popupState)
+          "aria-label": (0, import_i18n5.__)("Group actions", "elementor"),
+          ...(0, import_ui6.bindTrigger)(popupState)
         },
-        /* @__PURE__ */ React5.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" })
+        /* @__PURE__ */ React6.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" })
       ))
-    ), /* @__PURE__ */ React5.createElement(import_ui5.List, { sx: { p: 0, display: "flex", flexDirection: "column", gap: 1 } }, /* @__PURE__ */ React5.createElement(SortableProvider, { value: group.props, onChange: onPropsReorder }, groupProps.map((prop) => /* @__PURE__ */ React5.createElement(SortableItem, { key: prop.overrideKey, id: prop.overrideKey }, ({ triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder }) => /* @__PURE__ */ React5.createElement(
+    ), /* @__PURE__ */ React6.createElement(import_ui6.List, { sx: { p: 0, display: "flex", flexDirection: "column", gap: 1 } }, /* @__PURE__ */ React6.createElement(SortableProvider, { value: group.props, onChange: onPropsReorder }, groupProps.map((prop) => /* @__PURE__ */ React6.createElement(SortableItem, { key: prop.overrideKey, id: prop.overrideKey }, ({ triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder }) => /* @__PURE__ */ React6.createElement(
       PropertyItem,
       {
         prop,
@@ -1120,27 +1174,27 @@ function PropertiesGroup({
         onUpdate: (data) => onPropertyUpdate(prop.overrideKey, data)
       }
     )))))),
-    /* @__PURE__ */ React5.createElement(
-      import_ui5.Menu,
+    /* @__PURE__ */ React6.createElement(
+      import_ui6.Menu,
       {
-        ...(0, import_ui5.bindMenu)(popupState),
+        ...(0, import_ui6.bindMenu)(popupState),
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" }
       },
-      /* @__PURE__ */ React5.createElement(import_editor_ui2.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React5.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n4.__)("Rename", "elementor"))),
-      /* @__PURE__ */ React5.createElement(
-        import_ui5.Tooltip,
+      /* @__PURE__ */ React6.createElement(import_editor_ui3.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React6.createElement(import_ui6.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n5.__)("Rename", "elementor"))),
+      /* @__PURE__ */ React6.createElement(
+        import_ui6.Tooltip,
         {
-          title: hasProperties ? (0, import_i18n4.__)("To delete the group, first remove all the properties", "elementor") : "",
+          title: hasProperties ? (0, import_i18n5.__)("To delete the group, first remove all the properties", "elementor") : "",
           placement: "right"
         },
-        /* @__PURE__ */ React5.createElement("span", null, /* @__PURE__ */ React5.createElement(import_editor_ui2.MenuListItem, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React5.createElement(
-          import_ui5.Typography,
+        /* @__PURE__ */ React6.createElement("span", null, /* @__PURE__ */ React6.createElement(import_editor_ui3.MenuListItem, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React6.createElement(
+          import_ui6.Typography,
           {
             variant: "caption",
             sx: { color: hasProperties ? "text.disabled" : "error.light" }
           },
-          (0, import_i18n4.__)("Delete", "elementor")
+          (0, import_i18n5.__)("Delete", "elementor")
         )))
       )
     )
@@ -1148,10 +1202,10 @@ function PropertiesGroup({
 }
 
 // src/components/component-properties-panel/use-current-editable-item.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/store/actions/rename-overridable-group.ts
 var import_store21 = require("@elementor/store");
@@ -1178,10 +1232,10 @@ function renameOverridableGroup({ componentId, groupId, label }) {
 }
 
 // src/components/component-properties-panel/utils/validate-group-label.ts
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 var ERROR_MESSAGES = {
-  EMPTY_NAME: (0, import_i18n5.__)("Group name is required", "elementor"),
-  DUPLICATE_NAME: (0, import_i18n5.__)("Group name already exists", "elementor")
+  EMPTY_NAME: (0, import_i18n6.__)("Group name is required", "elementor"),
+  DUPLICATE_NAME: (0, import_i18n6.__)("Group name already exists", "elementor")
 };
 function validateGroupLabel(label, existingGroups) {
   const trimmedLabel = label.trim();
@@ -1197,7 +1251,7 @@ function validateGroupLabel(label, existingGroups) {
 
 // src/components/component-properties-panel/use-current-editable-item.ts
 function useCurrentEditableItem() {
-  const [editingGroupId, setEditingGroupId] = (0, import_react3.useState)(null);
+  const [editingGroupId, setEditingGroupId] = (0, import_react4.useState)(null);
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(currentComponentId);
   const allGroupsRecord = overridableProps?.groups?.items ?? {};
@@ -1210,7 +1264,7 @@ function useCurrentEditableItem() {
   };
   const handleSubmit = (newLabel) => {
     if (!editingGroupId || !currentComponentId) {
-      throw new Error((0, import_i18n6.__)("Group ID or component ID is missing", "elementor"));
+      throw new Error((0, import_i18n7.__)("Group ID or component ID is missing", "elementor"));
     }
     renameOverridableGroup({
       componentId: currentComponentId,
@@ -1225,7 +1279,7 @@ function useCurrentEditableItem() {
     isEditing,
     error,
     getProps: getEditableProps
-  } = (0, import_editor_ui3.useEditable)({
+  } = (0, import_editor_ui4.useEditable)({
     value: currentGroup?.label ?? "",
     onSubmit: handleSubmit,
     validation: validateLabel
@@ -1263,15 +1317,16 @@ function generateUniqueLabel(groups) {
 function ComponentPropertiesPanelContent({ onClose }) {
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(currentComponentId);
-  const [isAddingGroup, setIsAddingGroup] = (0, import_react4.useState)(false);
+  const [isAddingGroup, setIsAddingGroup] = (0, import_react5.useState)(false);
+  const introductionRef = (0, import_react5.useRef)(null);
   const groupLabelEditable = useCurrentEditableItem();
-  const groups = (0, import_react4.useMemo)(() => {
+  const groups = (0, import_react5.useMemo)(() => {
     if (!overridableProps) {
       return [];
     }
     return overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(Boolean);
   }, [overridableProps]);
-  const allGroupsForSelect = (0, import_react4.useMemo)(
+  const allGroupsForSelect = (0, import_react5.useMemo)(
     () => groups.map((group) => ({ value: group.id, label: group.label })),
     [groups]
   );
@@ -1317,15 +1372,24 @@ function ComponentPropertiesPanelContent({ onClose }) {
     deleteOverridableGroup({ componentId: currentComponentId, groupId });
     (0, import_editor_documents4.setDocumentModifiedStatus)(true);
   };
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React6.createElement(import_ui6.Stack, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React6.createElement(import_icons5.ComponentPropListIcon, { fontSize: "tiny" }), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeaderTitle, { variant: "subtitle2" }, (0, import_i18n7.__)("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React6.createElement(import_ui6.Tooltip, { title: (0, import_i18n7.__)("Add new group", "elementor") }, /* @__PURE__ */ React6.createElement(
-    import_ui6.IconButton,
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React7.createElement(import_ui7.Stack, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React7.createElement(import_icons5.ComponentPropListIcon, { fontSize: "tiny" }), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { variant: "subtitle2" }, (0, import_i18n8.__)("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n8.__)("Add new group", "elementor") }, /* @__PURE__ */ React7.createElement(
+    import_ui7.IconButton,
     {
       size: "tiny",
-      "aria-label": (0, import_i18n7.__)("Add new group", "elementor"),
+      "aria-label": (0, import_i18n8.__)("Add new group", "elementor"),
       onClick: handleAddGroupClick
     },
-    /* @__PURE__ */ React6.createElement(import_icons5.FolderPlusIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React6.createElement(import_ui6.Tooltip, { title: (0, import_i18n7.__)("Close panel", "elementor") }, /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { size: "tiny", "aria-label": (0, import_i18n7.__)("Close panel", "elementor"), onClick: onClose }, /* @__PURE__ */ React6.createElement(import_icons5.XIcon, { fontSize: "tiny" })))), /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelBody, null, showEmptyState ? /* @__PURE__ */ React6.createElement(PropertiesEmptyState, null) : /* @__PURE__ */ React6.createElement(import_ui6.List, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React6.createElement(SortableProvider, { value: groupIds, onChange: handleGroupsReorder }, groups.map((group) => /* @__PURE__ */ React6.createElement(SortableItem, { key: group.id, id: group.id }, ({ triggerProps, triggerStyle, isDragPlaceholder }) => /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(import_icons5.FolderPlusIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n8.__)("Close panel", "elementor") }, /* @__PURE__ */ React7.createElement(
+    import_ui7.IconButton,
+    {
+      ref: introductionRef,
+      size: "tiny",
+      "aria-label": (0, import_i18n8.__)("Close panel", "elementor"),
+      onClick: onClose
+    },
+    /* @__PURE__ */ React7.createElement(import_icons5.XIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React7.createElement(import_ui7.Divider, null), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelBody, null, showEmptyState ? /* @__PURE__ */ React7.createElement(PropertiesEmptyState, { introductionRef }) : /* @__PURE__ */ React7.createElement(import_ui7.List, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React7.createElement(SortableProvider, { value: groupIds, onChange: handleGroupsReorder }, groups.map((group) => /* @__PURE__ */ React7.createElement(SortableItem, { key: group.id, id: group.id }, ({ triggerProps, triggerStyle, isDragPlaceholder }) => /* @__PURE__ */ React7.createElement(
     PropertiesGroup,
     {
       group,
@@ -1357,7 +1421,7 @@ function ComponentPropertiesPanel() {
   if (!element || !elementType) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(import_editor_ui4.ThemeProvider, null, /* @__PURE__ */ React7.createElement(import_ui7.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_editing_panel.ElementProvider, { element, elementType }, /* @__PURE__ */ React7.createElement(import_editor_panels2.Panel, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(import_editor_ui5.ThemeProvider, null, /* @__PURE__ */ React8.createElement(import_ui8.ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(import_editor_editing_panel.ElementProvider, { element, elementType }, /* @__PURE__ */ React8.createElement(import_editor_panels2.Panel, null, /* @__PURE__ */ React8.createElement(
     ComponentPropertiesPanelContent,
     {
       onClose: () => {
@@ -1367,57 +1431,11 @@ function ComponentPropertiesPanel() {
     }
   )))));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui7.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui7.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n8.__)("Something went wrong", "elementor"))));
-
-// src/components/components-tab/component-introduction.tsx
-var React8 = __toESM(require("react"));
-var import_editor_controls = require("@elementor/editor-controls");
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_ui8 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
-var ComponentIntroduction = ({
-  anchorRef,
-  shouldShowIntroduction,
-  onClose
-}) => {
-  if (!anchorRef.current || !shouldShowIntroduction) {
-    return null;
-  }
-  return /* @__PURE__ */ React8.createElement(
-    import_ui8.Popover,
-    {
-      anchorEl: anchorRef.current,
-      open: shouldShowIntroduction,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: -30
-      },
-      onClose
-    },
-    /* @__PURE__ */ React8.createElement(import_ui8.Box, { sx: { width: "296px" } }, /* @__PURE__ */ React8.createElement(import_editor_ui5.PopoverHeader, { title: (0, import_i18n9.__)("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React8.createElement(
-      import_ui8.Image,
-      {
-        sx: { width: "296px", height: "160px" },
-        src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
-        alt: ""
-      }
-    ), /* @__PURE__ */ React8.createElement(import_editor_controls.PopoverContent, null, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { gap: 1, sx: { p: 2 } }, /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "body2" }, (0, import_i18n9.__)("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "body2" }, (0, import_i18n9.__)(
-      "Click next to any setting you want users to customize - like text, images, or links.",
-      "elementor"
-    )), /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "body2" }, (0, import_i18n9.__)(
-      "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
-      "elementor"
-    )), /* @__PURE__ */ React8.createElement(import_ui8.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React8.createElement(import_ui8.Button, { size: "medium", variant: "contained", onClick: onClose }, (0, import_i18n9.__)("Got it", "elementor"))))))
-  );
-};
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(import_ui8.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(import_ui8.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, (0, import_i18n9.__)("Something went wrong", "elementor"))));
 
 // src/components/component-panel-header/component-badge.tsx
 var React9 = __toESM(require("react"));
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_icons6 = require("@elementor/icons");
 var import_ui9 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
@@ -1462,8 +1480,8 @@ var StyledBadge = (0, import_ui9.styled)(import_ui9.Badge, { shouldForwardProp:
   })
 );
 function usePrevious(value) {
-  const ref = (0, import_react5.useRef)(value);
-  (0, import_react5.useEffect)(() => {
+  const ref = (0, import_react6.useRef)(value);
+  (0, import_react6.useEffect)(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
@@ -1534,9 +1552,9 @@ var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/components-tab/search-provider.tsx
 var React11 = __toESM(require("react"));
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_utils3 = require("@elementor/utils");
-var SearchContext = (0, import_react6.createContext)(void 0);
+var SearchContext = (0, import_react7.createContext)(void 0);
 var SearchProvider = ({
   children,
   localStorageKey
@@ -1548,7 +1566,7 @@ var SearchProvider = ({
   return /* @__PURE__ */ React11.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
 };
 var useSearch = () => {
-  const context = (0, import_react6.useContext)(SearchContext);
+  const context = (0, import_react7.useContext)(SearchContext);
   if (!context) {
     throw new Error("useSearch must be used within a SearchProvider");
   }
@@ -2225,7 +2243,7 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 
 // src/components/create-component-form/create-component-form.tsx
 var React17 = __toESM(require("react"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
@@ -2258,11 +2276,11 @@ function createUnpublishedComponent(name, element, eventData, overridableProps,
 }
 
 // src/components/create-component-form/hooks/use-form.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var useForm = (initialValues) => {
-  const [values, setValues] = (0, import_react7.useState)(initialValues);
-  const [errors, setErrors] = (0, import_react7.useState)({});
-  const isValid = (0, import_react7.useMemo)(() => {
+  const [values, setValues] = (0, import_react8.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react8.useState)({});
+  const isValid = (0, import_react8.useMemo)(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
   const handleChange = (e, field, validationSchema) => {
@@ -2363,11 +2381,11 @@ function countNestedElements(container) {
 
 // src/components/create-component-form/create-component-form.tsx
 function CreateComponentForm() {
-  const [element, setElement] = (0, import_react8.useState)(null);
-  const [anchorPosition, setAnchorPosition] = (0, import_react8.useState)();
-  const [resultNotification, setResultNotification] = (0, import_react8.useState)(null);
-  const eventData = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const [element, setElement] = (0, import_react9.useState)(null);
+  const [anchorPosition, setAnchorPosition] = (0, import_react9.useState)();
+  const [resultNotification, setResultNotification] = (0, import_react9.useState)(null);
+  const eventData = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
       setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements7.getElementLabel)(event.detail.element.id) });
@@ -2450,14 +2468,14 @@ var Form2 = ({
 }) => {
   const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
   const { components } = useComponents();
-  const existingComponentNames = (0, import_react8.useMemo)(() => {
+  const existingComponentNames = (0, import_react9.useMemo)(() => {
     return components?.map((component) => component.name) ?? [];
   }, [components]);
-  const changeValidationSchema = (0, import_react8.useMemo)(
+  const changeValidationSchema = (0, import_react9.useMemo)(
     () => createBaseComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
-  const submitValidationSchema = (0, import_react8.useMemo)(
+  const submitValidationSchema = (0, import_react9.useMemo)(
     () => createSubmitComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
@@ -2502,7 +2520,7 @@ var Form2 = ({
 
 // src/components/edit-component/edit-component.tsx
 var React19 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_editor_documents10 = require("@elementor/editor-documents");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_store40 = require("@elementor/store");
@@ -2525,7 +2543,7 @@ function updateCurrentComponent({
 
 // src/components/edit-component/component-modal.tsx
 var React18 = __toESM(require("react"));
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_dom = require("react-dom");
 var import_i18n18 = require("@wordpress/i18n");
 
@@ -2537,10 +2555,10 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-element-rect.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_utils5 = require("@elementor/utils");
 function useElementRect(element) {
-  const [rect, setRect] = (0, import_react9.useState)(new DOMRect(0, 0, 0, 0));
+  const [rect, setRect] = (0, import_react10.useState)(new DOMRect(0, 0, 0, 0));
   const onChange = (0, import_utils5.throttle)(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
@@ -2551,7 +2569,7 @@ function useElementRect(element) {
   useScrollListener({ element, onChange });
   useResizeListener({ element, onChange });
   useMutationsListener({ element, onChange });
-  (0, import_react9.useEffect)(
+  (0, import_react10.useEffect)(
     () => () => {
       onChange.cancel();
     },
@@ -2560,7 +2578,7 @@ function useElementRect(element) {
   return rect;
 }
 function useScrollListener({ element, onChange }) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -2572,7 +2590,7 @@ function useScrollListener({ element, onChange }) {
   }, [element, onChange]);
 }
 function useResizeListener({ element, onChange }) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -2587,7 +2605,7 @@ function useResizeListener({ element, onChange }) {
   }, [element, onChange]);
 }
 function useMutationsListener({ element, onChange }) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -2602,7 +2620,7 @@ function useMutationsListener({ element, onChange }) {
 // src/components/edit-component/component-modal.tsx
 function ComponentModal({ element, onClose }) {
   const canvasDocument = useCanvasDocument();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handleEsc = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -2718,7 +2736,7 @@ function useHandleDocumentSwitches() {
   const documentsManager = (0, import_editor_documents10.getV1DocumentsManager)();
   const currentComponentId = useCurrentComponentId();
   const path = (0, import_store40.__useSelector)(selectPath);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     return (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.commandEndEvent)("editor/documents/open"), () => {
       const nextDocument = documentsManager.getCurrent();
       if (nextDocument.id === currentComponentId) {
@@ -2859,7 +2877,7 @@ var EmptyState2 = ({ onEditComponent }) => {
 
 // src/components/instance-editing-panel/override-props-group.tsx
 var React22 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui10 = require("@elementor/editor-ui");
 var import_ui18 = require("@elementor/ui");
@@ -2868,7 +2886,7 @@ function OverridePropsGroup({ group, props }) {
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id2 = (0, import_react12.useId)();
+  const id2 = (0, import_react13.useId)();
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
@@ -2938,12 +2956,12 @@ var componentOverridablePropTypeUtil = (0, import_editor_props4.createPropUtils)
 
 // src/provider/overridable-prop-context.tsx
 var React24 = __toESM(require("react"));
-var import_react13 = require("react");
-var OverridablePropContext = (0, import_react13.createContext)(null);
+var import_react14 = require("react");
+var OverridablePropContext = (0, import_react14.createContext)(null);
 function OverridablePropProvider({ children, ...props }) {
   return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
-var useOverridablePropValue = () => (0, import_react13.useContext)(OverridablePropContext)?.value;
+var useOverridablePropValue = () => (0, import_react14.useContext)(OverridablePropContext)?.value;
 
 // src/store/actions/update-overridable-prop-origin-value.ts
 var import_store44 = require("@elementor/store");
@@ -3088,7 +3106,7 @@ function setOverridableProp({
 
 // src/components/overridable-props/indicator.tsx
 var React26 = __toESM(require("react"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_icons15 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
 var import_i18n22 = require("@wordpress/i18n");
@@ -3147,7 +3165,7 @@ var Content = (0, import_ui20.styled)(import_ui20.Box)`
 		}
 	}
 `;
-var Indicator = (0, import_react14.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React26.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React26.createElement(
+var Indicator = (0, import_react15.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React26.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React26.createElement(
   IconContainer,
   {
     className: "icon",
@@ -3586,10 +3604,10 @@ function initMcp() {
 }
 
 // src/populate-store.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_store53 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     (0, import_store53.__dispatch)(loadComponents());
   }, []);
   return null;