@elementor/editor-variables 3.33.0-99 → 3.35.0-324

package/dist/index.js

@@ -31,32 +31,159 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   init: () => init,
-  registerVariableType: () => registerVariableType
+  registerVariableType: () => registerVariableType,
+  registerVariableTypes: () => registerVariableTypes
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
-var import_editor_editing_panel11 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
+var import_editor_props6 = require("@elementor/editor-props");
 
 // src/components/variables-manager/variables-manager-panel.tsx
-var React8 = __toESM(require("react"));
-var import_react7 = require("react");
+var React12 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui2 = require("@elementor/editor-ui");
+var import_editor_ui3 = require("@elementor/editor-ui");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_icons3 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_icons6 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 
-// src/hooks/use-prop-variables.ts
-var import_react2 = require("react");
-var import_editor_controls = require("@elementor/editor-controls");
+// src/utils/tracking.ts
+var import_mixpanel = require("@elementor/mixpanel");
+var trackVariableEvent = ({ varType, controlPath, action }) => {
+  const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  dispatchEvent?.(name, {
+    location: config?.locations?.variables || "",
+    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
+    trigger: config?.triggers?.click || "",
+    var_type: varType,
+    control_path: controlPath,
+    action_type: name
+  });
+};
+var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
+  const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  const eventData = {
+    location: config?.locations?.variablesManager || "",
+    trigger: config?.triggers?.click || "",
+    action_type: name
+  };
+  if (varType) {
+    eventData.var_type = varType;
+  }
+  if (controlPath) {
+    eventData.style_control_path = controlPath;
+  }
+  dispatchEvent?.(name, eventData);
+};
 
-// src/context/variable-type-context.tsx
-var React2 = __toESM(require("react"));
-var import_react = require("react");
+// src/utils/validations.ts
+var import_icons = require("@elementor/icons");
+var import_i18n = require("@wordpress/i18n");
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: (0, import_i18n.__)("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: (0, import_i18n.__)("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: (0, import_i18n.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: (0, import_i18n.__)("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n.__)("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: (0, import_i18n.__)("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: (0, import_i18n.__)("There was a glitch. Try saving your variable again.", "elementor"),
+  BATCH: {
+    DUPLICATED_LABELS: (count, name) => (
+      // eslint-disable-next-line @wordpress/i18n-translator-comments
+      (0, import_i18n.sprintf)((0, import_i18n.__)("We found %1$d duplicated %2$s.", "elementor"), count, name)
+    ),
+    UNEXPECTED_ERROR: (0, import_i18n.__)("There was a glitch.", "elementor"),
+    DUPLICATED_LABEL_ACTION: (0, import_i18n.__)("Take me there", "elementor"),
+    DUPLICATED_LABEL_ACTION_MESSAGE: (0, import_i18n.__)("Please rename the variables.", "elementor"),
+    UNEXPECTED_ERROR_ACTION_MESSAGE: (0, import_i18n.__)("Try saving your variables again.", "elementor")
+  }
+};
+var VARIABLE_LABEL_MAX_LENGTH = 50;
+var mapServerError = (error) => {
+  if (error?.response?.data?.code === "duplicated_label") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.DUPLICATED_LABEL
+    };
+  }
+  if (error?.response?.data?.code === "batch_duplicated_label") {
+    const errorData = error?.response?.data?.data ?? {};
+    const count = Object.keys(errorData).length;
+    const name = count === 1 ? "name" : "names";
+    const duplicatedIds = Object.keys(errorData);
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
+      severity: "error",
+      IconComponent: import_icons.AlertTriangleFilledIcon,
+      action: {
+        label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
+        message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
+        data: {
+          duplicatedIds
+        }
+      }
+    };
+  }
+  if (error?.response?.data?.code === "batch_operation_failed") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
+      severity: "secondary",
+      IconComponent: import_icons.InfoCircleFilledIcon,
+      action: {
+        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
+      }
+    };
+  }
+  return void 0;
+};
+var validateLabel = (name, variables) => {
+  if (!name.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
+  }
+  const allowedChars = /^[a-zA-Z0-9_-]+$/;
+  if (!allowedChars.test(name)) {
+    return ERROR_MESSAGES.INVALID_CHARACTERS;
+  }
+  const hasAlphanumeric = /[a-zA-Z0-9]/;
+  if (!hasAlphanumeric.test(name)) {
+    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
+  }
+  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  if (Object.values(variables ?? {}).some((variable) => variable.label === name)) {
+    return ERROR_MESSAGES.DUPLICATED_LABEL;
+  }
+  return "";
+};
+var labelHint = (name) => {
+  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+  if (hintThreshold < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  return "";
+};
+var validateValue = (value) => {
+  if (!value.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+  }
+  return "";
+};
 
 // src/variables-registry/create-variable-type-registry.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
@@ -66,7 +193,7 @@ var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var React = __toESM(require("react"));
 var import_editor_canvas = require("@elementor/editor-canvas");
 var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 
 // src/components/ui/color-indicator.tsx
 var import_ui = require("@elementor/ui");
@@ -81,7 +208,7 @@ var import_schema = require("@elementor/schema");
 var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
 
 // src/service.ts
-var import_i18n = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
@@ -116,9 +243,72 @@ var apiClient = {
       payload.value = value;
     }
     return (0, import_http_client.httpService)().post(BASE_PATH + "/restore", payload);
+  },
+  batch: (payload) => {
+    return (0, import_http_client.httpService)().post(BASE_PATH + "/batch", payload);
   }
 };
 
+// src/batch-operations.ts
+var generateTempId = () => {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 8);
+  return `tmp-${timestamp}-${random}`;
+};
+var isTempId = (id2) => {
+  return id2.startsWith("tmp-");
+};
+var buildOperationsArray = (originalVariables, currentVariables) => {
+  const operations = [];
+  Object.entries(currentVariables).forEach(([id2, variable]) => {
+    if (isTempId(id2)) {
+      operations.push({
+        type: "create",
+        variable: {
+          ...variable,
+          id: id2
+        }
+      });
+    } else if (originalVariables[id2]) {
+      const original = originalVariables[id2];
+      if (original.deleted && !variable.deleted) {
+        operations.push({
+          type: "restore",
+          id: id2,
+          ...original.label !== variable.label && { label: variable.label },
+          ...original.value !== variable.value && { value: variable.value }
+        });
+      } else if (!variable.deleted && (original.label !== variable.label || original.value !== variable.value || original.order !== variable.order)) {
+        operations.push({
+          type: "update",
+          id: id2,
+          variable: {
+            ...original.label !== variable.label && { label: variable.label },
+            ...original.value !== variable.value && { value: variable.value },
+            ...original.order !== variable.order && { order: variable.order }
+          }
+        });
+      }
+    }
+  });
+  Object.entries(originalVariables).forEach(([id2, variable]) => {
+    if (isTempId(id2) || variable.deleted) {
+      return;
+    }
+    const currentVariable = currentVariables[id2];
+    if (!currentVariable || currentVariable.deleted) {
+      operations.push({
+        type: "delete",
+        id: id2
+      });
+    }
+  });
+  return operations.filter((op) => {
+    const id2 = op.id || op.variable?.id;
+    return id2 && !(isTempId(id2) && currentVariables[id2]?.deleted);
+  });
+};
+
 // src/storage.ts
 var STORAGE_KEY = "elementor-global-variables";
 var STORAGE_WATERMARK_KEY = "elementor-global-variables-watermark";
