@elementor/editor-components 4.0.0-672 → 4.0.0-673

package/dist/index.mjs

@@ -10,7 +10,7 @@ import { injectTab } from "@elementor/editor-elements-panel";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -374,8 +374,10 @@ var componentOverrideTransformer = createTransformer3((override) => {
 });
 
 // src/components/components-tab/components.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { ThemeProvider } from "@elementor/editor-ui";
+import { Stack as Stack4 } from "@elementor/ui";
+import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
 
 // src/hooks/use-components.ts
 import { __useSelector as useSelector2 } from "@elementor/store";
@@ -435,8 +437,9 @@ var ComponentSearch = () => {
 
 // src/components/components-tab/components-list.tsx
 import * as React5 from "react";
-import { ComponentsIcon as ComponentsIcon2 } from "@elementor/icons";
-import { Box as Box4, Divider, Link, List, Stack as Stack3, Typography as Typography2 } from "@elementor/ui";
+import { ComponentsIcon as ComponentsIcon2, CrownFilledIcon } from "@elementor/icons";
+import { Box as Box4, Button, Divider, Link, List, Stack as Stack3, Typography as Typography2 } from "@elementor/ui";
+import { hasProInstalled } from "@elementor/utils";
 import { __ as __2 } from "@wordpress/i18n";
 
 // src/hooks/use-components-permissions.ts
@@ -527,45 +530,60 @@ function ComponentName({ name, editable }) {
 
 // src/components/components-tab/loading-components.tsx
 import * as React4 from "react";
-import { Box as Box3, ListItemButton as ListItemButton2, Skeleton, Stack as Stack2 } from "@elementor/ui";
-var ROWS = Array.from({ length: 6 }, (_, index) => index);
+import { Box as Box3, Skeleton, Stack as Stack2 } from "@elementor/ui";
+var ROWS = Array.from({ length: 3 }, (_, index) => index);
+var STAGGER_DELAY_MS = 80;
 var LoadingComponents = () => {
   return /* @__PURE__ */ React4.createElement(
     Stack2,
     {
       "aria-label": "Loading components",
-      gap: 1,
+      gap: 1.5,
       sx: {
         pointerEvents: "none",
         position: "relative",
         maxHeight: "300px",
         overflow: "hidden",
+        px: 1,
         "&:after": {
           position: "absolute",
-          top: 0,
+          bottom: 0,
           content: '""',
           left: 0,
           width: "100%",
-          height: "300px",
-          background: "linear-gradient(to top, white, transparent)",
-          pointerEvents: "none"
+          height: "40%",
+          pointerEvents: "none",
+          zIndex: 1
         }
       }
     },
     ROWS.map((row) => /* @__PURE__ */ React4.createElement(
-      ListItemButton2,
+      Box3,
       {
         key: row,
-        sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
-        shape: "rounded"
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        sx: {
+          py: 0.75,
+          px: 1.5,
+          opacity: 0,
+          animation: `e-loading-fade-in 0.4s ease-out ${row * STAGGER_DELAY_MS}ms forwards`,
+          "@keyframes e-loading-fade-in": {
+            from: { opacity: 0, transform: "translateY(4px)" },
+            to: { opacity: 1, transform: "translateY(0)" }
+          }
+        }
       },
-      /* @__PURE__ */ React4.createElement(Box3, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React4.createElement(Skeleton, { variant: "text", width: "100%", height: "36px" }))
+      /* @__PURE__ */ React4.createElement(Skeleton, { animation: "wave", variant: "rounded", width: 24, height: 24 }),
+      /* @__PURE__ */ React4.createElement(Skeleton, { animation: "wave", variant: "rounded", width: "60%", height: 14 })
     ))
   );
 };
 
 // src/components/components-tab/components-list.tsx
 var LEARN_MORE_URL = "http://go.elementor.com/components-guide-article";
+var UPGRADE_URL = "https://go.elementor.com/go-pro-components/";
 var SUBTITLE_OVERRIDE_SX = {
   fontSize: "0.875rem !important",
   fontWeight: "500 !important"
@@ -577,10 +595,40 @@ function ComponentsList() {
   }
   const isEmpty = !components?.length;
   if (isEmpty) {
-    return searchValue.length ? /* @__PURE__ */ React5.createElement(EmptySearchResult, null) : /* @__PURE__ */ React5.createElement(EmptyState, null);
+    if (searchValue.length) {
+      return /* @__PURE__ */ React5.createElement(EmptySearchResult, null);
+    }
+    return hasProInstalled() ? /* @__PURE__ */ React5.createElement(EmptyState, null) : /* @__PURE__ */ React5.createElement(ProUpgradeEmptyState, null);
   }
   return /* @__PURE__ */ React5.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React5.createElement(ComponentItem, { key: component.uid, component })));
 }
