@elementor/editor-components 4.0.0-683 → 4.0.0

package/dist/index.mjs

@@ -10,7 +10,7 @@ import { injectTab } from "@elementor/editor-elements-panel";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -410,11 +410,10 @@ var componentOverrideTransformer = createTransformer3((override) => {
 });
 
 // src/components/components-tab/components.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 import { useLayoutEffect } from "react";
 import { ThemeProvider } from "@elementor/editor-ui";
 import { Stack as Stack4 } from "@elementor/ui";
-import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
 
 // src/hooks/use-components.ts
 import { __useSelector as useSelector2 } from "@elementor/store";
@@ -424,6 +423,16 @@ var useComponents = () => {
   return { components, isLoading };
 };
 
+// src/utils/is-pro-components-supported.ts
+import { hasProInstalled, isProAtLeast } from "@elementor/utils";
+var MIN_PRO_VERSION_FOR_COMPONENTS = "4.0";
+function isProComponentsSupported() {
+  return hasProInstalled() && isProAtLeast(MIN_PRO_VERSION_FOR_COMPONENTS);
+}
+function isProOutdatedForComponents() {
+  return hasProInstalled() && !isProAtLeast(MIN_PRO_VERSION_FOR_COMPONENTS);
+}
+
 // src/components/components-tab/component-search.tsx
 import * as React2 from "react";
 import { SearchIcon } from "@elementor/icons";
@@ -476,7 +485,6 @@ var ComponentSearch = () => {
 import * as React5 from "react";
 import { ComponentsIcon as ComponentsIcon2, CrownFilledIcon } from "@elementor/icons";
 import { Box as Box4, Button, Divider, Link, List, Stack as Stack3, Typography as Typography2 } from "@elementor/ui";
-import { hasProInstalled } from "@elementor/utils";
 import { __ as __2 } from "@wordpress/i18n";
 
 // src/hooks/use-components-permissions.ts
@@ -621,6 +629,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"
@@ -635,7 +644,10 @@ function ComponentsList() {
     if (searchValue.length) {
       return /* @__PURE__ */ React5.createElement(EmptySearchResult, null);
     }
-    return 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(List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React5.createElement(ComponentItem, { key: component.uid, component })));
 }
@@ -666,6 +678,32 @@ var ProUpgradeEmptyState = () => {
     )
   );
 };