@@ -126,6 +316,9 @@ var OP_RW = "RW";
 var OP_RO = "RO";
 var Storage = class {
   state;
+  notifyChange() {
+    window.dispatchEvent(new Event("variables:updated"));
+  }
   constructor() {
     this.state = {
       watermark: -1,
@@ -145,16 +338,19 @@ var Storage = class {
     this.state.watermark = watermark;
     localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
+    this.notifyChange();
   }
   add(id2, variable) {
     this.load();
     this.state.variables[id2] = variable;
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
+    this.notifyChange();
   }
   update(id2, variable) {
     this.load();
     this.state.variables[id2] = variable;
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
+    this.notifyChange();
   }
   watermark(watermark) {
     this.state.watermark = watermark;
@@ -259,8 +455,11 @@ var service = {
   variables: () => {
     return storage.load();
   },
+  getWatermark: () => {
+    return storage.state.watermark;
+  },
   init: () => {
-    service.load();
+    return service.load();
   },
   load: () => {
     return apiClient.list().then((response) => {
@@ -280,7 +479,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || (0, import_i18n.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -302,7 +501,7 @@ var service = {
     return apiClient.update(id2, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || (0, import_i18n.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -361,6 +560,47 @@ var service = {
         variable: restoredVariable
       };
     });
+  },
+  batchSave: (originalVariables, currentVariables) => {
+    const operations = buildOperationsArray(originalVariables, currentVariables);
+    const batchPayload = { operations, watermark: storage.state.watermark };
+    if (operations.length === 0) {
+      return Promise.resolve({
+        success: true,
+        watermark: storage.state.watermark,
+        operations: 0
+      });
+    }
+    return apiClient.batch(batchPayload).then((response) => {
+      const { success, data: payload } = response.data;
+      if (!success) {
+        throw new Error("Unexpected response from server");
+      }
+      return payload;
+    }).then((data) => {
+      const { results, watermark } = data;
+      handleWatermark(OP_RW, watermark);
+      if (results) {
+        results.forEach((result) => {
+          if (result.variable) {
+            const { id: variableId, ...variableData } = result.variable;
+            if (result.type === "create") {
+              storage.add(variableId, variableData);
+            } else {
+              storage.update(variableId, variableData);
+            }
+            styleVariablesRepository.update({
+              [variableId]: variableData
+            });
+          }
+        });
+      }
+      return {
+        success: true,
+        watermark,
+        operations: operations.length
+      };
+    });
   }
 };
 var handleWatermark = (operation, newWatermark) => {
@@ -394,7 +634,7 @@ var inheritanceTransformer = (0, import_editor_canvas.createTransformer)((id2) =
   const variables = service.variables();
   const variable = variables[id2];
   if (!variable) {
-    return /* @__PURE__ */ React.createElement("span", null, (0, import_i18n2.__)("Missing variable", "elementor"));
+    return /* @__PURE__ */ React.createElement("span", null, (0, import_i18n3.__)("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
   const css = resolveCssVariable(id2, variable);
@@ -415,19 +655,19 @@ var variableTransformer = (0, import_editor_canvas2.createTransformer)((id2) =>
 function createVariableTypeRegistry() {
   const variableTypes = {};
   const registerVariableType2 = ({
+    key,
     icon,
     startIcon,
     valueField,
     propTypeUtil,
     variableType,
+    defaultValue,
     selectionFilter,
     valueTransformer,
     fallbackPropTypeUtil,
     isCompatible
   }) => {
-    if (variableTypes[propTypeUtil.key]) {
-      throw new Error(`Variable with key "${propTypeUtil.key}" is already registered.`);
-    }
+    const variableTypeKey = key ?? propTypeUtil.key;
     if (!isCompatible) {
       isCompatible = (propType, variable) => {
         if ("union" === propType.kind) {
@@ -438,12 +678,13 @@ function createVariableTypeRegistry() {
         return false;
       };
     }
-    variableTypes[propTypeUtil.key] = {
+    variableTypes[variableTypeKey] = {
       icon,
       startIcon,
       valueField,
       propTypeUtil,
       variableType,
+      defaultValue,
       selectionFilter,
       valueTransformer,
       fallbackPropTypeUtil,
@@ -461,32 +702,188 @@ function createVariableTypeRegistry() {
   const getVariableType2 = (key) => {
     return variableTypes[key];
   };
+  const getVariableTypes2 = () => {
+    return variableTypes;
+  };
   const hasVariableType2 = (key) => {
     return key in variableTypes;
   };
   return {
     registerVariableType: registerVariableType2,
     getVariableType: getVariableType2,
+    getVariableTypes: getVariableTypes2,
     hasVariableType: hasVariableType2
   };
 }
 
 // src/variables-registry/variable-type-registry.ts
-var { registerVariableType, getVariableType, hasVariableType } = createVariableTypeRegistry();
+var { registerVariableType, getVariableType, getVariableTypes, hasVariableType } = createVariableTypeRegistry();
+
+// src/components/ui/delete-confirmation-dialog.tsx
+var React2 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var import_ui3 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+var TITLE_ID = "delete-variable-dialog";
+var DeleteConfirmationDialog = ({
+  open,
+  label,
+  closeDialog,
+  onConfirm
+}) => {
+  return /* @__PURE__ */ React2.createElement(import_ui3.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React2.createElement(import_ui3.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React2.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n4.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React2.createElement(import_ui3.DialogContent, null, /* @__PURE__ */ React2.createElement(import_ui3.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n4.__)("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React2.createElement(import_ui3.Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", (0, import_i18n4.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui3.DialogActions, null, /* @__PURE__ */ React2.createElement(import_ui3.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n4.__)("Not now", "elementor")), /* @__PURE__ */ React2.createElement(import_ui3.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n4.__)("Delete", "elementor"))));
+};
+
+// src/components/ui/empty-state.tsx
+var React3 = __toESM(require("react"));
+var import_ui4 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+
+// src/hooks/use-permissions.ts
+var import_editor_current_user = require("@elementor/editor-current-user");
+var usePermissions = () => {
+  const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
+  return {
+    canAssign: () => canUser("edit_posts"),
+    canUnlink: () => canUser("edit_posts"),
+    canAdd: () => canUser("manage_options"),
+    canDelete: () => canUser("manage_options"),
+    canEdit: () => canUser("manage_options"),
+    canRestore: () => canUser("manage_options"),
+    canManageSettings: () => canUser("manage_options")
+  };
+};
+
+// src/components/ui/empty-state.tsx
+var EmptyState = ({ icon, title, message, onAdd }) => {
+  const canAdd = usePermissions().canAdd();
+  return /* @__PURE__ */ React3.createElement(
+    import_ui4.Stack,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "flex-start",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pt: 8, pb: 5.5 }
+    },
+    icon,
+    canAdd ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React3.createElement(import_ui4.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n5.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React3.createElement(
+      Content,
+      {
+        title: (0, import_i18n5.__)("There are no variables", "elementor"),
+        message: (0, import_i18n5.__)("With your current role, you can only connect and detach variables.", "elementor")
+      }
+    )
+  );
+};
+function Content({ title, message }) {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(import_ui4.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React3.createElement(import_ui4.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+}
+
+// src/components/ui/no-search-results.tsx
+var React4 = __toESM(require("react"));
+var import_ui5 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
+  return /* @__PURE__ */ React4.createElement(
+    import_ui5.Stack,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      p: 2.5,
+      color: "text.secondary",
+      sx: { pb: 3.5, pt: 8 }
+    },
+    icon,
+    /* @__PURE__ */ React4.createElement(import_ui5.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n6.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React4.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React4.createElement(import_ui5.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n6.__)("Try something else.", "elementor"), /* @__PURE__ */ React4.createElement(import_ui5.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n6.__)("Clear & try again", "elementor")))
+  );
+};
+
+// src/components/variables-manager/hooks/use-auto-edit.ts
+var import_react = require("react");
+var useAutoEdit = () => {
+  const [autoEditVariableId, setAutoEditVariableId] = (0, import_react.useState)(void 0);
+  const startAutoEdit = (0, import_react.useCallback)((variableId) => {
+    setAutoEditVariableId(variableId);
+  }, []);
+  const handleAutoEditComplete = (0, import_react.useCallback)(() => {
+    setTimeout(() => {
+      setAutoEditVariableId(void 0);
+    }, 100);
+  }, []);
+  return {
+    autoEditVariableId,
+    startAutoEdit,
+    handleAutoEditComplete
+  };
+};
+
+// src/components/variables-manager/hooks/use-error-navigation.ts
+var import_react2 = require("react");
+var useErrorNavigation = () => {
+  const currentIndexRef = (0, import_react2.useRef)(0);
+  const createNavigationCallback = (0, import_react2.useCallback)(
+    (ids, onNavigate, onComplete) => {
+      return () => {
+        if (!ids?.length) {
+          return;
+        }
+        const currentIndex = currentIndexRef.current;
+        const currentId = ids[currentIndex];
+        if (currentId) {
+          onNavigate(currentId);
+          const nextIndex = currentIndex + 1;
+          if (nextIndex >= ids.length) {
+            onComplete();
+            currentIndexRef.current = 0;
+          } else {
+            currentIndexRef.current = nextIndex;
+          }
+        }
+      };
+    },
+    []
+  );
+  const resetNavigation = (0, import_react2.useCallback)(() => {
+    currentIndexRef.current = 0;
+  }, []);
+  return {
+    createNavigationCallback,
+    resetNavigation
+  };
+};
+
+// src/components/variables-manager/hooks/use-variables-manager-state.ts
+var import_react5 = require("react");
+
+// src/hooks/use-prop-variables.ts
+var import_react4 = require("react");
+var import_editor_controls = require("@elementor/editor-controls");
 
 // src/context/variable-type-context.tsx
-var VariableTypeContext = (0, import_react.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__ */ React2.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
+  return /* @__PURE__ */ React5.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
 }
 function useVariableType() {
-  const context = (0, import_react.useContext)(VariableTypeContext);
+  const context = (0, import_react3.useContext)(VariableTypeContext);
   if (context === null) {
     throw new Error("useVariableType must be used within a VariableTypeProvider");
   }
   return getVariableType(context);
 }
 
+// src/utils/filter-by-search.ts
+function filterBySearch(variables, searchValue) {
+  const lowerSearchValue = searchValue.toLowerCase();
+  return variables.filter((variable) => variable.label.toLowerCase().includes(lowerSearchValue));
+}
+
 // src/hooks/use-prop-variables.ts
 var getVariables = (includeDeleted = true) => {
   const variables = service.variables();
@@ -508,11 +905,17 @@ var useVariable = (key) => {
 var useFilteredVariables = (searchValue, propTypeKey) => {
   const baseVariables = usePropVariables(propTypeKey);
   const typeFilteredVariables = useVariableSelectionFilter(baseVariables);
-  const searchFilteredVariables = filterVariablesBySearchValue(typeFilteredVariables, searchValue);
+  const searchFilteredVariables = filterBySearch(typeFilteredVariables, searchValue);
+  const sortedVariables = searchFilteredVariables.sort((a, b) => {
+    const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
+    const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
+    return orderA - orderB;
+  });
   return {
-    list: searchFilteredVariables,
+    list: sortedVariables,
     hasMatches: searchFilteredVariables.length > 0,
-    isSourceNotEmpty: typeFilteredVariables.length > 0
+    isSourceNotEmpty: typeFilteredVariables.length > 0,
+    hasNoCompatibleVariables: baseVariables.length > 0 && typeFilteredVariables.length === 0
   };
 };
 var useVariableSelectionFilter = (variables) => {
@@ -520,19 +923,28 @@ var useVariableSelectionFilter = (variables) => {
   const { propType } = (0, import_editor_controls.useBoundProp)();
   return selectionFilter ? selectionFilter(variables, propType) : variables;
 };
-var filterVariablesBySearchValue = (variables, searchValue) => {
-  const lowerSearchValue = searchValue.toLowerCase();
-  return variables.filter(({ label }) => label.toLowerCase().includes(lowerSearchValue));
-};
 var usePropVariables = (propKey) => {
-  return (0, import_react2.useMemo)(() => normalizeVariables(propKey), [propKey]);
+  return (0, import_react4.useMemo)(() => normalizeVariables(propKey), [propKey]);
+};
+var getMatchingTypes = (propKey) => {
+  const matchingTypes = [];
+  const allTypes = getVariableTypes();
+  const variableType = getVariableType(propKey);
+  Object.entries(allTypes).forEach(([key, typeOptions]) => {
+    if (variableType.variableType === typeOptions.variableType) {
+      matchingTypes.push(key);
+    }
+  });
+  return matchingTypes;
 };
 var normalizeVariables = (propKey) => {
   const variables = getVariables(false);
-  return Object.entries(variables).filter(([, variable]) => variable.type === propKey).map(([key, { label, value }]) => ({
+  const matchingTypes = getMatchingTypes(propKey);
+  return Object.entries(variables).filter(([, variable]) => matchingTypes.includes(variable.type)).map(([key, { label, value, order }]) => ({
     key,
     label,
-    value
+    value,
+    order
   }));
 };
 var extractId = ({ id: id2 }) => id2;
@@ -549,77 +961,185 @@ var restoreVariable = (restoreId, label, value) => {
   return service.restore(restoreId, label, value).then(extractId);
 };
 
-// src/components/variables-manager/variables-manager-table.tsx
-var React7 = __toESM(require("react"));
-var import_react6 = require("react");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_icons2 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
-
-// src/components/fields/label-field.tsx
-var React3 = __toESM(require("react"));
-var import_react3 = require("react");
-var import_ui3 = require("@elementor/ui");
-
-// src/utils/validations.ts
-var import_i18n3 = require("@wordpress/i18n");
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: (0, import_i18n3.__)("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: (0, import_i18n3.__)("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: (0, import_i18n3.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: (0, import_i18n3.__)("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n3.__)("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: (0, import_i18n3.__)("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: (0, import_i18n3.__)("There was a glitch. Try saving your variable again.", "elementor")
+// src/components/variables-manager/hooks/use-variables-manager-state.ts
+var useVariablesManagerState = () => {
+  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_react5.useCallback)((type, defaultName, defaultValue) => {
+    const newId = generateTempId();
+    const newVariable = {
+      id: newId,
+      label: defaultName.trim(),
+      value: defaultValue.trim(),
+      type
+    };
+    setVariables((prev) => ({ ...prev, [newId]: newVariable }));
+    setIsDirty(true);
+    return newId;
+  }, []);
+  const handleDeleteVariable = (0, import_react5.useCallback)((itemId) => {
+    setDeletedVariables((prev) => [...prev, itemId]);
+    setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
+    setIsDirty(true);
+  }, []);
+  const handleSearch = (searchTerm) => {
+    setSearchValue(searchTerm);
+  };
+  const handleSave = (0, import_react5.useCallback)(async () => {
+    const originalVariables = getVariables(false);
+    setIsSaving(true);
+    const result = await service.batchSave(originalVariables, variables);
+    if (result.success) {
+      await service.load();
+      const updatedVariables = service.variables();
+      setVariables(updatedVariables);
+      setDeletedVariables([]);
+      setIsDirty(false);
+    }
+    return { success: result.success };
+  }, [variables]);
+  const filteredVariables = () => {
+    const list = Object.entries(variables).map(([id2, value]) => ({ ...value, id: id2 }));
+    const filtered = filterBySearch(list, searchValue);
+    return Object.fromEntries(filtered.map(({ id: id2, ...rest }) => [id2, rest]));
+  };
+  return {
+    variables: filteredVariables(),
+    deletedVariables,
+    isDirty,
+    isSaveDisabled,
+    handleOnChange,
+    createVariable: createVariable2,
+    handleDeleteVariable,
+    handleSave,
+    isSaving,
+    handleSearch,
+    searchValue,
+    setIsSaving,
+    setIsSaveDisabled
+  };
 };
-var VARIABLE_LABEL_MAX_LENGTH = 50;
-var mapServerError = (error) => {
-  if (error?.response?.data?.code === "duplicated_label") {
+
+// src/components/variables-manager/variables-manager-create-menu.tsx
+var React6 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_icons3 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
+var SIZE = "tiny";
+var VariableManagerCreateMenu = ({
+  variables,
+  onCreate,
+  disabled,
+  menuState
+}) => {
+  const buttonRef = (0, import_react6.useRef)(null);
+  const variableTypes = getVariableTypes();
+  const menuOptions = Object.entries(variableTypes).filter(([, variable]) => !!variable.defaultValue).map(([key, variable]) => {
+    const displayName = variable.variableType.charAt(0).toUpperCase() + variable.variableType.slice(1);
     return {
-      field: "label",
-      message: ERROR_MESSAGES.DUPLICATED_LABEL
+      key,
+      name: displayName,
+      icon: variable.icon,
+      onClick: () => {
+        const defaultName = getDefaultName(variables, key, variable.variableType);
+        onCreate(key, defaultName, variable.defaultValue || "");
+        trackVariablesManagerEvent({ action: "add", varType: variable.variableType });
+      }
     };
-  }
-  return void 0;
-};
-var validateLabel = (name) => {
-  if (!name.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
-  }
-  const allowedChars = /^[a-zA-Z0-9_-]+$/;
-  if (!allowedChars.test(name)) {
-    return ERROR_MESSAGES.INVALID_CHARACTERS;
-  }
-  const hasAlphanumeric = /[a-zA-Z0-9]/;
-  if (!hasAlphanumeric.test(name)) {
-    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
-  }
-  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  return "";
-};
-var labelHint = (name) => {
-  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
-  if (hintThreshold < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  return "";
+  });
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+    import_ui6.IconButton,
+    {
+      ...(0, import_ui6.bindTrigger)(menuState),
+      ref: buttonRef,
+      disabled,
+      size: SIZE,
+      "aria-label": (0, import_i18n7.__)("Add variable", "elementor")
+    },
+    /* @__PURE__ */ React6.createElement(import_icons3.PlusIcon, { fontSize: SIZE })
+  ), /* @__PURE__ */ React6.createElement(
+    import_ui6.Menu,
+    {
+      disablePortal: true,
+      MenuListProps: {
+        dense: true
+      },
+      PaperProps: {
+        elevation: 6
+      },
+      ...(0, import_ui6.bindMenu)(menuState),
+      anchorEl: buttonRef.current,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      "data-testid": "variable-manager-create-menu"
+    },
+    menuOptions.map((option) => /* @__PURE__ */ React6.createElement(
+      import_ui6.MenuItem,
+      {
+        key: option.key,
+        onClick: () => {
+          option.onClick?.();
+          menuState.close();
+        },
+        sx: {
+          gap: 1.5
+        }
+      },
+      (0, import_react6.createElement)(option.icon, {
+        fontSize: SIZE,
+        color: "action"
+      }),
+      /* @__PURE__ */ React6.createElement(import_ui6.Typography, { variant: "caption", color: "text.primary" }, option.name)
+    ))
+  ));
 };
-var validateValue = (value) => {
-  if (!value.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+var getDefaultName = (variables, type, baseName) => {
+  const existingNames = Object.values(variables).filter((variable) => variable.type === type).map((variable) => variable.label);
+  let counter = 1;
+  let name = `${baseName}-${counter}`;
+  while (existingNames.includes(name)) {
+    counter++;
+    name = `${baseName}-${counter}`;
   }
-  return "";
+  return name;
 };
 
+// src/components/variables-manager/variables-manager-table.tsx
+var React11 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_icons5 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
+
 // src/components/fields/label-field.tsx
+var React7 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_editor_ui = require("@elementor/editor-ui");
+var import_ui7 = require("@elementor/ui");
 function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
 var useLabelError = (initialError) => {
-  const [error, setError] = (0, import_react3.useState)(initialError ?? { value: "", message: "" });
+  const [error, setError] = (0, import_react7.useState)(initialError ?? { value: "", message: "" });
   return {
     labelFieldError: error,
     setLabelFieldError: setError
@@ -632,13 +1152,17 @@ var LabelField = ({
   id: id2,
   onErrorChange,
   size = "tiny",
-  focusOnShow = false
+  focusOnShow = false,
+  selectOnShow = false,
+  showWarningInfotip = false,
+  variables
 }) => {
-  const [label, setLabel] = (0, import_react3.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react3.useState)("");
+  const [label, setLabel] = (0, import_react7.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react7.useState)("");
+  const fieldRef = (0, import_react7.useRef)(null);
   const handleChange = (newValue) => {
     setLabel(newValue);
-    const errorMsg2 = validateLabel(newValue);
+    const errorMsg2 = validateLabel(newValue, variables);
     setErrorMessage(errorMsg2);
     onErrorChange?.(errorMsg2);
     onChange(isLabelEqual(newValue, error?.value ?? "") || errorMsg2 ? "" : newValue);
@@ -647,32 +1171,54 @@ var LabelField = ({
   if (isLabelEqual(label, error?.value ?? "") && error?.message) {
     errorMsg = error.message;
   }
-  return /* @__PURE__ */ React3.createElement(
-    import_ui3.TextField,
+  const hintMsg = !errorMsg ? labelHint(label) : "";
+  const textField = /* @__PURE__ */ React7.createElement(
+    import_ui7.TextField,
     {
+      ref: fieldRef,
       id: id2,
       size,
       fullWidth: true,
       value: label,
       error: !!errorMsg,
       onChange: (e) => handleChange(e.target.value),
-      inputProps: { maxLength: VARIABLE_LABEL_MAX_LENGTH },
+      inputProps: {
+        maxLength: VARIABLE_LABEL_MAX_LENGTH,
+        ...selectOnShow && { onFocus: (e) => e.target.select() },
+        "aria-label": "Name"
+      },
       autoFocus: focusOnShow
     }
   );
+  if (showWarningInfotip) {
+    const tooltipWidth = Math.max(240, fieldRef.current?.getBoundingClientRect().width ?? 240);
+    return /* @__PURE__ */ React7.createElement(
+      import_editor_ui.WarningInfotip,
+      {
+        open: Boolean(errorMsg || hintMsg),
+        text: errorMsg || hintMsg,
+        placement: "bottom-start",
+        width: tooltipWidth,
+        offset: [0, -15],
+        ...hintMsg && { hasError: false }
+      },
+      textField
+    );
+  }
+  return textField;
 };
 
-// src/components/variables-manager/variable-edit-menu.tsx
-var React4 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_icons = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
+// src/components/variables-manager/ui/variable-edit-menu.tsx
+var React8 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_icons4 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
-  const menuState = (0, import_ui4.usePopupState)({
+  const menuState = (0, import_ui8.usePopupState)({
     variant: "popover"
   });
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(import_ui4.IconButton, { ...(0, import_ui4.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React4.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React4.createElement(
-    import_ui4.Menu,
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui8.IconButton, { ...(0, import_ui8.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React8.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React8.createElement(
+    import_ui8.Menu,
     {
       disablePortal: true,
       MenuListProps: {
@@ -681,7 +1227,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       PaperProps: {
         elevation: 6
       },
-      ...(0, import_ui4.bindMenu)(menuState),
+      ...(0, import_ui8.bindMenu)(menuState),
       anchorEl: menuState.anchorEl,
       anchorOrigin: {
         vertical: "bottom",
@@ -694,8 +1240,8 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuActions.map((action) => /* @__PURE__ */ React4.createElement(
-      import_ui4.MenuItem,
+    menuActions.map((action) => /* @__PURE__ */ React8.createElement(
+      import_ui8.MenuItem,
       {
         key: action.name,
         onClick: () => {
@@ -707,7 +1253,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
           gap: 1
         }
       },
-      action.icon && (0, import_react4.createElement)(action.icon, {
+      action.icon && (0, import_react8.createElement)(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -716,78 +1262,9 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
   ));
 };
 
-// src/components/variables-manager/variable-editable-cell.tsx
-var React5 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_ui5 = require("@elementor/ui");
-var VariableEditableCell = ({
-  initialValue,
-  children,
-  editableElement,
-  onChange,
-  prefixElement
-}) => {
-  const [value, setValue] = (0, import_react5.useState)(initialValue);
-  const [isEditing, setIsEditing] = (0, import_react5.useState)(false);
-  const handleDoubleClick = () => {
-    setIsEditing(true);
-  };
-  const handleSave = () => {
-    onChange(value);
-    setIsEditing(false);
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      handleSave();
-    } else if (event.key === "Escape") {
-      setIsEditing(false);
-    }
-    if (event.key === " " && !isEditing) {
-      event.preventDefault();
-      setIsEditing(true);
-    }
-  };
-  const handleChange = (newValue) => {
-    setValue(newValue);
-  };
-  const editableContent = editableElement({ value, onChange: handleChange });
-  if (isEditing) {
-    return /* @__PURE__ */ React5.createElement(import_ui5.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React5.createElement(
-      import_ui5.Stack,
-      {
-        direction: "row",
-        alignItems: "center",
-        gap: 1,
-        onDoubleClick: handleDoubleClick,
-        onKeyDown: handleKeyDown,
-        tabIndex: 0,
-        role: "button",
-        "aria-label": "Double click or press Space to edit"
-      },
-      prefixElement,
-      editableContent
-    ));
-  }
-  return /* @__PURE__ */ React5.createElement(
-    import_ui5.Stack,
-    {
-      direction: "row",
-      alignItems: "center",
-      gap: 1,
-      onDoubleClick: handleDoubleClick,
-      onKeyDown: handleKeyDown,
-      tabIndex: 0,
-      role: "button",
-      "aria-label": "Double click or press Space to edit"
-    },
-    prefixElement,
-    children
-  );
-};
-
-// src/components/variables-manager/variable-table-cell.tsx
-var React6 = __toESM(require("react"));
-var import_ui6 = require("@elementor/ui");
+// src/components/variables-manager/ui/variable-table-cell.tsx
+var React9 = __toESM(require("react"));
+var import_ui9 = require("@elementor/ui");
 var VariableTableCell = ({
   children,
   isHeader,
@@ -806,20 +1283,167 @@ var VariableTableCell = ({
     ...width && { width },
     ...sx
   };
-  return /* @__PURE__ */ React6.createElement(import_ui6.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+  return /* @__PURE__ */ React9.createElement(import_ui9.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
 };
 
+// src/components/variables-manager/variable-editable-cell.tsx
+var React10 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_ui10 = require("@elementor/ui");
+var VariableEditableCell = React10.memo(
+  ({
+    initialValue,
+    children,
+    editableElement,
+    onChange,
+    prefixElement,
+    autoEdit = false,
+    onRowRef,
+    onAutoEditComplete,
+    gap = 1,
+    fieldType
+  }) => {
+    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_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_react9.useEffect)(() => {
+      onRowRef?.(rowRef?.current);
+    }, [onRowRef]);
+    (0, import_react9.useEffect)(() => {
+      if (autoEdit && !isEditing) {
+        setIsEditing(true);
+        onAutoEditComplete?.();
+      }
+    }, [autoEdit, isEditing, onAutoEditComplete]);
+    const handleDoubleClick = () => {
+      setIsEditing(true);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter") {
+        handleSave();
+      } else if (event.key === "Escape") {
+        setIsEditing(false);
+      }
+      if (event.key === " " && !isEditing) {
+        event.preventDefault();
+        setIsEditing(true);
+      }
+    };
+    const handleChange = (0, import_react9.useCallback)((newValue) => {
+      setValue(newValue);
+    }, []);
+    const handleValidationChange = (0, import_react9.useCallback)(
+      (errorMsg) => {
+        if (fieldType === "label") {
+          setLabelFieldError({
+            value,
+            message: errorMsg
+          });
+        } else {
+          setValueFieldError(errorMsg);
+        }
+      },
+      [fieldType, value, setLabelFieldError, setValueFieldError]
+    );
+    let currentError;
+    if (fieldType === "label") {
+      currentError = labelFieldError;
+    } else if (fieldType === "value") {
+      currentError = { value, message: valueFieldError };
+    }
+    const editableContent = editableElement({
+      value,
+      onChange: handleChange,
+      onValidationChange: handleValidationChange,
+      error: currentError
+    });
+    if (isEditing) {
+      return /* @__PURE__ */ React10.createElement(import_ui10.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React10.createElement(
+        import_ui10.Stack,
+        {
+          ref: rowRef,
+          direction: "row",
+          alignItems: "center",
+          gap,
+          onDoubleClick: handleDoubleClick,
+          onKeyDown: handleKeyDown,
+          tabIndex: 0,
+          role: "button",
+          "aria-label": "Double click or press Space to edit"
+        },
+        prefixElement,
+        editableContent
+      ));
+    }
+    return /* @__PURE__ */ React10.createElement(
+      import_ui10.Stack,
+      {
+        ref: rowRef,
+        direction: "row",
+        alignItems: "center",
+        gap,
+        onDoubleClick: handleDoubleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        role: "button",
+        "aria-label": "Double click or press Space to edit"
+      },
+      prefixElement,
+      children
+    );
+  }
+);
+
 // src/components/variables-manager/variables-manager-table.tsx
-var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange }) => {
-  const [ids, setIds] = (0, import_react6.useState)(Object.keys(variables));
+var VariablesManagerTable = ({
+  menuActions,
+  variables,
+  onChange: handleOnChange,
+  autoEditVariableId,
+  onAutoEditComplete,
+  onFieldError
+}) => {
+  const tableContainerRef = (0, import_react10.useRef)(null);
+  const variableRowRefs = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react10.useEffect)(() => {
+    if (autoEditVariableId && tableContainerRef.current) {
+      const rowElement = variableRowRefs.current.get(autoEditVariableId);
+      if (rowElement) {
+        setTimeout(() => {
+          rowElement.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+            inline: "nearest"
+          });
+        }, 100);
+      }
+    }
+  }, [autoEditVariableId]);
+  const handleRowRef = (id2) => (ref) => {
+    if (ref) {
+      variableRowRefs.current.set(id2, ref);
+    } else {
+      variableRowRefs.current.delete(id2);
+    }
+  };
+  const ids = Object.keys(variables).sort(sortVariablesOrder(variables));
   const rows = ids.filter((id2) => !variables[id2].deleted).map((id2) => {
     const variable = variables[id2];
     const variableType = getVariableType(variable.type);
     return {
       id: id2,
+      type: variable.type,
       name: variable.label,
       value: variable.value,
-      type: variable.type,
       ...variableType
     };
   });
@@ -827,17 +1451,28 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
     minWidth: 250,
     tableLayout: "fixed"
   };
-  return /* @__PURE__ */ React7.createElement(import_ui7.TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React7.createElement(import_ui7.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React7.createElement(import_ui7.TableHead, null, /* @__PURE__ */ React7.createElement(import_ui7.TableRow, null, /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n4.__)("Name", "elementor")), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n4.__)("Value", "elementor")), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React7.createElement(import_ui7.TableBody, null, /* @__PURE__ */ React7.createElement(
-    import_ui7.UnstableSortableProvider,
+  const handleReorder = (newIds) => {
+    const updatedVariables = { ...variables };
+    newIds.forEach((id2, index) => {
+      const current = updatedVariables[id2];
+      if (!current) {
+        return;
+      }
+      updatedVariables[id2] = Object.assign({}, current, { order: index + 1 });
+    });
+    handleOnChange(updatedVariables);
+  };
+  return /* @__PURE__ */ React11.createElement(import_ui11.TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React11.createElement(import_ui11.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React11.createElement(import_ui11.TableHead, null, /* @__PURE__ */ React11.createElement(import_ui11.TableRow, null, /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n8.__)("Name", "elementor")), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n8.__)("Value", "elementor")), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React11.createElement(import_ui11.TableBody, null, /* @__PURE__ */ React11.createElement(
+    import_ui11.UnstableSortableProvider,
     {
       value: ids,
-      onChange: setIds,
+      onChange: handleReorder,
       variant: "static",
       restrictAxis: true,
-      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React7.createElement(import_ui7.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React7.createElement(import_ui7.TableBody, null, dragOverlayChildren))
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React11.createElement(import_ui11.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React11.createElement(import_ui11.TableBody, null, dragOverlayChildren))
     },
-    rows.map((row) => /* @__PURE__ */ React7.createElement(
-      import_ui7.UnstableSortableItem,
+    rows.map((row) => /* @__PURE__ */ React11.createElement(
+      import_ui11.UnstableSortableItem,
       {
         key: row.id,
         id: row.id,
@@ -850,16 +1485,15 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
           isDragged,
           dropPosition,
           setTriggerRef,
-          isDragOverlay,
-          isSorting,
-          index
+          isSorting
         }) => {
           const showIndicationBefore = showDropIndication && dropPosition === "before";
           const showIndicationAfter = showDropIndication && dropPosition === "after";
-          return /* @__PURE__ */ React7.createElement(
-            import_ui7.TableRow,
+          return /* @__PURE__ */ React11.createElement(
+            import_ui11.TableRow,
             {
               ...itemProps,
+              ref: handleRowRef("table-ref-" + row.id),
               selected: isDragged,
               sx: {
                 ...showIndicationBefore && {
@@ -884,11 +1518,10 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                   }
                 }
               },
-              style: { ...itemStyle, ...triggerStyle },
-              disableDivider: isDragOverlay || index === rows.length - 1
+              style: { ...itemStyle, ...triggerStyle }
             },
-            /* @__PURE__ */ React7.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React7.createElement(
-              import_ui7.IconButton,
+            /* @__PURE__ */ React11.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React11.createElement(
+              import_ui11.IconButton,
               {
                 size: "small",
                 ref: setTriggerRef,
@@ -896,9 +1529,9 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                 disabled: isSorting,
                 draggable: true
               },
-              /* @__PURE__ */ React7.createElement(import_icons2.GripVerticalIcon, { fontSize: "inherit" })
+              /* @__PURE__ */ React11.createElement(import_icons5.GripVerticalIcon, { fontSize: "inherit" })
             )),
-            /* @__PURE__ */ React7.createElement(VariableTableCell, null, /* @__PURE__ */ React7.createElement(
+            /* @__PURE__ */ React11.createElement(VariableTableCell, null, /* @__PURE__ */ React11.createElement(
               VariableEditableCell,
               {
                 initialValue: row.name,
@@ -910,20 +1543,37 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                     });
                   }
                 },
-                prefixElement: (0, import_react6.createElement)(row.icon, { fontSize: "inherit" }),
-                editableElement: ({ value, onChange }) => /* @__PURE__ */ React7.createElement(
+                prefixElement: (0, import_react10.createElement)(row.icon, { fontSize: "inherit" }),
+                editableElement: ({
+                  value,
+                  onChange,
+                  onValidationChange,
+                  error
+                }) => /* @__PURE__ */ React11.createElement(
                   LabelField,
                   {
                     id: "variable-label-" + row.id,
                     size: "tiny",
                     value,
                     onChange,
-                    focusOnShow: true
+                    onErrorChange: (errorMsg) => {
+                      onValidationChange?.(errorMsg);
+                      onFieldError?.(!!errorMsg);
+                    },
+                    error,
+                    focusOnShow: true,
+                    selectOnShow: autoEditVariableId === row.id,
+                    showWarningInfotip: true,
+                    variables
                   }
-                )
+                ),
+                autoEdit: autoEditVariableId === row.id,
+                onRowRef: handleRowRef(row.id),
+                onAutoEditComplete: autoEditVariableId === row.id ? onAutoEditComplete : void 0,
+                fieldType: "label"
               },
-              /* @__PURE__ */ React7.createElement(
-                import_editor_ui.EllipsisWithTooltip,
+              /* @__PURE__ */ React11.createElement(
+                import_editor_ui2.EllipsisWithTooltip,
                 {
                   title: row.name,
                   sx: { border: "4px solid transparent" }
@@ -931,7 +1581,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                 row.name
               )
             )),
-            /* @__PURE__ */ React7.createElement(VariableTableCell, null, /* @__PURE__ */ React7.createElement(
+            /* @__PURE__ */ React11.createElement(VariableTableCell, null, /* @__PURE__ */ React11.createElement(
               VariableEditableCell,
               {
                 initialValue: row.value,
@@ -943,19 +1593,51 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                     });
                   }
                 },
-                editableElement: row.valueField
+                editableElement: ({
+                  value,
+                  onChange,
+                  onValidationChange,
+                  error
+                }) => row.valueField({
+                  ref: {
+                    current: variableRowRefs.current.get(
+                      "table-ref-" + row.id
+                    )
+                  },
+                  value,
+                  onChange,
+                  onPropTypeKeyChange: (type) => {
+                    handleOnChange({
+                      ...variables,
+                      [row.id]: { ...variables[row.id], type }
+                    });
+                  },
+                  propTypeKey: row.type,
+                  onValidationChange: (errorMsg) => {
+                    onValidationChange?.(errorMsg);
+                    onFieldError?.(!!errorMsg);
+                  },
+                  error
+                }),
+                onRowRef: handleRowRef(row.id),
+                gap: 0.25,
+                fieldType: "value"
               },
               row.startIcon && row.startIcon({ value: row.value }),
-              /* @__PURE__ */ React7.createElement(
-                import_editor_ui.EllipsisWithTooltip,
+              /* @__PURE__ */ React11.createElement(
+                import_editor_ui2.EllipsisWithTooltip,
                 {
                   title: row.value,
-                  sx: { border: "4px solid transparent" }
+                  sx: {
+                    border: "4px solid transparent",
+                    lineHeight: "1",
+                    pt: 0.25
+                  }
                 },
                 row.value
               )
             )),
-            /* @__PURE__ */ React7.createElement(
+            /* @__PURE__ */ React11.createElement(
               VariableTableCell,
               {
                 align: "right",
@@ -964,7 +1646,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                 maxWidth: 16,
                 sx: { paddingInlineEnd: 1 }
               },
-              /* @__PURE__ */ React7.createElement(import_ui7.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React7.createElement(
+              /* @__PURE__ */ React11.createElement(import_ui11.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React11.createElement(
                 VariableEditMenu,
                 {
                   menuActions,
@@ -979,6 +1661,13 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
     ))
   ))));
 };
+function sortVariablesOrder(variables) {
+  return (a, b) => {
+    const orderA = variables[a]?.order ?? Number.MAX_SAFE_INTEGER;
+    const orderB = variables[b]?.order ?? Number.MAX_SAFE_INTEGER;
+    return orderA - orderB;
+  };
+}
 
 // src/components/variables-manager/variables-manager-panel.tsx
 var id = "variables-manager";
@@ -991,39 +1680,134 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   },
   onClose: () => {
     (0, import_editor_v1_adapters.changeEditMode)("edit");
-  }
+  },
+  isOpenPreviousElement: true
 });
 function VariablesManagerPanel() {
   const { close: closePanel } = usePanelActions();
-  const [isDirty, setIsDirty] = (0, import_react7.useState)(false);
-  const [variables, setVariables] = (0, import_react7.useState)(getVariables(false));
-  const [deletedVariables, setDeletedVariables] = (0, import_react7.useState)([]);
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui3.useDialog)();
+  const createMenuState = (0, import_ui12.usePopupState)({
+    variant: "popover"
+  });
+  const {
+    variables,
+    isDirty,
+    searchValue,
+    isSaveDisabled,
+    handleOnChange,
+    createVariable: createVariable2,
+    handleDeleteVariable,
+    handleSave,
+    isSaving,
+    handleSearch,
+    setIsSaving,
+    setIsSaveDisabled
+  } = useVariablesManagerState();
+  const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
+  const { createNavigationCallback, resetNavigation } = useErrorNavigation();
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react11.useState)(null);
+  const [serverError, setServerError] = (0, import_react11.useState)(null);
   usePreventUnload(isDirty);
+  const handleClosePanel = () => {
+    if (isDirty) {
+      openSaveChangesDialog();
+      return;
+    }
+    closePanel();
+  };
+  const handleCreateVariable = (0, import_react11.useCallback)(
+    (type, defaultName, defaultValue) => {
+      const newId = createVariable2(type, defaultName, defaultValue);
+      if (newId) {
+        startAutoEdit(newId);
+      }
+    },
+    [createVariable2, startAutoEdit]
+  );
+  const handleSaveClick = async () => {
+    try {
+      setServerError(null);
+      resetNavigation();
+      const result = await handleSave();
+      trackVariablesManagerEvent({ action: "saveChanges" });
+      return result;
+    } catch (error) {
+      const mappedError = mapServerError(error);
+      const duplicatedIds = mappedError?.action?.data?.duplicatedIds;
+      if (mappedError && "label" === mappedError.field) {
+        if (duplicatedIds && mappedError.action) {
+          mappedError.action.callback = createNavigationCallback(duplicatedIds, startAutoEdit, () => {
+            setIsSaveDisabled(false);
+          });
+        }
+        setServerError(mappedError);
+        setIsSaveDisabled(true);
+        resetNavigation();
+      }
+      return { success: false, error: mappedError };
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleDeleteVariableWithConfirmation = (0, import_react11.useCallback)(
+    (itemId) => {
+      handleDeleteVariable(itemId);
+      setDeleteConfirmation(null);
+    },
+    [handleDeleteVariable]
+  );
   const menuActions = [
     {
-      name: (0, import_i18n5.__)("Delete", "elementor"),
-      icon: import_icons3.TrashIcon,
+      name: (0, import_i18n9.__)("Delete", "elementor"),
+      icon: import_icons6.TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
-        setDeletedVariables([...deletedVariables, itemId]);
-        setVariables({ ...variables, [itemId]: { ...variables[itemId], deleted: true } });
-        setIsDirty(true);
+        const variable = variables[itemId];
+        if (variable) {
+          setDeleteConfirmation({ id: itemId, label: variable.label });
+          const variableTypeOptions = getVariableType(variable.type);
+          trackVariablesManagerEvent({ action: "delete", varType: variableTypeOptions?.variableType });
+        }
       }
     }
   ];
-  const handleOnChange = (newVariables) => {
-    setVariables(newVariables);
-    setIsDirty(true);
-  };
-  return /* @__PURE__ */ React8.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React8.createElement(import_ui8.ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React8.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React8.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React8.createElement(
-    CloseButton,
+  const hasVariables = Object.values(variables).some((variable) => !variable.deleted);
+  return /* @__PURE__ */ React12.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React12.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React12.createElement(
+    import_editor_panels.PanelHeader,
     {
-      sx: { marginLeft: "auto" },
-      onClose: () => {
-        closePanel();
+      sx: {
+        height: "unset"
       }
-    }
-  )), /* @__PURE__ */ React8.createElement(import_ui8.Divider, { sx: { width: "100%" } }))), /* @__PURE__ */ React8.createElement(
+    },
+    /* @__PURE__ */ React12.createElement(import_ui12.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React12.createElement(import_ui12.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React12.createElement(import_ui12.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React12.createElement(import_icons6.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n9.__)("Variables Manager", "elementor"))), /* @__PURE__ */ React12.createElement(import_ui12.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React12.createElement(
+      VariableManagerCreateMenu,
+      {
+        onCreate: handleCreateVariable,
+        variables,
+        menuState: createMenuState
+      }
+    ), /* @__PURE__ */ React12.createElement(
+      import_ui12.CloseButton,
+      {
+        "aria-label": "Close",
+        slotProps: { icon: { fontSize: SIZE } },
+        onClick: () => {
+          handleClosePanel();
+        }
+      }
+    ))), /* @__PURE__ */ React12.createElement(import_ui12.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(
+      import_editor_ui3.SearchField,
+      {
+        sx: {
+          display: "flex",
+          flex: 1
+        },
+        placeholder: (0, import_i18n9.__)("Search", "elementor"),
+        value: searchValue,
+        onSearch: handleSearch
+      }
+    )), /* @__PURE__ */ React12.createElement(import_ui12.Divider, { sx: { width: "100%" } }))
+  ), /* @__PURE__ */ React12.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -1032,20 +1816,116 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React8.createElement(
+    hasVariables && /* @__PURE__ */ React12.createElement(
       VariablesManagerTable,
       {
         menuActions,
         variables,
-        onChange: handleOnChange
+        onChange: handleOnChange,
+        autoEditVariableId,
+        onAutoEditComplete: handleAutoEditComplete,
+        onFieldError: setIsSaveDisabled
+      }
+    ),
+    !hasVariables && searchValue && /* @__PURE__ */ React12.createElement(
+      NoSearchResults,
+      {
+        searchValue,
+        onClear: () => handleSearch(""),
+        icon: /* @__PURE__ */ React12.createElement(import_icons6.ColorFilterIcon, { fontSize: "large" })
+      }
+    ),
+    !hasVariables && !searchValue && /* @__PURE__ */ React12.createElement(
+      EmptyState,
+      {
+        title: (0, import_i18n9.__)("Create your first variable", "elementor"),
+        message: (0, import_i18n9.__)(
+          "Variables are saved attributes that you can apply anywhere on your site.",
+          "elementor"
+        ),
+        icon: /* @__PURE__ */ React12.createElement(import_icons6.ColorFilterIcon, { fontSize: "large" }),
+        onAdd: createMenuState.open
+      }
+    )
+  ), /* @__PURE__ */ React12.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React12.createElement(
+    import_ui12.Infotip,
+    {
+      placement: "right",
+      open: !!serverError,
+      content: serverError ? /* @__PURE__ */ React12.createElement(
+        import_ui12.Alert,
+        {
+          severity: serverError.severity ?? "error",
+          action: serverError.action?.label ? /* @__PURE__ */ React12.createElement(import_ui12.AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
+          onClose: !serverError.action?.label ? () => {
+            setServerError(null);
+            setIsSaveDisabled(false);
+          } : void 0,
+          icon: serverError.IconComponent ? /* @__PURE__ */ React12.createElement(serverError.IconComponent, null) : /* @__PURE__ */ React12.createElement(import_icons6.AlertTriangleFilledIcon, null)
+        },
+        /* @__PURE__ */ React12.createElement(import_ui12.AlertTitle, null, serverError.message),
+        serverError.action?.message
+      ) : null,
+      arrow: false,
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [-10, 10] }
+            }
+          ]
+        }
       }
+    },
+    /* @__PURE__ */ React12.createElement(
+      import_ui12.Button,
+      {
+        fullWidth: true,
+        size: "small",
+        color: "global",
+        variant: "contained",
+        disabled: isSaveDisabled || !isDirty || isSaving,
+        onClick: handleSaveClick,
+        loading: isSaving
+      },
+      (0, import_i18n9.__)("Save changes", "elementor")
     )
-  ), /* @__PURE__ */ React8.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React8.createElement(import_ui8.Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, (0, import_i18n5.__)("Save changes", "elementor"))))));
+  ))), deleteConfirmation && /* @__PURE__ */ React12.createElement(
+    DeleteConfirmationDialog,
+    {
+      open: true,
+      label: deleteConfirmation.label,
+      onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
+      closeDialog: () => setDeleteConfirmation(null)
+    }
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog, null, /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n9.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog.Content, null, /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog.ContentText, null, (0, import_i18n9.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React12.createElement(
+    import_editor_ui3.SaveChangesDialog.Actions,
+    {
+      actions: {
+        discard: {
+          label: (0, import_i18n9.__)("Discard", "elementor"),
+          action: () => {
+            closeSaveChangesDialog();
+            closePanel();
+          }
+        },
+        confirm: {
+          label: (0, import_i18n9.__)("Save", "elementor"),
+          action: async () => {
+            const result = await handleSaveClick();
+            closeSaveChangesDialog();
+            if (result?.success) {
+              closePanel();
+            }
+          }
+        }
+      }
+    }
+  )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React8.createElement(import_ui8.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React8.createElement(import_icons3.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(import_ui8.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(import_ui8.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
 var usePreventUnload = (isDirty) => {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -1059,21 +1939,21 @@ var usePreventUnload = (isDirty) => {
 };
 
 // src/controls/variable-control.tsx
-var React32 = __toESM(require("react"));
+var React31 = __toESM(require("react"));
 var import_editor_controls11 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
-var import_react14 = require("react");
-var React21 = __toESM(require("react"));
+var import_react18 = require("react");
+var React22 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
-var import_icons11 = require("@elementor/icons");
-var import_ui21 = require("@elementor/ui");
+var import_icons13 = require("@elementor/icons");
+var import_ui22 = require("@elementor/ui");
 
 // src/utils/unlink-variable.ts
 function transformValueBeforeUnlink(variable, propTypeKey) {
   const { valueTransformer } = getVariableType(propTypeKey);
   if (valueTransformer) {
-    return valueTransformer(variable.value);
+    return valueTransformer(variable);
   }
   return variable.value;
 }
@@ -1086,96 +1966,92 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 }
 
 // src/components/variable-selection-popover.tsx
-var React19 = __toESM(require("react"));
-var import_react13 = require("react");
+var React20 = __toESM(require("react"));
+var import_react17 = require("react");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
 // src/context/variable-selection-popover.context.tsx
-var React9 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_ui9 = require("@elementor/ui");
-var PopoverContentRefContext = (0, import_react8.createContext)(null);
+var React13 = __toESM(require("react"));
+var import_react12 = require("react");
+var import_ui13 = require("@elementor/ui");
+var PopoverContentRefContext = (0, import_react12.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = (0, import_react8.useState)(null);
-  return /* @__PURE__ */ React9.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React9.createElement(import_ui9.Box, { ref: setAnchorRef }, children));
+  const [anchorRef, setAnchorRef] = (0, import_react12.useState)(null);
+  return /* @__PURE__ */ React13.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React13.createElement(import_ui13.Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
-  return (0, import_react8.useContext)(PopoverContentRefContext);
-};
-
-// src/hooks/use-permissions.ts
-var import_editor_current_user = require("@elementor/editor-current-user");
-var usePermissions = () => {
-  const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
-  return {
-    canAssign: () => canUser("edit_posts"),
-    canUnlink: () => canUser("edit_posts"),
-    canAdd: () => canUser("manage_options"),
-    canDelete: () => canUser("manage_options"),
-    canEdit: () => canUser("manage_options"),
-    canRestore: () => canUser("manage_options"),
-    canManageSettings: () => canUser("manage_options")
-  };
+  return (0, import_react12.useContext)(PopoverContentRefContext);
 };
 
 // src/components/variable-creation.tsx
-var React11 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_editor_controls3 = require("@elementor/editor-controls");
+var React15 = __toESM(require("react"));
+var import_react13 = require("react");
+var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_icons4 = require("@elementor/icons");
-var import_ui11 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_icons7 = require("@elementor/icons");
+var import_ui15 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/hooks/use-initial-value.ts
 var import_editor_controls2 = require("@elementor/editor-controls");
 var useInitialValue = () => {
   const { value: initial } = (0, import_editor_controls2.useBoundProp)();
-  const hasAssignedVariable2 = hasVariableType(initial?.$$type) && Boolean(initial?.value);
-  const variable = useVariable(hasAssignedVariable2 ? initial.value : "");
-  if (hasAssignedVariable2) {
+  const hasAssignedVariable = hasVariableType(initial?.$$type) && Boolean(initial?.value);
+  const variable = useVariable(hasAssignedVariable ? initial.value : "");
+  if (hasAssignedVariable) {
     return variable ? variable.value : "";
   }
   return initial?.value ?? "";
 };
 
-// src/utils/tracking.ts
-var trackVariableEvent = ({ varType, controlPath, action }) => {
-  const extendedWindow = window;
-  const config = extendedWindow?.elementorCommon?.eventsManager?.config;
-  if (!config?.names?.variables?.[action]) {
-    return;
+// src/hooks/use-variable-bound-prop.ts
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_props3 = require("@elementor/editor-props");
+var useVariableBoundProp = () => {
+  const { propTypeUtil } = useVariableType();
+  const boundProp = (0, import_editor_controls3.useBoundProp)(propTypeUtil);
+  return {
+    ...boundProp,
+    setVariableValue: (value) => resolveBoundPropAndSetValue(value, boundProp),
+    variableId: boundProp.value ?? boundProp.placeholder
+  };
+};
+var resolveBoundPropAndSetValue = (value, boundProp) => {
+  const propValue = unwrapValue(boundProp.value);
+  const placeholder = unwrapValue(boundProp.placeholder);
+  const newValue = unwrapValue(value);
+  if (!propValue && placeholder === newValue) {
+    return boundProp.setValue(null);
   }
-  const name = config.names.variables[action];
-  extendedWindow.elementorCommon?.eventsManager?.dispatchEvent(name, {
-    location: config.locations.variables,
-    secondaryLocation: config.secondaryLocations.variablesPopover,
-    trigger: config.triggers.click,
-    var_type: varType,
-    control_path: controlPath,
-    action_type: name
-  });
+  return boundProp.setValue(value);
+};
+var unwrapValue = (input) => {
+  if ((0, import_editor_props3.isTransformable)(input)) {
+    return input.value;
+  }
+  return input;
 };
 
 // src/components/ui/form-field.tsx
-var React10 = __toESM(require("react"));
-var import_ui10 = require("@elementor/ui");
+var React14 = __toESM(require("react"));
+var import_ui14 = require("@elementor/ui");
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React10.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui10.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React10.createElement(import_ui10.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React10.createElement(import_ui10.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React10.createElement(import_ui10.FormHelperText, null, noticeMsg)));
+  return /* @__PURE__ */ React14.createElement(import_ui14.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React14.createElement(import_ui14.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React14.createElement(import_ui14.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React14.createElement(import_ui14.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React14.createElement(import_ui14.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React14.createElement(import_ui14.FormHelperText, null, noticeMsg)));
 };
 
 // src/components/variable-creation.tsx
-var SIZE = "tiny";
+var SIZE2 = "tiny";
 var VariableCreation = ({ onGoBack, onClose }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: setVariable, path } = (0, import_editor_controls3.useBoundProp)(propTypeUtil);
-  const { propType } = (0, import_editor_controls3.useBoundProp)();
+  const { setVariableValue: setVariable, path } = useVariableBoundProp();
+  const { propType } = (0, import_editor_controls4.useBoundProp)();
   const initialValue = useInitialValue();
-  const [value, setValue] = (0, import_react9.useState)(initialValue);
-  const [label, setLabel] = (0, import_react9.useState)("");
-  const [errorMessage, setErrorMessage] = (0, import_react9.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react9.useState)("");
+  const [value, setValue] = (0, import_react13.useState)(initialValue);
+  const [label, setLabel] = (0, import_react13.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react13.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react13.useState)("");
+  const [propTypeKey, setPropTypeKey] = (0, import_react13.useState)(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -1191,7 +2067,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     createVariable({
       value,
       label,
-      type: propTypeUtil.key
+      type: propTypeKey
     }).then((key) => {
       setVariable(key);
       closePopover();
@@ -1226,22 +2102,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React11.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React11.createElement(
-    import_editor_ui3.PopoverHeader,
+  return /* @__PURE__ */ React15.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React15.createElement(
+    import_editor_ui4.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(import_ui11.IconButton, { size: SIZE, "aria-label": (0, import_i18n6.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(import_icons4.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React11.createElement(VariableIcon, { fontSize: SIZE })),
-      title: (0, import_i18n6.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(import_ui15.IconButton, { size: SIZE2, "aria-label": (0, import_i18n10.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React15.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE2 })),
+      title: (0, import_i18n10.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React11.createElement(import_ui11.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React15.createElement(import_ui15.Divider, null), /* @__PURE__ */ React15.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React15.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n6.__)("Name", "elementor"),
+      label: (0, import_i18n10.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React15.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -1259,10 +2135,11 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React11.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n6.__)("Value", "elementor") }, /* @__PURE__ */ React11.createElement(import_ui11.Typography, { variant: "h5" }, /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n10.__)("Value", "elementor") }, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React15.createElement(
     ValueField,
     {
       value,
+      onPropTypeKeyChange: (key) => setPropTypeKey(key),
       onChange: (newValue) => {
         setValue(newValue);
         setErrorMessage("");
@@ -1271,93 +2148,89 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React11.createElement(import_ui11.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React11.createElement(import_ui11.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(import_ui11.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n6.__)("Create", "elementor"))));
+  ))), errorMessage && /* @__PURE__ */ React15.createElement(import_ui15.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React15.createElement(import_ui15.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React15.createElement(
+    import_ui15.Button,
+    {
+      id: "create-variable-button",
+      size: "small",
+      variant: "contained",
+      disabled: isSubmitDisabled,
+      onClick: handleCreateAndTrack
+    },
+    (0, import_i18n10.__)("Create", "elementor")
+  )));
 };
 
 // src/components/variable-edit.tsx
-var React14 = __toESM(require("react"));
-var import_react11 = require("react");
-var import_editor_controls4 = require("@elementor/editor-controls");
+var React17 = __toESM(require("react"));
+var import_react15 = require("react");
+var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_editor_ui4 = require("@elementor/editor-ui");
-var import_icons7 = require("@elementor/icons");
-var import_ui14 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
-
-// src/components/ui/delete-confirmation-dialog.tsx
-var React12 = __toESM(require("react"));
-var import_icons5 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
-var TITLE_ID = "delete-variable-dialog";
-var DeleteConfirmationDialog = ({
-  open,
-  label,
-  closeDialog,
-  onConfirm
-}) => {
-  return /* @__PURE__ */ React12.createElement(import_ui12.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React12.createElement(import_ui12.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React12.createElement(import_icons5.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n7.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.DialogContent, null, /* @__PURE__ */ React12.createElement(import_ui12.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n7.__)("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React12.createElement(import_ui12.Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", (0, import_i18n7.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React12.createElement(import_ui12.DialogActions, null, /* @__PURE__ */ React12.createElement(import_ui12.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n7.__)("Not now", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n7.__)("Delete", "elementor"))));
-};
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_icons9 = require("@elementor/icons");
+var import_ui17 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/ui/edit-confirmation-dialog.tsx
-var React13 = __toESM(require("react"));
-var import_react10 = require("react");
-var import_icons6 = require("@elementor/icons");
-var import_ui13 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var React16 = __toESM(require("react"));
+var import_react14 = require("react");
+var import_icons8 = require("@elementor/icons");
+var import_ui16 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react10.useState)(false);
+  const [dontShowAgain, setDontShowAgain] = (0, import_react14.useState)(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React13.createElement(import_ui13.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(import_ui13.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React13.createElement(import_icons6.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n8.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React13.createElement(import_ui13.DialogContent, null, /* @__PURE__ */ React13.createElement(import_ui13.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n8.__)(
+  return /* @__PURE__ */ React16.createElement(import_ui16.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React16.createElement(import_ui16.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(import_icons8.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n11.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React16.createElement(import_ui16.DialogContent, null, /* @__PURE__ */ React16.createElement(import_ui16.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n11.__)(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React13.createElement(import_ui13.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React13.createElement(
-    import_ui13.FormControlLabel,
+  ))), /* @__PURE__ */ React16.createElement(import_ui16.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React16.createElement(
+    import_ui16.FormControlLabel,
     {
-      control: /* @__PURE__ */ React13.createElement(
-        import_ui13.Checkbox,
+      control: /* @__PURE__ */ React16.createElement(
+        import_ui16.Checkbox,
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "body2" }, (0, import_i18n8.__)("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React16.createElement(import_ui16.Typography, { variant: "body2" }, (0, import_i18n11.__)("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(import_ui13.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n8.__)("Keep editing", "elementor")), /* @__PURE__ */ React13.createElement(import_ui13.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n8.__)("Save", "elementor")))));
+  ), /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement(import_ui16.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n11.__)("Keep editing", "elementor")), /* @__PURE__ */ React16.createElement(import_ui16.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n11.__)("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
-var SIZE2 = "tiny";
+var SIZE3 = "tiny";
+var DELETE_LABEL = (0, import_i18n12.__)("Delete variable", "elementor");
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
-  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: notifyBoundPropChange, value: assignedValue } = (0, import_editor_controls4.useBoundProp)(propTypeUtil);
-  const { propType } = (0, import_editor_controls4.useBoundProp)();
+  const { icon: VariableIcon, valueField: ValueField, variableType } = 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_react11.useState)(false);
-  const [editConfirmation, setEditConfirmation] = (0, import_react11.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, import_react11.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react11.useState)("");
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react15.useState)(false);
+  const [editConfirmation, setEditConfirmation] = (0, import_react15.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react15.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react15.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = (0, import_react11.useState)(() => variable.value);
-  const [label, setLabel] = (0, import_react11.useState)(() => variable.label);
-  (0, import_react11.useEffect)(() => {
+  const [value, setValue] = (0, import_react15.useState)(() => variable.value);
+  const [label, setLabel] = (0, import_react15.useState)(() => variable.label);
+  (0, import_react15.useEffect)(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -1404,7 +2277,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     });
   };
   const maybeTriggerBoundPropChange = () => {
-    if (editId === assignedValue) {
+    if (editId === variableId) {
       notifyBoundPropChange(editId);
     }
   };
@@ -1420,16 +2293,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React14.createElement(
-        import_ui14.IconButton,
-        {
-          key: "delete",
-          size: SIZE2,
-          "aria-label": (0, import_i18n9.__)("Delete", "elementor"),
-          onClick: handleDeleteConfirmation
-        },
-        /* @__PURE__ */ React14.createElement(import_icons7.TrashIcon, { fontSize: SIZE2 })
-      )
+      /* @__PURE__ */ React17.createElement(import_ui17.Tooltip, { key: "delete", placement: "top", title: DELETE_LABEL }, /* @__PURE__ */ React17.createElement(import_ui17.IconButton, { size: SIZE3, onClick: handleDeleteConfirmation, "aria-label": DELETE_LABEL }, /* @__PURE__ */ React17.createElement(import_icons9.TrashIcon, { fontSize: SIZE3 })))
     );
   }
   const hasEmptyFields = () => {
@@ -1448,31 +2312,31 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React14.createElement(
-    import_editor_ui4.PopoverHeader,
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React17.createElement(
+    import_editor_ui5.PopoverHeader,
     {
-      title: (0, import_i18n9.__)("Edit variable", "elementor"),
+      title: (0, import_i18n12.__)("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React14.createElement(React14.Fragment, null, onGoBack && /* @__PURE__ */ React14.createElement(
-        import_ui14.IconButton,
+      icon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, onGoBack && /* @__PURE__ */ React17.createElement(
+        import_ui17.IconButton,
         {
-          size: SIZE2,
-          "aria-label": (0, import_i18n9.__)("Go Back", "elementor"),
+          size: SIZE3,
+          "aria-label": (0, import_i18n12.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React14.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE2 })
-      ), /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: SIZE2 })),
+        /* @__PURE__ */ React17.createElement(import_icons9.ArrowLeftIcon, { fontSize: SIZE3 })
+      ), /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE3 })),
       actions
     }
-  ), /* @__PURE__ */ React14.createElement(import_ui14.Divider, null), /* @__PURE__ */ React14.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React17.createElement(import_ui17.Divider, null), /* @__PURE__ */ React17.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React17.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n9.__)("Name", "elementor"),
+      label: (0, import_i18n12.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React17.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -1490,9 +2354,10 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React14.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n9.__)("Value", "elementor") }, /* @__PURE__ */ React14.createElement(import_ui14.Typography, { variant: "h5" }, /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n12.__)("Value", "elementor") }, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { variant: "h5" }, /* @__PURE__ */ React17.createElement(
     ValueField,
     {
+      propTypeKey: variable.type,
       value,
       onChange: (newValue) => {
         setValue(newValue);
@@ -1502,7 +2367,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React14.createElement(import_ui14.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React14.createElement(import_ui14.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React14.createElement(import_ui14.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n9.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
+  ))), 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, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n12.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React17.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1510,7 +2375,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React14.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React17.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -1521,135 +2386,74 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-var React18 = __toESM(require("react"));
-var import_react12 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
+var React19 = __toESM(require("react"));
+var import_react16 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
-var import_editor_ui6 = require("@elementor/editor-ui");
-var import_icons9 = require("@elementor/icons");
-var import_ui19 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_editor_ui7 = require("@elementor/editor-ui");
+var import_icons11 = require("@elementor/icons");
+var import_ui20 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
-var React15 = __toESM(require("react"));
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_icons8 = require("@elementor/icons");
-var import_ui15 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
-var SIZE3 = "tiny";
-var MenuItemContent = ({ item }) => {
-  const onEdit = item.onEdit;
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_ui15.ListItemIcon, null, item.icon), /* @__PURE__ */ React15.createElement(
-    import_ui15.Box,
-    {
-      sx: {
-        flex: 1,
-        minWidth: 0,
-        display: "flex",
-        alignItems: "center",
-        gap: 1
-      }
-    },
-    /* @__PURE__ */ React15.createElement(
-      import_editor_ui5.EllipsisWithTooltip,
-      {
-        title: item.label || item.value,
-        as: import_ui15.Typography,
-        variant: "caption",
-        color: "text.primary",
-        sx: { marginTop: "1px", lineHeight: "2" },
-        maxWidth: "50%"
-      }
-    ),
-    item.secondaryText && /* @__PURE__ */ React15.createElement(
-      import_editor_ui5.EllipsisWithTooltip,
-      {
-        title: item.secondaryText,
-        as: import_ui15.Typography,
-        variant: "caption",
-        color: "text.tertiary",
-        sx: { marginTop: "1px", lineHeight: "1" },
-        maxWidth: "50%"
-      }
-    )
-  ), !!onEdit && /* @__PURE__ */ React15.createElement(
-    import_ui15.IconButton,
-    {
-      sx: { mx: 1, opacity: "0" },
-      onClick: (e) => {
-        e.stopPropagation();
-        onEdit(item.value);
-      },
-      "aria-label": (0, import_i18n10.__)("Edit", "elementor")
-    },
-    /* @__PURE__ */ React15.createElement(import_icons8.EditIcon, { color: "action", fontSize: SIZE3 })
-  ));
-};
-
-// src/components/ui/no-search-results.tsx
-var React16 = __toESM(require("react"));
-var import_ui16 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
-var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React16.createElement(
-    import_ui16.Stack,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      p: 2.5,
-      color: "text.secondary",
-      sx: { pb: 3.5 }
-    },
-    icon,
-    /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React16.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n11.__)("Try something else.", "elementor"), /* @__PURE__ */ React16.createElement(import_ui16.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
-  );
-};
-
-// src/components/ui/no-variables.tsx
-var React17 = __toESM(require("react"));
-var import_ui17 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
-var NoVariables = ({ icon, title, onAdd }) => {
-  const canAdd = usePermissions().canAdd();
-  return /* @__PURE__ */ React17.createElement(
-    import_ui17.Stack,
+var React18 = __toESM(require("react"));
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_icons10 = require("@elementor/icons");
+var import_ui18 = require("@elementor/ui");
+var import_i18n13 = require("@wordpress/i18n");
+var SIZE4 = "tiny";
+var EDIT_LABEL = (0, import_i18n13.__)("Edit variable", "elementor");
+var MenuItemContent = ({ item }) => {
+  const onEdit = item.onEdit;
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(import_ui18.ListItemIcon, null, item.icon), /* @__PURE__ */ React18.createElement(
+    import_ui18.Box,
     {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      color: "text.secondary",
-      sx: { p: 2.5, pb: 5.5 }
+      sx: {
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        alignItems: "center",
+        gap: 1
+      }
     },
-    icon,
-    canAdd ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
-      NoVariablesContent,
+    /* @__PURE__ */ React18.createElement(
+      import_editor_ui6.EllipsisWithTooltip,
       {
-        title: title || (0, import_i18n12.__)("Create your first variable", "elementor"),
-        message: (0, import_i18n12.__)(
-          "Variables are saved attributes that you can apply anywhere on your site.",
-          "elementor"
-        )
+        title: item.label || item.value,
+        as: import_ui18.Typography,
+        variant: "caption",
+        color: "text.primary",
+        sx: { marginTop: "1px", lineHeight: "2" },
+        maxWidth: "50%"
       }
-    ), onAdd && /* @__PURE__ */ React17.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n12.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
-      NoVariablesContent,
+    ),
+    item.secondaryText && /* @__PURE__ */ React18.createElement(
+      import_editor_ui6.EllipsisWithTooltip,
       {
-        title: (0, import_i18n12.__)("There are no variables", "elementor"),
-        message: (0, import_i18n12.__)("With your current role, you can only connect and detach variables.", "elementor")
+        title: item.secondaryText,
+        as: import_ui18.Typography,
+        variant: "caption",
+        color: "text.tertiary",
+        sx: { marginTop: "1px", lineHeight: "1" },
+        maxWidth: "50%"
       }
     )
-  );
+  ), !!onEdit && /* @__PURE__ */ React18.createElement(import_ui18.Tooltip, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React18.createElement(
+    import_ui18.IconButton,
+    {
+      sx: { mx: 1, opacity: "0" },
+      onClick: (e) => {
+        e.stopPropagation();
+        onEdit(item.value);
+      },
+      "aria-label": EDIT_LABEL
+    },
+    /* @__PURE__ */ React18.createElement(import_icons10.EditIcon, { color: "action", fontSize: SIZE4 })
+  )));
 };
-function NoVariablesContent({ title, message }) {
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
-}
 
 // src/components/ui/styled-menu-list.tsx
-var import_ui18 = require("@elementor/ui");
-var VariablesStyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) => ({
+var import_ui19 = require("@elementor/ui");
+var VariablesStyledMenuList = (0, import_ui19.styled)(import_ui19.MenuList)(({ theme }) => ({
   "& > li": {
     height: 32,
     width: "100%",
@@ -1680,15 +2484,18 @@ var VariablesStyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ t
 }));
 
 // src/components/variables-selection.tsx
-var SIZE4 = "tiny";
+var SIZE5 = "tiny";
+var CREATE_LABEL = (0, import_i18n14.__)("Create variable", "elementor");
+var MANAGER_LABEL = (0, import_i18n14.__)("Variables Manager", "elementor");
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
-  const { value: variable, setValue: setVariable, path } = (0, import_editor_controls5.useBoundProp)(propTypeUtil);
-  const [searchValue, setSearchValue] = (0, import_react12.useState)("");
+  const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
+  const [searchValue, setSearchValue] = (0, import_react16.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
-    isSourceNotEmpty: hasVariables
+    isSourceNotEmpty: hasVariables,
+    hasNoCompatibleVariables
   } = useFilteredVariables(searchValue, propTypeUtil.key);
   const handleSetVariable = (key) => {
     setVariable(key);
@@ -1710,20 +2517,46 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React18.createElement(import_ui19.IconButton, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React18.createElement(import_icons9.PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React19.createElement(import_ui20.Tooltip, { key: "add", placement: "top", title: CREATE_LABEL }, /* @__PURE__ */ React19.createElement(
+        import_ui20.IconButton,
+        {
+          id: "add-variable-button",
+          size: SIZE5,
+          onClick: onAddAndTrack,
+          "aria-label": CREATE_LABEL
+        },
+        /* @__PURE__ */ React19.createElement(import_icons11.PlusIcon, { fontSize: SIZE5 })
+      ))
     );
   }
   if (onSettings) {
+    const handleOpenManager = () => {
+      onSettings();
+      trackVariablesManagerEvent({
+        action: "openManager",
+        varType: variableType,
+        controlPath: path.join(".")
+      });
+    };
     actions.push(
-      /* @__PURE__ */ React18.createElement(import_ui19.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React18.createElement(import_icons9.SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React19.createElement(import_ui20.Tooltip, { key: "settings", placement: "top", title: MANAGER_LABEL }, /* @__PURE__ */ React19.createElement(
+        import_ui20.IconButton,
+        {
+          id: "variables-manager-button",
+          size: SIZE5,
+          onClick: handleOpenManager,
+          "aria-label": MANAGER_LABEL
+        },
+        /* @__PURE__ */ React19.createElement(import_icons11.SettingsIcon, { fontSize: SIZE5 })
+      ))
     );
   }
-  const StartIcon = startIcon || (() => /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE4 }));
+  const StartIcon = startIcon || (() => /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: SIZE5 }));
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React18.createElement(StartIcon, { value }),
+    icon: /* @__PURE__ */ React19.createElement(StartIcon, { value }),
     secondaryText: value,
     onEdit: onEdit ? () => onEdit?.(key) : void 0
   }));
@@ -1733,28 +2566,28 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  const noVariableTitle = (0, import_i18n13.sprintf)(
+  const noVariableTitle = (0, import_i18n14.sprintf)(
     /* translators: %s: Variable Type. */
-    (0, import_i18n13.__)("Create your first %s variable", "elementor"),
+    (0, import_i18n14.__)("Create your first %s variable", "elementor"),
     variableType
   );
-  return /* @__PURE__ */ React18.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React18.createElement(
-    import_editor_ui6.PopoverHeader,
+  return /* @__PURE__ */ React19.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React19.createElement(
+    import_editor_ui7.PopoverHeader,
     {
-      title: (0, import_i18n13.__)("Variables", "elementor"),
-      icon: /* @__PURE__ */ React18.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE4 }),
+      title: (0, import_i18n14.__)("Variables", "elementor"),
+      icon: /* @__PURE__ */ React19.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE5 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React18.createElement(
-    import_editor_ui6.PopoverSearch,
+  ), hasVariables && /* @__PURE__ */ React19.createElement(
+    import_editor_ui7.SearchField,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n13.__)("Search", "elementor")
+      placeholder: (0, import_i18n14.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React18.createElement(import_ui19.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React18.createElement(
-    import_editor_ui6.PopoverMenuList,
+  ), /* @__PURE__ */ React19.createElement(import_ui20.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React19.createElement(
+    import_editor_ui7.PopoverMenuList,
     {
       items,
       onSelect: handleSetVariable,
@@ -1763,16 +2596,38 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       selectedValue: variable,
       "data-testid": `${variableType}-variables-list`,
       menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React18.createElement(MenuItemContent, { item })
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React19.createElement(MenuItemContent, { item })
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React18.createElement(
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React19.createElement(
     NoSearchResults,
     {
       searchValue,
       onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" })
+      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" })
+    }
+  ), !hasVariables && !hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
+    EmptyState,
+    {
+      title: noVariableTitle,
+      message: (0, import_i18n14.__)(
+        "Variables are saved attributes that you can apply anywhere on your site.",
+        "elementor"
+      ),
+      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
+      onAdd
+    }
+  ), hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
+    EmptyState,
+    {
+      title: (0, import_i18n14.__)("No compatible variables", "elementor"),
+      message: (0, import_i18n14.__)(
+        "Looks like none of your variables work with this control. Create a new variable to use it here.",
+        "elementor"
+      ),
+      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
+      onAdd
     }
-  ), !hasVariables && /* @__PURE__ */ React18.createElement(NoVariables, { title: noVariableTitle, icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }), onAdd }));
+  ));
 };
 
 // src/components/variable-selection-popover.tsx
@@ -1780,13 +2635,13 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = (0, import_react13.useState)(VIEW_LIST);
-  const [editId, setEditId] = (0, import_react13.useState)("");
+  const [currentView, setCurrentView] = (0, import_react17.useState)(VIEW_LIST);
+  const [editId, setEditId] = (0, import_react17.useState)("");
   const { open } = usePanelActions();
   const onSettingsAvailable = (0, import_editor_v1_adapters2.isExperimentActive)("e_variables_manager") ? () => {
     open();
   } : void 0;
-  return /* @__PURE__ */ React19.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React19.createElement(PopoverContentRefContextProvider, null, RenderView({
+  return /* @__PURE__ */ React20.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React20.createElement(PopoverContentRefContextProvider, null, RenderView({
     propTypeKey,
     currentView,
     selectedVariable,
@@ -1832,7 +2687,7 @@ function RenderView(props) {
     }
   };
   if (VIEW_LIST === props.currentView) {
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       VariablesSelection,
       {
         closePopover: handlers.onClose,
@@ -1843,10 +2698,10 @@ function RenderView(props) {
     );
   }
   if (VIEW_ADD === props.currentView) {
-    return /* @__PURE__ */ React19.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
+    return /* @__PURE__ */ React20.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
   }
   if (VIEW_EDIT === props.currentView) {
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       VariableEdit,
       {
         editId: props.editId,
@@ -1860,25 +2715,26 @@ function RenderView(props) {
 }
 
 // src/components/ui/tags/assigned-tag.tsx
-var React20 = __toESM(require("react"));
-var import_icons10 = require("@elementor/icons");
-var import_ui20 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
-var SIZE5 = "tiny";
+var React21 = __toESM(require("react"));
+var import_icons12 = require("@elementor/icons");
+var import_ui21 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
+var SIZE6 = "tiny";
+var UNLINK_LABEL = (0, import_i18n15.__)("Unlink variable", "elementor");
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React20.createElement(import_ui20.IconButton, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": (0, import_i18n14.__)("Unlink", "elementor") }, /* @__PURE__ */ React20.createElement(import_icons10.DetachIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React21.createElement(import_ui21.Tooltip, { key: "unlink", title: UNLINK_LABEL, placement: "bottom" }, /* @__PURE__ */ React21.createElement(import_ui21.IconButton, { size: SIZE6, onClick: onUnlink, "aria-label": UNLINK_LABEL }, /* @__PURE__ */ React21.createElement(import_icons12.DetachIcon, { fontSize: SIZE6 })))
     );
   }
-  return /* @__PURE__ */ React20.createElement(import_ui20.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React20.createElement(
-    import_ui20.UnstableTag,
+  return /* @__PURE__ */ React21.createElement(import_ui21.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React21.createElement(
+    import_ui21.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React20.createElement(import_ui20.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React20.createElement(import_ui20.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React20.createElement(import_ui20.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      startIcon: /* @__PURE__ */ React21.createElement(import_ui21.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React21.createElement(import_ui21.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React21.createElement(import_ui21.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -1889,24 +2745,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_react14.useRef)(null);
-  const popupId = (0, import_react14.useId)();
-  const popupState = (0, import_ui21.usePopupState)({
+  const anchorRef = (0, import_react18.useRef)(null);
+  const popupId = (0, import_react18.useId)();
+  const popupState = (0, import_ui22.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React21.createElement(import_ui21.Box, { ref: anchorRef }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(import_ui22.Box, { ref: anchorRef }, /* @__PURE__ */ React22.createElement(
     AssignedTag,
     {
       label: variable.label,
-      startIcon: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE5 }), /* @__PURE__ */ React21.createElement(StartIcon, { value: variable.value })),
+      startIcon: /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_icons13.ColorFilterIcon, { fontSize: SIZE6 }), /* @__PURE__ */ React22.createElement(StartIcon, { value: variable.value })),
       onUnlink: unlinkVariable,
-      ...(0, import_ui21.bindTrigger)(popupState)
+      ...(0, import_ui22.bindTrigger)(popupState)
     }
-  ), /* @__PURE__ */ React21.createElement(
-    import_ui21.Popover,
+  ), /* @__PURE__ */ React22.createElement(
+    import_ui22.Popover,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
@@ -1915,9 +2771,9 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui21.bindPopover)(popupState)
+      ...(0, import_ui22.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React22.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -1929,32 +2785,33 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/deleted-variable.tsx
-var React25 = __toESM(require("react"));
-var import_react16 = require("react");
+var React26 = __toESM(require("react"));
+var import_react20 = require("react");
 var import_editor_controls8 = require("@elementor/editor-controls");
-var import_ui25 = require("@elementor/ui");
+var import_ui26 = require("@elementor/ui");
+var import_i18n18 = require("@wordpress/i18n");
 
 // src/components/variable-restore.tsx
-var React22 = __toESM(require("react"));
-var import_react15 = require("react");
+var React23 = __toESM(require("react"));
+var import_react19 = require("react");
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
-var import_editor_ui7 = require("@elementor/editor-ui");
-var import_ui22 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
-var SIZE6 = "tiny";
+var import_editor_ui8 = require("@elementor/editor-ui");
+var import_ui23 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
+var SIZE7 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
-  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: notifyBoundPropChange } = (0, import_editor_controls7.useBoundProp)(propTypeUtil);
+  const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
+  const { setVariableValue: notifyBoundPropChange } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls7.useBoundProp)();
   const variable = useVariable(variableId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = (0, import_react15.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react15.useState)("");
-  const [label, setLabel] = (0, import_react15.useState)(variable.label);
-  const [value, setValue] = (0, import_react15.useState)(variable.value);
+  const [errorMessage, setErrorMessage] = (0, import_react19.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react19.useState)("");
+  const [label, setLabel] = (0, import_react19.useState)(variable.label);
+  const [value, setValue] = (0, import_react19.useState)(variable.value);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -1992,22 +2849,22 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React22.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React22.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React22.createElement(
-    import_editor_ui7.PopoverHeader,
+  return /* @__PURE__ */ React23.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React23.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React23.createElement(
+    import_editor_ui8.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: SIZE6 }),
-      title: (0, import_i18n15.__)("Restore variable", "elementor"),
+      icon: /* @__PURE__ */ React23.createElement(VariableIcon, { fontSize: SIZE7 }),
+      title: (0, import_i18n16.__)("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React22.createElement(import_ui22.Divider, null), /* @__PURE__ */ React22.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(import_ui23.Divider, null), /* @__PURE__ */ React23.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React23.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n15.__)("Name", "elementor"),
+      label: (0, import_i18n16.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React23.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -2025,7 +2882,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React22.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n15.__)("Value", "elementor") }, /* @__PURE__ */ React22.createElement(import_ui22.Typography, { variant: "h5" }, /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n16.__)("Value", "elementor") }, /* @__PURE__ */ React23.createElement(import_ui23.Typography, { variant: "h5" }, /* @__PURE__ */ React23.createElement(
     ValueField,
     {
       value,
@@ -2037,91 +2894,87 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React22.createElement(import_ui22.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React22.createElement(import_ui22.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React22.createElement(import_ui22.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n15.__)("Restore", "elementor")))));
+  ))), errorMessage && /* @__PURE__ */ React23.createElement(import_ui23.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React23.createElement(import_ui23.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React23.createElement(import_ui23.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n16.__)("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
-var React23 = __toESM(require("react"));
-var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
-var import_ui23 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var React24 = __toESM(require("react"));
+var import_ui24 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
-  const sectionWidth = (0, import_editor_editing_panel6.useSectionWidth)();
-  return /* @__PURE__ */ React23.createElement(import_ui23.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React23.createElement(
-    import_ui23.Alert,
+  return /* @__PURE__ */ React24.createElement(import_ui24.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React24.createElement(
+    import_ui24.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React23.createElement(React23.Fragment, null, onUnlink && /* @__PURE__ */ React23.createElement(import_ui23.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n16.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React23.createElement(import_ui23.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n16.__)("Restore", "elementor"))),
-      sx: { width: sectionWidth }
+      action: /* @__PURE__ */ React24.createElement(React24.Fragment, null, onUnlink && /* @__PURE__ */ React24.createElement(import_ui24.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n17.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React24.createElement(import_ui24.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n17.__)("Restore", "elementor"))),
+      sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React23.createElement(import_ui23.AlertTitle, null, (0, import_i18n16.__)("Deleted variable", "elementor")),
-    (0, import_i18n16.__)("The variable", "elementor"),
-    " '",
-    label,
-    "'",
-    " ",
-    (0, import_i18n16.__)(
+    /* @__PURE__ */ React24.createElement(import_ui24.AlertTitle, null, (0, import_i18n17.__)("Deleted variable", "elementor")),
+    /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n17.__)("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", (0, import_i18n17.__)(
       "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"
-    )
+    ))
   ));
 };
 
-// src/components/ui/tags/deleted-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 DeletedTag = React24.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React24.createElement(
-    import_ui24.Chip,
-    {
-      ref,
-      size: "tiny",
-      color: "warning",
-      shape: "rounded",
-      variant: "standard",
-      onClick,
-      icon: /* @__PURE__ */ React24.createElement(import_icons12.AlertTriangleFilledIcon, null),
-      label: /* @__PURE__ */ React24.createElement(import_ui24.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(import_ui24.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n17.__)("deleted", "elementor"), ")"))),
-      sx: {
-        height: (theme) => theme.spacing(3.5),
-        borderRadius: (theme) => theme.spacing(1),
-        justifyContent: "flex-start",
-        width: "100%"
-      },
-      ...props
-    }
-  );
-});
+// src/components/ui/tags/warning-variable-tag.tsx
+var React25 = __toESM(require("react"));
+var import_icons14 = require("@elementor/icons");
+var import_ui25 = require("@elementor/ui");
+var WarningVariableTag = React25.forwardRef(
+  ({ label, suffix, onClick, icon, ...props }, ref) => {
+    const displayText = suffix ? `${label} (${suffix})` : label;
+    return /* @__PURE__ */ React25.createElement(
+      import_ui25.Chip,
+      {
+        ref,
+        size: "tiny",
+        color: "warning",
+        shape: "rounded",
+        variant: "standard",
+        onClick,
+        icon: /* @__PURE__ */ React25.createElement(import_icons14.AlertTriangleFilledIcon, null),
+        label: /* @__PURE__ */ React25.createElement(import_ui25.Tooltip, { title: displayText, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui25.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React25.createElement(import_ui25.Typography, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
+        sx: {
+          height: (theme) => theme.spacing(3.5),
+          borderRadius: (theme) => theme.spacing(1),
+          justifyContent: "flex-start",
+          width: "100%"
+        },
+        ...props
+      }
+    );
+  }
+);
+WarningVariableTag.displayName = "WarningVariableTag";
 
 // src/components/ui/variable/deleted-variable.tsx
 var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
-  const { setValue } = (0, import_editor_controls8.useBoundProp)();
+  const boundProp = (0, import_editor_controls8.useBoundProp)();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = (0, import_react16.useState)(false);
+  const [showInfotip, setShowInfotip] = (0, import_react20.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = (0, import_react16.useRef)(null);
-  const popupId = (0, import_react16.useId)();
-  const popupState = (0, import_ui25.usePopupState)({
+  const deletedChipAnchorRef = (0, import_react20.useRef)(null);
+  const popupId = (0, import_react20.useId)();
+  const popupState = (0, import_ui26.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
   });
   const handlers = {};
   if (userPermissions.canUnlink()) {
-    handlers.onUnlink = createUnlinkHandler(variable, propTypeKey, setValue);
+    handlers.onUnlink = createUnlinkHandler(variable, propTypeKey, boundProp.setValue);
   }
   if (userPermissions.canRestore()) {
     handlers.onRestore = () => {
       if (!variable.key) {
         return;
       }
-      restoreVariable(variable.key).then((key) => {
-        setValue(propTypeUtil.create(key));
+      restoreVariable(variable.key).then((id2) => {
+        resolveBoundPropAndSetValue(propTypeUtil.create(id2), boundProp);
         closeInfotip();
       }).catch(() => {
         closeInfotip();
@@ -2133,15 +2986,15 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_ui25.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React25.createElement(import_ui25.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React25.createElement(
-    import_ui25.Infotip,
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(import_ui26.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React26.createElement(import_ui26.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React26.createElement(
+    import_ui26.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: showInfotip,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React25.createElement(
+      content: /* @__PURE__ */ React26.createElement(
         DeletedVariableAlert,
         {
           onClose: closeInfotip,
@@ -2161,9 +3014,16 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
         }
       }
     },
-    /* @__PURE__ */ React25.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
-  ), /* @__PURE__ */ React25.createElement(
-    import_ui25.Popover,
+    /* @__PURE__ */ React26.createElement(
+      WarningVariableTag,
+      {
+        label: variable.label,
+        onClick: toggleInfotip,
+        suffix: (0, import_i18n18.__)("deleted", "elementor")
+      }
+    )
+  ), /* @__PURE__ */ React26.createElement(
+    import_ui26.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
@@ -2171,9 +3031,9 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui25.bindPopover)(popupState)
+      ...(0, import_ui26.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React25.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React26.createElement(
       VariableRestore,
       {
         variableId: variable.key ?? "",
@@ -2186,83 +3046,51 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 var React28 = __toESM(require("react"));
-var import_react17 = require("react");
+var import_react21 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
 var import_ui28 = require("@elementor/ui");
+var import_i18n20 = require("@wordpress/i18n");
 
 // src/components/ui/mismatch-variable-alert.tsx
-var React26 = __toESM(require("react"));
-var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
-var import_ui26 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
+var React27 = __toESM(require("react"));
+var import_ui27 = require("@elementor/ui");
+var import_i18n19 = require("@wordpress/i18n");
 var i18n = {
-  title: (0, import_i18n18.__)("Variable has changed", "elementor"),
-  message: (0, import_i18n18.__)(
+  title: (0, import_i18n19.__)("Variable has changed", "elementor"),
+  message: (0, import_i18n19.__)(
     `This variable is no longer compatible with this property. You can clear it or select a different one.`,
     "elementor"
   ),
   buttons: {
-    clear: (0, import_i18n18.__)("Clear", "elementor"),
-    select: (0, import_i18n18.__)("Select variable", "elementor")
+    clear: (0, import_i18n19.__)("Clear", "elementor"),
+    select: (0, import_i18n19.__)("Select variable", "elementor")
   }
 };
 var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
-  const sectionWidth = (0, import_editor_editing_panel7.useSectionWidth)();
-  return /* @__PURE__ */ React26.createElement(import_ui26.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React26.createElement(
-    import_ui26.Alert,
+  return /* @__PURE__ */ React27.createElement(import_ui27.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React27.createElement(
+    import_ui27.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onClear && /* @__PURE__ */ React26.createElement(import_ui26.AlertAction, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React26.createElement(import_ui26.AlertAction, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
-      sx: {
-        width: sectionWidth,
-        minWidth: 300
-      }
+      action: /* @__PURE__ */ React27.createElement(React27.Fragment, null, onClear && /* @__PURE__ */ React27.createElement(import_ui27.AlertAction, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React27.createElement(import_ui27.AlertAction, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
+      sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React26.createElement(import_ui26.AlertTitle, null, i18n.title),
-    i18n.message
+    /* @__PURE__ */ React27.createElement(import_ui27.AlertTitle, null, i18n.title),
+    /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "body2", color: "textPrimary" }, i18n.message)
   ));
 };
 
-// src/components/ui/tags/mismatch-tag.tsx
-var React27 = __toESM(require("react"));
-var import_icons13 = require("@elementor/icons");
-var import_ui27 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
-var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React27.createElement(
-    import_ui27.Chip,
-    {
-      ref,
-      size: "tiny",
-      color: "warning",
-      shape: "rounded",
-      variant: "standard",
-      onClick,
-      icon: /* @__PURE__ */ React27.createElement(import_icons13.AlertTriangleFilledIcon, null),
-      label: /* @__PURE__ */ React27.createElement(import_ui27.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(import_ui27.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n19.__)("changed", "elementor"), ")"))),
-      sx: {
-        height: (theme) => theme.spacing(3.5),
-        borderRadius: (theme) => theme.spacing(1),
-        justifyContent: "flex-start",
-        width: "100%"
-      },
-      ...props
-    }
-  );
-});
-
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
-  const { setValue } = (0, import_editor_controls9.useBoundProp)();
-  const anchorRef = (0, import_react17.useRef)(null);
-  const popupId = (0, import_react17.useId)();
+  const { setValue, value } = (0, import_editor_controls9.useBoundProp)();
+  const anchorRef = (0, import_react21.useRef)(null);
+  const popupId = (0, import_react21.useId)();
   const popupState = (0, import_ui28.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = (0, import_react17.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react21.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -2274,6 +3102,7 @@ var MismatchVariable = ({ variable }) => {
     closeInfotip();
     setValue(null);
   };
+  const showClearButton = !!value;
   return /* @__PURE__ */ React28.createElement(import_ui28.Box, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(import_ui28.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
     import_ui28.Infotip,
     {
@@ -2286,7 +3115,7 @@ var MismatchVariable = ({ variable }) => {
         MismatchVariableAlert,
         {
           onClose: closeInfotip,
-          onClear: clearValue,
+          onClear: showClearButton ? clearValue : void 0,
           triggerSelect
         }
       ),
@@ -2301,7 +3130,14 @@ var MismatchVariable = ({ variable }) => {
         }
       }
     },
-    /* @__PURE__ */ React28.createElement(MismatchTag, { label: variable.label, onClick: toggleInfotip })
+    /* @__PURE__ */ React28.createElement(
+      WarningVariableTag,
+      {
+        label: variable.label,
+        onClick: toggleInfotip,
+        suffix: (0, import_i18n20.__)("changed", "elementor")
+      }
+    )
   ), /* @__PURE__ */ React28.createElement(
     import_ui28.Popover,
     {
@@ -2326,79 +3162,50 @@ var MismatchVariable = ({ variable }) => {
 };
 
 // src/components/ui/variable/missing-variable.tsx
-var React31 = __toESM(require("react"));
-var import_react18 = require("react");
+var React30 = __toESM(require("react"));
+var import_react22 = require("react");
 var import_editor_controls10 = require("@elementor/editor-controls");
-var import_ui31 = require("@elementor/ui");
-var import_i18n21 = require("@wordpress/i18n");
+var import_ui30 = require("@elementor/ui");
+var import_i18n22 = require("@wordpress/i18n");
 
 // src/components/ui/missing-variable-alert.tsx
 var React29 = __toESM(require("react"));
-var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_ui29 = require("@elementor/ui");
-var import_i18n20 = require("@wordpress/i18n");
+var import_i18n21 = require("@wordpress/i18n");
 var MissingVariableAlert = ({ onClose, onClear }) => {
-  const sectionWidth = (0, import_editor_editing_panel8.useSectionWidth)();
   return /* @__PURE__ */ React29.createElement(import_ui29.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
     import_ui29.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(import_ui29.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n20.__)("Clear", "elementor"))),
-      sx: { width: sectionWidth }
+      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(import_ui29.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n21.__)("Clear", "elementor"))),
+      sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React29.createElement(import_ui29.AlertTitle, null, (0, import_i18n20.__)("This variable is missing", "elementor")),
-    (0, import_i18n20.__)(
+    /* @__PURE__ */ React29.createElement(import_ui29.AlertTitle, null, (0, import_i18n21.__)("This variable is missing", "elementor")),
+    /* @__PURE__ */ React29.createElement(import_ui29.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n21.__)(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
-    )
+    ))
   ));
 };
 
-// src/components/ui/tags/missing-tag.tsx
-var React30 = __toESM(require("react"));
-var import_icons14 = require("@elementor/icons");
-var import_ui30 = require("@elementor/ui");
-var MissingTag = React30.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React30.createElement(
-    import_ui30.Chip,
-    {
-      ref,
-      size: "tiny",
-      color: "warning",
-      shape: "rounded",
-      variant: "standard",
-      onClick,
-      icon: /* @__PURE__ */ React30.createElement(import_icons14.AlertTriangleFilledIcon, null),
-      label,
-      sx: {
-        height: (theme) => theme.spacing(3.5),
-        borderRadius: (theme) => theme.spacing(1),
-        justifyContent: "flex-start",
-        width: "100%"
-      },
-      ...props
-    }
-  );
-});
-
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = (0, import_editor_controls10.useBoundProp)();
-  const [infotipVisible, setInfotipVisible] = (0, import_react18.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react22.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, infotipVisible && /* @__PURE__ */ React31.createElement(import_ui31.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React31.createElement(
-    import_ui31.Infotip,
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, 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(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      content: /* @__PURE__ */ React30.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
       slotProps: {
         popper: {
           modifiers: [
@@ -2410,47 +3217,47 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React31.createElement(MissingTag, { label: (0, import_i18n21.__)("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React30.createElement(WarningVariableTag, { label: (0, import_i18n22.__)("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
 // src/controls/variable-control.tsx
 var VariableControl = () => {
   const boundProp = (0, import_editor_controls11.useBoundProp)();
-  const boundPropValue = boundProp.value;
+  const boundPropValue = boundProp.value ?? boundProp.placeholder;
   const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
-    return /* @__PURE__ */ React32.createElement(MissingVariable, null);
+    return /* @__PURE__ */ React31.createElement(MissingVariable, null);
   }
   const { $$type: propTypeKey } = boundPropValue;
   if (assignedVariable?.deleted) {
-    return /* @__PURE__ */ React32.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
+    return /* @__PURE__ */ React31.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
   }
   const { isCompatible } = getVariableType(assignedVariable.type);
   if (isCompatible && !isCompatible(boundProp?.propType, assignedVariable)) {
-    return /* @__PURE__ */ React32.createElement(MismatchVariable, { variable: assignedVariable });
+    return /* @__PURE__ */ React31.createElement(MismatchVariable, { variable: assignedVariable });
   }
-  return /* @__PURE__ */ React32.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
+  return /* @__PURE__ */ React31.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
 // src/hooks/use-prop-variable-action.tsx
-var React33 = __toESM(require("react"));
-var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
+var React32 = __toESM(require("react"));
+var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 var import_icons15 = require("@elementor/icons");
-var import_i18n22 = require("@wordpress/i18n");
+var import_i18n23 = require("@wordpress/i18n");
 var usePropVariableAction = () => {
-  const { propType, path } = (0, import_editor_editing_panel9.useBoundProp)();
+  const { propType, path } = (0, import_editor_editing_panel6.useBoundProp)();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
     icon: import_icons15.ColorFilterIcon,
-    title: (0, import_i18n22.__)("Variables", "elementor"),
+    title: (0, import_i18n23.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
       }
       trackOpenVariablePopover(path, variable.variableType);
-      return /* @__PURE__ */ React33.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
+      return /* @__PURE__ */ React32.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
@@ -2474,19 +3281,297 @@ var trackOpenVariablePopover = (path, variableType) => {
   });
 };
 
+// src/mcp/index.ts
+var import_editor_mcp6 = require("@elementor/editor-mcp");
+
+// src/mcp/create-variable-tool.ts
+var import_editor_mcp = require("@elementor/editor-mcp");
+var import_schema3 = require("@elementor/schema");
+var InputSchema = {
+  type: import_schema3.z.string().describe('The type of the variable. Example values: "global-color-variable" or "global-font-variable".'),
+  label: import_schema3.z.string().describe("The label of the variable, displayed to the user"),
+  value: import_schema3.z.string().describe("The value of the variable, should correspond to the type")
+};
+var OutputSchema = {
+  status: import_schema3.z.enum(["ok", "error"]).describe("The status of the operation"),
+  message: import_schema3.z.string().optional().describe("Optional message providing additional information about the operation")
+};
+var initCreateVariableTool = () => {
+  (0, import_editor_mcp.getMCPByDomain)("variables").addTool({
+    name: "create-global-variable",
+    schema: InputSchema,
+    outputSchema: OutputSchema,
+    description: `Create a new global variable
+## When to use this tool:
+- When a user requests to create a new global variable in the Elementor editor.
+- When you need to add a new variable to be used in the editor.
+
+## Prequisites:
+- Ensure you have the most up-to-date list of existing global variables to avoid label duplication. You can use the "list-global-variables" tool to fetch the current variables.
+- Make sure when creating a new variable, the label is unique and not already in use.
+- If the user does not provide a label, ask them to provide one before proceeding.
+- If the user does not provide a type, ask them to provide one before proceeding.
+- If the user does not provide a value, ask them to provide one before proceeding.
+
+## Required parameters:
+- type: The type of the variable. Possible values are 'global-color-variable' or 'global-font-variable'.
+- label: The label of the variable, displayed to the user. Must be unique and not already in use.
+- value: The value of the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif').
+
+## Example tool call (JSON format):
+\`\`\`json
+{ "type": "global-color-variable", "label": "My Cool Color", "value": "rgb(1,2,3)" }
+\`\`\`
+
+## Example tool response (JSON format):
+\`\`\`json
+{ "status": "ok" }
+\`\`\`
+
+## Example to a failed tool response, which must be displayed to the end user. If the error message is not plain, attempt to find the most useful part of the message and display it.
+{ "status": "error", "message": "Unsupported type 'global-kuku-variable'" }
+
+In that case, inform the user the type is unsupported and they should try another type, perhaps consult to online documentation.
+`,
+    handler: async (params) => {
+      const { type, label, value } = params;
+      try {
+        await service.create({ type, label, value });
+      } catch (error) {
+        const message = error.message || "Unknown server error";
+        return {
+          status: "error",
+          message: `There was an error creating the variable: ${message}`
+        };
+      }
+      return { status: "ok" };
+    }
+  });
+};
+
+// src/mcp/delete-variable-tool.ts
+var import_editor_mcp2 = require("@elementor/editor-mcp");
+var import_schema4 = require("@elementor/schema");
+var initDeleteVariableTool = () => {
+  (0, import_editor_mcp2.getMCPByDomain)("variables").addTool({
+    name: "delete-global-variable",
+    schema: {
+      id: import_schema4.z.string().describe("The unique identifier of the variable to be deleted.")
+    },
+    outputSchema: {
+      status: import_schema4.z.enum(["ok", "error"]).describe("The status of the operation")
+    },
+    description: `Delete an existing global variable
+    
+## When to use this tool:
+- When a user requests to delete an existing global variable in the Elementor editor.
+- When you need to remove a variable that is no longer needed or relevant, with the user's confirmation.
+
+## Prerequisites:
+- Ensure you have the most up-to-date list of existing global variables. You can use the "list-global-variables" tool to fetch the current variables.
+- Reference the variable by the "id" property, given from the "list-global-variables" tool.
+- Make sure you have the unique identifier of the variable to be deleted before using this tool.
+- Confirm with the user that they want to proceed with the deletion, as this action is irreversible.
+
+<notice>
+A use might reference a variable by it's label, but you must always use the unique identifier (id) to delete it.
+If you only have the label, use the "list-global-variables" tool to find the corresponding id.
+</notice>
+
+<important>
+This operation is destructive and cannot be undone. Ensure that the user is fully aware of the consequences before proceeding.
+When a variable is deleted, all references to it in all pages accross the website will lose their effect.
+</important>`,
+    handler: async (params) => {
+      const { id: id2 } = params;
+      try {
+        await service.delete(id2);
+        return { status: "ok" };
+      } catch (err) {
+        return {
+          status: "error"
+        };
+      }
+    },
+    isDestrcutive: true
+  });
+};
+
+// src/mcp/list-variables-tool.ts
+var import_editor_mcp3 = require("@elementor/editor-mcp");
+var import_schema5 = require("@elementor/schema");
+var VariableSchema = {
+  type: import_schema5.z.string().describe("The type of the variable."),
+  label: import_schema5.z.string().describe("The label of the variable, displayed to the user"),
+  value: import_schema5.z.string().describe("The value of the variable."),
+  id: import_schema5.z.string().describe(
+    "The unique identifier of the variable. Used for internal reference, not to be exposed to end users"
+  )
+};
+var VariableListSchema = {
+  variables: import_schema5.z.array(import_schema5.z.object(VariableSchema)).describe("List of variables")
+};
+var initListVariablesTool = () => {
+  (0, import_editor_mcp3.getMCPByDomain)("variables").addTool({
+    name: "list-global-variables",
+    description: `List editor global variables
+  
+  ## When to use this tool:
+  - When a user requests to see all available global variables in the Elementor editor.
+  - When you need to be exact on a variable label, to avoid any mistakes.
+  - When you want to see the most up-to-date list of global variables.
+  - Before using any other variables related tools that makes changes, such as deletion, creation, or updates. This ensures you have the latest information and there is no naming collision or mismatching.
+  
+  ## Example tool response (JSON format):
+  \`\`\`json
+  { variables: [
+   { type: 'global-color-variable', label: 'Cool', value: 'rgb(1,2,3)', id: 'some-unique-id' },
+   { type: 'global-font-variable', label: 'Headline', value: 'serif', id: 'some-other-unique-id' },
+  ] }
+  \`\`\`
+  
+  Once you get the response, please display the variables in a user-friendly way, unless explicitly requested otherwise.
+  Unless explicitly requested otherwise, response in HTML Format, prefer to use tables or unordered lists.
+  
+  Note: **The label is most improtant to be seen as-is without any changes.**
+  
+  <important>
+  **Do not omit the label**. This is important for the user to identify the variable.
+  **Do not change the label**, it must be displayed exactly as it is, in it's original characters as received from this tool.
+  </important>
+  `,
+    outputSchema: VariableListSchema,
+    handler: async () => {
+      const variables = service.variables();
+      return {
+        variables: Object.entries(variables).map(([id2, varData]) => ({ id: id2, ...varData }))
+      };
+    }
+  });
+};
+
+// src/mcp/update-variable-tool.ts
+var import_editor_mcp4 = require("@elementor/editor-mcp");
+var import_schema6 = require("@elementor/schema");
+var initUpdateVariableTool = () => {
+  (0, import_editor_mcp4.getMCPByDomain)("variables").addTool({
+    schema: {
+      id: import_schema6.z.string().describe("The unique identifier of the variable to be updated or renamed."),
+      label: import_schema6.z.string().describe(
+        "The label of the variable to be stored after the change. If the user only wishes to update the value, this must be strictly equal to the current label."
+      ),
+      value: import_schema6.z.string().describe(
+        "The new value for the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif'). If the user wishes to rename only, make sure you provide the existing value."
+      )
+    },
+    outputSchema: {
+      status: import_schema6.z.enum(["ok", "error"]).describe("The status of the operation"),
+      message: import_schema6.z.string().optional().describe("Optional message providing additional information about the operation")
+    },
+    name: "update-global-variable",
+    description: `Update an existing global variable
+
+## When to use this tool:
+- When a user requests to update an existing global variable in the Elementor editor.
+- When you need to modify the value of an existing variable.
+- When you want to rename an existing variable (change its label).
+- When you want to both rename and modify the value of an existing variable.
+
+## Prerequisites:
+- Ensure you have the most up-to-date list of existing global variables to avoid label duplication. You can use the "list-global-variables" tool to fetch the current variables.
+- Make sure when updating a variable, the new label is unique and not already in use by another variable.
+- Make sure you understand whether you are updating a value, renaming, or both.
+- Reference the variable by the "id" property, given from the "list-global-variables" tool.
+- If the user wishes to rename, make sure you have the existing value.
+- If the user wishes to update the value, make sure you have to **correct label**.
+- You must have the unique identifier, the current label, the current value, and the new value or label or both, before using this tool.
+
+## Required parameters:
+- id: The unique identifier of the variable to be updated or renamed.
+- label: The label of the variable to be stored after the change. If the user only wishes to update the value, this must be strictly equal to the current label.
+- value: The new value for the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif'). If the user wishes to rename only, make sure you provide the existing value.
+
+## Example tool call (JSON format):
+\`\`\`json
+{ "id": "some-unique-id", "label": "Cool", "value": "rgb(0,140,250)" }
+\`\`\`
+
+## Example responses (JSON format):
+Successful update:
+\`\`\`json
+{ "status": "ok" }
+\`\`\`
+
+Failed update, which must be displayed to the end user. If the error message is not plain, attempt to find the most useful part of the message and display it.
+\`\`\`json
+{ "status": "error", "message": "Label 'Cool' is already in use by another variable." }
+\`\`\`
+`,
+    handler: async (params) => {
+      const { id: id2, label, value } = params;
+      try {
+        await service.update(id2, { label, value });
+        return { status: "ok" };
+      } catch (error) {
+        const message = error.message || "Unknown server error";
+        return {
+          status: "error",
+          message: `There was an error creating the variable: ${message}`
+        };
+      }
+    }
+  });
+};
+
+// src/mcp/variables-resource.ts
+var import_editor_mcp5 = require("@elementor/editor-mcp");
+var GLOBAL_VARIABLES_URI = "elementor://variables";
+var initVariablesResource = () => {
+  const { mcpServer } = (0, import_editor_mcp5.getMCPByDomain)("variables");
+  mcpServer.resource(
+    "global-variables",
+    GLOBAL_VARIABLES_URI,
+    {
+      description: "Global variables list. Variables are being used in this way: If it is directly in the schema, you need to put the ID which is the key inside the object."
+    },
+    async () => {
+      return {
+        contents: [{ uri: GLOBAL_VARIABLES_URI, text: localStorage["elementor-global-variables"] }]
+      };
+    }
+  );
+  window.addEventListener("variables:updated", () => {
+    mcpServer.server.sendResourceUpdated({
+      uri: GLOBAL_VARIABLES_URI,
+      contents: [{ uri: GLOBAL_VARIABLES_URI, text: localStorage["elementor-global-variables"] }]
+    });
+  });
+};
+
+// src/mcp/index.ts
+function initMcp() {
+  const { setMCPDescription } = (0, import_editor_mcp6.getMCPByDomain)("variables");
+  setMCPDescription(`Elementor Editor Variables MCP`);
+  initListVariablesTool();
+  initCreateVariableTool();
+  initUpdateVariableTool();
+  initDeleteVariableTool();
+  initVariablesResource();
+}
+
 // src/register-variable-types.tsx
-var React36 = __toESM(require("react"));
-var import_editor_props3 = require("@elementor/editor-props");
+var React35 = __toESM(require("react"));
+var import_editor_props4 = require("@elementor/editor-props");
 var import_icons17 = require("@elementor/icons");
 
 // src/components/fields/color-field.tsx
-var React34 = __toESM(require("react"));
-var import_react19 = require("react");
-var import_ui32 = require("@elementor/ui");
+var React33 = __toESM(require("react"));
+var import_react23 = require("react");
+var import_ui31 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = (0, import_react19.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react19.useState)("");
-  const defaultRef = (0, import_react19.useRef)(null);
+  const [color, setColor] = (0, import_react23.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react23.useState)("");
+  const defaultRef = (0, import_react23.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -2495,9 +3580,10 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
     onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React34.createElement(
-    import_ui32.UnstableColorField,
+  return /* @__PURE__ */ React33.createElement(
+    import_ui31.UnstableColorField,
     {
+      id: "color-variable-field",
       size: "tiny",
       fullWidth: true,
       value: color,
@@ -2523,21 +3609,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/components/fields/font-field.tsx
-var React35 = __toESM(require("react"));
-var import_react20 = require("react");
+var React34 = __toESM(require("react"));
+var import_react24 = require("react");
 var import_editor_controls12 = require("@elementor/editor-controls");
-var import_editor_editing_panel10 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
 var import_icons16 = require("@elementor/icons");
-var import_ui33 = require("@elementor/ui");
-var import_i18n23 = require("@wordpress/i18n");
+var import_ui32 = require("@elementor/ui");
+var import_i18n24 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = (0, import_react20.useState)(value);
-  const defaultRef = (0, import_react20.useRef)(null);
+  const [fontFamily, setFontFamily] = (0, import_react24.useState)(value);
+  const defaultRef = (0, import_react24.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
-  const fontPopoverState = (0, import_ui33.usePopupState)({ variant: "popover" });
-  const fontFamilies = (0, import_editor_editing_panel10.useFontFamilies)();
-  const sectionWidth = (0, import_editor_editing_panel10.useSectionWidth)();
-  const mapFontSubs = React35.useMemo(() => {
+  const fontPopoverState = (0, import_ui32.usePopupState)({ variant: "popover" });
+  const fontFamilies = (0, import_editor_editing_panel7.useFontFamilies)();
+  const sectionWidth = (0, import_editor_editing_panel7.useSectionWidth)();
+  const mapFontSubs = React34.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -2553,36 +3639,37 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = (0, import_react20.useId)();
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
-    import_ui33.UnstableTag,
+  const id2 = (0, import_react24.useId)();
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(
+    import_ui32.UnstableTag,
     {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React35.createElement(import_icons16.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui33.bindTrigger)(fontPopoverState),
+      endIcon: /* @__PURE__ */ React34.createElement(import_icons16.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui32.bindTrigger)(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React35.createElement(
-    import_ui33.Popover,
+  ), /* @__PURE__ */ React34.createElement(
+    import_ui32.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef,
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: -28 },
-      ...(0, import_ui33.bindPopover)(fontPopoverState)
+      ...(0, import_ui32.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React34.createElement(
       import_editor_controls12.ItemSelector,
       {
+        id: "font-family-variables-selector",
         itemsList: mapFontSubs,
         selectedItem: fontFamily,
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: (0, import_i18n23.__)("Font Family", "elementor"),
+        title: (0, import_i18n24.__)("Font family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: import_editor_controls12.enqueueFont,
         icon: import_icons16.TextIcon
@@ -2594,27 +3681,31 @@ var FontField = ({ value, onChange, onValidationChange }) => {
 // src/register-variable-types.tsx
 function registerVariableTypes() {
   registerVariableType({
+    key: colorVariablePropTypeUtil.key,
     valueField: ColorField,
     icon: import_icons17.BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
-    fallbackPropTypeUtil: import_editor_props3.colorPropTypeUtil,
+    fallbackPropTypeUtil: import_editor_props4.colorPropTypeUtil,
     variableType: "color",
-    startIcon: ({ value }) => /* @__PURE__ */ React36.createElement(ColorIndicator, { size: "inherit", component: "span", value })
+    startIcon: ({ value }) => /* @__PURE__ */ React35.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
+    defaultValue: "#ffffff"
   });
   registerVariableType({
+    key: fontVariablePropTypeUtil.key,
     valueField: FontField,
     icon: import_icons17.TextIcon,
     propTypeUtil: fontVariablePropTypeUtil,
-    fallbackPropTypeUtil: import_editor_props3.stringPropTypeUtil,
-    variableType: "font"
+    fallbackPropTypeUtil: import_editor_props4.stringPropTypeUtil,
+    variableType: "font",
+    defaultValue: "Roboto"
   });
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React37 = __toESM(require("react"));
-var import_react21 = require("react");
+var React36 = __toESM(require("react"));
+var import_react25 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_ui34 = require("@elementor/ui");
+var import_ui33 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -2633,14 +3724,14 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React37.createElement(import_ui34.Portal, { container }, /* @__PURE__ */ React37.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React36.createElement(import_ui33.Portal, { container }, /* @__PURE__ */ React36.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react21.useState)({});
-  (0, import_react21.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react25.useState)({});
+  (0, import_react25.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -2660,25 +3751,25 @@ function convertToCssVariables(variables) {
 
 // src/repeater-injections.ts
 var import_editor_controls13 = require("@elementor/editor-controls");
-var import_editor_props4 = require("@elementor/editor-props");
+var import_editor_props5 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
-var React38 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React38.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React37.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React38.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React37.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React38.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React37.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 
 // src/repeater-injections.ts
@@ -2687,21 +3778,21 @@ function registerRepeaterInjections() {
     id: "color-variables-background-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+      return hasAssignedColorVariable(import_editor_props5.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
     }
   });
   (0, import_editor_controls13.injectIntoRepeaterItemIcon)({
     id: "color-variables-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props4.shadowPropTypeUtil.extract(prop)?.color);
+      return hasAssignedColorVariable(import_editor_props5.shadowPropTypeUtil.extract(prop)?.color);
     }
   });
   (0, import_editor_controls13.injectIntoRepeaterItemLabel)({
     id: "color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+      return hasAssignedColorVariable(import_editor_props5.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
     }
   });
 }
@@ -2710,34 +3801,37 @@ var hasAssignedColorVariable = (propValue) => {
 };
 
 // src/init.ts
-var { registerPopoverAction } = import_editor_editing_panel11.controlActionsMenu;
+var { registerPopoverAction } = import_editor_editing_panel8.controlActionsMenu;
 function init() {
   registerVariableTypes();
   registerRepeaterInjections();
-  (0, import_editor_editing_panel11.registerControlReplacement)({
+  (0, import_editor_editing_panel8.registerControlReplacement)({
     component: VariableControl,
-    condition: ({ value }) => hasAssignedVariable(value)
+    condition: ({ value, placeholder }) => hasVariable(value) || hasVariable(placeholder)
   });
   registerPopoverAction({
     id: "variables",
     useProps: usePropVariableAction
   });
-  service.init();
+  service.init().then(() => {
+    initMcp();
+  });
   (0, import_editor.injectIntoTop)({
     id: "canvas-style-variables-render",
     component: StyleVariablesRenderer
   });
   (0, import_editor_panels2.__registerPanel)(panel);
 }
-function hasAssignedVariable(propValue) {
-  if (propValue && typeof propValue === "object" && "$$type" in propValue) {
-    return hasVariableType(propValue.$$type);
+function hasVariable(value) {
+  if ((0, import_editor_props6.isTransformable)(value)) {
+    return hasVariableType(value.$$type);
   }
   return false;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   init,
-  registerVariableType
+  registerVariableType,
+  registerVariableTypes
 });
 //# sourceMappingURL=index.js.map