+var ProUpgradeEmptyState = () => {
+  return /* @__PURE__ */ React5.createElement(
+    Stack3,
+    {
+      alignItems: "center",
+      justifyContent: "start",
+      height: "100%",
+      sx: { px: 2, py: 4 },
+      gap: 2,
+      overflow: "hidden"
+    },
+    /* @__PURE__ */ React5.createElement(Stack3, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React5.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React5.createElement(Typography2, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __2("Create Reusable Components", "elementor")), /* @__PURE__ */ React5.createElement(Typography2, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, __2("Create design elements that sync across your entire site.", "elementor"))),
+    /* @__PURE__ */ React5.createElement(
+      Button,
+      {
+        variant: "contained",
+        color: "promotion",
+        size: "small",
+        startIcon: /* @__PURE__ */ React5.createElement(CrownFilledIcon, null),
+        href: UPGRADE_URL,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
+      __2("Upgrade now", "elementor")
+    )
+  );
+};
 var EmptyState = () => {
   const { canCreate } = useComponentsPermissions();
   return /* @__PURE__ */ React5.createElement(
@@ -687,46 +735,85 @@ var useFilteredComponents = () => {
 };
 
 // src/components/components-tab/components-pro-notification.tsx
+import * as React7 from "react";
+import { __ as __4 } from "@wordpress/i18n";
+
+// src/components/components-upgrade-alert.tsx
 import * as React6 from "react";
-import { InfoAlert } from "@elementor/editor-ui";
-import { Box as Box5, Typography as Typography3 } from "@elementor/ui";
+import { CrownFilledIcon as CrownFilledIcon2 } from "@elementor/icons";
+import { Alert, AlertAction, AlertTitle, Box as Box5, Typography as Typography3 } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
+function ComponentsUpgradeAlert({ title, description, upgradeUrl }) {
+  return /* @__PURE__ */ React6.createElement(Box5, { sx: { mt: "auto" } }, /* @__PURE__ */ React6.createElement(
+    Alert,
+    {
+      variant: "standard",
+      color: "promotion",
+      icon: /* @__PURE__ */ React6.createElement(CrownFilledIcon2, { fontSize: "tiny" }),
+      role: "status",
+      size: "small",
+      action: /* @__PURE__ */ React6.createElement(
+        AlertAction,
+        {
+          variant: "contained",
+          color: "promotion",
+          href: upgradeUrl,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        },
+        __3("Upgrade now", "elementor")
+      ),
+      sx: { m: 2, mt: 1 }
+    },
+    /* @__PURE__ */ React6.createElement(AlertTitle, null, title),
+    /* @__PURE__ */ React6.createElement(Typography3, { variant: "caption" }, description)
+  ));
+}
+
+// src/components/components-tab/components-pro-notification.tsx
+var UPGRADE_URL2 = "https://go.elementor.com/go-pro-components-create/";
 function ComponentsProNotification() {
-  return /* @__PURE__ */ React6.createElement(Box5, { sx: { px: 2 } }, /* @__PURE__ */ React6.createElement(InfoAlert, null, /* @__PURE__ */ React6.createElement(Typography3, { variant: "caption", component: "span" }, /* @__PURE__ */ React6.createElement(Typography3, { variant: "caption", component: "span", fontWeight: "bold" }, __3("Try Components for free:", "elementor")), " ", __3(
-    "Soon Components will be part of the Pro subscription, but what you create now will remain on your site.",
-    "elementor"
-  ))));
+  return /* @__PURE__ */ React7.createElement(
+    ComponentsUpgradeAlert,
+    {
+      title: __4("Create new components", "elementor"),
+      description: __4("Creating new components requires an active Pro subscription.", "elementor"),
+      upgradeUrl: UPGRADE_URL2
+    }
+  );
 }
 
 // src/components/components-tab/components.tsx
 var ComponentsContent = () => {
   const { components, isLoading } = useComponents();
   const hasComponents = !isLoading && components.length > 0;
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, hasComponents && /* @__PURE__ */ React7.createElement(ComponentSearch, null), hasComponents && /* @__PURE__ */ React7.createElement(ComponentsProNotification, null), /* @__PURE__ */ React7.createElement(ComponentsList, null));
+  const hasPro = hasProInstalled2();
+  const showProNotification = !hasPro && hasComponents;
+  return /* @__PURE__ */ React8.createElement(Stack4, { sx: { height: "100%" } }, hasComponents && /* @__PURE__ */ React8.createElement(ComponentSearch, null), /* @__PURE__ */ React8.createElement(ComponentsList, null), showProNotification && /* @__PURE__ */ React8.createElement(ComponentsProNotification, null));
 };
 var Components = () => {
-  return /* @__PURE__ */ React7.createElement(ThemeProvider, null, /* @__PURE__ */ React7.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React7.createElement(ComponentsContent, null)));
+  return /* @__PURE__ */ React8.createElement(ThemeProvider, null, /* @__PURE__ */ React8.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React8.createElement(ComponentsContent, null)));
 };
 
 // src/components/detach-instance-confirmation-dialog.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { closeDialog, ConfirmationDialog, openDialog } from "@elementor/editor-ui";
 import { AlertTriangleFilledIcon } from "@elementor/icons";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 function DetachInstanceConfirmationDialog({
   open,
   onClose,
   onConfirm
 }) {
-  return /* @__PURE__ */ React8.createElement(ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React8.createElement(ConfirmationDialog.Title, { icon: AlertTriangleFilledIcon, iconColor: "secondary" }, __4("Detach from Component?", "elementor")), /* @__PURE__ */ React8.createElement(ConfirmationDialog.Content, null, /* @__PURE__ */ React8.createElement(ConfirmationDialog.ContentText, null, __4(
+  return /* @__PURE__ */ React9.createElement(ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React9.createElement(ConfirmationDialog.Title, { icon: AlertTriangleFilledIcon, iconColor: "secondary" }, __5("Detach from Component?", "elementor")), /* @__PURE__ */ React9.createElement(ConfirmationDialog.Content, null, /* @__PURE__ */ React9.createElement(ConfirmationDialog.ContentText, null, __5(
     "Detaching this instance will break its link to the Component. Changes to the Component will no longer apply. Continue?",
     "elementor"
-  ))), /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React9.createElement(
     ConfirmationDialog.Actions,
     {
       onClose,
       onConfirm,
-      confirmLabel: __4("Detach", "elementor"),
+      confirmLabel: __5("Detach", "elementor"),
       color: "primary"
     }
   ));
@@ -737,58 +824,59 @@ function openDetachConfirmDialog(onConfirm) {
     onConfirm();
   };
   openDialog({
-    component: /* @__PURE__ */ React8.createElement(DetachInstanceConfirmationDialog, { open: true, onClose: closeDialog, onConfirm: handleConfirm })
+    component: /* @__PURE__ */ React9.createElement(DetachInstanceConfirmationDialog, { open: true, onClose: closeDialog, onConfirm: handleConfirm })
   });
 }
 
 // src/components/in-edit-mode.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { closeDialog as closeDialog2, openDialog as openDialog2 } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Box as Box6, Button, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack4, Typography as Typography4 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { Box as Box6, Button as Button2, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack5, Typography as Typography4 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog2({
-    component: /* @__PURE__ */ React9.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React10.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __5("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React9.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React9.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React9.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React9.createElement(Typography4, { variant: "subtitle1" }, content))), /* @__PURE__ */ React9.createElement(DialogContent, null, /* @__PURE__ */ React9.createElement(Stack4, { spacing: 2, direction: "column" }, /* @__PURE__ */ React9.createElement(Typography4, { variant: "body2" }, __5(
+  const content = __6("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React10.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React10.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React10.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React10.createElement(Typography4, { variant: "subtitle1" }, content))), /* @__PURE__ */ React10.createElement(DialogContent, null, /* @__PURE__ */ React10.createElement(Stack5, { spacing: 2, direction: "column" }, /* @__PURE__ */ React10.createElement(Typography4, { variant: "body2" }, __6(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React9.createElement(DialogActions, null, /* @__PURE__ */ React9.createElement(Button, { color: "secondary", variant: "contained", onClick: closeDialog2 }, __5("Close", "elementor"))))));
+  )), /* @__PURE__ */ React10.createElement(DialogActions, null, /* @__PURE__ */ React10.createElement(Button2, { color: "secondary", variant: "contained", onClick: closeDialog2 }, __6("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { PencilIcon as PencilIcon2 } from "@elementor/icons";
-import { Box as Box8, Stack as Stack11 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { Box as Box8, Stack as Stack12 } from "@elementor/ui";
+import { hasProInstalled as hasProInstalled3 } from "@elementor/utils";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/provider/component-instance-context.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var ComponentInstanceContext = createContext2(null);
 function ComponentInstanceProvider({ children, ...props }) {
-  return /* @__PURE__ */ React10.createElement(ComponentInstanceContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React11.createElement(ComponentInstanceContext.Provider, { value: props }, children);
 }
 var useComponentId = () => useContext2(ComponentInstanceContext)?.componentId;
 var useComponentInstanceOverrides = () => useContext2(ComponentInstanceContext)?.overrides;
 var useComponentOverridableProps = () => useContext2(ComponentInstanceContext)?.overridableProps;
 
 // src/components/instance-editing-panel/detach-action.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { useState } from "react";
 import { notify } from "@elementor/editor-notifications";
 import { DetachIcon } from "@elementor/icons";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/utils/detach-component-instance/detach-component-instance.ts
 import { getContainer, replaceElement } from "@elementor/editor-elements";
 import { undoable } from "@elementor/editor-v1-adapters";
 import { __dispatch as dispatch, __getState as getState3 } from "@elementor/store";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 
 // src/prop-types/component-instance-overrides-prop-type.ts
 import { createPropUtils as createPropUtils3 } from "@elementor/editor-props";
@@ -1137,8 +1225,8 @@ async function detachComponentInstance({
       }
     },
     {
-      title: __6("Detach from Component", "elementor"),
-      subtitle: __6("Instance detached", "elementor")
+      title: __7("Detach from Component", "elementor"),
+      subtitle: __7("Instance detached", "elementor")
     }
   );
   return undoableDetach();
@@ -1153,16 +1241,16 @@ function extractInstanceOverrides(instanceContainer) {
 }
 
 // src/components/instance-editing-panel/instance-panel-header.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { ComponentsIcon as ComponentsIcon3 } from "@elementor/icons";
-import { IconButton, Stack as Stack5, Tooltip } from "@elementor/ui";
+import { IconButton, Stack as Stack6, Tooltip } from "@elementor/ui";
 function InstancePanelHeader({ componentName, actions }) {
-  return /* @__PURE__ */ React11.createElement(PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React11.createElement(Stack5, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React11.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React11.createElement(EllipsisWithTooltip2, { title: componentName, as: PanelHeaderTitle, sx: { flexGrow: 1 } }), actions));
+  return /* @__PURE__ */ React12.createElement(PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React12.createElement(Stack6, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React12.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React12.createElement(EllipsisWithTooltip2, { title: componentName, as: PanelHeaderTitle, sx: { flexGrow: 1 } }), actions));
 }
 function EditComponentAction({ label, onClick, disabled = false, icon: Icon2 }) {
-  return /* @__PURE__ */ React11.createElement(Tooltip, { title: label }, /* @__PURE__ */ React11.createElement(IconButton, { size: "tiny", onClick, "aria-label": label, disabled }, /* @__PURE__ */ React11.createElement(Icon2, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React12.createElement(Tooltip, { title: label }, /* @__PURE__ */ React12.createElement(IconButton, { size: "tiny", onClick, "aria-label": label, disabled }, /* @__PURE__ */ React12.createElement(Icon2, { fontSize: "tiny" })));
 }
 
 // src/components/instance-editing-panel/detach-action.tsx
@@ -1182,7 +1270,7 @@ var DetachAction = ({
     } catch {
       notify({
         type: "error",
-        message: __7("Failed to detach component instance.", "elementor"),
+        message: __8("Failed to detach component instance.", "elementor"),
         id: "detach-component-instance-failed"
       });
     }
@@ -1193,8 +1281,8 @@ var DetachAction = ({
   const handleDetachClick = () => {
     setIsDetachDialogOpen(true);
   };
-  const detachLabel = __7("Detach from Component", "elementor");
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(EditComponentAction, { label: detachLabel, icon: DetachIcon, onClick: handleDetachClick }), /* @__PURE__ */ React12.createElement(
+  const detachLabel = __8("Detach from Component", "elementor");
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(EditComponentAction, { label: detachLabel, icon: DetachIcon, onClick: handleDetachClick }), /* @__PURE__ */ React13.createElement(
     DetachInstanceConfirmationDialog,
     {
       open: isDetachDialogOpen,
@@ -1219,21 +1307,21 @@ function getDetachTrackingInfo() {
 }
 
 // src/components/instance-editing-panel/empty-state.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { ComponentPropListIcon, PencilIcon } from "@elementor/icons";
-import { Button as Button2, Stack as Stack6, Typography as Typography5 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { Button as Button3, Stack as Stack7, Typography as Typography5 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
   const { canEdit } = useComponentsPermissions();
-  const message = canEdit ? __8(
+  const message = canEdit ? __9(
     "Edit the component to add properties, manage them or update the design across all instances.",
     "elementor"
-  ) : __8(
+  ) : __9(
     "With your current role, you cannot edit this component. Contact an administrator to add properties.",
     "elementor"
   );
-  return /* @__PURE__ */ React13.createElement(
-    Stack6,
+  return /* @__PURE__ */ React14.createElement(
+    Stack7,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -1242,29 +1330,29 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__PURE__ */ React13.createElement(ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React13.createElement(Typography5, { align: "center", variant: "subtitle2" }, __8("No properties yet", "elementor")),
-    /* @__PURE__ */ React13.createElement(Typography5, { align: "center", variant: "caption", maxWidth: "170px" }, message),
-    canEdit && !!onEditComponent && /* @__PURE__ */ React13.createElement(Button2, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React13.createElement(PencilIcon, { fontSize: "small" }), __8("Edit component", "elementor"))
+    /* @__PURE__ */ React14.createElement(ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React14.createElement(Typography5, { align: "center", variant: "subtitle2" }, __9("No properties yet", "elementor")),
+    /* @__PURE__ */ React14.createElement(Typography5, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && !!onEditComponent && /* @__PURE__ */ React14.createElement(Button3, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React14.createElement(PencilIcon, { fontSize: "small" }), __9("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/instance-panel-body.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { ControlAdornmentsProvider } from "@elementor/editor-controls";
 import { getFieldIndicators } from "@elementor/editor-editing-panel";
 import { PanelBody } from "@elementor/editor-panels";
-import { Divider as Divider2, Stack as Stack10 } from "@elementor/ui";
+import { Divider as Divider2, Stack as Stack11 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-props-group.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
-import { Box as Box7, Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack9 } from "@elementor/ui";
+import { Box as Box7, Collapse, ListItemButton as ListItemButton2, ListItemText, Stack as Stack10 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import {
   ControlReplacementsProvider,
   getControlReplacements,
@@ -1282,7 +1370,7 @@ import {
   useElement
 } from "@elementor/editor-editing-panel";
 import { getElementSettings, getElementType as getElementType2 } from "@elementor/editor-elements";
-import { Stack as Stack8 } from "@elementor/ui";
+import { Stack as Stack9 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
 import { getElementType } from "@elementor/editor-elements";
@@ -1316,11 +1404,11 @@ function getControlsByBind(controls) {
 }
 
 // src/provider/overridable-prop-context.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { createContext as createContext3, useContext as useContext3 } from "react";
 var OverridablePropContext = createContext3(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React14.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React15.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => useContext3(OverridablePropContext)?.value;
 var useComponentInstanceElement = () => useContext3(OverridablePropContext)?.componentInstanceElement;
@@ -1549,11 +1637,11 @@ function extractInnerOverrideInfo(override) {
 }
 
 // src/components/control-label.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
-import { Stack as Stack7 } from "@elementor/ui";
+import { Stack as Stack8 } from "@elementor/ui";
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React15.createElement(Stack7, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React15.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React15.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React16.createElement(Stack8, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React16.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React16.createElement(ControlAdornments, null));
 };
 
 // src/components/errors.ts
@@ -1662,7 +1750,7 @@ function OverridePropControl({ overrideKey }) {
   if (!overridableProp) {
     return null;
   }
-  return /* @__PURE__ */ React16.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React16.createElement(OverrideControl, { overridableProp }));
+  return /* @__PURE__ */ React17.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React17.createElement(OverrideControl, { overridableProp }));
 }
 function OverrideControl({ overridableProp }) {
   const componentInstanceElement = useElement();
@@ -1756,13 +1844,13 @@ function OverrideControl({ overridableProp }) {
       [overridableProp.overrideKey]: propType
     }
   });
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(
     OverridablePropProvider,
     {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__PURE__ */ React16.createElement(ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React16.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React17.createElement(ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React17.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React17.createElement(
       PropProvider,
       {
         propType: propTypeSchema,
@@ -1772,7 +1860,7 @@ function OverrideControl({ overridableProp }) {
           return false;
         }
       },
-      /* @__PURE__ */ React16.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React16.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React16.createElement(Stack8, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React16.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React16.createElement(OriginalControl, { control, controlProps }))))
+      /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React17.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React17.createElement(Stack9, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React17.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React17.createElement(OriginalControl, { control, controlProps }))))
     )))
   );
 }
@@ -1831,7 +1919,7 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React16.createElement(BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React17.createElement(BaseControl, { type: value.type, props: controlProps });
 }
 function getControlLayout(control) {
   return control.value.meta?.layout || controlsRegistry.getLayout(control.value.type);
@@ -1866,8 +1954,8 @@ function OverridePropsGroup({ group }) {
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   const title = group.label;
-  return /* @__PURE__ */ React17.createElement(Box7, { "aria-label": `${title} section` }, /* @__PURE__ */ React17.createElement(
-    ListItemButton3,
+  return /* @__PURE__ */ React18.createElement(Box7, { "aria-label": `${title} section` }, /* @__PURE__ */ React18.createElement(
+    ListItemButton2,
     {
       id: labelId,
       "aria-controls": contentId,
@@ -1876,7 +1964,7 @@ function OverridePropsGroup({ group }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React17.createElement(Stack9, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React18.createElement(Stack10, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React18.createElement(
       ListItemText,
       {
         secondary: title,
@@ -1884,13 +1972,13 @@ function OverridePropsGroup({ group }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React17.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React17.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React17.createElement(Stack9, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React17.createElement(OverridePropControl, { key: overrideKey, overrideKey })))));
+    /* @__PURE__ */ React18.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React18.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React18.createElement(Stack10, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React18.createElement(OverridePropControl, { key: overrideKey, overrideKey })))));
 }
 
 // src/components/instance-editing-panel/instance-panel-body.tsx
 function InstancePanelBody({ groups, isEmpty, emptyState, componentInstanceId }) {
-  return /* @__PURE__ */ React18.createElement(PanelBody, null, /* @__PURE__ */ React18.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React18.createElement(Stack10, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React18.createElement(React18.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React18.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React18.createElement(Divider2, null))))));
+  return /* @__PURE__ */ React19.createElement(PanelBody, null, /* @__PURE__ */ React19.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React19.createElement(Stack11, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React19.createElement(React19.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React19.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React19.createElement(Divider2, null))))));
 }
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
@@ -1990,32 +2078,41 @@ function useComponentInstanceSettings() {
 }
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
+var EDIT_UPGRADE_URL = "https://go.elementor.com/go-pro-components-edit/";
 function InstanceEditingPanel() {
   const { canEdit } = useComponentsPermissions();
   const data = useInstancePanelData();
+  const hasPro = hasProInstalled3();
   if (!data) {
     return null;
   }
   const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
-  const panelTitle = __9("Edit %s", "elementor").replace("%s", component.name);
-  const actions = /* @__PURE__ */ React19.createElement(Stack11, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React19.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React19.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: PencilIcon2 }));
-  return /* @__PURE__ */ React19.createElement(Box8, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React19.createElement(
+  const panelTitle = __10("Edit %s", "elementor").replace("%s", component.name);
+  const actions = /* @__PURE__ */ React20.createElement(Stack12, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React20.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React20.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: PencilIcon2 }));
+  return /* @__PURE__ */ React20.createElement(Box8, { "data-testid": "instance-editing-panel", sx: { display: "flex", flexDirection: "column", height: "100%" } }, /* @__PURE__ */ React20.createElement(
     ComponentInstanceProvider,
     {
       componentId,
       overrides,
       overridableProps
     },
-    /* @__PURE__ */ React19.createElement(InstancePanelHeader, { componentName: component.name, actions }),
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(InstancePanelHeader, { componentName: component.name, actions }),
+    /* @__PURE__ */ React20.createElement(
       InstancePanelBody,
       {
         groups,
         isEmpty,
-        emptyState: /* @__PURE__ */ React19.createElement(EmptyState2, null),
+        emptyState: /* @__PURE__ */ React20.createElement(EmptyState2, null),
         componentInstanceId
       }
     )
+  ), !hasPro && /* @__PURE__ */ React20.createElement(
+    ComponentsUpgradeAlert,
+    {
+      title: __10("Edit components", "elementor"),
+      description: __10("Editing components requires an active Pro subscription.", "elementor"),
+      upgradeUrl: EDIT_UPGRADE_URL
+    }
   ));
 }
 
@@ -2156,8 +2253,8 @@ import {
 import { getCurrentDocument } from "@elementor/editor-documents";
 import { notify as notify2 } from "@elementor/editor-notifications";
 import { __getState as getState8 } from "@elementor/store";
-import { hasProInstalled } from "@elementor/utils";
-import { __ as __10 } from "@wordpress/i18n";
+import { hasProInstalled as hasProInstalled4 } from "@elementor/utils";
+import { __ as __11 } from "@wordpress/i18n";
 
 // src/utils/format-component-elements-id.ts
 import { hashString } from "@elementor/utils";
@@ -2235,7 +2332,7 @@ function notifyComponentEditUpgrade() {
   notify2({
     type: "promotion",
     id: COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID,
-    message: __10("Your Pro subscription has expired. Renew to edit components.", "elementor"),
+    message: __11("Editing components requires an active Pro subscription.", "elementor"),
     additionalActionProps: [
       {
         size: "small",
@@ -2243,7 +2340,7 @@ function notifyComponentEditUpgrade() {
         color: "promotion",
         href: EDIT_COMPONENT_UPGRADE_URL,
         target: "_blank",
-        children: __10("Upgrade Now", "elementor")
+        children: __11("Upgrade Now", "elementor")
       }
     ]
   });
@@ -2356,14 +2453,13 @@ function createComponentView(options) {
     }
     _getContextMenuConfig() {
       const isAdministrator = isUserAdministrator();
-      const hasPro = hasProInstalled();
-      const proLabel = __10("PRO", "elementor");
-      const badgeClass = "elementor-context-menu-list__item__shortcut__new-badge";
-      const proBadge = `<a href="${EDIT_COMPONENT_UPGRADE_URL}" target="_blank" onclick="event.stopPropagation()" class="${badgeClass}">${proLabel}</a>`;
+      const hasPro = hasProInstalled4();
+      const badgeClass = "elementor-context-menu-list__item__shortcut__promotion-badge";
+      const proBadge = `<a href="${EDIT_COMPONENT_UPGRADE_URL}" target="_blank" onclick="event.stopPropagation()" class="${badgeClass}"><i class="eicon-upgrade-crown"></i></a>`;
       const editComponentAction = {
         name: "edit component",
         icon: "eicon-edit",
-        title: () => __10("Edit Component", "elementor"),
+        title: () => __11("Edit Component", "elementor"),
         ...!hasPro && { shortcut: proBadge, hasShortcutAction: true },
         isEnabled: () => hasPro,
         callback: (_, eventData) => this.editComponent(eventData)
@@ -2371,7 +2467,7 @@ function createComponentView(options) {
       const detachInstanceAction = {
         name: "detach instance",
         icon: "eicon-chain-broken",
-        title: () => __10("Detach from Component", "elementor"),
+        title: () => __11("Detach from Component", "elementor"),
         isEnabled: () => true,
         callback: (_, eventData) => this.detachInstance(eventData)
       };
@@ -2398,7 +2494,7 @@ function createComponentView(options) {
       }
     }
     editComponent({ trigger, location, secondaryLocation }) {
-      const hasPro = hasProInstalled();
+      const hasPro = hasProInstalled4();
       if (!hasPro || this.isComponentCurrentlyEdited()) {
         return;
       }
@@ -2430,7 +2526,7 @@ function createComponentView(options) {
         } catch {
           notify2({
             type: "error",
-            message: __10("Failed to detach component instance.", "elementor"),
+            message: __11("Failed to detach component instance.", "elementor"),
             id: "detach-component-instance-failed"
           });
         }
@@ -2442,7 +2538,7 @@ function createComponentView(options) {
       if (!isUserAdministrator()) {
         return;
       }
-      if (!hasProInstalled()) {
+      if (!hasProInstalled4()) {
         notifyComponentEditUpgrade();
         return;
       }
@@ -2543,11 +2639,11 @@ import { getAllDescendants } from "@elementor/editor-elements";
 import { notify as notify3 } from "@elementor/editor-notifications";
 import { blockCommand } from "@elementor/editor-v1-adapters";
 import { __getState as getState9 } from "@elementor/store";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: __11("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: __12("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -2698,7 +2794,7 @@ var componentsStylesProvider = createStylesProvider({
 import { invalidateDocumentData as invalidateDocumentData2, isDocumentDirty as isDocumentDirty2 } from "@elementor/editor-documents";
 import { notify as notify4 } from "@elementor/editor-notifications";
 import { AxiosError } from "@elementor/http-client";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 var INSUFFICIENT_PERMISSIONS_ERROR_CODE = "insufficient_permissions";
 var PUBLISH_UPGRADE_URL = "https://go.elementor.com/go-pro-components-edit/";
 var PUBLISH_UPGRADE_NOTIFICATION_ID = "component-publish-upgrade";
@@ -2729,7 +2825,7 @@ function notifyPublishUpgrade() {
   notify4({
     type: "promotion",
     id: PUBLISH_UPGRADE_NOTIFICATION_ID,
-    message: __12(
+    message: __13(
       "You have unpublished component on this page. You need a pro version to publish it.",
       "elementor"
     ),
@@ -2740,7 +2836,7 @@ function notifyPublishUpgrade() {
         color: "promotion",
         href: PUBLISH_UPGRADE_URL,
         target: "_blank",
-        children: __12("Upgrade Now", "elementor")
+        children: __13("Upgrade Now", "elementor")
       }
     ]
   });
@@ -2782,7 +2878,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __13("Components", "elementor"),
+    label: __14("Components", "elementor"),
     component: Components,
     position: 1
   });
@@ -2818,7 +2914,6 @@ export {
   ComponentItem,
   ComponentName,
   ComponentSearch,
-  EmptyState as ComponentsEmptyState,
   ComponentsList,
   DetachAction,
   EditComponentAction,