+var ProOutdatedEmptyState = () => {
+  return /* @__PURE__ */ React5.createElement(
+    Stack3,
+    {
+      alignItems: "center",
+      justifyContent: "start",
+      height: "100%",
+      sx: { px: 2, py: 4, maxWidth: 268, m: "auto" },
+      gap: 2,
+      overflow: "hidden"
+    },
+    /* @__PURE__ */ React5.createElement(Stack3, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React5.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React5.createElement(Typography2, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __2("Create Reusable Components", "elementor")), /* @__PURE__ */ React5.createElement(Typography2, { align: "center", variant: "caption", color: "secondary" }, __2("Create design elements that sync across your entire site.", "elementor")), /* @__PURE__ */ React5.createElement(Typography2, { align: "center", variant: "caption", color: "secondary", sx: { mt: 1 } }, __2("To create components, update Elementor Pro to the latest version.", "elementor"))),
+    /* @__PURE__ */ React5.createElement(
+      Button,
+      {
+        variant: "text",
+        color: "info",
+        size: "small",
+        href: UPDATE_PLUGINS_URL,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
+      __2("Update Elementor Pro", "elementor")
+    )
+  );
+};
 var EmptyState = () => {
   const { canCreate } = useComponentsPermissions();
   return /* @__PURE__ */ React5.createElement(
@@ -808,7 +846,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,
@@ -820,6 +858,54 @@ function ComponentsProNotification() {
   );
 }
 
+// src/components/components-tab/components-update-notification.tsx
+import * as React9 from "react";
+import { __ as __6 } from "@wordpress/i18n";
+
+// src/components/components-update-alert.tsx
+import * as React8 from "react";
+import { InfoCircleFilledIcon } from "@elementor/icons";
+import { Alert as Alert2, AlertAction as AlertAction2, AlertTitle as AlertTitle2, Box as Box6, Typography as Typography4 } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+var UPDATE_PLUGINS_URL2 = "/wp-admin/plugins.php";
+function ComponentsUpdateAlert({ title, description }) {
+  return /* @__PURE__ */ React8.createElement(Box6, { sx: { mt: "auto", position: "sticky", bottom: 0 } }, /* @__PURE__ */ React8.createElement(
+    Alert2,
+    {
+      variant: "standard",
+      color: "info",
+      icon: /* @__PURE__ */ React8.createElement(InfoCircleFilledIcon, { fontSize: "tiny" }),
+      role: "status",
+      size: "small",
+      action: /* @__PURE__ */ React8.createElement(
+        AlertAction2,
+        {
+          variant: "contained",
+          color: "info",
+          href: UPDATE_PLUGINS_URL2,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        },
+        __5("Upgrade Now", "elementor")
+      ),
+      sx: { m: 2, mt: 1 }
+    },
+    /* @__PURE__ */ React8.createElement(AlertTitle2, null, title),
+    /* @__PURE__ */ React8.createElement(Typography4, { variant: "caption" }, description)
+  ));
+}
+
+// src/components/components-tab/components-update-notification.tsx
+function ComponentsUpdateNotification() {
+  return /* @__PURE__ */ React9.createElement(
+    ComponentsUpdateAlert,
+    {
+      title: __6("Create new Components", "elementor"),
+      description: __6("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 = `
@@ -860,34 +946,34 @@ var useFullHeightPanel = () => {
 var ComponentsContent = () => {
   const { components, isLoading } = useComponents();
   const hasComponents = !isLoading && components.length > 0;
-  const hasPro = hasProInstalled2();
-  const showProNotification = !hasPro && hasComponents;
+  const showProNotification = !isProComponentsSupported() && hasComponents;
+  const isOutdated = isProOutdatedForComponents();
   useFullHeightPanel();
-  return /* @__PURE__ */ React8.createElement(Stack4, { 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(Stack4, { 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(ThemeProvider, null, /* @__PURE__ */ React8.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React8.createElement(ComponentsContent, null)));
+  return /* @__PURE__ */ React10.createElement(ThemeProvider, null, /* @__PURE__ */ React10.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React10.createElement(ComponentsContent, null)));
 };
 
 // src/components/detach-instance-confirmation-dialog.tsx
-import * as React9 from "react";
+import * as React11 from "react";
 import { closeDialog, ConfirmationDialog, openDialog } from "@elementor/editor-ui";
 import { AlertTriangleFilledIcon } from "@elementor/icons";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 function DetachInstanceConfirmationDialog({
   open,
   onClose,
   onConfirm
 }) {
-  return /* @__PURE__ */ React9.createElement(ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React9.createElement(ConfirmationDialog.Title, { icon: AlertTriangleFilledIcon, iconColor: "secondary" }, __5("Detach from Component?", "elementor")), /* @__PURE__ */ React9.createElement(ConfirmationDialog.Content, null, /* @__PURE__ */ React9.createElement(ConfirmationDialog.ContentText, null, __5(
+  return /* @__PURE__ */ React11.createElement(ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React11.createElement(ConfirmationDialog.Title, { icon: AlertTriangleFilledIcon, iconColor: "secondary" }, __7("Detach from Component?", "elementor")), /* @__PURE__ */ React11.createElement(ConfirmationDialog.Content, null, /* @__PURE__ */ React11.createElement(ConfirmationDialog.ContentText, null, __7(
     "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(
     ConfirmationDialog.Actions,
     {
       onClose,
       onConfirm,
-      confirmLabel: __5("Detach", "elementor"),
+      confirmLabel: __7("Detach", "elementor"),
       color: "primary"
     }
   ));
@@ -898,59 +984,58 @@ function openDetachConfirmDialog(onConfirm) {
     onConfirm();
   };
   openDialog({
-    component: /* @__PURE__ */ React9.createElement(DetachInstanceConfirmationDialog, { open: true, onClose: closeDialog, onConfirm: handleConfirm })
+    component: /* @__PURE__ */ React11.createElement(DetachInstanceConfirmationDialog, { open: true, onClose: closeDialog, onConfirm: handleConfirm })
   });
 }
 
 // src/components/in-edit-mode.tsx
-import * as React10 from "react";
+import * as React12 from "react";
 import { closeDialog as closeDialog2, openDialog as openDialog2 } from "@elementor/editor-ui";
-import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Box as Box6, Button as Button2, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack5, Typography as Typography4 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
+import { Box as Box7, Button as Button2, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack5, Typography as Typography5 } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog2({
-    component: /* @__PURE__ */ React10.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React12.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __6("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React10.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React10.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React10.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React10.createElement(Typography4, { variant: "subtitle1" }, content))), /* @__PURE__ */ React10.createElement(DialogContent, null, /* @__PURE__ */ React10.createElement(Stack5, { spacing: 2, direction: "column" }, /* @__PURE__ */ React10.createElement(Typography4, { variant: "body2" }, __6(
+  const content = __8("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React12.createElement(Box7, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React12.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React12.createElement(InfoCircleFilledIcon2, { fontSize: "medium" })), /* @__PURE__ */ React12.createElement(Typography5, { variant: "subtitle1" }, content))), /* @__PURE__ */ React12.createElement(DialogContent, null, /* @__PURE__ */ React12.createElement(Stack5, { spacing: 2, direction: "column" }, /* @__PURE__ */ React12.createElement(Typography5, { variant: "body2" }, __8(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React10.createElement(DialogActions, null, /* @__PURE__ */ React10.createElement(Button2, { color: "secondary", variant: "contained", onClick: closeDialog2 }, __6("Close", "elementor"))))));
+  )), /* @__PURE__ */ React12.createElement(DialogActions, null, /* @__PURE__ */ React12.createElement(Button2, { color: "secondary", variant: "contained", onClick: closeDialog2 }, __8("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React20 from "react";
+import * as React22 from "react";
 import { PencilIcon as PencilIcon2 } from "@elementor/icons";
-import { Box as Box8, Stack as Stack12 } from "@elementor/ui";
-import { hasProInstalled as hasProInstalled3 } from "@elementor/utils";
-import { __ as __10 } from "@wordpress/i18n";
+import { Box as Box10, Stack as Stack11 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 
 // src/provider/component-instance-context.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var ComponentInstanceContext = createContext2(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 = () => useContext2(ComponentInstanceContext)?.componentId;
 var useComponentInstanceOverrides = () => useContext2(ComponentInstanceContext)?.overrides;
 var useComponentOverridableProps = () => useContext2(ComponentInstanceContext)?.overridableProps;
 
 // src/components/instance-editing-panel/detach-action.tsx
-import * as React13 from "react";
+import * as React15 from "react";
 import { useState } from "react";
 import { notify } from "@elementor/editor-notifications";
 import { DetachIcon } from "@elementor/icons";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/utils/detach-component-instance/detach-component-instance.ts
 import { getContainer, replaceElement } from "@elementor/editor-elements";
 import { undoable } from "@elementor/editor-v1-adapters";
 import { __dispatch as dispatch2, __getState as getState3 } from "@elementor/store";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/prop-types/component-instance-overrides-prop-type.ts
 import { createPropUtils as createPropUtils3 } from "@elementor/editor-props";
@@ -1299,8 +1384,8 @@ async function detachComponentInstance({
       }
     },
     {
-      title: __7("Detach from Component", "elementor"),
-      subtitle: __7("Instance detached", "elementor")
+      title: __9("Detach from Component", "elementor"),
+      subtitle: __9("Instance detached", "elementor")
     }
   );
   return undoableDetach();
@@ -1315,16 +1400,16 @@ function extractInstanceOverrides(instanceContainer) {
 }
 
 // src/components/instance-editing-panel/instance-panel-header.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 import { PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { ComponentsIcon as ComponentsIcon3 } from "@elementor/icons";
 import { IconButton, Stack as Stack6, Tooltip } from "@elementor/ui";
 function InstancePanelHeader({ componentName, actions }) {
-  return /* @__PURE__ */ React12.createElement(PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React12.createElement(Stack6, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React12.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React12.createElement(EllipsisWithTooltip2, { title: componentName, as: PanelHeaderTitle, sx: { flexGrow: 1 } }), actions));
+  return /* @__PURE__ */ React14.createElement(PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React14.createElement(Stack6, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React14.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React14.createElement(EllipsisWithTooltip2, { title: componentName, as: PanelHeaderTitle, sx: { flexGrow: 1 } }), actions));
 }
 function EditComponentAction({ label, onClick, disabled = false, icon: Icon2 }) {
-  return /* @__PURE__ */ React12.createElement(Tooltip, { title: label }, /* @__PURE__ */ React12.createElement(IconButton, { size: "tiny", onClick, "aria-label": label, disabled }, /* @__PURE__ */ React12.createElement(Icon2, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React14.createElement(Tooltip, { title: label }, /* @__PURE__ */ React14.createElement(IconButton, { size: "tiny", onClick, "aria-label": label, disabled }, /* @__PURE__ */ React14.createElement(Icon2, { fontSize: "tiny" })));
 }
 
 // src/components/instance-editing-panel/detach-action.tsx
@@ -1344,7 +1429,7 @@ var DetachAction = ({
     } catch {
       notify({
         type: "error",
-        message: __8("Failed to detach component instance.", "elementor"),
+        message: __10("Failed to detach component instance.", "elementor"),
         id: "detach-component-instance-failed"
       });
     }
@@ -1355,8 +1440,8 @@ var DetachAction = ({
   const handleDetachClick = () => {
     setIsDetachDialogOpen(true);
   };
-  const detachLabel = __8("Detach from Component", "elementor");
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(EditComponentAction, { label: detachLabel, icon: DetachIcon, onClick: handleDetachClick }), /* @__PURE__ */ React13.createElement(
+  const detachLabel = __10("Detach from Component", "elementor");
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(EditComponentAction, { label: detachLabel, icon: DetachIcon, onClick: handleDetachClick }), /* @__PURE__ */ React15.createElement(
     DetachInstanceConfirmationDialog,
     {
       open: isDetachDialogOpen,
@@ -1381,20 +1466,20 @@ function getDetachTrackingInfo() {
 }
 
 // src/components/instance-editing-panel/empty-state.tsx
-import * as React14 from "react";
+import * as React16 from "react";
 import { ComponentPropListIcon, PencilIcon } from "@elementor/icons";
-import { Button as Button3, Stack as Stack7, Typography as Typography5 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { Button as Button3, Stack as Stack7, Typography as Typography6 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
   const { canEdit } = useComponentsPermissions();
-  const message = canEdit ? __9(
+  const message = canEdit ? __11(
     "Edit the component to add properties, manage them or update the design across all instances.",
     "elementor"
-  ) : __9(
+  ) : __11(
     "With your current role, you cannot edit this component. Contact an administrator to add properties.",
     "elementor"
   );
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React16.createElement(
     Stack7,
     {
       alignItems: "center",
@@ -1404,10 +1489,10 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__PURE__ */ React14.createElement(ComponentPropListIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React14.createElement(Typography5, { align: "center", variant: "subtitle2" }, __9("No properties yet", "elementor")),
-    /* @__PURE__ */ React14.createElement(Typography5, { align: "center", variant: "caption", maxWidth: "170px" }, message),
-    canEdit && /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React16.createElement(ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React16.createElement(Typography6, { align: "center", variant: "subtitle2" }, __11("No properties yet", "elementor")),
+    /* @__PURE__ */ React16.createElement(Typography6, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && /* @__PURE__ */ React16.createElement(
       Button3,
       {
         variant: "outlined",
@@ -1417,28 +1502,28 @@ var EmptyState2 = ({ onEditComponent }) => {
         disabled: !onEditComponent,
         onClick: onEditComponent
       },
-      /* @__PURE__ */ React14.createElement(PencilIcon, { fontSize: "small" }),
-      __9("Edit component", "elementor")
+      /* @__PURE__ */ React16.createElement(PencilIcon, { fontSize: "small" }),
+      __11("Edit component", "elementor")
     )
   );
 };
 
 // src/components/instance-editing-panel/instance-panel-body.tsx
-import * as React19 from "react";
+import * as React21 from "react";
 import { ControlAdornmentsProvider } from "@elementor/editor-controls";
 import { getFieldIndicators } from "@elementor/editor-editing-panel";
 import { PanelBody } from "@elementor/editor-panels";
-import { Divider as Divider2, Stack as Stack11 } from "@elementor/ui";
+import { Divider as Divider2, Stack as Stack10 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-props-group.tsx
-import * as React18 from "react";
+import * as React20 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
-import { Box as Box7, Collapse, ListItemButton as ListItemButton2, ListItemText, Stack as Stack10 } from "@elementor/ui";
+import { Box as Box9, Collapse, ListItemButton as ListItemButton2, ListItemText, Stack as Stack9 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-import * as React17 from "react";
+import * as React19 from "react";
 import {
   ControlReplacementsProvider,
   getControlReplacements,
@@ -1449,6 +1534,7 @@ import {
 import {
   BaseControl,
   controlsRegistry,
+  ControlTypeContainer,
   createTopLevelObjectType,
   ElementProvider,
   isDynamicPropValue,
@@ -1456,7 +1542,7 @@ import {
   useElement
 } from "@elementor/editor-editing-panel";
 import { getElementSettings, getElementType as getElementType2 } from "@elementor/editor-elements";
-import { Stack as Stack9 } from "@elementor/ui";
+import { Box as Box8 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
 import { getElementType } from "@elementor/editor-elements";
@@ -1490,11 +1576,11 @@ function getControlsByBind(controls) {
 }
 
 // src/provider/overridable-prop-context.tsx
-import * as React15 from "react";
+import * as React17 from "react";
 import { createContext as createContext3, useContext as useContext3 } from "react";
 var OverridablePropContext = createContext3(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 = () => useContext3(OverridablePropContext)?.value;
 var useComponentInstanceElement = () => useContext3(OverridablePropContext)?.componentInstanceElement;
@@ -1726,11 +1812,11 @@ function extractInnerOverrideInfo(override) {
 }
 
 // src/components/control-label.tsx
-import * as React16 from "react";
+import * as React18 from "react";
 import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
 import { Stack as Stack8 } from "@elementor/ui";
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React16.createElement(Stack8, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React16.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React16.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React18.createElement(Stack8, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React18.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React18.createElement(ControlAdornments, null));
 };
 
 // src/components/errors.ts
@@ -1832,6 +1918,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();
@@ -1839,7 +1938,7 @@ function OverridePropControl({ overrideKey }) {
   if (!overridableProp) {
     return null;
   }
-  return /* @__PURE__ */ React17.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React17.createElement(OverrideControl, { overridableProp }));
+  return /* @__PURE__ */ React19.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(OverrideControl, { overridableProp }));
 }
 function OverrideControl({ overridableProp }) {
   const componentInstanceElement = useElement();
@@ -1877,11 +1976,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,
@@ -1933,13 +2033,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(ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React17.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React19.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React19.createElement(
       PropProvider,
       {
         propType: propTypeSchema,
@@ -1949,7 +2049,7 @@ function OverrideControl({ overridableProp }) {
           return false;
         }
       },
-      /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React17.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React17.createElement(Stack9, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React17.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React17.createElement(OriginalControl, { control, controlProps }))))
+      /* @__PURE__ */ React19.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React19.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React19.createElement(Box8, { mb: 1.5 }, /* @__PURE__ */ React19.createElement(ControlTypeContainer, { layout }, layout !== "custom" && /* @__PURE__ */ React19.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React19.createElement(OriginalControl, { control, controlProps })))))
     )))
   );
 }
@@ -2008,7 +2108,7 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React17.createElement(BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React19.createElement(BaseControl, { type: value.type, props: controlProps });
 }
 function getControlLayout(control) {
   return control.value.meta?.layout || controlsRegistry.getLayout(control.value.type);
@@ -2043,7 +2143,7 @@ function OverridePropsGroup({ group }) {
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   const title = group.label;
-  return /* @__PURE__ */ React18.createElement(Box7, { "aria-label": `${title} section` }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React20.createElement(Box9, { "aria-label": `${title} section` }, /* @__PURE__ */ React20.createElement(
     ListItemButton2,
     {
       id: labelId,
@@ -2053,7 +2153,7 @@ function OverridePropsGroup({ group }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React18.createElement(Stack10, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React20.createElement(Stack9, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React20.createElement(
       ListItemText,
       {
         secondary: title,
@@ -2061,13 +2161,13 @@ function OverridePropsGroup({ group }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React18.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React18.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React18.createElement(Stack10, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React18.createElement(OverridePropControl, { key: overrideKey, overrideKey })))));
+    /* @__PURE__ */ React20.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React20.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React20.createElement(Stack9, { 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(PanelBody, null, /* @__PURE__ */ React19.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React19.createElement(Stack11, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React19.createElement(React19.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React19.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React19.createElement(Divider2, null))))));
+  return /* @__PURE__ */ React21.createElement(PanelBody, null, /* @__PURE__ */ React21.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? emptyState : /* @__PURE__ */ React21.createElement(Stack10, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React21.createElement(React21.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React21.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React21.createElement(Divider2, null))))));
 }
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
@@ -2167,42 +2267,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 = hasProInstalled3();
   if (!data) {
     return null;
   }
   const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
-  const panelTitle = __10("Edit %s", "elementor").replace("%s", component.name);
-  const actions = /* @__PURE__ */ React20.createElement(Stack12, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React20.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React20.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: PencilIcon2 }));
-  return /* @__PURE__ */ React20.createElement(Box8, { "data-testid": "instance-editing-panel", sx: { display: "flex", flexDirection: "column", height: "100%" } }, /* @__PURE__ */ React20.createElement(
+  const panelTitle = __12("Edit %s", "elementor").replace("%s", component.name);
+  const actions = /* @__PURE__ */ React22.createElement(Stack11, { direction: "row", gap: 0.5 }, /* @__PURE__ */ React22.createElement(DetachAction, { componentInstanceId, componentId }), canEdit && /* @__PURE__ */ React22.createElement(EditComponentAction, { disabled: true, label: panelTitle, icon: PencilIcon2 }));
+  return /* @__PURE__ */ React22.createElement(Box10, { "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: __12("Edit Component", "elementor"),
+      description: __12(
+        "To edit components, update Elementor Pro to the latest version.",
+        "elementor"
+      )
+    }
+  ) : /* @__PURE__ */ React22.createElement(
     ComponentsUpgradeAlert,
     {
-      title: __10("Edit components", "elementor"),
-      description: __10("Editing components requires an active Pro subscription.", "elementor"),
+      title: __12("Edit components", "elementor"),
+      description: __12("Editing components requires an active Pro subscription.", "elementor"),
       upgradeUrl: EDIT_UPGRADE_URL
     }
-  ));
+  )));
 }
 
 // src/components/load-template-components.tsx
@@ -2342,8 +2450,8 @@ import {
 import { getCurrentDocument } from "@elementor/editor-documents";
 import { notify as notify2 } from "@elementor/editor-notifications";
 import { __getState as getState8 } from "@elementor/store";
-import { hasProInstalled as hasProInstalled4 } from "@elementor/utils";
-import { __ as __11 } from "@wordpress/i18n";
+import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
+import { __ as __13 } from "@wordpress/i18n";
 
 // src/utils/format-component-elements-id.ts
 import { hashString } from "@elementor/utils";
@@ -2415,21 +2523,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() {
   notify2({
     type: "promotion",
     id: COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID,
-    message: __11("Editing components requires an active Pro subscription.", "elementor"),
+    message: __13("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: __11("Upgrade Now", "elementor")
+        children: __13("Upgrade Now", "elementor")
+      }
+    ]
+  });
+}
+function notifyComponentEditUpdate() {
+  notify2({
+    type: "info",
+    id: COMPONENT_EDIT_UPDATE_NOTIFICATION_ID,
+    message: __13("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: __13("Update Now", "elementor")
       }
     ]
   });
@@ -2542,21 +2672,23 @@ function createComponentView(options) {
     }
     _getContextMenuConfig() {
       const isAdministrator = isUserAdministrator();
-      const hasPro = hasProInstalled4();
+      const hasPro = hasProInstalled2();
+      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: () => __11("Edit Component", "elementor"),
-        ...!hasPro && { shortcut: proBadge, hasShortcutAction: true },
-        isEnabled: () => hasPro,
+        title: () => __13("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: () => __11("Detach from Component", "elementor"),
+        title: () => __13("Detach from Component", "elementor"),
         isEnabled: () => true,
         callback: (_, eventData) => this.detachInstance(eventData)
       };
@@ -2583,8 +2715,11 @@ function createComponentView(options) {
       }
     }
     editComponent({ trigger, location, secondaryLocation }) {
-      const hasPro = hasProInstalled4();
-      if (!hasPro || this.isComponentCurrentlyEdited()) {
+      if (isProOutdatedForComponents()) {
+        notifyComponentEditUpdate();
+        return;
+      }
+      if (!isProComponentsSupported() || this.isComponentCurrentlyEdited()) {
         return;
       }
       this.switchDocument();
@@ -2615,7 +2750,7 @@ function createComponentView(options) {
         } catch {
           notify2({
             type: "error",
-            message: __11("Failed to detach component instance.", "elementor"),
+            message: __13("Failed to detach component instance.", "elementor"),
             id: "detach-component-instance-failed"
           });
         }
@@ -2627,7 +2762,11 @@ function createComponentView(options) {
       if (!isUserAdministrator()) {
         return;
       }
-      if (!hasProInstalled4()) {
+      if (isProOutdatedForComponents()) {
+        notifyComponentEditUpdate();
+        return;
+      }
+      if (!hasProInstalled2()) {
         notifyComponentEditUpgrade();
         return;
       }
@@ -2728,11 +2867,11 @@ import { getAllDescendants } from "@elementor/editor-elements";
 import { notify as notify3 } from "@elementor/editor-notifications";
 import { blockCommand } from "@elementor/editor-v1-adapters";
 import { __getState as getState9 } from "@elementor/store";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: __12("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: __14("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -2883,9 +3022,9 @@ var componentsStylesProvider = createStylesProvider({
 import { invalidateDocumentData as invalidateDocumentData2, isDocumentDirty as isDocumentDirty2 } from "@elementor/editor-documents";
 import { notify as notify4 } from "@elementor/editor-notifications";
 import { AxiosError } from "@elementor/http-client";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 var INSUFFICIENT_PERMISSIONS_ERROR_CODE = "insufficient_permissions";
-var PUBLISH_UPGRADE_URL = "https://go.elementor.com/go-pro-components-edit/";
+var PUBLISH_UPGRADE_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") {
@@ -2914,7 +3053,7 @@ function notifyPublishUpgrade() {
   notify4({
     type: "promotion",
     id: PUBLISH_UPGRADE_NOTIFICATION_ID,
-    message: __13(
+    message: __15(
       "You have unpublished component on this page. You need a pro version to publish it.",
       "elementor"
     ),
@@ -2925,7 +3064,7 @@ function notifyPublishUpgrade() {
         color: "promotion",
         href: PUBLISH_UPGRADE_URL,
         target: "_blank",
-        children: __13("Upgrade Now", "elementor")
+        children: __15("Upgrade Now", "elementor")
       }
     ]
   });
@@ -2967,7 +3106,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __14("Components", "elementor"),
+    label: __16("Components", "elementor"),
     component: Components,
     position: 1
   });