@elementor/editor-components 4.0.0-682 → 4.0.0-beta5

package/dist/index.js

@@ -94,7 +94,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_store36 = require("@elementor/store");
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -156,11 +156,12 @@ var apiClient = {
   unlockComponent: async (componentId) => await (0, import_http_client.httpService)().post(`${BASE_URL}/unlock`, {
     componentId
   }).then((res) => res.data),
-  getOverridableProps: async (componentId) => await (0, import_http_client.httpService)().get(`${BASE_URL}/overridable-props`, {
-    params: {
-      componentId: componentId.toString()
+  getOverridableProps: async (componentIds) => await (0, import_http_client.httpService)().get(
+    `${BASE_URL}/overridable-props`,
+    {
+      params: { "componentIds[]": componentIds }
     }
-  }).then((res) => res.data.data),
+  ).then((res) => res.data),
   updateArchivedComponents: async (componentIds, status) => await (0, import_http_client.httpService)().post(
     `${BASE_URL}/archive`,
     {
@@ -260,6 +261,18 @@ var baseSlice = (0, import_store2.__createSlice)({
       }
       component.overridableProps = payload.overridableProps;
     },
+    loadOverridableProps: (state, { payload }) => {
+      const componentIds = Object.keys(payload);
+      componentIds.forEach((id) => {
+        const componentId = Number(id);
+        const overridableProps = payload[componentId];
+        const component = state.data.find((comp) => comp.id === componentId);
+        if (!component || !overridableProps) {
+          return;
+        }
+        component.overridableProps = overridableProps;
+      });
+    },
     rename: (state, { payload }) => {
       const component = state.data.find((comp) => comp.uid === payload.componentUid);
       if (!component) {
@@ -490,11 +503,10 @@ var componentOverrideTransformer = (0, import_editor_canvas3.createTransformer)(
 });
 
 // src/components/components-tab/components.tsx
-var React8 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_react3 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_ui6 = require("@elementor/ui");
-var import_utils3 = require("@elementor/utils");
+var import_ui7 = require("@elementor/ui");
 
 // src/hooks/use-components.ts
 var import_store6 = require("@elementor/store");
@@ -504,6 +516,16 @@ var useComponents = () => {
   return { components, isLoading };
 };
 
+// src/utils/is-pro-components-supported.ts
+var import_utils = require("@elementor/utils");
+var MIN_PRO_VERSION_FOR_COMPONENTS = "4.0";
+function isProComponentsSupported() {
+  return (0, import_utils.hasProInstalled)() && (0, import_utils.isProAtLeast)(MIN_PRO_VERSION_FOR_COMPONENTS);
+}
+function isProOutdatedForComponents() {
+  return (0, import_utils.hasProInstalled)() && !(0, import_utils.isProAtLeast)(MIN_PRO_VERSION_FOR_COMPONENTS);
+}
+
 // src/components/components-tab/component-search.tsx
 var React2 = __toESM(require("react"));
 var import_icons = require("@elementor/icons");
@@ -513,13 +535,13 @@ var import_i18n = require("@wordpress/i18n");
 // src/components/components-tab/search-provider.tsx
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_utils = require("@elementor/utils");
+var import_utils2 = require("@elementor/utils");
 var SearchContext = (0, import_react.createContext)(void 0);
 var SearchProvider = ({
   children,
   localStorageKey
 }) => {
-  const { debouncedValue, handleChange, inputValue } = (0, import_utils.useSearchState)({ localStorageKey });
+  const { debouncedValue, handleChange, inputValue } = (0, import_utils2.useSearchState)({ localStorageKey });
   const clearSearch = () => {
     handleChange("");
   };
@@ -556,7 +578,6 @@ 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
@@ -701,6 +722,7 @@ var LoadingComponents = () => {
 // 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 UPDATE_PLUGINS_URL = "/wp-admin/plugins.php";
 var SUBTITLE_OVERRIDE_SX = {
   fontSize: "0.875rem !important",
   fontWeight: "500 !important"
@@ -715,7 +737,10 @@ function ComponentsList() {
     if (searchValue.length) {
       return /* @__PURE__ */ React5.createElement(EmptySearchResult, null);
     }
-    return (0, import_utils2.hasProInstalled)() ? /* @__PURE__ */ React5.createElement(EmptyState, null) : /* @__PURE__ */ React5.createElement(ProUpgradeEmptyState, null);
+    if (isProOutdatedForComponents()) {
+      return /* @__PURE__ */ React5.createElement(ProOutdatedEmptyState, null);
+    }
+    return isProComponentsSupported() ? /* @__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 })));
 }
@@ -746,6 +771,32 @@ var ProUpgradeEmptyState = () => {
     )
   );
 };
+var ProOutdatedEmptyState = () => {
+  return /* @__PURE__ */ React5.createElement(
+    import_ui4.Stack,
+    {
+      alignItems: "center",
+      justifyContent: "start",
+      height: "100%",
+      sx: { px: 2, py: 4, maxWidth: 268, m: "auto" },
+      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" }, (0, import_i18n2.__)("Create design elements that sync across your entire site.", "elementor")), /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "secondary", sx: { mt: 1 } }, (0, import_i18n2.__)("To create components, update Elementor Pro to the latest version.", "elementor"))),
+    /* @__PURE__ */ React5.createElement(
+      import_ui4.Button,
+      {
+        variant: "text",
+        color: "info",
+        size: "small",
+        href: UPDATE_PLUGINS_URL,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
+      (0, import_i18n2.__)("Update Elementor Pro", "elementor")
+    )
+  );
+};
 var EmptyState = () => {
   const { canCreate } = useComponentsPermissions();
   return /* @__PURE__ */ React5.createElement(
@@ -888,7 +939,7 @@ function ComponentsUpgradeAlert({ title, description, upgradeUrl }) {
 }
 
 // src/components/components-tab/components-pro-notification.tsx
-var UPGRADE_URL2 = "https://go.elementor.com/go-pro-components-create/";
+var UPGRADE_URL2 = "https://go.elementor.com/go-pro-components-exist-footer/";
 function ComponentsProNotification() {
   return /* @__PURE__ */ React7.createElement(
     ComponentsUpgradeAlert,
@@ -900,6 +951,54 @@ function ComponentsProNotification() {
   );
 }
 
+// src/components/components-tab/components-update-notification.tsx
+var React9 = __toESM(require("react"));
+var import_i18n6 = require("@wordpress/i18n");
+
+// src/components/components-update-alert.tsx
+var React8 = __toESM(require("react"));
+var import_icons5 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+var UPDATE_PLUGINS_URL2 = "/wp-admin/plugins.php";
+function ComponentsUpdateAlert({ title, description }) {
+  return /* @__PURE__ */ React8.createElement(import_ui6.Box, { sx: { mt: "auto", position: "sticky", bottom: 0 } }, /* @__PURE__ */ React8.createElement(
+    import_ui6.Alert,
+    {
+      variant: "standard",
+      color: "info",
+      icon: /* @__PURE__ */ React8.createElement(import_icons5.InfoCircleFilledIcon, { fontSize: "tiny" }),
+      role: "status",
+      size: "small",
+      action: /* @__PURE__ */ React8.createElement(
+        import_ui6.AlertAction,
+        {
+          variant: "contained",
+          color: "info",
+          href: UPDATE_PLUGINS_URL2,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        },
+        (0, import_i18n5.__)("Upgrade Now", "elementor")
+      ),
+      sx: { m: 2, mt: 1 }
+    },
+    /* @__PURE__ */ React8.createElement(import_ui6.AlertTitle, null, title),
+    /* @__PURE__ */ React8.createElement(import_ui6.Typography, { variant: "caption" }, description)
+  ));
+}
+
+// src/components/components-tab/components-update-notification.tsx
+function ComponentsUpdateNotification() {
+  return /* @__PURE__ */ React9.createElement(
+    ComponentsUpdateAlert,
+    {
+      title: (0, import_i18n6.__)("Create new Components", "elementor"),
+      description: (0, import_i18n6.__)("To create new components, update Elementor Pro to the latest version.", "elementor")
+    }
+  );
+}
+
 // src/components/components-tab/components.tsx
 var FULL_HEIGHT_STYLE_ID = "components-full-height-panel";
 var FULL_HEIGHT_CSS = `
@@ -940,34 +1039,34 @@ var useFullHeightPanel = () => {
 var ComponentsContent = () => {
   const { components, isLoading } = useComponents();
   const hasComponents = !isLoading && components.length > 0;
-  const hasPro = (0, import_utils3.hasProInstalled)();
-  const showProNotification = !hasPro && hasComponents;
+  const showProNotification = !isProComponentsSupported() && hasComponents;
+  const isOutdated = isProOutdatedForComponents();
   useFullHeightPanel();
-  return /* @__PURE__ */ React8.createElement(import_ui6.Stack, { justifyContent: "space-between", sx: { flex: 1, minHeight: 0 } }, hasComponents && /* @__PURE__ */ React8.createElement(ComponentSearch, null), /* @__PURE__ */ React8.createElement(ComponentsList, null), showProNotification && /* @__PURE__ */ React8.createElement(ComponentsProNotification, null));
+  return /* @__PURE__ */ React10.createElement(import_ui7.Stack, { justifyContent: "space-between", sx: { flex: 1, minHeight: 0 } }, hasComponents && /* @__PURE__ */ React10.createElement(ComponentSearch, null), /* @__PURE__ */ React10.createElement(ComponentsList, null), showProNotification && (isOutdated ? /* @__PURE__ */ React10.createElement(ComponentsUpdateNotification, null) : /* @__PURE__ */ React10.createElement(ComponentsProNotification, null)));
 };
 var Components = () => {
-  return /* @__PURE__ */ React8.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React8.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React8.createElement(ComponentsContent, null)));
+  return /* @__PURE__ */ React10.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React10.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React10.createElement(ComponentsContent, null)));
 };
 
 // src/components/detach-instance-confirmation-dialog.tsx
-var React9 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_editor_ui3 = require("@elementor/editor-ui");
-var import_icons5 = require("@elementor/icons");
-var import_i18n5 = require("@wordpress/i18n");
+var import_icons6 = require("@elementor/icons");
+var import_i18n7 = require("@wordpress/i18n");
 function DetachInstanceConfirmationDialog({
   open,
   onClose,
   onConfirm
 }) {
-  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.__)(
+  return /* @__PURE__ */ React11.createElement(import_editor_ui3.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React11.createElement(import_editor_ui3.ConfirmationDialog.Title, { icon: import_icons6.AlertTriangleFilledIcon, iconColor: "secondary" }, (0, import_i18n7.__)("Detach from Component?", "elementor")), /* @__PURE__ */ React11.createElement(import_editor_ui3.ConfirmationDialog.Content, null, /* @__PURE__ */ React11.createElement(import_editor_ui3.ConfirmationDialog.ContentText, null, (0, import_i18n7.__)(
     "Detaching this instance will break its link to the Component. Changes to the Component will no longer apply. Continue?",
     "elementor"
-  ))), /* @__PURE__ */ React9.createElement(
+  ))), /* @__PURE__ */ React11.createElement(
     import_editor_ui3.ConfirmationDialog.Actions,
     {
       onClose,
       onConfirm,
-      confirmLabel: (0, import_i18n5.__)("Detach", "elementor"),
+      confirmLabel: (0, import_i18n7.__)("Detach", "elementor"),
       color: "primary"
     }
   ));
@@ -978,59 +1077,58 @@ function openDetachConfirmDialog(onConfirm) {
     onConfirm();
   };
   (0, import_editor_ui3.openDialog)({
-    component: /* @__PURE__ */ React9.createElement(DetachInstanceConfirmationDialog, { open: true, onClose: import_editor_ui3.closeDialog, onConfirm: handleConfirm })
+    component: /* @__PURE__ */ React11.createElement(DetachInstanceConfirmationDialog, { open: true, onClose: import_editor_ui3.closeDialog, onConfirm: handleConfirm })
   });
 }
 
 // src/components/in-edit-mode.tsx
-var React10 = __toESM(require("react"));
+var React12 = __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 import_icons7 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
 var openEditModeDialog = (lockedBy) => {
   (0, import_editor_ui4.openDialog)({
-    component: /* @__PURE__ */ React10.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React12.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  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.__)(
+  const content = (0, import_i18n8.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(import_ui8.DialogHeader, { logo: false }, /* @__PURE__ */ React12.createElement(import_ui8.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React12.createElement(import_ui8.Icon, { color: "secondary" }, /* @__PURE__ */ React12.createElement(import_icons7.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React12.createElement(import_ui8.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React12.createElement(import_ui8.DialogContent, null, /* @__PURE__ */ React12.createElement(import_ui8.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React12.createElement(import_ui8.Typography, { variant: "body2" }, (0, import_i18n8.__)(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "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"))))));
+  )), /* @__PURE__ */ React12.createElement(import_ui8.DialogActions, null, /* @__PURE__ */ React12.createElement(import_ui8.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui4.closeDialog }, (0, import_i18n8.__)("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-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");
+var React22 = __toESM(require("react"));
+var import_icons11 = require("@elementor/icons");
+var import_ui15 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 
 // src/provider/component-instance-context.tsx
-var React11 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react4 = require("react");
 var ComponentInstanceContext = (0, import_react4.createContext)(null);
 function ComponentInstanceProvider({ children, ...props }) {
-  return /* @__PURE__ */ React11.createElement(ComponentInstanceContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React13.createElement(ComponentInstanceContext.Provider, { value: props }, children);
 }
 var useComponentId = () => (0, import_react4.useContext)(ComponentInstanceContext)?.componentId;
 var useComponentInstanceOverrides = () => (0, import_react4.useContext)(ComponentInstanceContext)?.overrides;
 var useComponentOverridableProps = () => (0, import_react4.useContext)(ComponentInstanceContext)?.overridableProps;
 
 // src/components/instance-editing-panel/detach-action.tsx
-var React13 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_react5 = require("react");
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_icons8 = require("@elementor/icons");
-var import_i18n8 = require("@wordpress/i18n");
+var import_icons9 = require("@elementor/icons");
+var import_i18n10 = 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_store10 = require("@elementor/store");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/prop-types/component-instance-overrides-prop-type.ts
 var import_editor_props3 = require("@elementor/editor-props");
@@ -1379,8 +1477,8 @@ async function detachComponentInstance({
       }
     },
     {
-      title: (0, import_i18n7.__)("Detach from Component", "elementor"),
-      subtitle: (0, import_i18n7.__)("Instance detached", "elementor")
+      title: (0, import_i18n9.__)("Detach from Component", "elementor"),
+      subtitle: (0, import_i18n9.__)("Instance detached", "elementor")
     }
   );
   return undoableDetach();
@@ -1395,16 +1493,16 @@ function extractInstanceOverrides(instanceContainer) {
 }
 
 // src/components/instance-editing-panel/instance-panel-header.tsx
-var React12 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui5 = require("@elementor/editor-ui");
-var import_icons7 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
+var import_icons8 = require("@elementor/icons");
+var import_ui9 = require("@elementor/ui");
 function InstancePanelHeader({ componentName, 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));
+  return /* @__PURE__ */ React14.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React14.createElement(import_ui9.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React14.createElement(import_icons8.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React14.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__ */ 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" })));
+  return /* @__PURE__ */ React14.createElement(import_ui9.Tooltip, { title: label }, /* @__PURE__ */ React14.createElement(import_ui9.IconButton, { size: "tiny", onClick, "aria-label": label, disabled }, /* @__PURE__ */ React14.createElement(Icon2, { fontSize: "tiny" })));
 }
 
 // src/components/instance-editing-panel/detach-action.tsx
@@ -1424,7 +1522,7 @@ var DetachAction = ({
     } catch {
       (0, import_editor_notifications.notify)({
         type: "error",
-        message: (0, import_i18n8.__)("Failed to detach component instance.", "elementor"),
+        message: (0, import_i18n10.__)("Failed to detach component instance.", "elementor"),
         id: "detach-component-instance-failed"
       });
     }
@@ -1435,8 +1533,8 @@ var DetachAction = ({
   const handleDetachClick = () => {
     setIsDetachDialogOpen(true);
   };
-  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(
+  const detachLabel = (0, import_i18n10.__)("Detach from Component", "elementor");
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(EditComponentAction, { label: detachLabel, icon: import_icons9.DetachIcon, onClick: handleDetachClick }), /* @__PURE__ */ React15.createElement(
     DetachInstanceConfirmationDialog,
     {
       open: isDetachDialogOpen,
@@ -1461,21 +1559,21 @@ function getDetachTrackingInfo() {
 }
 
 // src/components/instance-editing-panel/empty-state.tsx
-var React14 = __toESM(require("react"));
-var import_icons9 = require("@elementor/icons");
-var import_ui9 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var React16 = __toESM(require("react"));
+var import_icons10 = require("@elementor/icons");
+var import_ui10 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 var EmptyState2 = ({ onEditComponent }) => {
   const { canEdit } = useComponentsPermissions();
-  const message = canEdit ? (0, import_i18n9.__)(
+  const message = canEdit ? (0, import_i18n11.__)(
     "Edit the component to add properties, manage them or update the design across all instances.",
     "elementor"
-  ) : (0, import_i18n9.__)(
+  ) : (0, import_i18n11.__)(
     "With your current role, you cannot edit this component. Contact an administrator to add properties.",
     "elementor"
   );
-  return /* @__PURE__ */ React14.createElement(
-    import_ui9.Stack,
+  return /* @__PURE__ */ React16.createElement(
+    import_ui10.Stack,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -1484,11 +1582,11 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__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 && /* @__PURE__ */ React14.createElement(
-      import_ui9.Button,
+    /* @__PURE__ */ React16.createElement(import_icons10.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React16.createElement(import_ui10.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("No properties yet", "elementor")),
+    /* @__PURE__ */ React16.createElement(import_ui10.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && /* @__PURE__ */ React16.createElement(
+      import_ui10.Button,
       {
         variant: "outlined",
         color: "secondary",
@@ -1497,32 +1595,32 @@ var EmptyState2 = ({ onEditComponent }) => {
         disabled: !onEditComponent,
         onClick: onEditComponent
       },
-      /* @__PURE__ */ React14.createElement(import_icons9.PencilIcon, { fontSize: "small" }),
-      (0, import_i18n9.__)("Edit component", "elementor")
+      /* @__PURE__ */ React16.createElement(import_icons10.PencilIcon, { fontSize: "small" }),
+      (0, import_i18n11.__)("Edit component", "elementor")
     )
   );
 };
 
 // src/components/instance-editing-panel/instance-panel-body.tsx
-var React19 = __toESM(require("react"));
+var React21 = __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_ui13 = require("@elementor/ui");
+var import_ui14 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-props-group.tsx
-var React18 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_react7 = require("react");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
-var import_ui12 = require("@elementor/ui");
+var import_ui13 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-var React17 = __toESM(require("react"));
+var React19 = __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_ui11 = require("@elementor/ui");
+var import_ui12 = require("@elementor/ui");
 
 // src/hooks/use-controls-by-widget-type.ts
 var import_editor_elements4 = require("@elementor/editor-elements");
@@ -1556,11 +1654,11 @@ function getControlsByBind(controls) {
 }
 
 // src/provider/overridable-prop-context.tsx
-var React15 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_react6 = require("react");
 var OverridablePropContext = (0, import_react6.createContext)(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React15.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React17.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => (0, import_react6.useContext)(OverridablePropContext)?.value;
 var useComponentInstanceElement = () => (0, import_react6.useContext)(OverridablePropContext)?.componentInstanceElement;
@@ -1792,16 +1890,16 @@ function extractInnerOverrideInfo(override) {
 }
 
 // src/components/control-label.tsx
-var React16 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_editor_controls = require("@elementor/editor-controls");
-var import_ui10 = require("@elementor/ui");
+var import_ui11 = require("@elementor/ui");
 var ControlLabel = ({ children, ...props }) => {
-  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));
+  return /* @__PURE__ */ React18.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React18.createElement(import_editor_controls.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React18.createElement(import_editor_controls.ControlAdornments, null));
 };
 
 // src/components/errors.ts
-var import_utils4 = require("@elementor/utils");
-var OverrideControlInnerElementNotFoundError = (0, import_utils4.createError)({
+var import_utils3 = require("@elementor/utils");
+var OverrideControlInnerElementNotFoundError = (0, import_utils3.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.`
 });
@@ -1898,6 +1996,19 @@ function hasValue(value) {
   return value !== null && value !== void 0;
 }
 
+// src/components/instance-editing-panel/utils/correct-exposed-empty-override.ts
+function correctExposedEmptyOverride(newPropValue, matchingOverride) {
+  const newOverridableValue = componentOverridablePropTypeUtil.extract(newPropValue);
+  const isExposingEmptyOverride = newOverridableValue && matchingOverride === null;
+  if (!isExposingEmptyOverride) {
+    return newPropValue;
+  }
+  return componentOverridablePropTypeUtil.create({
+    override_key: newOverridableValue.override_key,
+    origin_value: null
+  });
+}
+
 // src/components/instance-editing-panel/override-prop-control.tsx
 function OverridePropControl({ overrideKey }) {
   const overridableProps = useComponentOverridableProps();
@@ -1905,7 +2016,7 @@ function OverridePropControl({ overrideKey }) {
   if (!overridableProp) {
     return null;
   }
-  return /* @__PURE__ */ React17.createElement(import_editor_editing_panel.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React17.createElement(OverrideControl, { overridableProp }));
+  return /* @__PURE__ */ React19.createElement(import_editor_editing_panel.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(OverrideControl, { overridableProp }));
 }
 function OverrideControl({ overridableProp }) {
   const componentInstanceElement = (0, import_editor_editing_panel.useElement)();
@@ -1943,11 +2054,12 @@ function OverrideControl({ overridableProp }) {
       });
       return;
     }
-    const newPropValue = getTempNewValueForDynamicProp(
+    let newPropValue = getTempNewValueForDynamicProp(
       propType,
       propValue,
       newValue[overridableProp.overrideKey]
     );
+    newPropValue = correctExposedEmptyOverride(newPropValue, matchingOverride);
     const newOverrideValue = createOverrideValue({
       matchingOverride,
       overrideKey: overridableProp.overrideKey,
@@ -1999,13 +2111,13 @@ function OverrideControl({ overridableProp }) {
       [overridableProp.overrideKey]: propType
     }
   });
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(
     OverridablePropProvider,
     {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__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(
+    /* @__PURE__ */ React19.createElement(import_editor_editing_panel.ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React19.createElement(import_editor_editing_panel.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(
       import_editor_controls2.PropProvider,
       {
         propType: propTypeSchema,
@@ -2015,7 +2127,7 @@ function OverrideControl({ overridableProp }) {
           return false;
         }
       },
-      /* @__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 }))))
+      /* @__PURE__ */ React19.createElement(import_editor_controls2.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(import_ui12.Box, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_editor_editing_panel.ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps })))))
     )))
   );
 }
@@ -2074,7 +2186,7 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React17.createElement(import_editor_editing_panel.BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React19.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);
@@ -2109,8 +2221,8 @@ function OverridePropsGroup({ group }) {
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   const title = group.label;
-  return /* @__PURE__ */ React18.createElement(import_ui12.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React18.createElement(
-    import_ui12.ListItemButton,
+  return /* @__PURE__ */ React20.createElement(import_ui13.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React20.createElement(
+    import_ui13.ListItemButton,
     {
       id: labelId,
       "aria-controls": contentId,
@@ -2119,21 +2231,21 @@ function OverridePropsGroup({ group }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React18.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React18.createElement(
-      import_ui12.ListItemText,
+    /* @__PURE__ */ React20.createElement(import_ui13.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React20.createElement(
+      import_ui13.ListItemText,
       {
         secondary: title,
         secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__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 })))));
+    /* @__PURE__ */ React20.createElement(import_editor_ui6.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React20.createElement(import_ui13.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React20.createElement(import_ui13.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React20.createElement(OverridePropControl, { key: overrideKey, overrideKey })))));
 }
 
 // src/components/instance-editing-panel/instance-panel-body.tsx
 function InstancePanelBody({ groups, isEmpty, emptyState, componentInstanceId }) {
-  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))))));
+  return /* @__PURE__ */ React21.createElement(import_editor_panels2.PanelBody, null, /* @__PURE__ */ React21.createElement(import_editor_controls3.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel3.getFieldIndicators)("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React21.createElement(import_ui14.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React21.createElement(React21.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React21.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React21.createElement(import_ui14.Divider, null))))));
 }
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
@@ -2233,42 +2345,50 @@ function useComponentInstanceSettings() {
 }
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-var EDIT_UPGRADE_URL = "https://go.elementor.com/go-pro-components-edit/";
+var EDIT_UPGRADE_URL = "https://go.elementor.com/go-pro-components-Instance-edit-footer/";
 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_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(
+  const panelTitle = (0, import_i18n12.__)("Edit %s", "elementor").replace("%s", component.name);
+  const actions = /* @__PURE__ */ React22.createElement(import_ui15.Stack, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React22.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React22.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: import_icons11.PencilIcon }));
+  return /* @__PURE__ */ React22.createElement(import_ui15.Box, { "data-testid": "instance-editing-panel", sx: { display: "flex", flexDirection: "column", height: "100%" } }, /* @__PURE__ */ React22.createElement(
     ComponentInstanceProvider,
     {
       componentId,
       overrides,
       overridableProps
     },
-    /* @__PURE__ */ React20.createElement(InstancePanelHeader, { componentName: component.name, actions }),
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React22.createElement(InstancePanelHeader, { componentName: component.name, actions }),
+    /* @__PURE__ */ React22.createElement(
       InstancePanelBody,
       {
         groups,
         isEmpty,
-        emptyState: /* @__PURE__ */ React20.createElement(EmptyState2, null),
+        emptyState: /* @__PURE__ */ React22.createElement(EmptyState2, null),
         componentInstanceId
       }
     )
-  ), !hasPro && /* @__PURE__ */ React20.createElement(
+  ), !isProComponentsSupported() && (isProOutdatedForComponents() ? /* @__PURE__ */ React22.createElement(
+    ComponentsUpdateAlert,
+    {
+      title: (0, import_i18n12.__)("Edit Component", "elementor"),
+      description: (0, import_i18n12.__)(
+        "To edit components, update Elementor Pro to the latest version.",
+        "elementor"
+      )
+    }
+  ) : /* @__PURE__ */ React22.createElement(
     ComponentsUpgradeAlert,
     {
-      title: (0, import_i18n10.__)("Edit components", "elementor"),
-      description: (0, import_i18n10.__)("Editing components requires an active Pro subscription.", "elementor"),
+      title: (0, import_i18n12.__)("Edit components", "elementor"),
+      description: (0, import_i18n12.__)("Editing components requires an active Pro subscription.", "elementor"),
       upgradeUrl: EDIT_UPGRADE_URL
     }
-  ));
+  )));
 }
 
 // src/components/load-template-components.tsx
@@ -2323,27 +2443,13 @@ async function getDocumentsMap(ids, cache) {
 
 // src/store/actions/load-components-overridable-props.ts
 var import_store23 = require("@elementor/store");
-function loadComponentsOverridableProps(componentIds) {
-  if (!componentIds.length) {
+async function loadComponentsOverridableProps(componentIds) {
+  const unloadedIds = componentIds.filter((id) => !selectIsOverridablePropsLoaded((0, import_store23.__getState)(), id));
+  if (!unloadedIds.length) {
     return;
   }
-  return Promise.all(componentIds.map(loadComponentOverrides));
-}
-async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store23.__getState)(), componentId);
-  if (isOverridablePropsLoaded) {
-    return;
-  }
-  const overridableProps = await apiClient.getOverridableProps(componentId);
-  if (!overridableProps) {
-    return;
-  }
-  (0, import_store23.__dispatch)(
-    slice.actions.setOverridableProps({
-      componentId,
-      overridableProps
-    })
-  );
+  const { data } = await apiClient.getOverridableProps(unloadedIds);
+  (0, import_store23.__dispatch)(slice.actions.loadOverridableProps(data));
 }
 
 // src/store/actions/load-components-styles.ts
@@ -2406,16 +2512,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_store27 = require("@elementor/store");
-var import_utils7 = require("@elementor/utils");
-var import_i18n11 = require("@wordpress/i18n");
+var import_utils5 = require("@elementor/utils");
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/utils/format-component-elements-id.ts
-var import_utils6 = require("@elementor/utils");
+var import_utils4 = 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_utils6.hashString)(nestingPath.join("_"), ELEMENT_ID_LENGTH);
+    const id = (0, import_utils4.hashString)(nestingPath.join("_"), ELEMENT_ID_LENGTH);
     return {
       ...element,
       id,
@@ -2479,21 +2585,43 @@ function buildUniqueSelector(element) {
 
 // src/create-component-type.ts
 var COMPONENT_WIDGET_TYPE2 = "e-component";
-var EDIT_COMPONENT_UPGRADE_URL = "https://go.elementor.com/go-pro-components-edit/";
+var EDIT_COMPONENT_DB_CLICK_UPGRADE_URL = "https://go.elementor.com/go-pro-components-Instance-edit-canvas-double-click/";
+var EDIT_COMPONENT_CONTEXT_MENU_UPGRADE_URL = "https://go.elementor.com/go-pro-components-Instance-edit-context-menu/";
+var UPDATE_PLUGINS_URL3 = "/wp-admin/plugins.php";
 var COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID = "component-edit-upgrade";
+var COMPONENT_EDIT_UPDATE_NOTIFICATION_ID = "component-edit-update";
+var COMPONENT_EDIT_UPGRADE_AUTO_HIDE_DURATION = 2e3;
 function notifyComponentEditUpgrade() {
   (0, import_editor_notifications2.notify)({
     type: "promotion",
     id: COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID,
-    message: (0, import_i18n11.__)("Editing components requires an active Pro subscription.", "elementor"),
+    message: (0, import_i18n13.__)("Editing components requires an active Pro subscription.", "elementor"),
+    autoHideDuration: COMPONENT_EDIT_UPGRADE_AUTO_HIDE_DURATION,
     additionalActionProps: [
       {
         size: "small",
         variant: "contained",
         color: "promotion",
-        href: EDIT_COMPONENT_UPGRADE_URL,
+        href: EDIT_COMPONENT_DB_CLICK_UPGRADE_URL,
         target: "_blank",
-        children: (0, import_i18n11.__)("Upgrade Now", "elementor")
+        children: (0, import_i18n13.__)("Upgrade Now", "elementor")
+      }
+    ]
+  });
+}
+function notifyComponentEditUpdate() {
+  (0, import_editor_notifications2.notify)({
+    type: "info",
+    id: COMPONENT_EDIT_UPDATE_NOTIFICATION_ID,
+    message: (0, import_i18n13.__)("To edit components, update Elementor Pro to the latest version.", "elementor"),
+    additionalActionProps: [
+      {
+        size: "small",
+        variant: "contained",
+        color: "info",
+        href: UPDATE_PLUGINS_URL3,
+        target: "_blank",
+        children: (0, import_i18n13.__)("Update Now", "elementor")
       }
     ]
   });
@@ -2606,21 +2734,23 @@ function createComponentView(options) {
     }
     _getContextMenuConfig() {
       const isAdministrator = isUserAdministrator();
-      const hasPro = (0, import_utils7.hasProInstalled)();
+      const hasPro = (0, import_utils5.hasProInstalled)();
+      const isOutdated = isProOutdatedForComponents();
+      const showPromoBadge = !hasPro && !isOutdated;
       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 proBadge = `<a href="${EDIT_COMPONENT_CONTEXT_MENU_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_i18n11.__)("Edit Component", "elementor"),
-        ...!hasPro && { shortcut: proBadge, hasShortcutAction: true },
-        isEnabled: () => hasPro,
+        title: () => (0, import_i18n13.__)("Edit Component", "elementor"),
+        ...showPromoBadge && { shortcut: proBadge, hasShortcutAction: true },
+        isEnabled: () => isProComponentsSupported() || isOutdated,
         callback: (_, eventData) => this.editComponent(eventData)
       };
       const detachInstanceAction = {
         name: "detach instance",
         icon: "eicon-chain-broken",
-        title: () => (0, import_i18n11.__)("Detach from Component", "elementor"),
+        title: () => (0, import_i18n13.__)("Detach from Component", "elementor"),
         isEnabled: () => true,
         callback: (_, eventData) => this.detachInstance(eventData)
       };
@@ -2647,8 +2777,11 @@ function createComponentView(options) {
       }
     }
     editComponent({ trigger, location, secondaryLocation }) {
-      const hasPro = (0, import_utils7.hasProInstalled)();
-      if (!hasPro || this.isComponentCurrentlyEdited()) {
+      if (isProOutdatedForComponents()) {
+        notifyComponentEditUpdate();
+        return;
+      }
+      if (!isProComponentsSupported() || this.isComponentCurrentlyEdited()) {
         return;
       }
       this.switchDocument();
@@ -2679,7 +2812,7 @@ function createComponentView(options) {
         } catch {
           (0, import_editor_notifications2.notify)({
             type: "error",
-            message: (0, import_i18n11.__)("Failed to detach component instance.", "elementor"),
+            message: (0, import_i18n13.__)("Failed to detach component instance.", "elementor"),
             id: "detach-component-instance-failed"
           });
         }
@@ -2691,7 +2824,11 @@ function createComponentView(options) {
       if (!isUserAdministrator()) {
         return;
       }
-      if (!(0, import_utils7.hasProInstalled)()) {
+      if (isProOutdatedForComponents()) {
+        notifyComponentEditUpdate();
+        return;
+      }
+      if (!(0, import_utils5.hasProInstalled)()) {
         notifyComponentEditUpgrade();
         return;
       }
@@ -2792,11 +2929,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_store30 = require("@elementor/store");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: (0, import_i18n12.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: (0, import_i18n14.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -2947,9 +3084,9 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
 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 import_i18n15 = 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_URL = "https://go.elementor.com/go-pro-components-Instance-draft-failure/";
 var PUBLISH_UPGRADE_NOTIFICATION_ID = "component-publish-upgrade";
 async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
   if (status !== "publish") {
@@ -2978,7 +3115,7 @@ function notifyPublishUpgrade() {
   (0, import_editor_notifications4.notify)({
     type: "promotion",
     id: PUBLISH_UPGRADE_NOTIFICATION_ID,
-    message: (0, import_i18n13.__)(
+    message: (0, import_i18n15.__)(
       "You have unpublished component on this page. You need a pro version to publish it.",
       "elementor"
     ),
@@ -2989,7 +3126,7 @@ function notifyPublishUpgrade() {
         color: "promotion",
         href: PUBLISH_UPGRADE_URL,
         target: "_blank",
-        children: (0, import_i18n13.__)("Upgrade Now", "elementor")
+        children: (0, import_i18n15.__)("Upgrade Now", "elementor")
       }
     ]
   });
@@ -3031,7 +3168,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n14.__)("Components", "elementor"),
+    label: (0, import_i18n16.__)("Components", "elementor"),
     component: Components,
     position: 1
   });