@elementor/editor-variables 3.33.0-256 → 3.33.0-258

package/dist/index.js

@@ -52,6 +52,43 @@ var import_icons6 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
 
+// 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/utils/validations.ts
 var import_icons = require("@elementor/icons");
 var import_i18n = require("@wordpress/i18n");
@@ -148,146 +185,70 @@ var validateValue = (value) => {
   return "";
 };
 
-// src/components/ui/delete-confirmation-dialog.tsx
-var React = __toESM(require("react"));
-var import_icons2 = require("@elementor/icons");
-var import_ui = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
-var TITLE_ID = "delete-variable-dialog";
-var DeleteConfirmationDialog = ({
-  open,
-  label,
-  closeDialog,
-  onConfirm
-}) => {
-  return /* @__PURE__ */ React.createElement(import_ui.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(import_ui.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n2.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React.createElement(import_ui.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n2.__)("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", (0, import_i18n2.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React.createElement(import_ui.DialogActions, null, /* @__PURE__ */ React.createElement(import_ui.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n2.__)("Not now", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n2.__)("Delete", "elementor"))));
-};
+// src/variables-registry/create-variable-type-registry.ts
+var import_editor_canvas3 = require("@elementor/editor-canvas");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 
-// src/components/ui/empty-state.tsx
-var React2 = __toESM(require("react"));
+// src/transformers/inheritance-transformer.tsx
+var React = __toESM(require("react"));
+var import_editor_canvas = require("@elementor/editor-canvas");
 var import_ui2 = require("@elementor/ui");
 var import_i18n3 = 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__ */ React2.createElement(
-    import_ui2.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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React2.createElement(import_ui2.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n3.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React2.createElement(
-      Content,
-      {
-        title: (0, import_i18n3.__)("There are no variables", "elementor"),
-        message: (0, import_i18n3.__)("With your current role, you can only connect and detach variables.", "elementor")
-      }
-    )
-  );
-};
-function Content({ title, message }) {
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
-}
+// src/components/ui/color-indicator.tsx
+var import_ui = require("@elementor/ui");
+var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  marginRight: theme.spacing(0.25)
+}));
 
-// src/components/ui/no-search-results.tsx
-var React3 = __toESM(require("react"));
-var import_ui3 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
-var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React3.createElement(
-    import_ui3.Stack,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      p: 2.5,
-      color: "text.secondary",
-      sx: { pb: 3.5, pt: 8 }
-    },
-    icon,
-    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n4.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React3.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n4.__)("Try something else.", "elementor"), /* @__PURE__ */ React3.createElement(import_ui3.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n4.__)("Clear & try again", "elementor")))
-  );
-};
+// src/prop-types/color-variable-prop-type.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_schema = require("@elementor/schema");
+var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
 
-// 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/service.ts
+var import_i18n2 = require("@wordpress/i18n");
 
