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

package/dist/index.mjs

@@ -356,23 +356,23 @@ function useNavigateBack() {
 }
 
 // src/components/component-properties-panel/component-properties-panel.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { ElementProvider, usePanelActions as useEditingPanelActions } from "@elementor/editor-editing-panel";
 import { useSelectedElement } from "@elementor/editor-elements";
 import { __createPanel as createPanel, Panel } from "@elementor/editor-panels";
 import { ThemeProvider } from "@elementor/editor-ui";
-import { Alert, Box as Box4, ErrorBoundary } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { Alert, Box as Box5, ErrorBoundary } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/components/component-properties-panel/component-properties-panel-content.tsx
-import * as React6 from "react";
-import { useMemo, useState as useState3 } from "react";
+import * as React7 from "react";
+import { useMemo, useRef, useState as useState4 } from "react";
 import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
 import { PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 import { ComponentPropListIcon as ComponentPropListIcon2, FolderPlusIcon, XIcon as XIcon2 } from "@elementor/icons";
-import { Divider, IconButton as IconButton3, List as List2, Stack as Stack4, Tooltip as Tooltip2 } from "@elementor/ui";
+import { Divider, IconButton as IconButton3, List as List2, Stack as Stack5, Tooltip as Tooltip2 } from "@elementor/ui";
 import { generateUniqueId as generateUniqueId2 } from "@elementor/utils";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/store/actions/add-overridable-group.ts
 import { __dispatch as dispatch, __getState as getState2 } from "@elementor/store";
@@ -721,14 +721,63 @@ function useOverridableProps(componentId) {
 }
 
 // src/components/component-properties-panel/properties-empty-state.tsx
-import * as React from "react";
+import * as React2 from "react";
+import { useState } from "react";
 import { ComponentPropListIcon } from "@elementor/icons";
-import { Link, Stack, Typography } from "@elementor/ui";
+import { Link, Stack as Stack2, Typography as Typography2 } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+
+// src/components/components-tab/component-introduction.tsx
+import * as React from "react";
+import { PopoverContent } from "@elementor/editor-controls";
+import { PopoverHeader } from "@elementor/editor-ui";
+import { Box, Button, Image, Popover, Stack, Typography } from "@elementor/ui";
 import { __ as __2 } from "@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(
-    Stack,
+    Popover,
+    {
+      anchorEl: anchorRef.current,
+      open: shouldShowIntroduction,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: -30
+      },
+      onClose
+    },
+    /* @__PURE__ */ React.createElement(Box, { sx: { width: "296px" } }, /* @__PURE__ */ React.createElement(PopoverHeader, { title: __2("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        sx: { width: "296px", height: "160px" },
+        src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
+        alt: ""
+      }
+    ), /* @__PURE__ */ React.createElement(PopoverContent, null, /* @__PURE__ */ React.createElement(Stack, { gap: 1, sx: { p: 2 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2(
+      "Click next to any setting you want users to customize - like text, images, or links.",
+      "elementor"
+    )), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2(
+      "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 }, __2("Got it", "elementor"))))))
+  );
+};
+
+// src/components/component-properties-panel/properties-empty-state.tsx
+function PropertiesEmptyState({ introductionRef }) {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    Stack2,
     {
       alignItems: "center",
       justifyContent: "flex-start",
@@ -737,67 +786,72 @@ function PropertiesEmptyState() {
       sx: { px: 2.5, pt: 10, pb: 5.5 },
       gap: 1
     },
-    /* @__PURE__ */ React.createElement(ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React.createElement(Typography, { align: "center", variant: "subtitle2" }, __2("Add your first property", "elementor")),
-    /* @__PURE__ */ React.createElement(Typography, { align: "center", variant: "caption" }, __2("Make instances flexible while keeping design synced.", "elementor")),
-    /* @__PURE__ */ React.createElement(Typography, { align: "center", variant: "caption" }, __2("Select any element, then click + next to a setting to expose it.", "elementor")),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React2.createElement(ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "subtitle2" }, __3("Add your first property", "elementor")),
+    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "caption" }, __3("Make instances flexible while keeping design synced.", "elementor")),
+    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "caption" }, __3("Select any element, then click + next to a setting to expose it.", "elementor")),
+    /* @__PURE__ */ React2.createElement(
       Link,
       {
         variant: "caption",
         color: "secondary",
-        href: LEARN_MORE_URL,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        sx: { textDecorationLine: "underline" }
+        sx: { textDecorationLine: "underline" },
+        onClick: () => setIsOpen(true)
       },
-      __2("Learn more", "elementor")
+      __3("Learn more", "elementor")
     )
-  );
+  ), /* @__PURE__ */ React2.createElement(
+    ComponentIntroduction,
+    {
+      anchorRef: introductionRef,
+      shouldShowIntroduction: isOpen,
+      onClose: () => setIsOpen(false)
+    }
+  ));
 }
 
 // src/components/component-properties-panel/properties-group.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { EditableField, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
 import {
   bindMenu,
   bindTrigger as bindTrigger2,
-  Box as Box3,
+  Box as Box4,
   IconButton as IconButton2,
   List,
   Menu,
-  Stack as Stack3,
+  Stack as Stack4,
   Tooltip,
-  Typography as Typography4,
+  Typography as Typography5,
   usePopupState as usePopupState2
 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/components/component-properties-panel/property-item.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { getWidgetsCache } from "@elementor/editor-elements";
 import { XIcon } from "@elementor/icons";
-import { bindPopover, bindTrigger, Box as Box2, IconButton, Popover, Typography as Typography3, usePopupState } from "@elementor/ui";
+import { bindPopover, bindTrigger, Box as Box3, IconButton, Popover as Popover2, Typography as Typography4, usePopupState } from "@elementor/ui";
 
 // src/components/overridable-props/overridable-prop-form.tsx
-import * as React2 from "react";
-import { useState } from "react";
+import * as React3 from "react";
+import { useState as useState2 } from "react";
 import { Form, MenuListItem } from "@elementor/editor-ui";
-import { Button, FormLabel, Grid, Select, Stack as Stack2, TextField, Typography as Typography2 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { Button as Button2, FormLabel, Grid, Select, Stack as Stack3, TextField, Typography as Typography3 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
 var SIZE = "tiny";
-var DEFAULT_GROUP = { value: null, label: __3("Default", "elementor") };
+var DEFAULT_GROUP = { value: null, label: __4("Default", "elementor") };
 function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
-  const [propLabel, setPropLabel] = useState(currentValue?.label ?? null);
-  const [group, setGroup] = useState(currentValue?.groupId ?? groups?.[0]?.value ?? null);
-  const name = __3("Name", "elementor");
-  const groupName = __3("Group Name", "elementor");
+  const [propLabel, setPropLabel] = useState2(currentValue?.label ?? null);
+  const [group, setGroup] = useState2(currentValue?.groupId ?? groups?.[0]?.value ?? null);
+  const name = __4("Name", "elementor");
+  const groupName = __4("Group Name", "elementor");
   const isCreate = currentValue === void 0;
-  const title = isCreate ? __3("Create new property", "elementor") : __3("Update property", "elementor");
-  const ctaLabel = isCreate ? __3("Create", "elementor") : __3("Update", "elementor");
-  return /* @__PURE__ */ React2.createElement(Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React2.createElement(Stack2, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React2.createElement(
-    Stack2,
+  const title = isCreate ? __4("Create new property", "elementor") : __4("Update property", "elementor");
+  const ctaLabel = isCreate ? __4("Create", "elementor") : __4("Update", "elementor");
+  return /* @__PURE__ */ React3.createElement(Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React3.createElement(Stack3, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
+    Stack3,
     {
       direction: "row",
       alignItems: "center",
@@ -805,18 +859,18 @@ 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(Typography2, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement(Typography3, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React3.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
     TextField,
     {
       name,
       size: SIZE,
       fullWidth: true,
-      placeholder: __3("Enter value", "elementor"),
+      placeholder: __4("Enter value", "elementor"),
       value: propLabel ?? "",
       onChange: (e) => setPropLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+  ))), /* @__PURE__ */ React3.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
     Select,
     {
       name: groupName,
@@ -833,21 +887,21 @@ function OverridablePropForm({ onSubmit, groups, currentValue, sx }) {
         return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
       }
     },
-    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React2.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React2.createElement(Stack2, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React2.createElement(Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React3.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React3.createElement(Stack3, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React3.createElement(Button2, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
 }
 
 // src/components/component-properties-panel/sortable.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
-  Box,
+  Box as Box2,
   styled,
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
-var SortableProvider = (props) => /* @__PURE__ */ React3.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React3.createElement(
+var SortableProvider = (props) => /* @__PURE__ */ React4.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React4.createElement(
   StyledSortableTrigger,
   {
     ...props,
@@ -855,9 +909,9 @@ var SortableTrigger = ({ triggerClassName, ...props }) => /* @__PURE__ */ React3
     className: `sortable-trigger ${triggerClassName ?? ""}`.trim(),
     "aria-label": "sort"
   },
-  /* @__PURE__ */ React3.createElement(GripVerticalIcon, { fontSize: "tiny" })
+  /* @__PURE__ */ React4.createElement(GripVerticalIcon, { fontSize: "tiny" })
 );
-var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React3.createElement(
+var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React4.createElement(
   UnstableSortableItem,
   {
     id: id2,
@@ -871,8 +925,8 @@ var SortableItem = ({ children, id: id2 }) => /* @__PURE__ */ React3.createEleme
       showDropIndication,
       isDragOverlay,
       isDragPlaceholder
-    }) => /* @__PURE__ */ React3.createElement(
-      Box,
+    }) => /* @__PURE__ */ React4.createElement(
+      Box2,
       {
         ...itemProps,
         style: itemStyle,
@@ -888,19 +942,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 = 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 = styled(Box)`
+var SortableItemIndicator = styled(Box2)`
 	width: 100%;
 	height: 1px;
 	background-color: ${({ theme }) => theme.palette.text.primary};
@@ -928,8 +982,8 @@ function PropertyItem({
     event.stopPropagation();
     onDelete(prop.overrideKey);
   };
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
-    Box2,
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    Box3,
     {
       ...bindTrigger(popoverState),
       sx: {
@@ -963,25 +1017,25 @@ function PropertyItem({
         }
       }
     },
-    /* @__PURE__ */ React4.createElement(SortableTrigger, { ...sortableTriggerProps }),
-    /* @__PURE__ */ React4.createElement(
-      Box2,
+    /* @__PURE__ */ React5.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React5.createElement(
+      Box3,
       {
         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(Typography3, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
-    /* @__PURE__ */ React4.createElement(IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React4.createElement(XIcon, { fontSize: "tiny" }))
-  ), /* @__PURE__ */ React4.createElement(
-    Popover,
+    /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", sx: { color: "text.primary", flexGrow: 1, fontSize: 10 } }, prop.label),
+    /* @__PURE__ */ React5.createElement(IconButton, { size: "tiny", onClick: handleDelete, "aria-label": "Delete property", sx: { p: 0.25 } }, /* @__PURE__ */ React5.createElement(XIcon, { fontSize: "tiny" }))
+  ), /* @__PURE__ */ React5.createElement(
+    Popover2,
     {
       ...popoverProps,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       PaperProps: { sx: { width: popoverState.anchorEl?.getBoundingClientRect().width } }
     },
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -1031,15 +1085,15 @@ function PropertiesGroup({
     popupState.close();
     onGroupDelete(group.id);
   };
-  return /* @__PURE__ */ React5.createElement(
-    Box3,
+  return /* @__PURE__ */ React6.createElement(
+    Box4,
     {
       sx: {
         opacity: isDragPlaceholder ? 0.5 : 1
       }
     },
-    /* @__PURE__ */ React5.createElement(Stack3, { gap: 1 }, /* @__PURE__ */ React5.createElement(
-      Box3,
+    /* @__PURE__ */ React6.createElement(Stack4, { gap: 1 }, /* @__PURE__ */ React6.createElement(
+      Box4,
       {
         className: "group-header",
         sx: {
@@ -1058,9 +1112,9 @@ function PropertiesGroup({
           }
         }
       },
-      /* @__PURE__ */ React5.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
-      /* @__PURE__ */ React5.createElement(Stack3, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React5.createElement(
-        Box3,
+      /* @__PURE__ */ React6.createElement(SortableTrigger, { triggerClassName: "group-sortable-trigger", ...sortableTriggerProps }),
+      /* @__PURE__ */ React6.createElement(Stack4, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, isThisGroupEditing ? /* @__PURE__ */ React6.createElement(
+        Box4,
         {
           sx: {
             flex: 1,
@@ -1073,36 +1127,36 @@ function PropertiesGroup({
             pl: 0.5
           }
         },
-        /* @__PURE__ */ React5.createElement(
+        /* @__PURE__ */ React6.createElement(
           EditableField,
           {
             ref: editableRef,
-            as: Typography4,
+            as: Typography5,
             variant: "caption",
             error: error ?? void 0,
             sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 },
             ...getEditableProps()
           }
         )
-      ) : /* @__PURE__ */ React5.createElement(
-        Typography4,
+      ) : /* @__PURE__ */ React6.createElement(
+        Typography5,
         {
           variant: "caption",
           sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
         },
         group.label
-      ), /* @__PURE__ */ React5.createElement(
+      ), /* @__PURE__ */ React6.createElement(
         IconButton2,
         {
           className: "group-menu",
           size: "tiny",
           sx: { p: 0.25, visibility: isThisGroupEditing ? "visible" : void 0 },
-          "aria-label": __4("Group actions", "elementor"),
+          "aria-label": __5("Group actions", "elementor"),
           ...bindTrigger2(popupState)
         },
-        /* @__PURE__ */ React5.createElement(DotsVerticalIcon, { fontSize: "tiny" })
+        /* @__PURE__ */ React6.createElement(DotsVerticalIcon, { fontSize: "tiny" })
       ))
-    ), /* @__PURE__ */ React5.createElement(List, { sx: { p: 0, display: "flex", flexDirection: "column", gap: 1 } }, /* @__PURE__ */ React5.createElement(SortableProvider, { value: group.props, onChange: onPropsReorder }, groupProps.map((prop) => /* @__PURE__ */ React5.createElement(SortableItem, { key: prop.overrideKey, id: prop.overrideKey }, ({ triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder }) => /* @__PURE__ */ React5.createElement(
+    ), /* @__PURE__ */ React6.createElement(List, { sx: { p: 0, display: "flex", flexDirection: "column", gap: 1 } }, /* @__PURE__ */ React6.createElement(SortableProvider, { value: group.props, onChange: onPropsReorder }, groupProps.map((prop) => /* @__PURE__ */ React6.createElement(SortableItem, { key: prop.overrideKey, id: prop.overrideKey }, ({ triggerProps, triggerStyle, isDragPlaceholder: isItemDragPlaceholder }) => /* @__PURE__ */ React6.createElement(
       PropertyItem,
       {
         prop,
@@ -1113,27 +1167,27 @@ function PropertiesGroup({
         onUpdate: (data) => onPropertyUpdate(prop.overrideKey, data)
       }
     )))))),
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       Menu,
       {
         ...bindMenu(popupState),
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" }
       },
-      /* @__PURE__ */ React5.createElement(MenuListItem2, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", sx: { color: "text.primary" } }, __4("Rename", "elementor"))),
-      /* @__PURE__ */ React5.createElement(
+      /* @__PURE__ */ React6.createElement(MenuListItem2, { sx: { minWidth: "160px" }, onClick: handleRenameClick }, /* @__PURE__ */ React6.createElement(Typography5, { variant: "caption", sx: { color: "text.primary" } }, __5("Rename", "elementor"))),
+      /* @__PURE__ */ React6.createElement(
         Tooltip,
         {
-          title: hasProperties ? __4("To delete the group, first remove all the properties", "elementor") : "",
+          title: hasProperties ? __5("To delete the group, first remove all the properties", "elementor") : "",
           placement: "right"
         },
-        /* @__PURE__ */ React5.createElement("span", null, /* @__PURE__ */ React5.createElement(MenuListItem2, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React5.createElement(
-          Typography4,
+        /* @__PURE__ */ React6.createElement("span", null, /* @__PURE__ */ React6.createElement(MenuListItem2, { onClick: handleDeleteClick, disabled: hasProperties }, /* @__PURE__ */ React6.createElement(
+          Typography5,
           {
             variant: "caption",
             sx: { color: hasProperties ? "text.disabled" : "error.light" }
           },
-          __4("Delete", "elementor")
+          __5("Delete", "elementor")
         )))
       )
     )
@@ -1141,10 +1195,10 @@ function PropertiesGroup({
 }
 
 // src/components/component-properties-panel/use-current-editable-item.ts
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { setDocumentModifiedStatus } from "@elementor/editor-documents";
 import { useEditable } from "@elementor/editor-ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 
 // src/store/actions/rename-overridable-group.ts
 import { __dispatch as dispatch7, __getState as getState8 } from "@elementor/store";
@@ -1171,10 +1225,10 @@ function renameOverridableGroup({ componentId, groupId, label }) {
 }
 
 // src/components/component-properties-panel/utils/validate-group-label.ts
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 var ERROR_MESSAGES = {
-  EMPTY_NAME: __5("Group name is required", "elementor"),
-  DUPLICATE_NAME: __5("Group name already exists", "elementor")
+  EMPTY_NAME: __6("Group name is required", "elementor"),
+  DUPLICATE_NAME: __6("Group name already exists", "elementor")
 };
 function validateGroupLabel(label, existingGroups) {
   const trimmedLabel = label.trim();
@@ -1190,7 +1244,7 @@ function validateGroupLabel(label, existingGroups) {
 
 // src/components/component-properties-panel/use-current-editable-item.ts
 function useCurrentEditableItem() {
-  const [editingGroupId, setEditingGroupId] = useState2(null);
+  const [editingGroupId, setEditingGroupId] = useState3(null);
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(currentComponentId);
   const allGroupsRecord = overridableProps?.groups?.items ?? {};
@@ -1203,7 +1257,7 @@ function useCurrentEditableItem() {
   };
   const handleSubmit = (newLabel) => {
     if (!editingGroupId || !currentComponentId) {
-      throw new Error(__6("Group ID or component ID is missing", "elementor"));
+      throw new Error(__7("Group ID or component ID is missing", "elementor"));
     }
     renameOverridableGroup({
       componentId: currentComponentId,
@@ -1256,7 +1310,8 @@ function generateUniqueLabel(groups) {
 function ComponentPropertiesPanelContent({ onClose }) {
   const currentComponentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(currentComponentId);
-  const [isAddingGroup, setIsAddingGroup] = useState3(false);
+  const [isAddingGroup, setIsAddingGroup] = useState4(false);
+  const introductionRef = useRef(null);
   const groupLabelEditable = useCurrentEditableItem();
   const groups = useMemo(() => {
     if (!overridableProps) {
@@ -1310,15 +1365,24 @@ function ComponentPropertiesPanelContent({ onClose }) {
     deleteOverridableGroup({ componentId: currentComponentId, groupId });
     setDocumentModifiedStatus2(true);
   };
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React6.createElement(Stack4, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React6.createElement(ComponentPropListIcon2, { fontSize: "tiny" }), /* @__PURE__ */ React6.createElement(PanelHeaderTitle, { variant: "subtitle2" }, __7("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React6.createElement(Tooltip2, { title: __7("Add new group", "elementor") }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(PanelHeader, { sx: { justifyContent: "start", pl: 1.5, pr: 1, py: 1 } }, /* @__PURE__ */ React7.createElement(Stack5, { direction: "row", alignItems: "center", gap: 0.5, flexGrow: 1 }, /* @__PURE__ */ React7.createElement(ComponentPropListIcon2, { fontSize: "tiny" }), /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { variant: "subtitle2" }, __8("Component properties", "elementor"))), !showEmptyState && /* @__PURE__ */ React7.createElement(Tooltip2, { title: __8("Add new group", "elementor") }, /* @__PURE__ */ React7.createElement(
     IconButton3,
     {
       size: "tiny",
-      "aria-label": __7("Add new group", "elementor"),
+      "aria-label": __8("Add new group", "elementor"),
       onClick: handleAddGroupClick
     },
-    /* @__PURE__ */ React6.createElement(FolderPlusIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React6.createElement(Tooltip2, { title: __7("Close panel", "elementor") }, /* @__PURE__ */ React6.createElement(IconButton3, { size: "tiny", "aria-label": __7("Close panel", "elementor"), onClick: onClose }, /* @__PURE__ */ React6.createElement(XIcon2, { fontSize: "tiny" })))), /* @__PURE__ */ React6.createElement(Divider, null), /* @__PURE__ */ React6.createElement(PanelBody, null, showEmptyState ? /* @__PURE__ */ React6.createElement(PropertiesEmptyState, null) : /* @__PURE__ */ React6.createElement(List2, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React6.createElement(SortableProvider, { value: groupIds, onChange: handleGroupsReorder }, groups.map((group) => /* @__PURE__ */ React6.createElement(SortableItem, { key: group.id, id: group.id }, ({ triggerProps, triggerStyle, isDragPlaceholder }) => /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(FolderPlusIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React7.createElement(Tooltip2, { title: __8("Close panel", "elementor") }, /* @__PURE__ */ React7.createElement(
+    IconButton3,
+    {
+      ref: introductionRef,
+      size: "tiny",
+      "aria-label": __8("Close panel", "elementor"),
+      onClick: onClose
+    },
+    /* @__PURE__ */ React7.createElement(XIcon2, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(PanelBody, null, showEmptyState ? /* @__PURE__ */ React7.createElement(PropertiesEmptyState, { introductionRef }) : /* @__PURE__ */ React7.createElement(List2, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React7.createElement(SortableProvider, { value: groupIds, onChange: handleGroupsReorder }, groups.map((group) => /* @__PURE__ */ React7.createElement(SortableItem, { key: group.id, id: group.id }, ({ triggerProps, triggerStyle, isDragPlaceholder }) => /* @__PURE__ */ React7.createElement(
     PropertiesGroup,
     {
       group,
@@ -1350,7 +1414,7 @@ function ComponentPropertiesPanel() {
   if (!element || !elementType) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(ThemeProvider, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(ThemeProvider, null, /* @__PURE__ */ React8.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React8.createElement(Panel, null, /* @__PURE__ */ React8.createElement(
     ComponentPropertiesPanelContent,
     {
       onClose: () => {
@@ -1360,57 +1424,11 @@ function ComponentPropertiesPanel() {
     }
   )))));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, __8("Something went wrong", "elementor"))));
-
-// src/components/components-tab/component-introduction.tsx
-import * as React8 from "react";
-import { PopoverContent } from "@elementor/editor-controls";
-import { PopoverHeader } from "@elementor/editor-ui";
-import { Box as Box5, Button as Button2, Image, Popover as Popover2, Stack as Stack5, Typography as Typography5 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
-var ComponentIntroduction = ({
-  anchorRef,
-  shouldShowIntroduction,
-  onClose
-}) => {
-  if (!anchorRef.current || !shouldShowIntroduction) {
-    return null;
-  }
-  return /* @__PURE__ */ React8.createElement(
-    Popover2,
-    {
-      anchorEl: anchorRef.current,
-      open: shouldShowIntroduction,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: -30
-      },
-      onClose
-    },
-    /* @__PURE__ */ React8.createElement(Box5, { sx: { width: "296px" } }, /* @__PURE__ */ React8.createElement(PopoverHeader, { title: __9("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React8.createElement(
-      Image,
-      {
-        sx: { width: "296px", height: "160px" },
-        src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
-        alt: ""
-      }
-    ), /* @__PURE__ */ React8.createElement(PopoverContent, null, /* @__PURE__ */ React8.createElement(Stack5, { gap: 1, sx: { p: 2 } }, /* @__PURE__ */ React8.createElement(Typography5, { variant: "body2" }, __9("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React8.createElement(Typography5, { variant: "body2" }, __9(
-      "Click next to any setting you want users to customize - like text, images, or links.",
-      "elementor"
-    )), /* @__PURE__ */ React8.createElement(Typography5, { variant: "body2" }, __9(
-      "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
-      "elementor"
-    )), /* @__PURE__ */ React8.createElement(Stack5, { direction: "row", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React8.createElement(Button2, { size: "medium", variant: "contained", onClick: onClose }, __9("Got it", "elementor"))))))
-  );
-};
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(Box5, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, __9("Something went wrong", "elementor"))));
 
 // src/components/component-panel-header/component-badge.tsx
 import * as React9 from "react";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef as useRef2 } from "react";
 import { ComponentPropListIcon as ComponentPropListIcon3 } from "@elementor/icons";
 import { Badge, Box as Box6, keyframes, styled as styled2, ToggleButton } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
@@ -1455,7 +1473,7 @@ var StyledBadge = styled2(Badge, { shouldForwardProp: (prop) => prop !== "animat
   })
 );
 function usePrevious(value) {
-  const ref = useRef(value);
+  const ref = useRef2(value);
   useEffect(() => {
     ref.current = value;
   }, [value]);
@@ -2235,7 +2253,7 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 
 // src/components/create-component-form/create-component-form.tsx
 import * as React17 from "react";
-import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState7 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
 import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
 import { StarIcon } from "@elementor/icons";
@@ -2268,10 +2286,10 @@ function createUnpublishedComponent(name, element, eventData, overridableProps,
 }
 
 // src/components/create-component-form/hooks/use-form.ts
-import { useMemo as useMemo2, useState as useState5 } from "react";
+import { useMemo as useMemo2, useState as useState6 } from "react";
 var useForm = (initialValues) => {
-  const [values, setValues] = useState5(initialValues);
-  const [errors, setErrors] = useState5({});
+  const [values, setValues] = useState6(initialValues);
+  const [errors, setErrors] = useState6({});
   const isValid = useMemo2(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
@@ -2373,10 +2391,10 @@ function countNestedElements(container) {
 
 // src/components/create-component-form/create-component-form.tsx
 function CreateComponentForm() {
-  const [element, setElement] = useState6(null);
-  const [anchorPosition, setAnchorPosition] = useState6();
-  const [resultNotification, setResultNotification] = useState6(null);
-  const eventData = useRef3(null);
+  const [element, setElement] = useState7(null);
+  const [anchorPosition, setAnchorPosition] = useState7();
+  const [resultNotification, setResultNotification] = useState7(null);
+  const eventData = useRef4(null);
   useEffect2(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
@@ -2547,10 +2565,10 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-element-rect.ts
-import { useEffect as useEffect3, useState as useState7 } from "react";
+import { useEffect as useEffect3, useState as useState8 } from "react";
 import { throttle } from "@elementor/utils";
 function useElementRect(element) {
-  const [rect, setRect] = useState7(new DOMRect(0, 0, 0, 0));
+  const [rect, setRect] = useState8(new DOMRect(0, 0, 0, 0));
   const onChange = throttle(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));