@elementor/editor-variables 4.0.0-564 → 4.0.0-591

package/dist/index.js

@@ -50,18 +50,19 @@ var import_editor_props7 = require("@elementor/editor-props");
 var import_menus = require("@elementor/menus");
 
 // src/components/open-panel-from-url.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
 // src/components/variables-manager/variables-manager-panel.tsx
-var React15 = __toESM(require("react"));
-var import_react14 = require("react");
+var React14 = __toESM(require("react"));
+var import_react13 = require("react");
+var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_icons6 = require("@elementor/icons");
-var import_ui15 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_icons5 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/utils/tracking.ts
 var import_events = require("@elementor/events");
@@ -829,52 +830,14 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
   );
 };
 
-// src/components/ui/stop-sync-confirmation-dialog.tsx
-var React5 = __toESM(require("react"));
-var import_react = require("react");
-var import_icons2 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
-var StopSyncConfirmationDialog = ({
-  open,
-  closeDialog,
-  onConfirm,
-  onSuppressMessage
-}) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react.useState)(false);
-  const handleConfirm = () => {
-    if (dontShowAgain) {
-      onSuppressMessage?.();
-    }
-    onConfirm();
-  };
-  return /* @__PURE__ */ React5.createElement(import_ui6.Dialog, { open, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React5.createElement(import_ui6.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React5.createElement(import_icons2.BrushIcon, { color: "secondary" }), (0, import_i18n7.__)("Stop syncing variable color", "elementor")), /* @__PURE__ */ React5.createElement(import_ui6.DialogContent, null, /* @__PURE__ */ React5.createElement(import_ui6.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n7.__)(
-    "This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.",
-    "elementor"
-  ))), /* @__PURE__ */ React5.createElement(import_ui6.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React5.createElement(
-    import_ui6.FormControlLabel,
-    {
-      control: /* @__PURE__ */ React5.createElement(
-        import_ui6.Checkbox,
-        {
-          checked: dontShowAgain,
-          onChange: (event) => setDontShowAgain(event.target.checked),
-          size: "small"
-        }
-      ),
-      label: /* @__PURE__ */ React5.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n7.__)("Don't show this again", "elementor"))
-    }
-  ), /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement(import_ui6.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n7.__)("Cancel", "elementor")), /* @__PURE__ */ React5.createElement(import_ui6.Button, { variant: "contained", color: "secondary", onClick: handleConfirm, sx: { ml: 1 } }, (0, import_i18n7.__)("Got it", "elementor")))));
-};
-
 // src/components/variables-manager/hooks/use-auto-edit.ts