-// 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/api.ts
+var import_http_client = require("@elementor/http-client");
+var BASE_PATH = "elementor/v1/variables";
+var apiClient = {
+  list: () => {
+    return (0, import_http_client.httpService)().get(BASE_PATH + "/list");
+  },
+  create: (type, label, value) => {
+    return (0, import_http_client.httpService)().post(BASE_PATH + "/create", {
+      type,
+      label,
+      value
+    });
+  },
+  update: (id2, label, value) => {
+    return (0, import_http_client.httpService)().put(BASE_PATH + "/update", {
+      id: id2,
+      label,
+      value
+    });
+  },
+  delete: (id2) => {
+    return (0, import_http_client.httpService)().post(BASE_PATH + "/delete", { id: id2 });
+  },
+  restore: (id2, label, value) => {
+    const payload = { id: id2 };
+    if (label) {
+      payload.label = label;
+    }
+    if (value) {
+      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/components/variables-manager/hooks/use-variables-manager-state.ts
-var import_react5 = require("react");
-
 // src/batch-operations.ts
 var generateTempId = () => {
   const timestamp = Date.now().toString(36);
@@ -348,78 +309,6 @@ var buildOperationsArray = (originalVariables, currentVariables) => {
   });
 };
 
-// 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 React5 = __toESM(require("react"));
-var import_react3 = require("react");
-
-// src/variables-registry/create-variable-type-registry.ts
-var import_editor_canvas3 = require("@elementor/editor-canvas");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-
-// src/transformers/inheritance-transformer.tsx
-var React4 = __toESM(require("react"));
-var import_editor_canvas = require("@elementor/editor-canvas");
-var import_ui5 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
-
-// src/components/ui/color-indicator.tsx
-var import_ui4 = require("@elementor/ui");
-var ColorIndicator = (0, import_ui4.styled)(import_ui4.UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`,
-  marginRight: theme.spacing(0.25)
-}));
-
-// src/prop-types/color-variable-prop-type.ts
-var import_editor_props = require("@elementor/editor-props");
-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_i18n5 = require("@wordpress/i18n");
-
-// src/api.ts
-var import_http_client = require("@elementor/http-client");
-var BASE_PATH = "elementor/v1/variables";
-var apiClient = {
-  list: () => {
-    return (0, import_http_client.httpService)().get(BASE_PATH + "/list");
-  },
-  create: (type, label, value) => {
-    return (0, import_http_client.httpService)().post(BASE_PATH + "/create", {
-      type,
-      label,
-      value
-    });
-  },
-  update: (id2, label, value) => {
-    return (0, import_http_client.httpService)().put(BASE_PATH + "/update", {
-      id: id2,
-      label,
-      value
-    });
-  },
-  delete: (id2) => {
-    return (0, import_http_client.httpService)().post(BASE_PATH + "/delete", { id: id2 });
-  },
-  restore: (id2, label, value) => {
-    const payload = { id: id2 };
-    if (label) {
-      payload.label = label;
-    }
-    if (value) {
-      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/storage.ts
 var STORAGE_KEY = "elementor-global-variables";
 var STORAGE_WATERMARK_KEY = "elementor-global-variables-watermark";
@@ -584,7 +473,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_i18n5.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -606,7 +495,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_i18n5.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -739,11 +628,11 @@ var inheritanceTransformer = (0, import_editor_canvas.createTransformer)((id2) =
   const variables = service.variables();
   const variable = variables[id2];
   if (!variable) {
-    return /* @__PURE__ */ React4.createElement("span", null, (0, import_i18n6.__)("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);
-  return /* @__PURE__ */ React4.createElement(import_ui5.Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React4.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React4.createElement(import_ui5.Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
+  return /* @__PURE__ */ React.createElement(import_ui2.Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React.createElement(import_ui2.Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
 });
 
 // src/transformers/variable-transformer.ts
@@ -825,7 +714,153 @@ function createVariableTypeRegistry() {
 // src/variables-registry/variable-type-registry.ts
 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 React5 = __toESM(require("react"));
+var import_react3 = require("react");
 var VariableTypeContext = (0, import_react3.createContext)(null);
 function VariableTypeProvider({ children, propTypeKey }) {
   return /* @__PURE__ */ React5.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
@@ -1003,6 +1038,7 @@ var VariableManagerCreateMenu = ({
       onClick: () => {
         const defaultName = getDefaultName(variables, key, variable.variableType);
         onCreate(key, defaultName, variable.defaultValue || "");
+        trackVariablesManagerEvent({ action: "add", varType: variable.variableType });
       }
     };
   });
@@ -1662,7 +1698,9 @@ function VariablesManagerPanel() {
     try {
       setServerError(null);
       resetNavigation();
-      return await handleSave();
+      const result = await handleSave();
+      trackVariablesManagerEvent({ action: "saveChanges" });
+      return result;
     } catch (error) {
       const mappedError = mapServerError(error);
       const duplicatedIds = mappedError?.action?.data?.duplicatedIds;
@@ -1694,8 +1732,11 @@ function VariablesManagerPanel() {
       icon: import_icons6.TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
-        if (variables[itemId]) {
-          setDeleteConfirmation({ id: itemId, label: variables[itemId].label });
+        const variable = variables[itemId];
+        if (variable) {
+          setDeleteConfirmation({ id: itemId, label: variable.label });
+          const variableTypeOptions = getVariableType(variable.type);
+          trackVariablesManagerEvent({ action: "delete", varType: variableTypeOptions?.variableType });
         }
       }
     }
@@ -1962,24 +2003,6 @@ var unwrapValue = (input) => {
   return input;
 };
 
-// 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
-  });
-};
-
 // src/components/ui/form-field.tsx
 var React14 = __toESM(require("react"));
 var import_ui14 = require("@elementor/ui");
@@ -2474,13 +2497,21 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     );
   }
   if (onSettings) {
+    const handleOpenManager = () => {
+      onSettings();
+      trackVariablesManagerEvent({
+        action: "openManager",
+        varType: variableType,
+        controlPath: path.join(".")
+      });
+    };
     actions.push(
       /* @__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: onSettings,
+          onClick: handleOpenManager,
           "aria-label": MANAGER_LABEL
         },
         /* @__PURE__ */ React19.createElement(import_icons11.SettingsIcon, { fontSize: SIZE5 })