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

package/dist/index.js

@@ -35,7 +35,6 @@ __export(index_exports, {
   ComponentItem: () => ComponentItem,
   ComponentName: () => ComponentName,
   ComponentSearch: () => ComponentSearch,
-  ComponentsEmptyState: () => EmptyState,
   ComponentsList: () => ComponentsList,
   DetachAction: () => DetachAction,
   EditComponentAction: () => EditComponentAction,
@@ -93,7 +92,7 @@ var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var import_store35 = require("@elementor/store");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -453,8 +452,10 @@ var componentOverrideTransformer = (0, import_editor_canvas3.createTransformer)(
 });
 
 // src/components/components-tab/components.tsx
-var React7 = __toESM(require("react"));
-var import_editor_ui3 = require("@elementor/editor-ui");
+var React8 = __toESM(require("react"));
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_ui6 = require("@elementor/ui");
+var import_utils3 = require("@elementor/utils");
 
 // src/hooks/use-components.ts
 var import_store5 = require("@elementor/store");
@@ -516,6 +517,7 @@ var ComponentSearch = () => {
 var React5 = __toESM(require("react"));
 var import_icons3 = require("@elementor/icons");
 var import_ui4 = require("@elementor/ui");
+var import_utils2 = require("@elementor/utils");
 var import_i18n2 = require("@wordpress/i18n");
 
 // src/hooks/use-components-permissions.ts
@@ -607,44 +609,59 @@ function ComponentName({ name, editable }) {
 // src/components/components-tab/loading-components.tsx
 var React4 = __toESM(require("react"));
 var import_ui3 = require("@elementor/ui");
-var ROWS = Array.from({ length: 6 }, (_, index) => index);
+var ROWS = Array.from({ length: 3 }, (_, index) => index);
+var STAGGER_DELAY_MS = 80;
 var LoadingComponents = () => {
   return /* @__PURE__ */ React4.createElement(
     import_ui3.Stack,
     {
       "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(
-      import_ui3.ListItemButton,
+      import_ui3.Box,
       {
         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(import_ui3.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(import_ui3.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React4.createElement(import_ui3.Skeleton, { variant: "text", width: "100%", height: "36px" }))
+      /* @__PURE__ */ React4.createElement(import_ui3.Skeleton, { animation: "wave", variant: "rounded", width: 24, height: 24 }),
+      /* @__PURE__ */ React4.createElement(import_ui3.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"
@@ -656,10 +673,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 (0, import_utils2.hasProInstalled)() ? /* @__PURE__ */ React5.createElement(EmptyState, null) : /* @__PURE__ */ React5.createElement(ProUpgradeEmptyState, null);
   }
   return /* @__PURE__ */ React5.createElement(import_ui4.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(
+    import_ui4.Stack,
+    {
+      alignItems: "center",
+      justifyContent: "start",
+      height: "100%",
+      sx: { px: 2, py: 4 },
+      gap: 2,
+      overflow: "hidden"
+    },
+    /* @__PURE__ */ React5.createElement(import_ui4.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React5.createElement(import_icons3.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n2.__)("Create Reusable Components", "elementor")), /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n2.__)("Create design elements that sync across your entire site.", "elementor"))),
+    /* @__PURE__ */ React5.createElement(
+      import_ui4.Button,
+      {
+        variant: "contained",
+        color: "promotion",
+        size: "small",
+        startIcon: /* @__PURE__ */ React5.createElement(import_icons3.CrownFilledIcon, null),
+        href: UPGRADE_URL,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
+      (0, import_i18n2.__)("Upgrade now", "elementor")
+    )
+  );
+};
 var EmptyState = () => {
   const { canCreate } = useComponentsPermissions();
   return /* @__PURE__ */ React5.createElement(
@@ -766,108 +813,148 @@ var useFilteredComponents = () => {
 };
 
 // src/components/components-tab/components-pro-notification.tsx
+var React7 = __toESM(require("react"));
+var import_i18n4 = require("@wordpress/i18n");
+
+// src/components/components-upgrade-alert.tsx
 var React6 = __toESM(require("react"));
-var import_editor_ui2 = require("@elementor/editor-ui");
+var import_icons4 = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
+function ComponentsUpgradeAlert({ title, description, upgradeUrl }) {
+  return /* @__PURE__ */ React6.createElement(import_ui5.Box, { sx: { mt: "auto" } }, /* @__PURE__ */ React6.createElement(
+    import_ui5.Alert,
+    {
+      variant: "standard",
+      color: "promotion",
+      icon: /* @__PURE__ */ React6.createElement(import_icons4.CrownFilledIcon, { fontSize: "tiny" }),
+      role: "status",
+      size: "small",
+      action: /* @__PURE__ */ React6.createElement(
+        import_ui5.AlertAction,
+        {
+          variant: "contained",
+          color: "promotion",
+          href: upgradeUrl,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        },
+        (0, import_i18n3.__)("Upgrade now", "elementor")
+      ),
+      sx: { m: 2, mt: 1 }
+    },
+    /* @__PURE__ */ React6.createElement(import_ui5.AlertTitle, null, title),
+    /* @__PURE__ */ React6.createElement(import_ui5.Typography, { 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(import_ui5.Box, { sx: { px: 2 } }, /* @__PURE__ */ React6.createElement(import_editor_ui2.InfoAlert, null, /* @__PURE__ */ React6.createElement(import_ui5.Typography, { variant: "caption", component: "span" }, /* @__PURE__ */ React6.createElement(import_ui5.Typography, { variant: "caption", component: "span", fontWeight: "bold" }, (0, import_i18n3.__)("Try Components for free:", "elementor")), " ", (0, import_i18n3.__)(
-    "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: (0, import_i18n4.__)("Create new components", "elementor"),
+      description: (0, import_i18n4.__)("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 = (0, import_utils3.hasProInstalled)();
+  const showProNotification = !hasPro && hasComponents;
+  return /* @__PURE__ */ React8.createElement(import_ui6.Stack, { 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(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React7.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React7.createElement(ComponentsContent, null)));
+  return /* @__PURE__ */ React8.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React8.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React8.createElement(ComponentsContent, null)));
 };
 
 // src/components/detach-instance-confirmation-dialog.tsx
-var React8 = __toESM(require("react"));
-var import_editor_ui4 = require("@elementor/editor-ui");
-var import_icons4 = require("@elementor/icons");
-var import_i18n4 = require("@wordpress/i18n");
+var React9 = __toESM(require("react"));
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_icons5 = require("@elementor/icons");
+var import_i18n5 = require("@wordpress/i18n");
 function DetachInstanceConfirmationDialog({
   open,
   onClose,
   onConfirm
 }) {
-  return /* @__PURE__ */ React8.createElement(import_editor_ui4.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React8.createElement(import_editor_ui4.ConfirmationDialog.Title, { icon: import_icons4.AlertTriangleFilledIcon, iconColor: "secondary" }, (0, import_i18n4.__)("Detach from Component?", "elementor")), /* @__PURE__ */ React8.createElement(import_editor_ui4.ConfirmationDialog.Content, null, /* @__PURE__ */ React8.createElement(import_editor_ui4.ConfirmationDialog.ContentText, null, (0, import_i18n4.__)(
+  return /* @__PURE__ */ React9.createElement(import_editor_ui3.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React9.createElement(import_editor_ui3.ConfirmationDialog.Title, { icon: import_icons5.AlertTriangleFilledIcon, iconColor: "secondary" }, (0, import_i18n5.__)("Detach from Component?", "elementor")), /* @__PURE__ */ React9.createElement(import_editor_ui3.ConfirmationDialog.Content, null, /* @__PURE__ */ React9.createElement(import_editor_ui3.ConfirmationDialog.ContentText, null, (0, import_i18n5.__)(
     "Detaching this instance will break its link to the Component. Changes to the Component will no longer apply. Continue?",
     "elementor"
-  ))), /* @__PURE__ */ React8.createElement(
-    import_editor_ui4.ConfirmationDialog.Actions,
+  ))), /* @__PURE__ */ React9.createElement(
+    import_editor_ui3.ConfirmationDialog.Actions,
     {
       onClose,
       onConfirm,
-      confirmLabel: (0, import_i18n4.__)("Detach", "elementor"),
+      confirmLabel: (0, import_i18n5.__)("Detach", "elementor"),
       color: "primary"
     }
   ));
 }
 function openDetachConfirmDialog(onConfirm) {
   const handleConfirm = () => {
-    (0, import_editor_ui4.closeDialog)();
+    (0, import_editor_ui3.closeDialog)();
     onConfirm();
   };
-  (0, import_editor_ui4.openDialog)({
-    component: /* @__PURE__ */ React8.createElement(DetachInstanceConfirmationDialog, { open: true, onClose: import_editor_ui4.closeDialog, onConfirm: handleConfirm })
+  (0, import_editor_ui3.openDialog)({
+    component: /* @__PURE__ */ React9.createElement(DetachInstanceConfirmationDialog, { open: true, onClose: import_editor_ui3.closeDialog, onConfirm: handleConfirm })
   });
 }
 
 // src/components/in-edit-mode.tsx
-var React9 = __toESM(require("react"));
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_icons5 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var React10 = __toESM(require("react"));
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_icons6 = require("@elementor/icons");
+var import_ui7 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
 var openEditModeDialog = (lockedBy) => {
-  (0, import_editor_ui5.openDialog)({
-    component: /* @__PURE__ */ React9.createElement(EditModeDialog, { lockedBy })
+  (0, import_editor_ui4.openDialog)({
+    component: /* @__PURE__ */ React10.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = (0, import_i18n5.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_ui6.DialogHeader, { logo: false }, /* @__PURE__ */ React9.createElement(import_ui6.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React9.createElement(import_ui6.Icon, { color: "secondary" }, /* @__PURE__ */ React9.createElement(import_icons5.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React9.createElement(import_ui6.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React9.createElement(import_ui6.DialogContent, null, /* @__PURE__ */ React9.createElement(import_ui6.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React9.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n5.__)(
+  const content = (0, import_i18n6.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui7.DialogHeader, { logo: false }, /* @__PURE__ */ React10.createElement(import_ui7.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React10.createElement(import_ui7.Icon, { color: "secondary" }, /* @__PURE__ */ React10.createElement(import_icons6.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React10.createElement(import_ui7.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React10.createElement(import_ui7.DialogContent, null, /* @__PURE__ */ React10.createElement(import_ui7.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React10.createElement(import_ui7.Typography, { variant: "body2" }, (0, import_i18n6.__)(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React9.createElement(import_ui6.DialogActions, null, /* @__PURE__ */ React9.createElement(import_ui6.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui5.closeDialog }, (0, import_i18n5.__)("Close", "elementor"))))));
+  )), /* @__PURE__ */ React10.createElement(import_ui7.DialogActions, null, /* @__PURE__ */ React10.createElement(import_ui7.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui4.closeDialog }, (0, import_i18n6.__)("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-var React19 = __toESM(require("react"));
-var import_icons9 = require("@elementor/icons");
-var import_ui13 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var React20 = __toESM(require("react"));
+var import_icons10 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
+var import_utils5 = require("@elementor/utils");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/provider/component-instance-context.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_react3 = require("react");
 var ComponentInstanceContext = (0, import_react3.createContext)(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 = () => (0, import_react3.useContext)(ComponentInstanceContext)?.componentId;
 var useComponentInstanceOverrides = () => (0, import_react3.useContext)(ComponentInstanceContext)?.overrides;
 var useComponentOverridableProps = () => (0, import_react3.useContext)(ComponentInstanceContext)?.overridableProps;
 
 // src/components/instance-editing-panel/detach-action.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react4 = require("react");
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_icons7 = require("@elementor/icons");
-var import_i18n7 = require("@wordpress/i18n");
+var import_icons8 = require("@elementor/icons");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/utils/detach-component-instance/detach-component-instance.ts
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_store9 = require("@elementor/store");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/prop-types/component-instance-overrides-prop-type.ts
 var import_editor_props3 = require("@elementor/editor-props");
@@ -1216,8 +1303,8 @@ async function detachComponentInstance({
       }
     },
     {
-      title: (0, import_i18n6.__)("Detach from Component", "elementor"),
-      subtitle: (0, import_i18n6.__)("Instance detached", "elementor")
+      title: (0, import_i18n7.__)("Detach from Component", "elementor"),
+      subtitle: (0, import_i18n7.__)("Instance detached", "elementor")
     }
   );
   return undoableDetach();
@@ -1232,16 +1319,16 @@ function extractInstanceOverrides(instanceContainer) {
 }
 
 // src/components/instance-editing-panel/instance-panel-header.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui6 = require("@elementor/editor-ui");
-var import_icons6 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_icons7 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
 function InstancePanelHeader({ componentName, actions }) {
-  return /* @__PURE__ */ React11.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React11.createElement(import_ui7.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React11.createElement(import_icons6.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React11.createElement(import_editor_ui6.EllipsisWithTooltip, { title: componentName, as: import_editor_panels.PanelHeaderTitle, sx: { flexGrow: 1 } }), actions));
+  return /* @__PURE__ */ React12.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React12.createElement(import_ui8.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React12.createElement(import_icons7.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React12.createElement(import_editor_ui5.EllipsisWithTooltip, { title: componentName, as: import_editor_panels.PanelHeaderTitle, sx: { flexGrow: 1 } }), actions));
 }
 function EditComponentAction({ label, onClick, disabled = false, icon: Icon2 }) {
-  return /* @__PURE__ */ React11.createElement(import_ui7.Tooltip, { title: label }, /* @__PURE__ */ React11.createElement(import_ui7.IconButton, { size: "tiny", onClick, "aria-label": label, disabled }, /* @__PURE__ */ React11.createElement(Icon2, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React12.createElement(import_ui8.Tooltip, { title: label }, /* @__PURE__ */ React12.createElement(import_ui8.IconButton, { size: "tiny", onClick, "aria-label": label, disabled }, /* @__PURE__ */ React12.createElement(Icon2, { fontSize: "tiny" })));
 }
 
 // src/components/instance-editing-panel/detach-action.tsx
@@ -1261,7 +1348,7 @@ var DetachAction = ({
     } catch {
       (0, import_editor_notifications.notify)({
         type: "error",
-        message: (0, import_i18n7.__)("Failed to detach component instance.", "elementor"),
+        message: (0, import_i18n8.__)("Failed to detach component instance.", "elementor"),
         id: "detach-component-instance-failed"
       });
     }
@@ -1272,8 +1359,8 @@ var DetachAction = ({
   const handleDetachClick = () => {
     setIsDetachDialogOpen(true);
   };
-  const detachLabel = (0, import_i18n7.__)("Detach from Component", "elementor");
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(EditComponentAction, { label: detachLabel, icon: import_icons7.DetachIcon, onClick: handleDetachClick }), /* @__PURE__ */ React12.createElement(
+  const detachLabel = (0, import_i18n8.__)("Detach from Component", "elementor");
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(EditComponentAction, { label: detachLabel, icon: import_icons8.DetachIcon, onClick: handleDetachClick }), /* @__PURE__ */ React13.createElement(
     DetachInstanceConfirmationDialog,
     {
       open: isDetachDialogOpen,
@@ -1298,21 +1385,21 @@ function getDetachTrackingInfo() {
 }
 
 // src/components/instance-editing-panel/empty-state.tsx
-var React13 = __toESM(require("react"));
-var import_icons8 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var React14 = __toESM(require("react"));
+var import_icons9 = require("@elementor/icons");
+var import_ui9 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 var EmptyState2 = ({ onEditComponent }) => {
   const { canEdit } = useComponentsPermissions();
-  const message = canEdit ? (0, import_i18n8.__)(
+  const message = canEdit ? (0, import_i18n9.__)(
     "Edit the component to add properties, manage them or update the design across all instances.",
     "elementor"
-  ) : (0, import_i18n8.__)(
+  ) : (0, import_i18n9.__)(
     "With your current role, you cannot edit this component. Contact an administrator to add properties.",
     "elementor"
   );
-  return /* @__PURE__ */ React13.createElement(
-    import_ui8.Stack,
+  return /* @__PURE__ */ React14.createElement(
+    import_ui9.Stack,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -1321,33 +1408,33 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__PURE__ */ React13.createElement(import_icons8.ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React13.createElement(import_ui8.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n8.__)("No properties yet", "elementor")),
-    /* @__PURE__ */ React13.createElement(import_ui8.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
-    canEdit && !!onEditComponent && /* @__PURE__ */ React13.createElement(import_ui8.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React13.createElement(import_icons8.PencilIcon, { fontSize: "small" }), (0, import_i18n8.__)("Edit component", "elementor"))
+    /* @__PURE__ */ React14.createElement(import_icons9.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React14.createElement(import_ui9.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n9.__)("No properties yet", "elementor")),
+    /* @__PURE__ */ React14.createElement(import_ui9.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && !!onEditComponent && /* @__PURE__ */ React14.createElement(import_ui9.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React14.createElement(import_icons9.PencilIcon, { fontSize: "small" }), (0, import_i18n9.__)("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/instance-panel-body.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_editor_controls3 = require("@elementor/editor-controls");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
-var import_ui12 = require("@elementor/ui");
+var import_ui13 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-props-group.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_ui7 = require("@elementor/editor-ui");
-var import_ui11 = require("@elementor/ui");
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_ui12 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_elements7 = require("@elementor/editor-elements");
-var import_ui10 = require("@elementor/ui");
+var import_ui11 = require("@elementor/ui");
 
 // src/hooks/use-controls-by-widget-type.ts
 var import_editor_elements4 = require("@elementor/editor-elements");
@@ -1381,11 +1468,11 @@ function getControlsByBind(controls) {
 }
 
 // src/provider/overridable-prop-context.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_react5 = require("react");
 var OverridablePropContext = (0, import_react5.createContext)(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 = () => (0, import_react5.useContext)(OverridablePropContext)?.value;
 var useComponentInstanceElement = () => (0, import_react5.useContext)(OverridablePropContext)?.componentInstanceElement;
@@ -1614,16 +1701,16 @@ function extractInnerOverrideInfo(override) {
 }
 
 // src/components/control-label.tsx
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_editor_controls = require("@elementor/editor-controls");
-var import_ui9 = require("@elementor/ui");
+var import_ui10 = require("@elementor/ui");
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React15.createElement(import_ui9.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React15.createElement(import_editor_controls.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React15.createElement(import_editor_controls.ControlAdornments, null));
+  return /* @__PURE__ */ React16.createElement(import_ui10.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React16.createElement(import_editor_controls.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React16.createElement(import_editor_controls.ControlAdornments, null));
 };
 
 // src/components/errors.ts
-var import_utils2 = require("@elementor/utils");
-var OverrideControlInnerElementNotFoundError = (0, import_utils2.createError)({
+var import_utils4 = require("@elementor/utils");
+var OverrideControlInnerElementNotFoundError = (0, import_utils4.createError)({
   code: "override_control_inner_element_not_found",
   message: `Component inner element not found for override control. The element may have been deleted without updating the overridable props, or the component has not finished rendering yet.`
 });
@@ -1727,7 +1814,7 @@ function OverridePropControl({ overrideKey }) {
   if (!overridableProp) {
     return null;
   }
-  return /* @__PURE__ */ React16.createElement(import_editor_editing_panel.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React16.createElement(OverrideControl, { overridableProp }));
+  return /* @__PURE__ */ React17.createElement(import_editor_editing_panel.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React17.createElement(OverrideControl, { overridableProp }));
 }
 function OverrideControl({ overridableProp }) {
   const componentInstanceElement = (0, import_editor_editing_panel.useElement)();
@@ -1821,13 +1908,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(import_editor_editing_panel.ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React16.createElement(import_editor_editing_panel.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React17.createElement(import_editor_editing_panel.ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React17.createElement(import_editor_editing_panel.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React17.createElement(
       import_editor_controls2.PropProvider,
       {
         propType: propTypeSchema,
@@ -1837,7 +1924,7 @@ function OverrideControl({ overridableProp }) {
           return false;
         }
       },
-      /* @__PURE__ */ React16.createElement(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React16.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React16.createElement(import_ui10.Stack, { 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(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React17.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React17.createElement(import_ui11.Stack, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React17.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React17.createElement(OriginalControl, { control, controlProps }))))
     )))
   );
 }
@@ -1896,7 +1983,7 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React16.createElement(import_editor_editing_panel.BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React17.createElement(import_editor_editing_panel.BaseControl, { type: value.type, props: controlProps });
 }
 function getControlLayout(control) {
   return control.value.meta?.layout || import_editor_editing_panel.controlsRegistry.getLayout(control.value.type);
@@ -1931,8 +2018,8 @@ function OverridePropsGroup({ group }) {
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   const title = group.label;
-  return /* @__PURE__ */ React17.createElement(import_ui11.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React17.createElement(
-    import_ui11.ListItemButton,
+  return /* @__PURE__ */ React18.createElement(import_ui12.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React18.createElement(
+    import_ui12.ListItemButton,
     {
       id: labelId,
       "aria-controls": contentId,
@@ -1941,21 +2028,21 @@ function OverridePropsGroup({ group }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React17.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React17.createElement(
-      import_ui11.ListItemText,
+    /* @__PURE__ */ React18.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React18.createElement(
+      import_ui12.ListItemText,
       {
         secondary: title,
         secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React17.createElement(import_editor_ui7.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React17.createElement(import_ui11.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React17.createElement(import_ui11.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React17.createElement(OverridePropControl, { key: overrideKey, overrideKey })))));
+    /* @__PURE__ */ React18.createElement(import_editor_ui6.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React18.createElement(import_ui12.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React18.createElement(import_ui12.Stack, { 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(import_editor_panels2.PanelBody, null, /* @__PURE__ */ React18.createElement(import_editor_controls3.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel3.getFieldIndicators)("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React18.createElement(import_ui12.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React18.createElement(React18.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React18.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React18.createElement(import_ui12.Divider, null))))));
+  return /* @__PURE__ */ React19.createElement(import_editor_panels2.PanelBody, null, /* @__PURE__ */ React19.createElement(import_editor_controls3.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel3.getFieldIndicators)("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React19.createElement(import_ui13.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React19.createElement(React19.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React19.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React19.createElement(import_ui13.Divider, null))))));
 }
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
@@ -2055,32 +2142,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 = (0, import_utils5.hasProInstalled)();
   if (!data) {
     return null;
   }
   const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
-  const panelTitle = (0, import_i18n9.__)("Edit %s", "elementor").replace("%s", component.name);
-  const actions = /* @__PURE__ */ React19.createElement(import_ui13.Stack, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React19.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React19.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: import_icons9.PencilIcon }));
-  return /* @__PURE__ */ React19.createElement(import_ui13.Box, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React19.createElement(
+  const panelTitle = (0, import_i18n10.__)("Edit %s", "elementor").replace("%s", component.name);
+  const actions = /* @__PURE__ */ React20.createElement(import_ui14.Stack, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React20.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React20.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: import_icons10.PencilIcon }));
+  return /* @__PURE__ */ React20.createElement(import_ui14.Box, { "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: (0, import_i18n10.__)("Edit components", "elementor"),
+      description: (0, import_i18n10.__)("Editing components requires an active Pro subscription.", "elementor"),
+      upgradeUrl: EDIT_UPGRADE_URL
+    }
   ));
 }
 
@@ -2219,16 +2315,16 @@ var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_documents4 = require("@elementor/editor-documents");
 var import_editor_notifications2 = require("@elementor/editor-notifications");
 var import_store26 = require("@elementor/store");
-var import_utils4 = require("@elementor/utils");
-var import_i18n10 = require("@wordpress/i18n");
+var import_utils7 = require("@elementor/utils");
+var import_i18n11 = require("@wordpress/i18n");
 
 // src/utils/format-component-elements-id.ts
-var import_utils3 = require("@elementor/utils");
+var import_utils6 = require("@elementor/utils");
 var ELEMENT_ID_LENGTH = 7;
 function formatComponentElementsId(elements, path) {
   return elements.map((element) => {
     const nestingPath = [...path, element.id];
-    const id = (0, import_utils3.hashString)(nestingPath.join("_"), ELEMENT_ID_LENGTH);
+    const id = (0, import_utils6.hashString)(nestingPath.join("_"), ELEMENT_ID_LENGTH);
     return {
       ...element,
       id,
@@ -2298,7 +2394,7 @@ function notifyComponentEditUpgrade() {
   (0, import_editor_notifications2.notify)({
     type: "promotion",
     id: COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID,
-    message: (0, import_i18n10.__)("Your Pro subscription has expired. Renew to edit components.", "elementor"),
+    message: (0, import_i18n11.__)("Editing components requires an active Pro subscription.", "elementor"),
     additionalActionProps: [
       {
         size: "small",
@@ -2306,7 +2402,7 @@ function notifyComponentEditUpgrade() {
         color: "promotion",
         href: EDIT_COMPONENT_UPGRADE_URL,
         target: "_blank",
-        children: (0, import_i18n10.__)("Upgrade Now", "elementor")
+        children: (0, import_i18n11.__)("Upgrade Now", "elementor")
       }
     ]
   });
@@ -2419,14 +2515,13 @@ function createComponentView(options) {
     }
     _getContextMenuConfig() {
       const isAdministrator = isUserAdministrator();
-      const hasPro = (0, import_utils4.hasProInstalled)();
-      const proLabel = (0, import_i18n10.__)("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 = (0, import_utils7.hasProInstalled)();
+      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: () => (0, import_i18n10.__)("Edit Component", "elementor"),
+        title: () => (0, import_i18n11.__)("Edit Component", "elementor"),
         ...!hasPro && { shortcut: proBadge, hasShortcutAction: true },
         isEnabled: () => hasPro,
         callback: (_, eventData) => this.editComponent(eventData)
@@ -2434,7 +2529,7 @@ function createComponentView(options) {
       const detachInstanceAction = {
         name: "detach instance",
         icon: "eicon-chain-broken",
-        title: () => (0, import_i18n10.__)("Detach from Component", "elementor"),
+        title: () => (0, import_i18n11.__)("Detach from Component", "elementor"),
         isEnabled: () => true,
         callback: (_, eventData) => this.detachInstance(eventData)
       };
@@ -2461,7 +2556,7 @@ function createComponentView(options) {
       }
     }
     editComponent({ trigger, location, secondaryLocation }) {
-      const hasPro = (0, import_utils4.hasProInstalled)();
+      const hasPro = (0, import_utils7.hasProInstalled)();
       if (!hasPro || this.isComponentCurrentlyEdited()) {
         return;
       }
@@ -2493,7 +2588,7 @@ function createComponentView(options) {
         } catch {
           (0, import_editor_notifications2.notify)({
             type: "error",
-            message: (0, import_i18n10.__)("Failed to detach component instance.", "elementor"),
+            message: (0, import_i18n11.__)("Failed to detach component instance.", "elementor"),
             id: "detach-component-instance-failed"
           });
         }
@@ -2505,7 +2600,7 @@ function createComponentView(options) {
       if (!isUserAdministrator()) {
         return;
       }
-      if (!(0, import_utils4.hasProInstalled)()) {
+      if (!(0, import_utils7.hasProInstalled)()) {
         notifyComponentEditUpgrade();
         return;
       }
@@ -2606,11 +2701,11 @@ var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_store29 = require("@elementor/store");
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: (0, import_i18n11.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: (0, import_i18n12.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -2759,6 +2854,12 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
 
 // src/sync/publish-draft-components-in-page-before-save.ts
 var import_editor_documents5 = require("@elementor/editor-documents");
+var import_editor_notifications4 = require("@elementor/editor-notifications");
+var import_http_client2 = require("@elementor/http-client");
+var import_i18n13 = require("@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";
 async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
   if (status !== "publish") {
     return;
@@ -2768,9 +2869,40 @@ async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
   if (draftIds.length === 0) {
     return;
   }
-  await apiClient.updateStatuses(draftIds, "publish");
+  try {
+    await apiClient.updateStatuses(draftIds, "publish");
+  } catch (error) {
+    if (isInsufficientPermissionsError(error)) {
+      notifyPublishUpgrade();
+      return;
+    }
+    throw error;
+  }
   draftIds.forEach((id) => (0, import_editor_documents5.invalidateDocumentData)(id));
 }
+function isInsufficientPermissionsError(error) {
+  return error instanceof import_http_client2.AxiosError && error.response?.data?.code === INSUFFICIENT_PERMISSIONS_ERROR_CODE;
+}
+function notifyPublishUpgrade() {
+  (0, import_editor_notifications4.notify)({
+    type: "promotion",
+    id: PUBLISH_UPGRADE_NOTIFICATION_ID,
+    message: (0, import_i18n13.__)(
+      "You have unpublished component on this page. You need a pro version to publish it.",
+      "elementor"
+    ),
+    additionalActionProps: [
+      {
+        size: "small",
+        variant: "contained",
+        color: "promotion",
+        href: PUBLISH_UPGRADE_URL,
+        target: "_blank",
+        children: (0, import_i18n13.__)("Upgrade Now", "elementor")
+      }
+    ]
+  });
+}
 
 // src/sync/before-save.ts
 var beforeSave = ({ container, status }) => {
@@ -2808,7 +2940,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n12.__)("Components", "elementor"),
+    label: (0, import_i18n14.__)("Components", "elementor"),
     component: Components,
     position: 1
   });
@@ -2845,7 +2977,6 @@ function init() {
   ComponentItem,
   ComponentName,
   ComponentSearch,
-  ComponentsEmptyState,
   ComponentsList,
   DetachAction,
   EditComponentAction,