-var import_react2 = require("react");
+var import_react = require("react");
 var useAutoEdit = () => {
-  const [autoEditVariableId, setAutoEditVariableId] = (0, import_react2.useState)(void 0);
-  const startAutoEdit = (0, import_react2.useCallback)((variableId) => {
+  const [autoEditVariableId, setAutoEditVariableId] = (0, import_react.useState)(void 0);
+  const startAutoEdit = (0, import_react.useCallback)((variableId) => {
     setAutoEditVariableId(variableId);
   }, []);
-  const handleAutoEditComplete = (0, import_react2.useCallback)(() => {
+  const handleAutoEditComplete = (0, import_react.useCallback)(() => {
     setTimeout(() => {
       setAutoEditVariableId(void 0);
     }, 100);
@@ -887,10 +850,10 @@ var useAutoEdit = () => {
 };
 
 // src/components/variables-manager/hooks/use-error-navigation.ts
-var import_react3 = require("react");
+var import_react2 = require("react");
 var useErrorNavigation = () => {
-  const currentIndexRef = (0, import_react3.useRef)(0);
-  const createNavigationCallback = (0, import_react3.useCallback)(
+  const currentIndexRef = (0, import_react2.useRef)(0);
+  const createNavigationCallback = (0, import_react2.useCallback)(
     (ids, onNavigate, onComplete) => {
       return () => {
         if (!ids?.length) {
@@ -912,7 +875,7 @@ var useErrorNavigation = () => {
     },
     []
   );
-  const resetNavigation = (0, import_react3.useCallback)(() => {
+  const resetNavigation = (0, import_react2.useCallback)(() => {
     currentIndexRef.current = 0;
   }, []);
   return {
@@ -922,21 +885,21 @@ var useErrorNavigation = () => {
 };
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
-var import_react6 = require("react");
+var import_react5 = require("react");
 
 // src/hooks/use-prop-variables.ts
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_editor_controls = require("@elementor/editor-controls");
 
 // src/context/variable-type-context.tsx
-var React6 = __toESM(require("react"));
-var import_react4 = require("react");
-var VariableTypeContext = (0, import_react4.createContext)(null);
+var React5 = __toESM(require("react"));
+var import_react3 = require("react");
+var VariableTypeContext = (0, import_react3.createContext)(null);
 function VariableTypeProvider({ children, propTypeKey }) {
-  return /* @__PURE__ */ React6.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
+  return /* @__PURE__ */ React5.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
 }
 function useVariableType() {
-  const context = (0, import_react4.useContext)(VariableTypeContext);
+  const context = (0, import_react3.useContext)(VariableTypeContext);
   if (context === null) {
     throw new Error("useVariableType must be used within a VariableTypeProvider");
   }
@@ -1019,7 +982,7 @@ var useVariableSelectionFilter = (variables) => {
   return selectionFilter ? selectionFilter(variables, propType) : variables;
 };
 var usePropVariables = (propKey) => {
-  return (0, import_react5.useMemo)(() => normalizeVariables(propKey), [propKey]);
+  return (0, import_react4.useMemo)(() => normalizeVariables(propKey), [propKey]);
 };
 var getMatchingTypes = (propKey) => {
   const matchingTypes = [];
@@ -1053,20 +1016,20 @@ var restoreVariable = (restoreId, label, value, type) => {
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
 var useVariablesManagerState = () => {
-  const [variables, setVariables] = (0, import_react6.useState)(() => getVariables(false));
-  const [deletedVariables, setDeletedVariables] = (0, import_react6.useState)([]);
-  const [isSaveDisabled, setIsSaveDisabled] = (0, import_react6.useState)(false);
-  const [isDirty, setIsDirty] = (0, import_react6.useState)(false);
-  const [isSaving, setIsSaving] = (0, import_react6.useState)(false);
-  const [searchValue, setSearchValue] = (0, import_react6.useState)("");
-  const handleOnChange = (0, import_react6.useCallback)(
+  const [variables, setVariables] = (0, import_react5.useState)(() => getVariables(false));
+  const [deletedVariables, setDeletedVariables] = (0, import_react5.useState)([]);
+  const [isSaveDisabled, setIsSaveDisabled] = (0, import_react5.useState)(false);
+  const [isDirty, setIsDirty] = (0, import_react5.useState)(false);
+  const [isSaving, setIsSaving] = (0, import_react5.useState)(false);
+  const [searchValue, setSearchValue] = (0, import_react5.useState)("");
+  const handleOnChange = (0, import_react5.useCallback)(
     (newVariables) => {
       setVariables({ ...variables, ...newVariables });
       setIsDirty(true);
     },
     [variables]
   );
-  const createVariable2 = (0, import_react6.useCallback)((type, defaultName, defaultValue) => {
+  const createVariable2 = (0, import_react5.useCallback)((type, defaultName, defaultValue) => {
     const newId = generateTempId();
     const newVariable = {
       id: newId,
@@ -1078,19 +1041,19 @@ var useVariablesManagerState = () => {
     setIsDirty(true);
     return newId;
   }, []);
-  const handleDeleteVariable = (0, import_react6.useCallback)((itemId) => {
+  const handleDeleteVariable = (0, import_react5.useCallback)((itemId) => {
     setDeletedVariables((prev) => [...prev, itemId]);
     setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
     setIsDirty(true);
   }, []);
-  const handleStartSync = (0, import_react6.useCallback)((itemId) => {
+  const handleStartSync = (0, import_react5.useCallback)((itemId) => {
     setVariables((prev) => ({
       ...prev,
       [itemId]: { ...prev[itemId], sync_to_v3: true }
     }));
     setIsDirty(true);
   }, []);
-  const handleStopSync = (0, import_react6.useCallback)((itemId) => {
+  const handleStopSync = (0, import_react5.useCallback)((itemId) => {
     setVariables((prev) => ({
       ...prev,
       [itemId]: { ...prev[itemId], sync_to_v3: false }
@@ -1100,7 +1063,7 @@ var useVariablesManagerState = () => {
   const handleSearch = (searchTerm) => {
     setSearchValue(searchTerm);
   };
-  const handleSave = (0, import_react6.useCallback)(async () => {
+  const handleSave = (0, import_react5.useCallback)(async () => {
     const originalVariables = getVariables(false);
     setIsSaving(true);
     const result = await service.batchSave(originalVariables, variables, deletedVariables);
@@ -1113,7 +1076,7 @@ var useVariablesManagerState = () => {
     }
     return { success: result.success };
   }, [variables, deletedVariables]);
-  const filteredVariables = (0, import_react6.useCallback)(() => {
+  const filteredVariables = (0, import_react5.useCallback)(() => {
     const list = variablesToList(variables).filter((v) => !v.deleted);
     const typeFiltered = applySelectionFilters(list, getVariableTypes());
     const searchFiltered = filterBySearch(typeFiltered, searchValue);
@@ -1139,12 +1102,12 @@ var useVariablesManagerState = () => {
 };
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
-var React8 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_icons3 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
+var React7 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_icons2 = require("@elementor/icons");
+var import_ui7 = require("@elementor/ui");
 var import_utils2 = require("@elementor/utils");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/hooks/use-quota-permissions.ts
 var useQuotaPermissions = (variableType) => {
@@ -1162,43 +1125,43 @@ var useQuotaPermissions = (variableType) => {
 };
 
 // src/components/ui/variable-promotion-chip.tsx
-var React7 = __toESM(require("react"));
-var import_react7 = require("react");
+var React6 = __toESM(require("react"));
+var import_react6 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_ui7 = require("@elementor/ui");
+var import_ui6 = require("@elementor/ui");
 var import_utils = require("@elementor/utils");
-var import_i18n8 = require("@wordpress/i18n");
-var VariablePromotionChip = (0, import_react7.forwardRef)(
+var import_i18n7 = require("@wordpress/i18n");
+var VariablePromotionChip = (0, import_react6.forwardRef)(
   ({ variableType, upgradeUrl }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
     (0, import_editor_ui2.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
     const toggle = () => setIsOpen((prev) => !prev);
-    (0, import_react7.useImperativeHandle)(ref, () => ({ toggle }), []);
-    const title = (0, import_i18n8.sprintf)(
+    (0, import_react6.useImperativeHandle)(ref, () => ({ toggle }), []);
+    const title = (0, import_i18n7.sprintf)(
       /* translators: %s: Variable Type. */
-      (0, import_i18n8.__)("%s variables", "elementor"),
+      (0, import_i18n7.__)("%s variables", "elementor"),
       (0, import_utils.capitalize)(variableType)
     );
-    const content = (0, import_i18n8.sprintf)(
+    const content = (0, import_i18n7.sprintf)(
       /* translators: %s: Variable Type. */
-      (0, import_i18n8.__)("Upgrade to continue creating and editing %s variables.", "elementor"),
+      (0, import_i18n7.__)("Upgrade to continue creating and editing %s variables.", "elementor"),
       variableType
     );
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React6.createElement(
       import_editor_ui2.PromotionPopover,
       {
         open: isOpen,
         title,
         content,
-        ctaText: (0, import_i18n8.__)("Upgrade now", "elementor"),
+        ctaText: (0, import_i18n7.__)("Upgrade now", "elementor"),
         ctaUrl: upgradeUrl,
         onClose: (e) => {
           e.stopPropagation();
           setIsOpen(false);
         }
       },
-      /* @__PURE__ */ React7.createElement(
-        import_ui7.Box,
+      /* @__PURE__ */ React6.createElement(
+        import_ui6.Box,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -1206,7 +1169,7 @@ var VariablePromotionChip = (0, import_react7.forwardRef)(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        /* @__PURE__ */ React7.createElement(import_editor_ui2.PromotionChip, null)
+        /* @__PURE__ */ React6.createElement(import_editor_ui2.PromotionChip, null)
       )
     );
   }
@@ -1215,9 +1178,9 @@ var VariablePromotionChip = (0, import_react7.forwardRef)(
 // src/components/variables-manager/variables-manager-create-menu.tsx
 var SIZE = "tiny";
 var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
-  const buttonRef = (0, import_react8.useRef)(null);
+  const buttonRef = (0, import_react7.useRef)(null);
   const variableTypes = getVariableTypes();
-  const menuOptionConfigs = (0, import_react8.useMemo)(
+  const menuOptionConfigs = (0, import_react7.useMemo)(
     () => Object.entries(variableTypes).filter(([, variable]) => !!variable.defaultValue).map(([key, variable]) => ({
       key,
       propTypeKey: variable.propTypeUtil.key,
@@ -1227,17 +1190,17 @@ var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
     })),
     [variableTypes]
   );
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
-    import_ui8.IconButton,
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+    import_ui7.IconButton,
     {
-      ...(0, import_ui8.bindTrigger)(menuState),
+      ...(0, import_ui7.bindTrigger)(menuState),
       ref: buttonRef,
       size: SIZE,
-      "aria-label": (0, import_i18n9.__)("Add variable", "elementor")
+      "aria-label": (0, import_i18n8.__)("Add variable", "elementor")
     },
-    /* @__PURE__ */ React8.createElement(import_icons3.PlusIcon, { fontSize: SIZE })
-  ), /* @__PURE__ */ React8.createElement(
-    import_ui8.Menu,
+    /* @__PURE__ */ React7.createElement(import_icons2.PlusIcon, { fontSize: SIZE })
+  ), /* @__PURE__ */ React7.createElement(
+    import_ui7.Menu,
     {
       disablePortal: true,
       MenuListProps: {
@@ -1246,7 +1209,7 @@ var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
       PaperProps: {
         elevation: 6
       },
-      ...(0, import_ui8.bindMenu)(menuState),
+      ...(0, import_ui7.bindMenu)(menuState),
       anchorEl: buttonRef.current,
       anchorOrigin: {
         vertical: "bottom",
@@ -1258,7 +1221,7 @@ var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
       },
       "data-testid": "variable-manager-create-menu"
     },
-    menuOptionConfigs.map((config) => /* @__PURE__ */ React8.createElement(
+    menuOptionConfigs.map((config) => /* @__PURE__ */ React7.createElement(
       MenuOption,
       {
         key: config.key,
@@ -1276,7 +1239,7 @@ var MenuOption = ({
   onCreate,
   onClose
 }) => {
-  const promotionRef = (0, import_react8.useRef)(null);
+  const promotionRef = (0, import_react7.useRef)(null);
   const userQuotaPermissions = useQuotaPermissions(config.propTypeKey);
   const displayName = (0, import_utils2.capitalize)(config.variableType);
   const isDisabled = !userQuotaPermissions.canAdd();
@@ -1290,7 +1253,7 @@ var MenuOption = ({
     trackVariablesManagerEvent({ action: "add", varType: config.variableType });
     onClose();
   };
-  return /* @__PURE__ */ React8.createElement(import_ui8.MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: "pointer" } }, (0, import_react8.createElement)(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React7.createElement(import_ui7.MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: "pointer" } }, (0, import_react7.createElement)(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React7.createElement(import_ui7.Typography, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React7.createElement(
     VariablePromotionChip,
     {
       variableType: config.variableType,
@@ -1311,14 +1274,14 @@ var getDefaultName = (variables, type, baseName) => {
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
-var React14 = __toESM(require("react"));
-var import_react13 = require("react");
-var import_ui14 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var React13 = __toESM(require("react"));
+var import_react12 = require("react");
+var import_ui13 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/variables-manager/ui/variable-table-cell.tsx
-var React9 = __toESM(require("react"));
-var import_ui9 = require("@elementor/ui");
+var React8 = __toESM(require("react"));
+var import_ui8 = require("@elementor/ui");
 var VariableTableCell = ({
   children,
   isHeader,
@@ -1337,26 +1300,26 @@ var VariableTableCell = ({
     ...width && { width },
     ...sx
   };
-  return /* @__PURE__ */ React9.createElement(import_ui9.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+  return /* @__PURE__ */ React8.createElement(import_ui8.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
 };
 
 // src/components/variables-manager/ui/variable-table-row.tsx
-var React13 = __toESM(require("react"));
-var import_react12 = require("react");
+var React12 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_editor_ui4 = require("@elementor/editor-ui");
-var import_icons5 = require("@elementor/icons");
-var import_ui13 = require("@elementor/ui");
+var import_icons4 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
 
 // src/components/fields/label-field.tsx
-var React10 = __toESM(require("react"));
-var import_react9 = require("react");
+var React9 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_editor_ui3 = require("@elementor/editor-ui");
-var import_ui10 = require("@elementor/ui");
+var import_ui9 = require("@elementor/ui");
 function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
 var useLabelError = (initialError) => {
-  const [error, setError] = (0, import_react9.useState)(initialError ?? { value: "", message: "" });
+  const [error, setError] = (0, import_react8.useState)(initialError ?? { value: "", message: "" });
   return {
     labelFieldError: error,
     setLabelFieldError: setError
@@ -1375,9 +1338,9 @@ var LabelField = ({
   variables,
   onKeyDown
 }) => {
-  const [label, setLabel] = (0, import_react9.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react9.useState)("");
-  const fieldRef = (0, import_react9.useRef)(null);
+  const [label, setLabel] = (0, import_react8.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
+  const fieldRef = (0, import_react8.useRef)(null);
   const handleChange = (newValue) => {
     setLabel(newValue);
     const errorMsg2 = validateLabel(newValue, variables);
@@ -1390,8 +1353,8 @@ var LabelField = ({
     errorMsg = error.message;
   }
   const hintMsg = !errorMsg ? labelHint(label) : "";
-  const textField = /* @__PURE__ */ React10.createElement(
-    import_ui10.TextField,
+  const textField = /* @__PURE__ */ React9.createElement(
+    import_ui9.TextField,
     {
       ref: fieldRef,
       id: id2,
@@ -1411,7 +1374,7 @@ var LabelField = ({
   );
   if (showWarningInfotip) {
     const tooltipWidth = Math.max(240, fieldRef.current?.getBoundingClientRect().width ?? 240);
-    return /* @__PURE__ */ React10.createElement(
+    return /* @__PURE__ */ React9.createElement(
       import_editor_ui3.WarningInfotip,
       {
         open: Boolean(errorMsg || hintMsg),
@@ -1428,10 +1391,10 @@ var LabelField = ({
 };
 
 // src/components/variables-manager/variable-editable-cell.tsx
-var React11 = __toESM(require("react"));
-var import_react10 = require("react");
-var import_ui11 = require("@elementor/ui");
-var VariableEditableCell = React11.memo(
+var React10 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_ui10 = require("@elementor/ui");
+var VariableEditableCell = React10.memo(
   ({
     initialValue,
     children,
@@ -1445,22 +1408,22 @@ var VariableEditableCell = React11.memo(
     fieldType,
     disabled = false
   }) => {
-    const [value, setValue] = (0, import_react10.useState)(initialValue);
-    const [isEditing, setIsEditing] = (0, import_react10.useState)(false);
+    const [value, setValue] = (0, import_react9.useState)(initialValue);
+    const [isEditing, setIsEditing] = (0, import_react9.useState)(false);
     const { labelFieldError, setLabelFieldError } = useLabelError();
-    const [valueFieldError, setValueFieldError] = (0, import_react10.useState)("");
-    const rowRef = (0, import_react10.useRef)(null);
-    const handleSave = (0, import_react10.useCallback)(() => {
+    const [valueFieldError, setValueFieldError] = (0, import_react9.useState)("");
+    const rowRef = (0, import_react9.useRef)(null);
+    const handleSave = (0, import_react9.useCallback)(() => {
       const hasError = fieldType === "label" && labelFieldError?.message || fieldType === "value" && valueFieldError;
       if (!hasError) {
         onChange(value);
       }
       setIsEditing(false);
     }, [value, onChange, fieldType, labelFieldError, valueFieldError]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       onRowRef?.(rowRef?.current);
     }, [onRowRef]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       if (autoEdit && !isEditing && !disabled) {
         setIsEditing(true);
         onAutoEditComplete?.();
@@ -1486,10 +1449,10 @@ var VariableEditableCell = React11.memo(
         setIsEditing(true);
       }
     };
-    const handleChange = (0, import_react10.useCallback)((newValue) => {
+    const handleChange = (0, import_react9.useCallback)((newValue) => {
       setValue(newValue);
     }, []);
-    const handleValidationChange = (0, import_react10.useCallback)(
+    const handleValidationChange = (0, import_react9.useCallback)(
       (errorMsg) => {
         if (fieldType === "label") {
           setLabelFieldError({
@@ -1515,8 +1478,8 @@ var VariableEditableCell = React11.memo(
       error: currentError
     });
     if (isEditing) {
-      return /* @__PURE__ */ React11.createElement(import_ui11.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React11.createElement(
-        import_ui11.Stack,
+      return /* @__PURE__ */ React10.createElement(import_ui10.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React10.createElement(
+        import_ui10.Stack,
         {
           ref: rowRef,
           direction: "row",
@@ -1532,8 +1495,8 @@ var VariableEditableCell = React11.memo(
         editableContent
       ));
     }
-    return /* @__PURE__ */ React11.createElement(
-      import_ui11.Stack,
+    return /* @__PURE__ */ React10.createElement(
+      import_ui10.Stack,
       {
         ref: rowRef,
         direction: "row",
@@ -1552,17 +1515,17 @@ var VariableEditableCell = React11.memo(
 );
 
 // src/components/variables-manager/ui/variable-edit-menu.tsx
-var React12 = __toESM(require("react"));
-var import_react11 = require("react");
-var import_icons4 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
+var React11 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_icons3 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
-  const menuState = (0, import_ui12.usePopupState)({
+  const menuState = (0, import_ui11.usePopupState)({
     variant: "popover"
   });
-  const triggerProps = (0, import_ui12.bindTrigger)(menuState);
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
-    import_ui12.IconButton,
+  const triggerProps = (0, import_ui11.bindTrigger)(menuState);
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+    import_ui11.IconButton,
     {
       ...triggerProps,
       disabled,
@@ -1572,9 +1535,9 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
         triggerProps.onClick?.(e);
       }
     },
-    /* @__PURE__ */ React12.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" })
-  ), /* @__PURE__ */ React12.createElement(
-    import_ui12.Menu,
+    /* @__PURE__ */ React11.createElement(import_icons3.DotsVerticalIcon, { fontSize: "tiny" })
+  ), /* @__PURE__ */ React11.createElement(
+    import_ui11.Menu,
     {
       disablePortal: true,
       MenuListProps: {
@@ -1583,7 +1546,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       PaperProps: {
         elevation: 6
       },
-      ...(0, import_ui12.bindMenu)(menuState),
+      ...(0, import_ui11.bindMenu)(menuState),
       anchorEl: menuState.anchorEl,
       anchorOrigin: {
         vertical: "bottom",
@@ -1596,8 +1559,8 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuActions.map((action) => /* @__PURE__ */ React12.createElement(
-      import_ui12.MenuItem,
+    menuActions.map((action) => /* @__PURE__ */ React11.createElement(
+      import_ui11.MenuItem,
       {
         key: action.name,
         onClick: (e) => {
@@ -1610,7 +1573,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
           gap: 1
         }
       },
-      action.icon && (0, import_react11.createElement)(action.icon, {
+      action.icon && (0, import_react10.createElement)(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -1640,12 +1603,12 @@ var VariableRow = (props) => {
     setTriggerRef,
     isSorting
   } = props;
-  const promotionRef = (0, import_react12.useRef)(null);
+  const promotionRef = (0, import_react11.useRef)(null);
   const isDisabled = !useQuotaPermissions(row.type).canEdit();
   const showIndicationBefore = showDropIndication && dropPosition === "before";
   const showIndicationAfter = showDropIndication && dropPosition === "after";
-  return /* @__PURE__ */ React13.createElement(
-    import_ui13.TableRow,
+  return /* @__PURE__ */ React12.createElement(
+    import_ui12.TableRow,
     {
       ...itemProps,
       ref: itemProps.ref,
@@ -1685,8 +1648,8 @@ var VariableRow = (props) => {
         }
       }
     },
-    /* @__PURE__ */ React13.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React13.createElement(import_ui13.IconButton, { size: "small", ref: setTriggerRef, ...triggerProps, disabled: isSorting, draggable: true }, /* @__PURE__ */ React13.createElement(import_icons5.GripVerticalIcon, { fontSize: "inherit" }))),
-    /* @__PURE__ */ React13.createElement(VariableTableCell, null, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React12.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React12.createElement(import_ui12.IconButton, { size: "small", ref: setTriggerRef, ...triggerProps, disabled: isSorting, draggable: true }, /* @__PURE__ */ React12.createElement(import_icons4.GripVerticalIcon, { fontSize: "inherit" }))),
+    /* @__PURE__ */ React12.createElement(VariableTableCell, null, /* @__PURE__ */ React12.createElement(
       VariableEditableCell,
       {
         initialValue: row.name,
@@ -1698,11 +1661,11 @@ var VariableRow = (props) => {
             });
           }
         },
-        prefixElement: (0, import_react12.createElement)(row.icon, {
+        prefixElement: (0, import_react11.createElement)(row.icon, {
           fontSize: "inherit",
           color: isDisabled ? "disabled" : "inherit"
         }),
-        editableElement: ({ value, onChange, onValidationChange, error }) => /* @__PURE__ */ React13.createElement(
+        editableElement: ({ value, onChange, onValidationChange, error }) => /* @__PURE__ */ React12.createElement(
           LabelField,
           {
             id: "variable-label-" + row.id,
@@ -1726,9 +1689,9 @@ var VariableRow = (props) => {
         fieldType: "label",
         disabled: isDisabled
       },
-      /* @__PURE__ */ React13.createElement(import_editor_ui4.EllipsisWithTooltip, { title: row.name, sx: { border: "4px solid transparent" } }, row.name)
+      /* @__PURE__ */ React12.createElement(import_editor_ui4.EllipsisWithTooltip, { title: row.name, sx: { border: "4px solid transparent" } }, row.name)
     )),
-    /* @__PURE__ */ React13.createElement(VariableTableCell, null, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React12.createElement(VariableTableCell, null, /* @__PURE__ */ React12.createElement(
       VariableEditableCell,
       {
         initialValue: row.value,
@@ -1757,14 +1720,14 @@ var VariableRow = (props) => {
             onFieldError?.(!!errorMsg);
           },
           error
-        }) ?? /* @__PURE__ */ React13.createElement(React13.Fragment, null),
+        }) ?? /* @__PURE__ */ React12.createElement(React12.Fragment, null),
         onRowRef: handleRowRef(row.id),
         gap: 0.25,
         fieldType: "value",
         disabled: isDisabled
       },
       row.startIcon && row.startIcon({ value: row.value }),
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React12.createElement(
         import_editor_ui4.EllipsisWithTooltip,
         {
           title: row.value,
@@ -1777,14 +1740,14 @@ var VariableRow = (props) => {
         row.value
       )
     )),
-    /* @__PURE__ */ React13.createElement(VariableTableCell, { align: "right", noPadding: true, width: 16, maxWidth: 16, sx: { paddingInlineEnd: 1 } }, /* @__PURE__ */ React13.createElement(import_ui13.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end", alignItems: "center" }, isDisabled && /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React12.createElement(VariableTableCell, { align: "right", noPadding: true, width: 16, maxWidth: 16, sx: { paddingInlineEnd: 1 } }, /* @__PURE__ */ React12.createElement(import_ui12.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end", alignItems: "center" }, isDisabled && /* @__PURE__ */ React12.createElement(
       VariablePromotionChip,
       {
         variableType: row.variableType,
         upgradeUrl: `https://go.elementor.com/renew-license-manager-${row.variableType}-variable`,
         ref: promotionRef
       }
-    ), /* @__PURE__ */ React13.createElement(VariableEditMenu, { menuActions: menuActions(row.id), disabled: isSorting, itemId: row.id })))
+    ), /* @__PURE__ */ React12.createElement(VariableEditMenu, { menuActions: menuActions(row.id), disabled: isSorting, itemId: row.id })))
   );
 };
 
@@ -1797,9 +1760,9 @@ var VariablesManagerTable = ({
   onAutoEditComplete,
   onFieldError
 }) => {
-  const tableContainerRef = (0, import_react13.useRef)(null);
-  const variableRowRefs = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react13.useEffect)(() => {
+  const tableContainerRef = (0, import_react12.useRef)(null);
+  const variableRowRefs = (0, import_react12.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react12.useEffect)(() => {
     if (autoEditVariableId && tableContainerRef.current) {
       const rowElement = variableRowRefs.current.get(autoEditVariableId);
       if (rowElement) {
@@ -1850,21 +1813,21 @@ var VariablesManagerTable = ({
     });
     handleOnChange(updatedVariables);
   };
-  return /* @__PURE__ */ React14.createElement(import_ui14.TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React14.createElement(import_ui14.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React14.createElement(import_ui14.TableHead, null, /* @__PURE__ */ React14.createElement(import_ui14.TableRow, null, /* @__PURE__ */ React14.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React14.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n10.__)("Name", "elementor")), /* @__PURE__ */ React14.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n10.__)("Value", "elementor")), /* @__PURE__ */ React14.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React14.createElement(import_ui14.TableBody, null, /* @__PURE__ */ React14.createElement(
-    import_ui14.UnstableSortableProvider,
+  return /* @__PURE__ */ React13.createElement(import_ui13.TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React13.createElement(import_ui13.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React13.createElement(import_ui13.TableHead, null, /* @__PURE__ */ React13.createElement(import_ui13.TableRow, null, /* @__PURE__ */ React13.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React13.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n9.__)("Name", "elementor")), /* @__PURE__ */ React13.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n9.__)("Value", "elementor")), /* @__PURE__ */ React13.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React13.createElement(import_ui13.TableBody, null, /* @__PURE__ */ React13.createElement(
+    import_ui13.UnstableSortableProvider,
     {
       value: ids,
       onChange: handleReorder,
       variant: "static",
       restrictAxis: true,
-      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React14.createElement(import_ui14.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React14.createElement(import_ui14.TableBody, null, dragOverlayChildren))
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React13.createElement(import_ui13.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React13.createElement(import_ui13.TableBody, null, dragOverlayChildren))
     },
-    rows.map((row) => /* @__PURE__ */ React14.createElement(
-      import_ui14.UnstableSortableItem,
+    rows.map((row) => /* @__PURE__ */ React13.createElement(
+      import_ui13.UnstableSortableItem,
       {
         key: row.id,
         id: row.id,
-        render: (props) => /* @__PURE__ */ React14.createElement(
+        render: (props) => /* @__PURE__ */ React13.createElement(
           VariableRow,
           {
             ...props,
@@ -1892,6 +1855,7 @@ function sortVariablesOrder(variables) {
 
 // src/components/variables-manager/variables-manager-panel.tsx
 var id = "variables-manager";
+var STOP_SYNC_MESSAGE_KEY = "stop-sync-variable";
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id,
   component: VariablesManagerPanel,
@@ -1907,7 +1871,8 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
 function VariablesManagerPanel() {
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui5.useDialog)();
-  const createMenuState = (0, import_ui15.usePopupState)({
+  const [isStopSyncSuppressed] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
+  const createMenuState = (0, import_ui14.usePopupState)({
     variant: "popover"
   });
   const {
@@ -1928,9 +1893,9 @@ function VariablesManagerPanel() {
   } = useVariablesManagerState();
   const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
   const { createNavigationCallback, resetNavigation } = useErrorNavigation();
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react14.useState)(null);
-  const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react14.useState)(null);
-  const [serverError, setServerError] = (0, import_react14.useState)(null);
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react13.useState)(null);
+  const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react13.useState)(null);
+  const [serverError, setServerError] = (0, import_react13.useState)(null);
   usePreventUnload(isDirty);
   const handleClosePanel = () => {
     if (isDirty) {
@@ -1939,7 +1904,7 @@ function VariablesManagerPanel() {
     }
     closePanel();
   };
-  const handleCreateVariable = (0, import_react14.useCallback)(
+  const handleCreateVariable = (0, import_react13.useCallback)(
     (type, defaultName, defaultValue) => {
       const newId = createVariable2(type, defaultName, defaultValue);
       if (newId) {
@@ -1973,21 +1938,31 @@ function VariablesManagerPanel() {
       setIsSaving(false);
     }
   };
-  const handleDeleteVariableWithConfirmation = (0, import_react14.useCallback)(
+  const handleDeleteVariableWithConfirmation = (0, import_react13.useCallback)(
     (itemId) => {
       handleDeleteVariable(itemId);
       setDeleteConfirmation(null);
     },
     [handleDeleteVariable]
   );
-  const handleStopSyncWithConfirmation = (0, import_react14.useCallback)(
+  const handleStopSyncWithConfirmation = (0, import_react13.useCallback)(
     (itemId) => {
       handleStopSync(itemId);
       setStopSyncConfirmation(null);
     },
     [handleStopSync]
   );
-  const buildMenuActions = (0, import_react14.useCallback)(
+  const handleShowStopSyncDialog = (0, import_react13.useCallback)(
+    (itemId) => {
+      if (!isStopSyncSuppressed) {
+        setStopSyncConfirmation(itemId);
+      } else {
+        handleStopSync(itemId);
+      }
+    },
+    [isStopSyncSuppressed, handleStopSync]
+  );
+  const buildMenuActions = (0, import_react13.useCallback)(
     (variableId) => {
       const variable = variables[variableId];
       if (!variable) {
@@ -1998,12 +1973,12 @@ function VariablesManagerPanel() {
         variableId,
         handlers: {
           onStartSync: handleStartSync,
-          onStopSync: (itemId) => setStopSyncConfirmation(itemId)
+          onStopSync: handleShowStopSyncDialog
         }
       });
       const deleteAction = {
-        name: (0, import_i18n11.__)("Delete", "elementor"),
-        icon: import_icons6.TrashIcon,
+        name: (0, import_i18n10.__)("Delete", "elementor"),
+        icon: import_icons5.TrashIcon,
         color: "error.main",
         onClick: (itemId) => {
           const v = variables[itemId];
@@ -2016,25 +1991,25 @@ function VariablesManagerPanel() {
       };
       return [...typeActions, deleteAction];
     },
-    [variables, handleStartSync]
+    [variables, handleStartSync, handleShowStopSyncDialog]
   );
   const hasVariables = Object.keys(variables).length > 0;
-  return /* @__PURE__ */ React15.createElement(import_editor_ui5.ThemeProvider, null, /* @__PURE__ */ React15.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React14.createElement(import_editor_ui5.ThemeProvider, null, /* @__PURE__ */ React14.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React14.createElement(
     import_editor_panels.PanelHeader,
     {
       sx: {
         height: "unset"
       }
     },
-    /* @__PURE__ */ React15.createElement(import_ui15.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React15.createElement(import_ui15.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React15.createElement(import_ui15.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React15.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React15.createElement(import_icons6.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n11.__)("Variables Manager", "elementor"))), /* @__PURE__ */ React15.createElement(import_ui15.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React14.createElement(import_ui14.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React14.createElement(import_ui14.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(import_ui14.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React14.createElement(import_icons5.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n10.__)("Variables Manager", "elementor"))), /* @__PURE__ */ React14.createElement(import_ui14.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React14.createElement(
       VariableManagerCreateMenu,
       {
         onCreate: handleCreateVariable,
         variables,
         menuState: createMenuState
       }
-    ), /* @__PURE__ */ React15.createElement(
-      import_ui15.CloseButton,
+    ), /* @__PURE__ */ React14.createElement(
+      import_ui14.CloseButton,
       {
         "aria-label": "Close",
         slotProps: { icon: { fontSize: SIZE } },
@@ -2042,19 +2017,19 @@ function VariablesManagerPanel() {
           handleClosePanel();
         }
       }
-    ))), /* @__PURE__ */ React15.createElement(import_ui15.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React15.createElement(
+    ))), /* @__PURE__ */ React14.createElement(import_ui14.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(
       import_editor_ui5.SearchField,
       {
         sx: {
           display: "flex",
           flex: 1
         },
-        placeholder: (0, import_i18n11.__)("Search", "elementor"),
+        placeholder: (0, import_i18n10.__)("Search", "elementor"),
         value: searchValue,
         onSearch: handleSearch
       }
-    )), /* @__PURE__ */ React15.createElement(import_ui15.Divider, { sx: { width: "100%" } }))
-  ), /* @__PURE__ */ React15.createElement(
+    )), /* @__PURE__ */ React14.createElement(import_ui14.Divider, { sx: { width: "100%" } }))
+  ), /* @__PURE__ */ React14.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -2063,7 +2038,7 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    hasVariables && /* @__PURE__ */ React15.createElement(
+    hasVariables && /* @__PURE__ */ React14.createElement(
       VariablesManagerTable,
       {
         menuActions: buildMenuActions,
@@ -2074,43 +2049,43 @@ function VariablesManagerPanel() {
         onFieldError: setIsSaveDisabled
       }
     ),
-    !hasVariables && searchValue && /* @__PURE__ */ React15.createElement(
+    !hasVariables && searchValue && /* @__PURE__ */ React14.createElement(
       NoSearchResults,
       {
         searchValue,
         onClear: () => handleSearch(""),
-        icon: /* @__PURE__ */ React15.createElement(import_icons6.ColorFilterIcon, { fontSize: "large" })
+        icon: /* @__PURE__ */ React14.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" })
       }
     ),
-    !hasVariables && !searchValue && /* @__PURE__ */ React15.createElement(
+    !hasVariables && !searchValue && /* @__PURE__ */ React14.createElement(
       EmptyState,
       {
-        title: (0, import_i18n11.__)("Create your first variable", "elementor"),
-        message: (0, import_i18n11.__)(
+        title: (0, import_i18n10.__)("Create your first variable", "elementor"),
+        message: (0, import_i18n10.__)(
           "Variables are saved attributes that you can apply anywhere on your site.",
           "elementor"
         ),
-        icon: /* @__PURE__ */ React15.createElement(import_icons6.ColorFilterIcon, { fontSize: "large" }),
+        icon: /* @__PURE__ */ React14.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" }),
         onAdd: createMenuState.open
       }
     )
-  ), /* @__PURE__ */ React15.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React15.createElement(
-    import_ui15.Infotip,
+  ), /* @__PURE__ */ React14.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React14.createElement(
+    import_ui14.Infotip,
     {
       placement: "right",
       open: !!serverError,
-      content: serverError ? /* @__PURE__ */ React15.createElement(
-        import_ui15.Alert,
+      content: serverError ? /* @__PURE__ */ React14.createElement(
+        import_ui14.Alert,
         {
           severity: serverError.severity ?? "error",
-          action: serverError.action?.label ? /* @__PURE__ */ React15.createElement(import_ui15.AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
+          action: serverError.action?.label ? /* @__PURE__ */ React14.createElement(import_ui14.AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
           onClose: !serverError.action?.label ? () => {
             setServerError(null);
             setIsSaveDisabled(false);
           } : void 0,
-          icon: serverError.IconComponent ? /* @__PURE__ */ React15.createElement(serverError.IconComponent, null) : /* @__PURE__ */ React15.createElement(import_icons6.AlertTriangleFilledIcon, null)
+          icon: serverError.IconComponent ? /* @__PURE__ */ React14.createElement(serverError.IconComponent, null) : /* @__PURE__ */ React14.createElement(import_icons5.AlertTriangleFilledIcon, null)
         },
-        /* @__PURE__ */ React15.createElement(import_ui15.AlertTitle, null, serverError.message),
+        /* @__PURE__ */ React14.createElement(import_ui14.AlertTitle, null, serverError.message),
         serverError.action?.message
       ) : null,
       arrow: false,
@@ -2125,8 +2100,8 @@ function VariablesManagerPanel() {
         }
       }
     },
-    /* @__PURE__ */ React15.createElement(
-      import_ui15.Button,
+    /* @__PURE__ */ React14.createElement(
+      import_ui14.Button,
       {
         fullWidth: true,
         size: "small",
@@ -2136,9 +2111,9 @@ function VariablesManagerPanel() {
         onClick: handleSaveClick,
         loading: isSaving
       },
-      (0, import_i18n11.__)("Save changes", "elementor")
+      (0, import_i18n10.__)("Save changes", "elementor")
     )
-  ))), deleteConfirmation && /* @__PURE__ */ React15.createElement(
+  ))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -2146,26 +2121,26 @@ function VariablesManagerPanel() {
       onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
       closeDialog: () => setDeleteConfirmation(null)
     }
-  ), stopSyncConfirmation && /* @__PURE__ */ React15.createElement(
+  ), stopSyncConfirmation && /* @__PURE__ */ React14.createElement(
     StopSyncConfirmationDialog,
     {
       open: true,
-      closeDialog: () => setStopSyncConfirmation(null),
+      onClose: () => setStopSyncConfirmation(null),
       onConfirm: () => handleStopSyncWithConfirmation(stopSyncConfirmation)
     }
-  ), isSaveChangesDialogOpen && /* @__PURE__ */ React15.createElement(import_editor_ui5.SaveChangesDialog, null, /* @__PURE__ */ React15.createElement(import_editor_ui5.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n11.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React15.createElement(import_editor_ui5.SaveChangesDialog.Content, null, /* @__PURE__ */ React15.createElement(import_editor_ui5.SaveChangesDialog.ContentText, null, (0, import_i18n11.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React15.createElement(
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n10.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.ContentText, null, (0, import_i18n10.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React14.createElement(
     import_editor_ui5.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: (0, import_i18n11.__)("Discard", "elementor"),
+          label: (0, import_i18n10.__)("Discard", "elementor"),
           action: () => {
             closeSaveChangesDialog();
             closePanel();
           }
         },
         confirm: {
-          label: (0, import_i18n11.__)("Save", "elementor"),
+          label: (0, import_i18n10.__)("Save", "elementor"),
           action: async () => {
             const result = await handleSaveClick();
             closeSaveChangesDialog();
@@ -2179,7 +2154,7 @@ function VariablesManagerPanel() {
   )));
 }
 var usePreventUnload = (isDirty) => {
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -2191,6 +2166,24 @@ var usePreventUnload = (isDirty) => {
     };
   }, [isDirty]);
 };
+var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
+  const [, suppressStopSyncMessage] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
+  return /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog.Title, { icon: import_icons5.ColorFilterIcon, iconColor: "primary" }, (0, import_i18n10.__)("Stop syncing variable color", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog.ContentText, null, (0, import_i18n10.__)(
+    "This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.",
+    "elementor"
+  ))), /* @__PURE__ */ React14.createElement(
+    import_editor_ui5.ConfirmationDialog.Actions,
+    {
+      onClose,
+      onConfirm,
+      cancelLabel: (0, import_i18n10.__)("Cancel", "elementor"),
+      confirmLabel: (0, import_i18n10.__)("Got it", "elementor"),
+      color: "primary",
+      onSuppressMessage: suppressStopSyncMessage,
+      suppressLabel: (0, import_i18n10.__)("Don't show again", "elementor")
+    }
+  ));
+};
 
 // src/components/open-panel-from-url.tsx
 var ACTIVE_PANEL_PARAM = "active-panel";
@@ -2198,8 +2191,8 @@ var PANEL_ID = "variables-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
-  const hasOpened = (0, import_react15.useRef)(false);
-  (0, import_react15.useEffect)(() => {
+  const hasOpened = (0, import_react14.useRef)(false);
+  (0, import_react14.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2220,15 +2213,15 @@ function OpenPanelFromUrl() {
 }
 
 // src/controls/variable-control.tsx
-var React34 = __toESM(require("react"));
+var React33 = __toESM(require("react"));
 var import_editor_controls11 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
-var import_react22 = require("react");
-var React25 = __toESM(require("react"));
+var import_react21 = require("react");
+var React24 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
-var import_icons13 = require("@elementor/icons");
-var import_ui25 = require("@elementor/ui");
+var import_icons12 = require("@elementor/icons");
+var import_ui24 = require("@elementor/ui");
 
 // src/utils/unlink-variable.ts
 function transformValueBeforeUnlink(variable, propTypeKey) {
@@ -2247,31 +2240,31 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 }
 
 // src/components/variable-selection-popover.tsx
-var React23 = __toESM(require("react"));
-var import_react21 = require("react");
+var React22 = __toESM(require("react"));
+var import_react20 = require("react");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 
 // src/context/variable-selection-popover.context.tsx
-var React16 = __toESM(require("react"));
-var import_react16 = require("react");
-var import_ui16 = require("@elementor/ui");
-var PopoverContentRefContext = (0, import_react16.createContext)(null);
+var React15 = __toESM(require("react"));
+var import_react15 = require("react");
+var import_ui15 = require("@elementor/ui");
+var PopoverContentRefContext = (0, import_react15.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = (0, import_react16.useState)(null);
-  return /* @__PURE__ */ React16.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React16.createElement(import_ui16.Box, { ref: setAnchorRef }, children));
+  const [anchorRef, setAnchorRef] = (0, import_react15.useState)(null);
+  return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(import_ui15.Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
-  return (0, import_react16.useContext)(PopoverContentRefContext);
+  return (0, import_react15.useContext)(PopoverContentRefContext);
 };
 
 // src/components/variable-creation.tsx
-var React18 = __toESM(require("react"));
-var import_react17 = require("react");
+var React17 = __toESM(require("react"));
+var import_react16 = require("react");
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_ui6 = require("@elementor/editor-ui");
-var import_icons7 = require("@elementor/icons");
-var import_ui18 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_icons6 = require("@elementor/icons");
+var import_ui17 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 
 // src/hooks/use-initial-value.ts
 var import_editor_controls2 = require("@elementor/editor-controls");
@@ -2314,10 +2307,10 @@ var unwrapValue = (input) => {
 };
 
 // src/components/ui/form-field.tsx
-var React17 = __toESM(require("react"));
-var import_ui17 = require("@elementor/ui");
+var React16 = __toESM(require("react"));
+var import_ui16 = require("@elementor/ui");
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React17.createElement(import_ui17.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React17.createElement(import_ui17.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React17.createElement(import_ui17.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React17.createElement(import_ui17.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React17.createElement(import_ui17.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React17.createElement(import_ui17.FormHelperText, null, noticeMsg)));
+  return /* @__PURE__ */ React16.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React16.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(import_ui16.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React16.createElement(import_ui16.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React16.createElement(import_ui16.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React16.createElement(import_ui16.FormHelperText, null, noticeMsg)));
 };
 
 // src/components/variable-creation.tsx
@@ -2327,11 +2320,11 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls4.useBoundProp)();
   const initialValue = useInitialValue();
-  const [value, setValue] = (0, import_react17.useState)(initialValue);
-  const [label, setLabel] = (0, import_react17.useState)("");
-  const [errorMessage, setErrorMessage] = (0, import_react17.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react17.useState)("");
-  const [propTypeKey, setPropTypeKey] = (0, import_react17.useState)(propTypeUtil.key);
+  const [value, setValue] = (0, import_react16.useState)(initialValue);
+  const [label, setLabel] = (0, import_react16.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react16.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react16.useState)("");
+  const [propTypeKey, setPropTypeKey] = (0, import_react16.useState)(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -2388,22 +2381,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       handleCreateAndTrack();
     }
   };
-  return /* @__PURE__ */ React18.createElement(import_editor_ui6.SectionPopoverBody, { height: "auto" }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React17.createElement(import_editor_ui6.SectionPopoverBody, { height: "auto" }, /* @__PURE__ */ React17.createElement(
     import_editor_ui6.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React18.createElement(React18.Fragment, null, onGoBack && /* @__PURE__ */ React18.createElement(import_ui18.IconButton, { size: SIZE2, "aria-label": (0, import_i18n12.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React18.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE2 })),
-      title: (0, import_i18n12.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, onGoBack && /* @__PURE__ */ React17.createElement(import_ui17.IconButton, { size: SIZE2, "aria-label": (0, import_i18n11.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React17.createElement(import_icons6.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE2 })),
+      title: (0, import_i18n11.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React18.createElement(import_ui18.Divider, null), /* @__PURE__ */ React18.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React17.createElement(import_ui17.Divider, null), /* @__PURE__ */ React17.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React17.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n12.__)("Name", "elementor"),
+      label: (0, import_i18n11.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React17.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -2422,7 +2415,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         onKeyDown: handleKeyDown
       }
     )
-  ), ValueField && /* @__PURE__ */ React18.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n12.__)("Value", "elementor") }, /* @__PURE__ */ React18.createElement(import_ui18.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React18.createElement(
+  ), ValueField && /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n11.__)("Value", "elementor") }, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React17.createElement(
     ValueField,
     {
       value,
@@ -2436,8 +2429,8 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       propType,
       onKeyDown: handleKeyDown
     }
-  ))), errorMessage && /* @__PURE__ */ React18.createElement(import_ui18.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React18.createElement(import_ui18.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React18.createElement(
-    import_ui18.Button,
+  ))), errorMessage && /* @__PURE__ */ React17.createElement(import_ui17.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React17.createElement(import_ui17.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React17.createElement(
+    import_ui17.Button,
     {
       id: "create-variable-button",
       size: "small",
@@ -2445,80 +2438,80 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       disabled: isSubmitDisabled,
       onClick: handleCreateAndTrack
     },
-    (0, import_i18n12.__)("Create", "elementor")
+    (0, import_i18n11.__)("Create", "elementor")
   )));
 };
 
 // src/components/variable-edit.tsx
-var React20 = __toESM(require("react"));
-var import_react19 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
-var import_editor_current_user2 = require("@elementor/editor-current-user");
-var import_editor_ui7 = require("@elementor/editor-ui");
-var import_icons9 = require("@elementor/icons");
-var import_ui20 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
-
-// src/components/ui/edit-confirmation-dialog.tsx
 var React19 = __toESM(require("react"));
 var import_react18 = require("react");
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_editor_current_user3 = require("@elementor/editor-current-user");
+var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons8 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
+
+// src/components/ui/edit-confirmation-dialog.tsx
+var React18 = __toESM(require("react"));
+var import_react17 = require("react");
+var import_icons7 = require("@elementor/icons");
+var import_ui18 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react18.useState)(false);
+  const [dontShowAgain, setDontShowAgain] = (0, import_react17.useState)(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React19.createElement(import_ui19.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React19.createElement(import_ui19.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React19.createElement(import_icons8.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n13.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React19.createElement(import_ui19.DialogContent, null, /* @__PURE__ */ React19.createElement(import_ui19.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n13.__)(
+  return /* @__PURE__ */ React18.createElement(import_ui18.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React18.createElement(import_ui18.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React18.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n12.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React18.createElement(import_ui18.DialogContent, null, /* @__PURE__ */ React18.createElement(import_ui18.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n12.__)(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React19.createElement(import_ui19.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React19.createElement(
-    import_ui19.FormControlLabel,
+  ))), /* @__PURE__ */ React18.createElement(import_ui18.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(
+    import_ui18.FormControlLabel,
     {
-      control: /* @__PURE__ */ React19.createElement(
-        import_ui19.Checkbox,
+      control: /* @__PURE__ */ React18.createElement(
+        import_ui18.Checkbox,
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React19.createElement(import_ui19.Typography, { variant: "body2" }, (0, import_i18n13.__)("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React18.createElement(import_ui18.Typography, { variant: "body2" }, (0, import_i18n12.__)("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement(import_ui19.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n13.__)("Keep editing", "elementor")), /* @__PURE__ */ React19.createElement(import_ui19.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n13.__)("Save", "elementor")))));
+  ), /* @__PURE__ */ React18.createElement("div", null, /* @__PURE__ */ React18.createElement(import_ui18.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n12.__)("Keep editing", "elementor")), /* @__PURE__ */ React18.createElement(import_ui18.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n12.__)("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
 var SIZE3 = "tiny";
-var DELETE_LABEL = (0, import_i18n14.__)("Delete variable", "elementor");
+var DELETE_LABEL = (0, import_i18n13.__)("Delete variable", "elementor");
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls5.useBoundProp)();
-  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user2.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react19.useState)(false);
-  const [editConfirmation, setEditConfirmation] = (0, import_react19.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, import_react19.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react19.useState)("");
+  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user3.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react18.useState)(false);
+  const [editConfirmation, setEditConfirmation] = (0, import_react18.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react18.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react18.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
-  const [propTypeKey, setPropTypeKey] = (0, import_react19.useState)(variable?.type ?? propTypeUtil.key);
+  const [propTypeKey, setPropTypeKey] = (0, import_react18.useState)(variable?.type ?? propTypeUtil.key);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = (0, import_react19.useState)(() => variable.value);
-  const [label, setLabel] = (0, import_react19.useState)(() => variable.label);
-  (0, import_react19.useEffect)(() => {
+  const [value, setValue] = (0, import_react18.useState)(() => variable.value);
+  const [label, setLabel] = (0, import_react18.useState)(() => variable.label);
+  (0, import_react18.useEffect)(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2580,7 +2573,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React20.createElement(import_ui20.Tooltip, { key: "delete", placement: "top", title: DELETE_LABEL }, /* @__PURE__ */ React20.createElement(import_ui20.IconButton, { size: SIZE3, onClick: handleDeleteConfirmation, "aria-label": DELETE_LABEL }, /* @__PURE__ */ React20.createElement(import_icons9.TrashIcon, { fontSize: SIZE3 })))
+      /* @__PURE__ */ React19.createElement(import_ui19.Tooltip, { key: "delete", placement: "top", title: DELETE_LABEL }, /* @__PURE__ */ React19.createElement(import_ui19.IconButton, { size: SIZE3, onClick: handleDeleteConfirmation, "aria-label": DELETE_LABEL }, /* @__PURE__ */ React19.createElement(import_icons8.TrashIcon, { fontSize: SIZE3 })))
     );
   }
   const hasEmptyFields = () => {
@@ -2605,31 +2598,31 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       handleUpdate();
     }
   };
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_editor_ui7.SectionPopoverBody, { height: "auto" }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(import_editor_ui7.SectionPopoverBody, { height: "auto" }, /* @__PURE__ */ React19.createElement(
     import_editor_ui7.PopoverHeader,
     {
-      title: (0, import_i18n14.__)("Edit variable", "elementor"),
+      title: (0, import_i18n13.__)("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React20.createElement(React20.Fragment, null, onGoBack && /* @__PURE__ */ React20.createElement(
-        import_ui20.IconButton,
+      icon: /* @__PURE__ */ React19.createElement(React19.Fragment, null, onGoBack && /* @__PURE__ */ React19.createElement(
+        import_ui19.IconButton,
         {
           size: SIZE3,
-          "aria-label": (0, import_i18n14.__)("Go Back", "elementor"),
+          "aria-label": (0, import_i18n13.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React20.createElement(import_icons9.ArrowLeftIcon, { fontSize: SIZE3 })
-      ), /* @__PURE__ */ React20.createElement(VariableIcon, { fontSize: SIZE3 })),
+        /* @__PURE__ */ React19.createElement(import_icons8.ArrowLeftIcon, { fontSize: SIZE3 })
+      ), /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: SIZE3 })),
       actions
     }
-  ), /* @__PURE__ */ React20.createElement(import_ui20.Divider, null), /* @__PURE__ */ React20.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React19.createElement(import_ui19.Divider, null), /* @__PURE__ */ React19.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React19.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n14.__)("Name", "elementor"),
+      label: (0, import_i18n13.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React19.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -2648,7 +2641,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         onKeyDown: handleKeyDown
       }
     )
-  ), ValueField && /* @__PURE__ */ React20.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n14.__)("Value", "elementor") }, /* @__PURE__ */ React20.createElement(import_ui20.Typography, { variant: "h5" }, /* @__PURE__ */ React20.createElement(
+  ), ValueField && /* @__PURE__ */ React19.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n13.__)("Value", "elementor") }, /* @__PURE__ */ React19.createElement(import_ui19.Typography, { variant: "h5" }, /* @__PURE__ */ React19.createElement(
     ValueField,
     {
       propTypeKey: variable.type,
@@ -2663,7 +2656,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React20.createElement(import_ui20.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React20.createElement(import_ui20.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React20.createElement(import_ui20.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n14.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React20.createElement(
+  ))), errorMessage && /* @__PURE__ */ React19.createElement(import_ui19.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React19.createElement(import_ui19.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React19.createElement(import_ui19.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n13.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React19.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -2671,7 +2664,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React20.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React19.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -2682,26 +2675,26 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-var import_react20 = require("react");
-var React22 = __toESM(require("react"));
+var import_react19 = require("react");
+var React21 = __toESM(require("react"));
 var import_editor_ui9 = require("@elementor/editor-ui");
 var import_editor_ui10 = require("@elementor/editor-ui");
-var import_icons11 = require("@elementor/icons");
-var import_ui23 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var import_icons10 = require("@elementor/icons");
+var import_ui22 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
-var React21 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_editor_ui8 = require("@elementor/editor-ui");
-var import_icons10 = require("@elementor/icons");
-var import_ui21 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_icons9 = require("@elementor/icons");
+var import_ui20 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
 var SIZE4 = "tiny";
-var EDIT_LABEL = (0, import_i18n15.__)("Edit variable", "elementor");
+var EDIT_LABEL = (0, import_i18n14.__)("Edit variable", "elementor");
 var MenuItemContent = ({ item, disabled = false }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui21.ListItemIcon, { sx: { color: disabled ? "text.disabled" : "inherit" } }, item.icon), /* @__PURE__ */ React21.createElement(
-    import_ui21.Box,
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui20.ListItemIcon, { sx: { color: disabled ? "text.disabled" : "inherit" } }, item.icon), /* @__PURE__ */ React20.createElement(
+    import_ui20.Box,
     {
       sx: {
         flex: 1,
@@ -2711,30 +2704,30 @@ var MenuItemContent = ({ item, disabled = false }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React20.createElement(
       import_editor_ui8.EllipsisWithTooltip,
       {
         title: item.label || item.value,
-        as: import_ui21.Typography,
+        as: import_ui20.Typography,
         variant: "caption",
         color: disabled ? "text.disabled" : "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React21.createElement(
+    item.secondaryText && /* @__PURE__ */ React20.createElement(
       import_editor_ui8.EllipsisWithTooltip,
       {
         title: item.secondaryText,
-        as: import_ui21.Typography,
+        as: import_ui20.Typography,
         variant: "caption",
         color: disabled ? "text.disabled" : "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && !disabled && /* @__PURE__ */ React21.createElement(import_ui21.Tooltip, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React21.createElement(
-    import_ui21.IconButton,
+  ), !!onEdit && !disabled && /* @__PURE__ */ React20.createElement(import_ui20.Tooltip, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React20.createElement(
+    import_ui20.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
@@ -2743,13 +2736,13 @@ var MenuItemContent = ({ item, disabled = false }) => {
       },
       "aria-label": EDIT_LABEL
     },
-    /* @__PURE__ */ React21.createElement(import_icons10.EditIcon, { color: "action", fontSize: SIZE4 })
+    /* @__PURE__ */ React20.createElement(import_icons9.EditIcon, { color: "action", fontSize: SIZE4 })
   )));
 };
 
 // src/components/ui/styled-menu-list.tsx
-var import_ui22 = require("@elementor/ui");
-var VariablesStyledMenuList = (0, import_ui22.styled)(import_ui22.MenuList)(({ theme, disabled }) => ({
+var import_ui21 = require("@elementor/ui");
+var VariablesStyledMenuList = (0, import_ui21.styled)(import_ui21.MenuList)(({ theme, disabled }) => ({
   "& > li": {
     height: 32,
     width: "100%",
@@ -2783,13 +2776,13 @@ var VariablesStyledMenuList = (0, import_ui22.styled)(import_ui22.MenuList)(({ t
 
 // src/components/variables-selection.tsx
 var SIZE5 = "tiny";
-var CREATE_LABEL = (0, import_i18n16.__)("Create variable", "elementor");
-var MANAGER_LABEL = (0, import_i18n16.__)("Variables Manager", "elementor");
+var CREATE_LABEL = (0, import_i18n15.__)("Create variable", "elementor");
+var MANAGER_LABEL = (0, import_i18n15.__)("Variables Manager", "elementor");
 var getProUpgradeUrl = (variableType) => `https://go.elementor.com/renew-license-panel-${variableType}-variable`;
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled = false }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil, emptyState } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
-  const [searchValue, setSearchValue] = (0, import_react20.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react19.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -2816,8 +2809,8 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React22.createElement(import_ui23.Tooltip, { key: "add", placement: "top", title: CREATE_LABEL }, /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(
-        import_ui23.IconButton,
+      /* @__PURE__ */ React21.createElement(import_ui22.Tooltip, { key: "add", placement: "top", title: CREATE_LABEL }, /* @__PURE__ */ React21.createElement("span", null, /* @__PURE__ */ React21.createElement(
+        import_ui22.IconButton,
         {
           id: "add-variable-button",
           size: SIZE5,
@@ -2825,7 +2818,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
           "aria-label": CREATE_LABEL,
           disabled
         },
-        /* @__PURE__ */ React22.createElement(import_icons11.PlusIcon, { fontSize: SIZE5 })
+        /* @__PURE__ */ React21.createElement(import_icons10.PlusIcon, { fontSize: SIZE5 })
       )))
     );
   }
@@ -2839,24 +2832,24 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
       });
     };
     actions.push(
-      /* @__PURE__ */ React22.createElement(import_ui23.Tooltip, { key: "settings", placement: "top", title: MANAGER_LABEL }, /* @__PURE__ */ React22.createElement(
-        import_ui23.IconButton,
+      /* @__PURE__ */ React21.createElement(import_ui22.Tooltip, { key: "settings", placement: "top", title: MANAGER_LABEL }, /* @__PURE__ */ React21.createElement(
+        import_ui22.IconButton,
         {
           id: "variables-manager-button",
           size: SIZE5,
           onClick: handleOpenManager,
           "aria-label": MANAGER_LABEL
         },
-        /* @__PURE__ */ React22.createElement(import_icons11.SettingsIcon, { fontSize: SIZE5 })
+        /* @__PURE__ */ React21.createElement(import_icons10.SettingsIcon, { fontSize: SIZE5 })
       ))
     );
   }
-  const StartIcon = startIcon || (() => /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: SIZE5 }));
+  const StartIcon = startIcon || (() => /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: SIZE5 }));
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React22.createElement(StartIcon, { value }),
+    icon: /* @__PURE__ */ React21.createElement(StartIcon, { value }),
     secondaryText: value,
     onEdit: onEdit ? () => onEdit?.(key) : void 0
   }));
@@ -2866,22 +2859,22 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React22.createElement(import_editor_ui9.SectionPopoverBody, null, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React21.createElement(import_editor_ui9.SectionPopoverBody, null, /* @__PURE__ */ React21.createElement(
     import_editor_ui9.PopoverHeader,
     {
-      title: (0, import_i18n16.__)("Variables", "elementor"),
-      icon: /* @__PURE__ */ React22.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE5 }),
+      title: (0, import_i18n15.__)("Variables", "elementor"),
+      icon: /* @__PURE__ */ React21.createElement(import_icons10.ColorFilterIcon, { fontSize: SIZE5 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React22.createElement(
+  ), hasVariables && /* @__PURE__ */ React21.createElement(
     import_editor_ui9.SearchField,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n16.__)("Search", "elementor")
+      placeholder: (0, import_i18n15.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React22.createElement(import_ui23.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React21.createElement(import_ui22.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
     import_editor_ui9.PopoverMenuList,
     {
       items,
@@ -2891,66 +2884,66 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
       },
       selectedValue: variable,
       "data-testid": `${variableType}-variables-list`,
-      menuListTemplate: (props) => /* @__PURE__ */ React22.createElement(VariablesStyledMenuList, { ...props, disabled }),
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React22.createElement(MenuItemContent, { item, disabled })
+      menuListTemplate: (props) => /* @__PURE__ */ React21.createElement(VariablesStyledMenuList, { ...props, disabled }),
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React21.createElement(MenuItemContent, { item, disabled })
     }
-  ), disabled && /* @__PURE__ */ React22.createElement(
+  ), disabled && /* @__PURE__ */ React21.createElement(
     import_editor_ui10.PromotionAlert,
     {
-      message: (0, import_i18n16.sprintf)(
+      message: (0, import_i18n15.sprintf)(
         /* translators: %s: Variable Type. */
-        (0, import_i18n16.__)("Upgrade to continue creating and editing %s variables.", "elementor"),
+        (0, import_i18n15.__)("Upgrade to continue creating and editing %s variables.", "elementor"),
         variableType
       ),
       upgradeUrl: getProUpgradeUrl(variableType)
     }
-  )), !hasSearchResults && hasVariables && /* @__PURE__ */ React22.createElement(
+  )), !hasSearchResults && hasVariables && /* @__PURE__ */ React21.createElement(
     NoSearchResults,
     {
       searchValue,
       onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: "large" })
+      icon: /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: "large" })
     }
-  ), disabled && !hasVariables && /* @__PURE__ */ React22.createElement(
+  ), disabled && !hasVariables && /* @__PURE__ */ React21.createElement(
     EmptyState,
     {
-      title: (0, import_i18n16.sprintf)(
+      title: (0, import_i18n15.sprintf)(
         /* translators: %s: Variable Type. */
-        (0, import_i18n16.__)("No %s variables yet", "elementor"),
+        (0, import_i18n15.__)("No %s variables yet", "elementor"),
         variableType
       ),
-      message: (0, import_i18n16.sprintf)(
+      message: (0, import_i18n15.sprintf)(
         /* translators: %s: Variable Type. */
-        (0, import_i18n16.__)("Upgrade to create %s variables and maintain consistent element sizing.", "elementor"),
+        (0, import_i18n15.__)("Upgrade to create %s variables and maintain consistent element sizing.", "elementor"),
         variableType
       ),
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: "large" })
+      icon: /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: "large" })
     },
     emptyState
-  ), !hasVariables && !hasNoCompatibleVariables && !disabled && /* @__PURE__ */ React22.createElement(
+  ), !hasVariables && !hasNoCompatibleVariables && !disabled && /* @__PURE__ */ React21.createElement(
     EmptyState,
     {
-      title: (0, import_i18n16.sprintf)(
+      title: (0, import_i18n15.sprintf)(
         /* translators: %s: Variable Type. */
-        (0, import_i18n16.__)("Create your first %s variable", "elementor"),
+        (0, import_i18n15.__)("Create your first %s variable", "elementor"),
         variableType
       ),
-      message: (0, import_i18n16.__)(
+      message: (0, import_i18n15.__)(
         "Variables are saved attributes that you can apply anywhere on your site.",
         "elementor"
       ),
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: "large" }),
+      icon: /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: "large" }),
       onAdd
     }
-  ), hasNoCompatibleVariables && !disabled && /* @__PURE__ */ React22.createElement(
+  ), hasNoCompatibleVariables && !disabled && /* @__PURE__ */ React21.createElement(
     EmptyState,
     {
-      title: (0, import_i18n16.__)("No compatible variables", "elementor"),
-      message: (0, import_i18n16.__)(
+      title: (0, import_i18n15.__)("No compatible variables", "elementor"),
+      message: (0, import_i18n15.__)(
         "Looks like none of your variables work with this control. Create a new variable to use it here.",
         "elementor"
       ),
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: "large" }),
+      icon: /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: "large" }),
       onAdd
     }
   ));
@@ -2961,13 +2954,13 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = (0, import_react21.useState)(VIEW_LIST);
-  const [editId, setEditId] = (0, import_react21.useState)("");
+  const [currentView, setCurrentView] = (0, import_react20.useState)(VIEW_LIST);
+  const [editId, setEditId] = (0, import_react20.useState)("");
   const { open } = usePanelActions();
   const onSettingsAvailable = (0, import_editor_v1_adapters4.isExperimentActive)("e_variables_manager") ? () => {
     open();
   } : void 0;
-  return /* @__PURE__ */ React23.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React23.createElement(PopoverContentRefContextProvider, null, RenderView({
+  return /* @__PURE__ */ React22.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React22.createElement(PopoverContentRefContextProvider, null, RenderView({
     propTypeKey,
     currentView,
     selectedVariable,
@@ -3014,7 +3007,7 @@ function RenderView(props) {
     }
   };
   if (VIEW_LIST === props.currentView) {
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React22.createElement(
       VariablesSelection,
       {
         closePopover: handlers.onClose,
@@ -3026,10 +3019,10 @@ function RenderView(props) {
     );
   }
   if (VIEW_ADD === props.currentView) {
-    return /* @__PURE__ */ React23.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
+    return /* @__PURE__ */ React22.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
   }
   if (VIEW_EDIT === props.currentView) {
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React22.createElement(
       VariableEdit,
       {
         editId: props.editId,
@@ -3043,26 +3036,26 @@ function RenderView(props) {
 }
 
 // src/components/ui/tags/assigned-tag.tsx
-var React24 = __toESM(require("react"));
-var import_icons12 = require("@elementor/icons");
-var import_ui24 = require("@elementor/ui");
-var import_i18n17 = require("@wordpress/i18n");
+var React23 = __toESM(require("react"));
+var import_icons11 = require("@elementor/icons");
+var import_ui23 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
-var UNLINK_LABEL = (0, import_i18n17.__)("Unlink variable", "elementor");
+var UNLINK_LABEL = (0, import_i18n16.__)("Unlink variable", "elementor");
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React24.createElement(import_ui24.Tooltip, { key: "unlink", title: UNLINK_LABEL, placement: "bottom" }, /* @__PURE__ */ React24.createElement(import_ui24.IconButton, { size: SIZE6, onClick: onUnlink, "aria-label": UNLINK_LABEL }, /* @__PURE__ */ React24.createElement(import_icons12.DetachIcon, { fontSize: SIZE6 })))
+      /* @__PURE__ */ React23.createElement(import_ui23.Tooltip, { key: "unlink", title: UNLINK_LABEL, placement: "bottom" }, /* @__PURE__ */ React23.createElement(import_ui23.IconButton, { size: SIZE6, onClick: onUnlink, "aria-label": UNLINK_LABEL }, /* @__PURE__ */ React23.createElement(import_icons11.DetachIcon, { fontSize: SIZE6 })))
     );
   }
-  return /* @__PURE__ */ React24.createElement(import_ui24.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(
-    import_ui24.UnstableTag,
+  return /* @__PURE__ */ React23.createElement(import_ui23.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React23.createElement(
+    import_ui23.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React24.createElement(import_ui24.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React24.createElement(import_ui24.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React24.createElement(import_ui24.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      startIcon: /* @__PURE__ */ React23.createElement(import_ui23.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React23.createElement(import_ui23.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React23.createElement(import_ui23.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -3073,24 +3066,24 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = (0, import_editor_controls6.useBoundProp)();
-  const anchorRef = (0, import_react22.useRef)(null);
-  const popupId = (0, import_react22.useId)();
-  const popupState = (0, import_ui25.usePopupState)({
+  const anchorRef = (0, import_react21.useRef)(null);
+  const popupId = (0, import_react21.useId)();
+  const popupState = (0, import_ui24.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React25.createElement(import_ui25.Box, { ref: anchorRef }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React24.createElement(import_ui24.Box, { ref: anchorRef }, /* @__PURE__ */ React24.createElement(
     AssignedTag,
     {
       label: variable.label,
-      startIcon: /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_icons13.ColorFilterIcon, { fontSize: SIZE6 }), /* @__PURE__ */ React25.createElement(StartIcon, { value: variable.value })),
+      startIcon: /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(import_icons12.ColorFilterIcon, { fontSize: SIZE6 }), /* @__PURE__ */ React24.createElement(StartIcon, { value: variable.value })),
       onUnlink: unlinkVariable,
-      ...(0, import_ui25.bindTrigger)(popupState)
+      ...(0, import_ui24.bindTrigger)(popupState)
     }
-  ), /* @__PURE__ */ React25.createElement(
-    import_ui25.Popover,
+  ), /* @__PURE__ */ React24.createElement(
+    import_ui24.Popover,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
@@ -3099,9 +3092,9 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui25.bindPopover)(popupState)
+      ...(0, import_ui24.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React24.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -3113,19 +3106,19 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/deleted-variable.tsx
-var React29 = __toESM(require("react"));
-var import_react24 = require("react");
+var React28 = __toESM(require("react"));
+var import_react23 = require("react");
 var import_editor_controls8 = require("@elementor/editor-controls");
-var import_ui29 = require("@elementor/ui");
-var import_i18n20 = require("@wordpress/i18n");
+var import_ui28 = require("@elementor/ui");
+var import_i18n19 = require("@wordpress/i18n");
 
 // src/components/variable-restore.tsx
-var React26 = __toESM(require("react"));
-var import_react23 = require("react");
+var React25 = __toESM(require("react"));
+var import_react22 = require("react");
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_ui11 = require("@elementor/editor-ui");
-var import_ui26 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
+var import_ui25 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
 var SIZE7 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
@@ -3135,11 +3128,11 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = (0, import_react23.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react23.useState)("");
-  const [label, setLabel] = (0, import_react23.useState)(variable.label);
-  const [value, setValue] = (0, import_react23.useState)(variable.value);
-  const [propTypeKey, setPropTypeKey] = (0, import_react23.useState)(variable?.type ?? propTypeUtil.key);
+  const [errorMessage, setErrorMessage] = (0, import_react22.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react22.useState)("");
+  const [label, setLabel] = (0, import_react22.useState)(variable.label);
+  const [value, setValue] = (0, import_react22.useState)(variable.value);
+  const [propTypeKey, setPropTypeKey] = (0, import_react22.useState)(variable?.type ?? propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -3185,22 +3178,22 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       handleRestore();
     }
   };
-  return /* @__PURE__ */ React26.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React26.createElement(import_editor_ui11.SectionPopoverBody, { height: "auto" }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React25.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React25.createElement(import_editor_ui11.SectionPopoverBody, { height: "auto" }, /* @__PURE__ */ React25.createElement(
     import_editor_ui11.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React26.createElement(VariableIcon, { fontSize: SIZE7 }),
-      title: (0, import_i18n18.__)("Restore variable", "elementor"),
+      icon: /* @__PURE__ */ React25.createElement(VariableIcon, { fontSize: SIZE7 }),
+      title: (0, import_i18n17.__)("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React26.createElement(import_ui26.Divider, null), /* @__PURE__ */ React26.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React25.createElement(import_ui25.Divider, null), /* @__PURE__ */ React25.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React25.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n18.__)("Name", "elementor"),
+      label: (0, import_i18n17.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React25.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -3219,7 +3212,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         onKeyDown: handleKeyDown
       }
     )
-  ), ValueField && /* @__PURE__ */ React26.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n18.__)("Value", "elementor") }, /* @__PURE__ */ React26.createElement(import_ui26.Typography, { variant: "h5" }, /* @__PURE__ */ React26.createElement(
+  ), ValueField && /* @__PURE__ */ React25.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n17.__)("Value", "elementor") }, /* @__PURE__ */ React25.createElement(import_ui25.Typography, { variant: "h5" }, /* @__PURE__ */ React25.createElement(
     ValueField,
     {
       propTypeKey,
@@ -3234,25 +3227,25 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       propType,
       onKeyDown: handleKeyDown
     }
-  ))), errorMessage && /* @__PURE__ */ React26.createElement(import_ui26.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React26.createElement(import_ui26.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React26.createElement(import_ui26.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n18.__)("Restore", "elementor")))));
+  ))), errorMessage && /* @__PURE__ */ React25.createElement(import_ui25.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React25.createElement(import_ui25.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React25.createElement(import_ui25.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n17.__)("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
-var React27 = __toESM(require("react"));
-var import_ui27 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
+var React26 = __toESM(require("react"));
+var import_ui26 = require("@elementor/ui");
+var import_i18n18 = require("@wordpress/i18n");
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
-  return /* @__PURE__ */ React27.createElement(import_ui27.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React27.createElement(
-    import_ui27.Alert,
+  return /* @__PURE__ */ React26.createElement(import_ui26.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React26.createElement(
+    import_ui26.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React27.createElement(React27.Fragment, null, onUnlink && /* @__PURE__ */ React27.createElement(import_ui27.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n19.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React27.createElement(import_ui27.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n19.__)("Restore", "elementor"))),
+      action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onUnlink && /* @__PURE__ */ React26.createElement(import_ui26.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n18.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React26.createElement(import_ui26.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n18.__)("Restore", "elementor"))),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React27.createElement(import_ui27.AlertTitle, null, (0, import_i18n19.__)("Deleted variable", "elementor")),
-    /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n19.__)("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", (0, import_i18n19.__)(
+    /* @__PURE__ */ React26.createElement(import_ui26.AlertTitle, null, (0, import_i18n18.__)("Deleted variable", "elementor")),
+    /* @__PURE__ */ React26.createElement(import_ui26.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n18.__)("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React26.createElement(import_ui26.Typography, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", (0, import_i18n18.__)(
       "has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.",
       "elementor"
     ))
@@ -3260,14 +3253,14 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 };
 
 // src/components/ui/tags/warning-variable-tag.tsx
-var React28 = __toESM(require("react"));
-var import_icons14 = require("@elementor/icons");
-var import_ui28 = require("@elementor/ui");
-var WarningVariableTag = React28.forwardRef(
+var React27 = __toESM(require("react"));
+var import_icons13 = require("@elementor/icons");
+var import_ui27 = require("@elementor/ui");
+var WarningVariableTag = React27.forwardRef(
   ({ label, suffix, onClick, icon, ...props }, ref) => {
     const displayText = suffix ? `${label} (${suffix})` : label;
-    return /* @__PURE__ */ React28.createElement(
-      import_ui28.Chip,
+    return /* @__PURE__ */ React27.createElement(
+      import_ui27.Chip,
       {
         ref,
         size: "tiny",
@@ -3275,8 +3268,8 @@ var WarningVariableTag = React28.forwardRef(
         shape: "rounded",
         variant: "standard",
         onClick,
-        icon: /* @__PURE__ */ React28.createElement(import_icons14.AlertTriangleFilledIcon, null),
-        label: /* @__PURE__ */ React28.createElement(import_ui28.Tooltip, { title: displayText, placement: "top" }, /* @__PURE__ */ React28.createElement(import_ui28.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React28.createElement(import_ui28.Typography, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
+        icon: /* @__PURE__ */ React27.createElement(import_icons13.AlertTriangleFilledIcon, null),
+        label: /* @__PURE__ */ React27.createElement(import_ui27.Tooltip, { title: displayText, placement: "top" }, /* @__PURE__ */ React27.createElement(import_ui27.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
         sx: {
           height: (theme) => theme.spacing(3.5),
           borderRadius: (theme) => theme.spacing(1),
@@ -3295,12 +3288,12 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = (0, import_editor_controls8.useBoundProp)();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = (0, import_react24.useState)(false);
+  const [showInfotip, setShowInfotip] = (0, import_react23.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = (0, import_react24.useRef)(null);
-  const popupId = (0, import_react24.useId)();
-  const popupState = (0, import_ui29.usePopupState)({
+  const deletedChipAnchorRef = (0, import_react23.useRef)(null);
+  const popupId = (0, import_react23.useId)();
+  const popupState = (0, import_ui28.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
   });
@@ -3326,15 +3319,15 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_ui29.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React29.createElement(import_ui29.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React29.createElement(
-    import_ui29.Infotip,
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(import_ui28.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React28.createElement(import_ui28.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
+    import_ui28.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: showInfotip,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React29.createElement(
+      content: /* @__PURE__ */ React28.createElement(
         DeletedVariableAlert,
         {
           onClose: closeInfotip,
@@ -3354,16 +3347,16 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
         }
       }
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React28.createElement(
       WarningVariableTag,
       {
         label: variable.label,
         onClick: toggleInfotip,
-        suffix: (0, import_i18n20.__)("deleted", "elementor")
+        suffix: (0, import_i18n19.__)("deleted", "elementor")
       }
     )
-  ), /* @__PURE__ */ React29.createElement(
-    import_ui29.Popover,
+  ), /* @__PURE__ */ React28.createElement(
+    import_ui28.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
@@ -3371,9 +3364,9 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui29.bindPopover)(popupState)
+      ...(0, import_ui28.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React29.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React28.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React28.createElement(
       VariableRestore,
       {
         variableId: variable.key ?? "",
@@ -3385,52 +3378,52 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/mismatch-variable.tsx
-var React31 = __toESM(require("react"));
-var import_react25 = require("react");
-var import_editor_controls9 = require("@elementor/editor-controls");
-var import_ui31 = require("@elementor/ui");
-var import_i18n22 = require("@wordpress/i18n");
-
-// src/components/ui/mismatch-variable-alert.tsx
 var React30 = __toESM(require("react"));
+var import_react24 = require("react");
+var import_editor_controls9 = require("@elementor/editor-controls");
 var import_ui30 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
+
+// src/components/ui/mismatch-variable-alert.tsx
+var React29 = __toESM(require("react"));
+var import_ui29 = require("@elementor/ui");
+var import_i18n20 = require("@wordpress/i18n");
 var i18n = {
-  title: (0, import_i18n21.__)("Variable has changed", "elementor"),
-  message: (0, import_i18n21.__)(
+  title: (0, import_i18n20.__)("Variable has changed", "elementor"),
+  message: (0, import_i18n20.__)(
     `This variable is no longer compatible with this property. You can clear it or select a different one.`,
     "elementor"
   ),
   buttons: {
-    clear: (0, import_i18n21.__)("Clear", "elementor"),
-    select: (0, import_i18n21.__)("Select variable", "elementor")
+    clear: (0, import_i18n20.__)("Clear", "elementor"),
+    select: (0, import_i18n20.__)("Select variable", "elementor")
   }
 };
 var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
-  return /* @__PURE__ */ React30.createElement(import_ui30.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React30.createElement(
-    import_ui30.Alert,
+  return /* @__PURE__ */ React29.createElement(import_ui29.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
+    import_ui29.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React30.createElement(React30.Fragment, null, onClear && /* @__PURE__ */ React30.createElement(import_ui30.AlertAction, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React30.createElement(import_ui30.AlertAction, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
+      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(import_ui29.AlertAction, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React29.createElement(import_ui29.AlertAction, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React30.createElement(import_ui30.AlertTitle, null, i18n.title),
-    /* @__PURE__ */ React30.createElement(import_ui30.Typography, { variant: "body2", color: "textPrimary" }, i18n.message)
+    /* @__PURE__ */ React29.createElement(import_ui29.AlertTitle, null, i18n.title),
+    /* @__PURE__ */ React29.createElement(import_ui29.Typography, { variant: "body2", color: "textPrimary" }, i18n.message)
   ));
 };
 
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue, value } = (0, import_editor_controls9.useBoundProp)();
-  const anchorRef = (0, import_react25.useRef)(null);
-  const popupId = (0, import_react25.useId)();
-  const popupState = (0, import_ui31.usePopupState)({
+  const anchorRef = (0, import_react24.useRef)(null);
+  const popupId = (0, import_react24.useId)();
+  const popupState = (0, import_ui30.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = (0, import_react25.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react24.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -3443,15 +3436,15 @@ var MismatchVariable = ({ variable }) => {
     setValue(null);
   };
   const showClearButton = !!value;
-  return /* @__PURE__ */ React31.createElement(import_ui31.Box, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React31.createElement(import_ui31.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React31.createElement(
-    import_ui31.Infotip,
+  return /* @__PURE__ */ React30.createElement(import_ui30.Box, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React30.createElement(import_ui30.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React30.createElement(
+    import_ui30.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React31.createElement(
+      content: /* @__PURE__ */ React30.createElement(
         MismatchVariableAlert,
         {
           onClose: closeInfotip,
@@ -3470,16 +3463,16 @@ var MismatchVariable = ({ variable }) => {
         }
       }
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React30.createElement(
       WarningVariableTag,
       {
         label: variable.label,
         onClick: toggleInfotip,
-        suffix: (0, import_i18n22.__)("changed", "elementor")
+        suffix: (0, import_i18n21.__)("changed", "elementor")
       }
     )
-  ), /* @__PURE__ */ React31.createElement(
-    import_ui31.Popover,
+  ), /* @__PURE__ */ React30.createElement(
+    import_ui30.Popover,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
@@ -3488,9 +3481,9 @@ var MismatchVariable = ({ variable }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui31.bindPopover)(popupState)
+      ...(0, import_ui30.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React30.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -3502,28 +3495,28 @@ var MismatchVariable = ({ variable }) => {
 };
 
 // src/components/ui/variable/missing-variable.tsx
-var React33 = __toESM(require("react"));
-var import_react26 = require("react");
-var import_editor_controls10 = require("@elementor/editor-controls");
-var import_ui33 = require("@elementor/ui");
-var import_i18n24 = require("@wordpress/i18n");
-
-// src/components/ui/missing-variable-alert.tsx
 var React32 = __toESM(require("react"));
+var import_react25 = require("react");
+var import_editor_controls10 = require("@elementor/editor-controls");
 var import_ui32 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
+
+// src/components/ui/missing-variable-alert.tsx
+var React31 = __toESM(require("react"));
+var import_ui31 = require("@elementor/ui");
+var import_i18n22 = require("@wordpress/i18n");
 var MissingVariableAlert = ({ onClose, onClear }) => {
-  return /* @__PURE__ */ React32.createElement(import_ui32.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React32.createElement(
-    import_ui32.Alert,
+  return /* @__PURE__ */ React31.createElement(import_ui31.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React31.createElement(
+    import_ui31.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React32.createElement(React32.Fragment, null, onClear && /* @__PURE__ */ React32.createElement(import_ui32.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n23.__)("Clear", "elementor"))),
+      action: /* @__PURE__ */ React31.createElement(React31.Fragment, null, onClear && /* @__PURE__ */ React31.createElement(import_ui31.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n22.__)("Clear", "elementor"))),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React32.createElement(import_ui32.AlertTitle, null, (0, import_i18n23.__)("This variable is missing", "elementor")),
-    /* @__PURE__ */ React32.createElement(import_ui32.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n23.__)(
+    /* @__PURE__ */ React31.createElement(import_ui31.AlertTitle, null, (0, import_i18n22.__)("This variable is missing", "elementor")),
+    /* @__PURE__ */ React31.createElement(import_ui31.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n22.__)(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
     ))
@@ -3533,19 +3526,19 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = (0, import_editor_controls10.useBoundProp)();
-  const [infotipVisible, setInfotipVisible] = (0, import_react26.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react25.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, infotipVisible && /* @__PURE__ */ React33.createElement(import_ui33.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React33.createElement(
-    import_ui33.Infotip,
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, infotipVisible && /* @__PURE__ */ React32.createElement(import_ui32.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React32.createElement(
+    import_ui32.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React33.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      content: /* @__PURE__ */ React32.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
       slotProps: {
         popper: {
           modifiers: [
@@ -3557,7 +3550,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React33.createElement(WarningVariableTag, { label: (0, import_i18n24.__)("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React32.createElement(WarningVariableTag, { label: (0, import_i18n23.__)("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -3567,37 +3560,37 @@ var VariableControl = () => {
   const boundPropValue = boundProp.value ?? boundProp.placeholder;
   const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
-    return /* @__PURE__ */ React34.createElement(MissingVariable, null);
+    return /* @__PURE__ */ React33.createElement(MissingVariable, null);
   }
   const { $$type: propTypeKey } = boundPropValue;
   if (assignedVariable?.deleted) {
-    return /* @__PURE__ */ React34.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
+    return /* @__PURE__ */ React33.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
   }
   const { isCompatible } = getVariableType(assignedVariable.type);
   if (isCompatible && !isCompatible(boundProp?.propType, assignedVariable)) {
-    return /* @__PURE__ */ React34.createElement(MismatchVariable, { variable: assignedVariable });
+    return /* @__PURE__ */ React33.createElement(MismatchVariable, { variable: assignedVariable });
   }
-  return /* @__PURE__ */ React34.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
+  return /* @__PURE__ */ React33.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
 // src/hooks/use-prop-variable-action.tsx
-var React35 = __toESM(require("react"));
+var React34 = __toESM(require("react"));
 var import_editor_controls12 = require("@elementor/editor-controls");
-var import_icons15 = require("@elementor/icons");
-var import_i18n25 = require("@wordpress/i18n");
+var import_icons14 = require("@elementor/icons");
+var import_i18n24 = require("@wordpress/i18n");
 var usePropVariableAction = () => {
   const { propType, path } = (0, import_editor_controls12.useBoundProp)();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
-    icon: import_icons15.ColorFilterIcon,
-    title: (0, import_i18n25.__)("Variables", "elementor"),
+    icon: import_icons14.ColorFilterIcon,
+    title: (0, import_i18n24.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
       }
       trackOpenVariablePopover(path, variable.variableType);
-      return /* @__PURE__ */ React35.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
+      return /* @__PURE__ */ React34.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
@@ -3744,21 +3737,21 @@ function initMcp() {
 }
 
 // src/register-variable-types.tsx
-var React38 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var import_editor_props5 = require("@elementor/editor-props");
 var import_editor_ui13 = require("@elementor/editor-ui");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_icons17 = require("@elementor/icons");
-var import_i18n27 = require("@wordpress/i18n");
+var import_icons16 = require("@elementor/icons");
+var import_i18n26 = require("@wordpress/i18n");
 
 // src/components/fields/color-field.tsx
-var React36 = __toESM(require("react"));
-var import_react27 = require("react");
-var import_ui34 = require("@elementor/ui");
+var React35 = __toESM(require("react"));
+var import_react26 = require("react");
+var import_ui33 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = (0, import_react27.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react27.useState)("");
-  const defaultRef = (0, import_react27.useRef)(null);
+  const [color, setColor] = (0, import_react26.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react26.useState)("");
+  const defaultRef = (0, import_react26.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -3767,8 +3760,8 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
     onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React36.createElement(
-    import_ui34.UnstableColorField,
+  return /* @__PURE__ */ React35.createElement(
+    import_ui33.UnstableColorField,
     {
       id: "color-variable-field",
       size: "tiny",
@@ -3796,21 +3789,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/components/fields/font-field.tsx
-var React37 = __toESM(require("react"));
-var import_react28 = require("react");
+var React36 = __toESM(require("react"));
+var import_react27 = require("react");
 var import_editor_controls13 = require("@elementor/editor-controls");
 var import_editor_ui12 = require("@elementor/editor-ui");
-var import_icons16 = require("@elementor/icons");
-var import_ui35 = require("@elementor/ui");
-var import_i18n26 = require("@wordpress/i18n");
+var import_icons15 = require("@elementor/icons");
+var import_ui34 = require("@elementor/ui");
+var import_i18n25 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = (0, import_react28.useState)(value);
-  const defaultRef = (0, import_react28.useRef)(null);
+  const [fontFamily, setFontFamily] = (0, import_react27.useState)(value);
+  const defaultRef = (0, import_react27.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
-  const fontPopoverState = (0, import_ui35.usePopupState)({ variant: "popover" });
+  const fontPopoverState = (0, import_ui34.usePopupState)({ variant: "popover" });
   const fontFamilies = (0, import_editor_controls13.useFontFamilies)();
   const sectionWidth = (0, import_editor_ui12.useSectionWidth)();
-  const mapFontSubs = React37.useMemo(() => {
+  const mapFontSubs = React36.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -3826,28 +3819,28 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = (0, import_react28.useId)();
-  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(
-    import_ui35.UnstableTag,
+  const id2 = (0, import_react27.useId)();
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
+    import_ui34.UnstableTag,
     {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React37.createElement(import_icons16.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui35.bindTrigger)(fontPopoverState),
+      endIcon: /* @__PURE__ */ React36.createElement(import_icons15.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui34.bindTrigger)(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React37.createElement(
-    import_ui35.Popover,
+  ), /* @__PURE__ */ React36.createElement(
+    import_ui34.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef,
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: -28 },
-      ...(0, import_ui35.bindPopover)(fontPopoverState)
+      ...(0, import_ui34.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React36.createElement(
       import_editor_controls13.ItemSelector,
       {
         id: "font-family-variables-selector",
@@ -3856,10 +3849,10 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: (0, import_i18n26.__)("Font family", "elementor"),
+        title: (0, import_i18n25.__)("Font family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: import_editor_controls13.enqueueFont,
-        icon: import_icons16.TextIcon
+        icon: import_icons15.TextIcon
       }
     )
   ));
@@ -3881,11 +3874,11 @@ function registerVariableTypes() {
   registerVariableType({
     key: colorVariablePropTypeUtil.key,
     valueField: ColorField,
-    icon: import_icons17.BrushIcon,
+    icon: import_icons16.BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props5.colorPropTypeUtil,
     variableType: "color",
-    startIcon: ({ value }) => /* @__PURE__ */ React38.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
+    startIcon: ({ value }) => /* @__PURE__ */ React37.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
     defaultValue: "#ffffff",
     menuActionsFactory: ({ variable, variableId, handlers }) => {
       const actions = [];
@@ -3894,15 +3887,15 @@ function registerVariableTypes() {
       }
       if (variable.sync_to_v3) {
         actions.push({
-          name: (0, import_i18n27.__)("Stop syncing to Version 3", "elementor"),
-          icon: import_icons17.ResetIcon,
+          name: (0, import_i18n26.__)("Stop syncing to Version 3", "elementor"),
+          icon: import_icons16.ResetIcon,
           color: "text.primary",
           onClick: () => handlers.onStopSync(variableId)
         });
       } else {
         actions.push({
-          name: (0, import_i18n27.__)("Sync to Version 3", "elementor"),
-          icon: import_icons17.ResetIcon,
+          name: (0, import_i18n26.__)("Sync to Version 3", "elementor"),
+          icon: import_icons16.ResetIcon,
           color: "text.primary",
           onClick: () => handlers.onStartSync(variableId)
         });
@@ -3913,7 +3906,7 @@ function registerVariableTypes() {
   registerVariableType({
     key: fontVariablePropTypeUtil.key,
     valueField: FontField,
-    icon: import_icons17.TextIcon,
+    icon: import_icons16.TextIcon,
     propTypeUtil: fontVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props5.stringPropTypeUtil,
     variableType: "font",
@@ -3921,13 +3914,13 @@ function registerVariableTypes() {
   });
   const sizePromotions = {
     isActive: false,
-    icon: import_icons17.ExpandDiagonalIcon,
+    icon: import_icons16.ExpandDiagonalIcon,
     propTypeUtil: sizeVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props5.sizePropTypeUtil,
     styleTransformer: EmptyTransformer,
     variableType: "size",
     selectionFilter: () => [],
-    emptyState: /* @__PURE__ */ React38.createElement(import_editor_ui13.CtaButton, { size: "small", href: "https://go.elementor.com/go-pro-panel-size-variable/" })
+    emptyState: /* @__PURE__ */ React37.createElement(import_editor_ui13.CtaButton, { size: "small", href: "https://go.elementor.com/go-pro-panel-size-variable/" })
   };
   registerVariableType({
     ...sizePromotions,
@@ -3941,10 +3934,10 @@ function registerVariableTypes() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React39 = __toESM(require("react"));
-var import_react29 = require("react");
+var React38 = __toESM(require("react"));
+var import_react28 = require("react");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_ui36 = require("@elementor/ui");
+var import_ui35 = require("@elementor/ui");
 var VARIABLES_WRAPPER = "body";
 function StyleVariablesRenderer() {
   const container = usePortalContainer();
@@ -3955,14 +3948,14 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React39.createElement(import_ui36.Portal, { container }, /* @__PURE__ */ React39.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React38.createElement(import_ui35.Portal, { container }, /* @__PURE__ */ React38.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return (0, import_editor_v1_adapters6.__privateUseListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters6.getCanvasIframeDocument)()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react29.useState)({});
-  (0, import_react29.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react28.useState)({});
+  (0, import_react28.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -3985,22 +3978,22 @@ var import_editor_controls14 = require("@elementor/editor-controls");
 var import_editor_props6 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
-var React40 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React40.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React40.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React39.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React40.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 
 // src/repeater-injections.ts