@elementor/editor-variables 3.33.0-174 → 3.33.0-176

package/dist/index.js

@@ -44,19 +44,107 @@ var import_editor_props6 = require("@elementor/editor-props");
 
 // src/components/variables-manager/variables-manager-panel.tsx
 var React12 = __toESM(require("react"));
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_icons5 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
+
+// src/utils/validations.ts
+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.__)("The save didn\u2019t go through.", "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),
+      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
+    };
+  }
+  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/components/ui/delete-confirmation-dialog.tsx
 var React = __toESM(require("react"));
 var import_icons = require("@elementor/icons");
 var import_ui = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 var TITLE_ID = "delete-variable-dialog";
 var DeleteConfirmationDialog = ({
   open,
@@ -64,13 +152,13 @@ var DeleteConfirmationDialog = ({
   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_icons.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React.createElement(import_ui.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n.__)("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", (0, import_i18n.__)("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_i18n.__)("Not now", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n.__)("Delete", "elementor"))));
+  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_icons.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/components/ui/empty-state.tsx
 var React2 = __toESM(require("react"));
 var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 
 // src/hooks/use-permissions.ts
 var import_editor_current_user = require("@elementor/editor-current-user");
@@ -101,11 +189,11 @@ var EmptyState = ({ icon, title, message, onAdd }) => {
       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_i18n2.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React2.createElement(
+    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_i18n2.__)("There are no variables", "elementor"),
-        message: (0, import_i18n2.__)("With your current role, you can only connect and detach variables.", "elementor")
+        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")
       }
     )
   );
@@ -117,7 +205,7 @@ function Content({ title, message }) {
 // src/components/ui/no-search-results.tsx
 var React3 = __toESM(require("react"));
 var import_ui3 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
   return /* @__PURE__ */ React3.createElement(
     import_ui3.Stack,
@@ -130,8 +218,8 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5, pt: 8 }
     },
     icon,
-    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n3.__)("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_i18n3.__)("Try something else.", "elementor"), /* @__PURE__ */ React3.createElement(import_ui3.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n3.__)("Clear & try again", "elementor")))
+    /* @__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")))
   );
 };
 
@@ -154,9 +242,43 @@ var useAutoEdit = () => {
   };
 };
 
+// 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_react4 = require("react");
-var import_i18n7 = require("@wordpress/i18n");
+var import_react5 = require("react");
 
 // src/batch-operations.ts
 var generateTempId = () => {
@@ -219,12 +341,12 @@ var buildOperationsArray = (originalVariables, currentVariables) => {
 };
 
 // src/hooks/use-prop-variables.ts
-var import_react3 = require("react");
+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_react2 = require("react");
+var import_react3 = require("react");
 
 // src/variables-registry/create-variable-type-registry.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
@@ -234,7 +356,7 @@ var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var React4 = __toESM(require("react"));
 var import_editor_canvas = require("@elementor/editor-canvas");
 var import_ui5 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/ui/color-indicator.tsx
 var import_ui4 = require("@elementor/ui");
@@ -249,7 +371,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_i18n4 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
@@ -454,7 +576,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_i18n4.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n5.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -476,7 +598,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_i18n4.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n5.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -609,7 +731,7 @@ 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_i18n5.__)("Missing variable", "elementor"));
+    return /* @__PURE__ */ React4.createElement("span", null, (0, import_i18n6.__)("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
   const css = resolveCssVariable(id2, variable);
@@ -696,12 +818,12 @@ function createVariableTypeRegistry() {
 var { registerVariableType, getVariableType, getVariableTypes, hasVariableType } = createVariableTypeRegistry();
 
 // src/context/variable-type-context.tsx
-var VariableTypeContext = (0, import_react2.createContext)(null);
+var VariableTypeContext = (0, import_react3.createContext)(null);
 function VariableTypeProvider({ children, propTypeKey }) {
   return /* @__PURE__ */ React5.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
 }
 function useVariableType() {
-  const context = (0, import_react2.useContext)(VariableTypeContext);
+  const context = (0, import_react3.useContext)(VariableTypeContext);
   if (context === null) {
     throw new Error("useVariableType must be used within a VariableTypeProvider");
   }
@@ -754,7 +876,7 @@ var useVariableSelectionFilter = (variables) => {
   return selectionFilter ? selectionFilter(variables, propType) : variables;
 };
 var usePropVariables = (propKey) => {
-  return (0, import_react3.useMemo)(() => normalizeVariables(propKey), [propKey]);
+  return (0, import_react4.useMemo)(() => normalizeVariables(propKey), [propKey]);
 };
 var normalizeVariables = (propKey) => {
   const variables = getVariables(false);
@@ -779,77 +901,22 @@ var restoreVariable = (restoreId, label, value) => {
   return service.restore(restoreId, label, value).then(extractId);
 };
 
-// src/utils/validations.ts
-var import_i18n6 = require("@wordpress/i18n");
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: (0, import_i18n6.__)("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: (0, import_i18n6.__)("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: (0, import_i18n6.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: (0, import_i18n6.__)("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n6.__)("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: (0, import_i18n6.__)("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: (0, import_i18n6.__)("There was a glitch. Try saving your variable 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
-    };
-  }
-  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/components/variables-manager/hooks/use-variables-manager-state.ts
 var useVariablesManagerState = () => {
-  const [variables, setVariables] = (0, import_react4.useState)(() => getVariables(false));
-  const [deletedVariables, setDeletedVariables] = (0, import_react4.useState)([]);
-  const [isDirty, setIsDirty] = (0, import_react4.useState)(false);
-  const [hasValidationErrors, setHasValidationErrors] = (0, import_react4.useState)(false);
-  const [isSaving, setIsSaving] = (0, import_react4.useState)(false);
-  const [searchValue, setSearchValue] = (0, import_react4.useState)("");
-  const handleOnChange = (0, import_react4.useCallback)(
+  const [variables, setVariables] = (0, import_react5.useState)(() => getVariables(false));
+  const [deletedVariables, setDeletedVariables] = (0, import_react5.useState)([]);
+  const [isSaveDisabled, setIsSaveDisabled] = (0, import_react5.useState)(false);
+  const [isDirty, setIsDirty] = (0, import_react5.useState)(false);
+  const [isSaving, setIsSaving] = (0, import_react5.useState)(false);
+  const [searchValue, setSearchValue] = (0, import_react5.useState)("");
+  const handleOnChange = (0, import_react5.useCallback)(
     (newVariables) => {
       setVariables({ ...variables, ...newVariables });
       setIsDirty(true);
     },
     [variables]
   );
-  const createVariable2 = (0, import_react4.useCallback)((type, defaultName, defaultValue) => {
+  const createVariable2 = (0, import_react5.useCallback)((type, defaultName, defaultValue) => {
     const newId = generateTempId();
     const newVariable = {
       id: newId,
@@ -861,7 +928,7 @@ var useVariablesManagerState = () => {
     setIsDirty(true);
     return newId;
   }, []);
-  const handleDeleteVariable = (0, import_react4.useCallback)((itemId) => {
+  const handleDeleteVariable = (0, import_react5.useCallback)((itemId) => {
     setDeletedVariables((prev) => [...prev, itemId]);
     setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
     setIsDirty(true);
@@ -869,26 +936,18 @@ var useVariablesManagerState = () => {
   const handleSearch = (searchTerm) => {
     setSearchValue(searchTerm);
   };
-  const handleSave = (0, import_react4.useCallback)(async () => {
-    try {
-      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);
-        setIsSaving(false);
-        return { success: true };
-      }
-      throw new Error((0, import_i18n7.__)("Failed to save variables. Please try again.", "elementor"));
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : ERROR_MESSAGES.UNEXPECTED_ERROR;
-      setIsSaving(false);
-      return { success: false, error: errorMessage };
-    }
+  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 }));
@@ -899,7 +958,7 @@ var useVariablesManagerState = () => {
     variables: filteredVariables(),
     deletedVariables,
     isDirty,
-    hasValidationErrors,
+    isSaveDisabled,
     handleOnChange,
     createVariable: createVariable2,
     handleDeleteVariable,
@@ -907,16 +966,17 @@ var useVariablesManagerState = () => {
     isSaving,
     handleSearch,
     searchValue,
-    setHasValidationErrors
+    setIsSaving,
+    setIsSaveDisabled
   };
 };
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
 var React6 = __toESM(require("react"));
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_icons2 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
 var SIZE = "tiny";
 var VariableManagerCreateMenu = ({
   variables,
@@ -924,7 +984,7 @@ var VariableManagerCreateMenu = ({
   disabled,
   menuState
 }) => {
-  const buttonRef = (0, import_react5.useRef)(null);
+  const buttonRef = (0, import_react6.useRef)(null);
   const variableTypes = getVariableTypes();
   const menuOptions = Object.entries(variableTypes).map(([key, variable]) => {
     const displayName = variable.variableType.charAt(0).toUpperCase() + variable.variableType.slice(1);
@@ -945,7 +1005,7 @@ var VariableManagerCreateMenu = ({
       ref: buttonRef,
       disabled,
       size: SIZE,
-      "aria-label": (0, import_i18n8.__)("Add variable", "elementor")
+      "aria-label": (0, import_i18n7.__)("Add variable", "elementor")
     },
     /* @__PURE__ */ React6.createElement(import_icons2.PlusIcon, { fontSize: SIZE })
   ), /* @__PURE__ */ React6.createElement(
@@ -982,7 +1042,7 @@ var VariableManagerCreateMenu = ({
           gap: 1.5
         }
       },
-      (0, import_react5.createElement)(option.icon, {
+      (0, import_react6.createElement)(option.icon, {
         fontSize: SIZE,
         color: "action"
       }),
@@ -1003,22 +1063,22 @@ var getDefaultName = (variables, type, baseName) => {
 
 // src/components/variables-manager/variables-manager-table.tsx
 var React11 = __toESM(require("react"));
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/components/fields/label-field.tsx
 var React7 = __toESM(require("react"));
-var import_react6 = 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_react6.useState)(initialError ?? { value: "", message: "" });
+  const [error, setError] = (0, import_react7.useState)(initialError ?? { value: "", message: "" });
   return {
     labelFieldError: error,
     setLabelFieldError: setError
@@ -1036,9 +1096,9 @@ var LabelField = ({
   showWarningInfotip = false,
   variables
 }) => {
-  const [label, setLabel] = (0, import_react6.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react6.useState)("");
-  const fieldRef = (0, import_react6.useRef)(null);
+  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, variables);
@@ -1089,7 +1149,7 @@ var LabelField = ({
 
 // src/components/variables-manager/ui/variable-edit-menu.tsx
 var React8 = __toESM(require("react"));
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_icons3 = require("@elementor/icons");
 var import_ui8 = require("@elementor/ui");
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
@@ -1132,7 +1192,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
           gap: 1
         }
       },
-      action.icon && (0, import_react7.createElement)(action.icon, {
+      action.icon && (0, import_react8.createElement)(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -1167,7 +1227,7 @@ var VariableTableCell = ({
 
 // src/components/variables-manager/variable-editable-cell.tsx
 var React10 = __toESM(require("react"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_ui10 = require("@elementor/ui");
 var VariableEditableCell = React10.memo(
   ({
@@ -1182,22 +1242,22 @@ var VariableEditableCell = React10.memo(
     gap = 1,
     fieldType
   }) => {
-    const [value, setValue] = (0, import_react8.useState)(initialValue);
-    const [isEditing, setIsEditing] = (0, import_react8.useState)(false);
+    const [value, setValue] = (0, import_react9.useState)(initialValue);
+    const [isEditing, setIsEditing] = (0, import_react9.useState)(false);
     const { labelFieldError, setLabelFieldError } = useLabelError();
-    const [valueFieldError, setValueFieldError] = (0, import_react8.useState)("");
-    const rowRef = (0, import_react8.useRef)(null);
-    const handleSave = (0, import_react8.useCallback)(() => {
+    const [valueFieldError, setValueFieldError] = (0, import_react9.useState)("");
+    const rowRef = (0, import_react9.useRef)(null);
+    const handleSave = (0, import_react9.useCallback)(() => {
       const hasError = fieldType === "label" && labelFieldError?.message || fieldType === "value" && valueFieldError;
       if (!hasError) {
         onChange(value);
       }
       setIsEditing(false);
     }, [value, onChange, fieldType, labelFieldError, valueFieldError]);
-    (0, import_react8.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       onRowRef?.(rowRef?.current);
     }, [onRowRef]);
-    (0, import_react8.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       if (autoEdit && !isEditing) {
         setIsEditing(true);
         onAutoEditComplete?.();
@@ -1217,10 +1277,10 @@ var VariableEditableCell = React10.memo(
         setIsEditing(true);
       }
     };
-    const handleChange = (0, import_react8.useCallback)((newValue) => {
+    const handleChange = (0, import_react9.useCallback)((newValue) => {
       setValue(newValue);
     }, []);
-    const handleValidationChange = (0, import_react8.useCallback)(
+    const handleValidationChange = (0, import_react9.useCallback)(
       (errorMsg) => {
         if (fieldType === "label") {
           setLabelFieldError({
@@ -1291,9 +1351,9 @@ var VariablesManagerTable = ({
   onAutoEditComplete,
   onFieldError
 }) => {
-  const tableContainerRef = (0, import_react9.useRef)(null);
-  const variableRowRefs = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react9.useEffect)(() => {
+  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) {
@@ -1341,7 +1401,7 @@ var VariablesManagerTable = ({
     });
     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_i18n9.__)("Name", "elementor")), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n9.__)("Value", "elementor")), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React11.createElement(import_ui11.TableBody, null, /* @__PURE__ */ React11.createElement(
+  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,
@@ -1421,7 +1481,7 @@ var VariablesManagerTable = ({
                     });
                   }
                 },
-                prefixElement: (0, import_react9.createElement)(row.icon, { fontSize: "inherit" }),
+                prefixElement: (0, import_react10.createElement)(row.icon, { fontSize: "inherit" }),
                 editableElement: ({
                   value,
                   onChange,
@@ -1557,18 +1617,21 @@ function VariablesManagerPanel() {
   const {
     variables,
     isDirty,
-    hasValidationErrors,
     searchValue,
+    isSaveDisabled,
     handleOnChange,
     createVariable: createVariable2,
     handleDeleteVariable,
     handleSave,
     isSaving,
     handleSearch,
-    setHasValidationErrors
+    setIsSaving,
+    setIsSaveDisabled
   } = useVariablesManagerState();
   const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react10.useState)(null);
+  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) {
@@ -1577,7 +1640,7 @@ function VariablesManagerPanel() {
     }
     closePanel();
   };
-  const handleCreateVariable = (0, import_react10.useCallback)(
+  const handleCreateVariable = (0, import_react11.useCallback)(
     (type, defaultName, defaultValue) => {
       const newId = createVariable2(type, defaultName, defaultValue);
       if (newId) {
@@ -1586,7 +1649,30 @@ function VariablesManagerPanel() {
     },
     [createVariable2, startAutoEdit]
   );
-  const handleDeleteVariableWithConfirmation = (0, import_react10.useCallback)(
+  const handleSaveClick = async () => {
+    try {
+      setServerError(null);
+      resetNavigation();
+      return await handleSave();
+    } 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);
@@ -1595,7 +1681,7 @@ function VariablesManagerPanel() {
   );
   const menuActions = [
     {
-      name: (0, import_i18n10.__)("Delete", "elementor"),
+      name: (0, import_i18n9.__)("Delete", "elementor"),
       icon: import_icons5.TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
@@ -1606,14 +1692,14 @@ function VariablesManagerPanel() {
     }
   ];
   const hasVariables = Object.values(variables).some((variable) => !variable.deleted);
-  return /* @__PURE__ */ React12.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React12.createElement(import_ui12.ErrorBoundary, { fallback: /* @__PURE__ */ React12.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React12.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React12.createElement(
+  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: {
         height: "unset"
       }
     },
-    /* @__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_icons5.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n10.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React12.createElement(import_ui12.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React12.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_icons5.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n9.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React12.createElement(import_ui12.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React12.createElement(
       VariableManagerCreateMenu,
       {
         onCreate: handleCreateVariable,
@@ -1636,7 +1722,7 @@ function VariablesManagerPanel() {
           display: "flex",
           flex: 1
         },
-        placeholder: (0, import_i18n10.__)("Search", "elementor"),
+        placeholder: (0, import_i18n9.__)("Search", "elementor"),
         value: searchValue,
         onSearch: handleSearch
       }
@@ -1658,7 +1744,7 @@ function VariablesManagerPanel() {
         onChange: handleOnChange,
         autoEditVariableId,
         onAutoEditComplete: handleAutoEditComplete,
-        onFieldError: setHasValidationErrors
+        onFieldError: setIsSaveDisabled
       }
     ),
     !hasVariables && searchValue && /* @__PURE__ */ React12.createElement(
@@ -1672,8 +1758,8 @@ function VariablesManagerPanel() {
     !hasVariables && !searchValue && /* @__PURE__ */ React12.createElement(
       EmptyState,
       {
-        title: (0, import_i18n10.__)("Create your first variable", "elementor"),
-        message: (0, import_i18n10.__)(
+        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"
         ),
@@ -1682,17 +1768,45 @@ function VariablesManagerPanel() {
       }
     )
   ), /* @__PURE__ */ React12.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React12.createElement(
-    import_ui12.Button,
+    import_ui12.Infotip,
     {
-      fullWidth: true,
-      size: "small",
-      color: "global",
-      variant: "contained",
-      disabled: !isDirty || hasValidationErrors || isSaving,
-      onClick: handleSave,
-      loading: isSaving
+      placement: "right",
+      open: !!serverError,
+      content: serverError ? /* @__PURE__ */ React12.createElement(
+        import_ui12.Alert,
+        {
+          severity: "error",
+          action: serverError.action ? /* @__PURE__ */ React12.createElement(import_ui12.AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
+          icon: /* @__PURE__ */ React12.createElement(import_icons5.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] }
+            }
+          ]
+        }
+      }
     },
-    (0, import_i18n10.__)("Save changes", "elementor")
+    /* @__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")
+    )
   ))), deleteConfirmation && /* @__PURE__ */ React12.createElement(
     DeleteConfirmationDialog,
     {
@@ -1701,32 +1815,33 @@ function VariablesManagerPanel() {
       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_i18n10.__)("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_i18n10.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React12.createElement(
+  ), 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_i18n10.__)("Discard", "elementor"),
+          label: (0, import_i18n9.__)("Discard", "elementor"),
           action: () => {
             closeSaveChangesDialog();
             closePanel();
           }
         },
         confirm: {
-          label: (0, import_i18n10.__)("Save", "elementor"),
+          label: (0, import_i18n9.__)("Save", "elementor"),
           action: async () => {
-            await handleSave();
+            const result = await handleSaveClick();
             closeSaveChangesDialog();
-            closePanel();
+            if (result?.success) {
+              closePanel();
+            }
           }
         }
       }
     }
   )));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React12.createElement(import_ui12.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React12.createElement(import_ui12.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React12.createElement("strong", null, (0, import_i18n10.__)("Something went wrong", "elementor"))));
 var usePreventUnload = (isDirty) => {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -1744,7 +1859,7 @@ var React31 = __toESM(require("react"));
 var import_editor_controls11 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var React22 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_icons12 = require("@elementor/icons");
@@ -1768,31 +1883,31 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 
 // src/components/variable-selection-popover.tsx
 var React20 = __toESM(require("react"));
-var import_react16 = 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 React13 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_ui13 = require("@elementor/ui");
-var PopoverContentRefContext = (0, import_react11.createContext)(null);
+var PopoverContentRefContext = (0, import_react12.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = (0, import_react11.useState)(null);
+  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_react11.useContext)(PopoverContentRefContext);
+  return (0, import_react12.useContext)(PopoverContentRefContext);
 };
 
 // src/components/variable-creation.tsx
 var React15 = __toESM(require("react"));
-var import_react12 = 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_ui4 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/hooks/use-initial-value.ts
 var import_editor_controls2 = require("@elementor/editor-controls");
@@ -1866,10 +1981,10 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls4.useBoundProp)();
   const initialValue = useInitialValue();
-  const [value, setValue] = (0, import_react12.useState)(initialValue);
-  const [label, setLabel] = (0, import_react12.useState)("");
-  const [errorMessage, setErrorMessage] = (0, import_react12.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react12.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 { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -1923,15 +2038,15 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   return /* @__PURE__ */ React15.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React15.createElement(
     import_editor_ui4.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(import_ui15.IconButton, { size: SIZE2, "aria-label": (0, import_i18n11.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React15.createElement(import_icons6.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE2 })),
-      title: (0, import_i18n11.__)("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_icons6.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE2 })),
+      title: (0, import_i18n10.__)("Create variable", "elementor"),
       onClose: closePopover
     }
   ), /* @__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_i18n11.__)("Name", "elementor"),
+      label: (0, import_i18n10.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
@@ -1953,7 +2068,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n11.__)("Value", "elementor") }, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React15.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,
@@ -1974,41 +2089,41 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       disabled: isSubmitDisabled,
       onClick: handleCreateAndTrack
     },
-    (0, import_i18n11.__)("Create", "elementor")
+    (0, import_i18n10.__)("Create", "elementor")
   )));
 };
 
 // src/components/variable-edit.tsx
 var React17 = __toESM(require("react"));
-var import_react14 = 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_ui5 = require("@elementor/editor-ui");
 var import_icons8 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/ui/edit-confirmation-dialog.tsx
 var React16 = __toESM(require("react"));
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_icons7 = require("@elementor/icons");
 var import_ui16 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react13.useState)(false);
+  const [dontShowAgain, setDontShowAgain] = (0, import_react14.useState)(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
     }
     onConfirm?.();
   };
-  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_icons7.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n12.__)("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_i18n12.__)(
+  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_icons7.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__ */ React16.createElement(import_ui16.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React16.createElement(
@@ -2022,31 +2137,32 @@ var EditConfirmationDialog = ({
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React16.createElement(import_ui16.Typography, { variant: "body2" }, (0, import_i18n12.__)("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__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement(import_ui16.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n12.__)("Keep editing", "elementor")), /* @__PURE__ */ React16.createElement(import_ui16.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n12.__)("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 SIZE3 = "tiny";
+var DELETE_LABEL = (0, import_i18n12.__)("Delete variable", "elementor");
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   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_react14.useState)(false);
-  const [editConfirmation, setEditConfirmation] = (0, import_react14.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, import_react14.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react14.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_react14.useState)(() => variable.value);
-  const [label, setLabel] = (0, import_react14.useState)(() => variable.label);
-  (0, import_react14.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,
@@ -2109,16 +2225,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React17.createElement(
-        import_ui17.IconButton,
-        {
-          key: "delete",
-          size: SIZE3,
-          "aria-label": (0, import_i18n13.__)("Delete", "elementor"),
-          onClick: handleDeleteConfirmation
-        },
-        /* @__PURE__ */ React17.createElement(import_icons8.TrashIcon, { fontSize: SIZE3 })
-      )
+      /* @__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_icons8.TrashIcon, { fontSize: SIZE3 })))
     );
   }
   const hasEmptyFields = () => {
@@ -2140,13 +2247,13 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   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_i18n13.__)("Edit variable", "elementor"),
+      title: (0, import_i18n12.__)("Edit variable", "elementor"),
       onClose,
       icon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, onGoBack && /* @__PURE__ */ React17.createElement(
         import_ui17.IconButton,
         {
           size: SIZE3,
-          "aria-label": (0, import_i18n13.__)("Go Back", "elementor"),
+          "aria-label": (0, import_i18n12.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
         /* @__PURE__ */ React17.createElement(import_icons8.ArrowLeftIcon, { fontSize: SIZE3 })
@@ -2157,7 +2264,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n13.__)("Name", "elementor"),
+      label: (0, import_i18n12.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
@@ -2179,7 +2286,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n13.__)("Value", "elementor") }, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { variant: "h5" }, /* @__PURE__ */ React17.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,
     {
       value,
@@ -2191,7 +2298,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), 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_i18n13.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React17.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,
@@ -2211,20 +2318,21 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 
 // src/components/variables-selection.tsx
 var React19 = __toESM(require("react"));
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons10 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
 var React18 = __toESM(require("react"));
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+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(
@@ -2260,7 +2368,7 @@ var MenuItemContent = ({ item }) => {
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React18.createElement(
+  ), !!onEdit && /* @__PURE__ */ React18.createElement(import_ui18.Tooltip, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React18.createElement(
     import_ui18.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
@@ -2268,10 +2376,10 @@ var MenuItemContent = ({ item }) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": (0, import_i18n14.__)("Edit", "elementor")
+      "aria-label": EDIT_LABEL
     },
     /* @__PURE__ */ React18.createElement(import_icons9.EditIcon, { color: "action", fontSize: SIZE4 })
-  ));
+  )));
 };
 
 // src/components/ui/styled-menu-list.tsx
@@ -2308,10 +2416,12 @@ var VariablesStyledMenuList = (0, import_ui19.styled)(import_ui19.MenuList)(({ t
 
 // src/components/variables-selection.tsx
 var SIZE5 = "tiny";
+var CREATE_LABEL = (0, import_i18n14.__)("Create variable", "elementor");
+var MANAGER_LABEL = (0, import_i18n14.__)("Variable Manager", "elementor");
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
-  const [searchValue, setSearchValue] = (0, import_react15.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react16.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -2338,12 +2448,30 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React19.createElement(import_ui20.IconButton, { id: "add-variable-button", key: "add", size: SIZE5, onClick: onAddAndTrack }, /* @__PURE__ */ React19.createElement(import_icons10.PlusIcon, { fontSize: SIZE5 }))
+      /* @__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_icons10.PlusIcon, { fontSize: SIZE5 })
+      ))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React19.createElement(import_ui20.IconButton, { id: "variables-manager-button", key: "settings", size: SIZE5, onClick: onSettings }, /* @__PURE__ */ React19.createElement(import_icons10.SettingsIcon, { fontSize: SIZE5 }))
+      /* @__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,
+          "aria-label": MANAGER_LABEL
+        },
+        /* @__PURE__ */ React19.createElement(import_icons10.SettingsIcon, { fontSize: SIZE5 })
+      ))
     );
   }
   const StartIcon = startIcon || (() => /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: SIZE5 }));
@@ -2361,15 +2489,15 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  const noVariableTitle = (0, import_i18n15.sprintf)(
+  const noVariableTitle = (0, import_i18n14.sprintf)(
     /* translators: %s: Variable Type. */
-    (0, import_i18n15.__)("Create your first %s variable", "elementor"),
+    (0, import_i18n14.__)("Create your first %s variable", "elementor"),
     variableType
   );
   return /* @__PURE__ */ React19.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React19.createElement(
     import_editor_ui7.PopoverHeader,
     {
-      title: (0, import_i18n15.__)("Variables", "elementor"),
+      title: (0, import_i18n14.__)("Variables", "elementor"),
       icon: /* @__PURE__ */ React19.createElement(import_icons10.ColorFilterIcon, { fontSize: SIZE5 }),
       onClose: closePopover,
       actions
@@ -2379,7 +2507,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n15.__)("Search", "elementor")
+      placeholder: (0, import_i18n14.__)("Search", "elementor")
     }
   ), /* @__PURE__ */ React19.createElement(import_ui20.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React19.createElement(
     import_editor_ui7.PopoverMenuList,
@@ -2404,7 +2532,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     EmptyState,
     {
       title: noVariableTitle,
-      message: (0, import_i18n15.__)(
+      message: (0, import_i18n14.__)(
         "Variables are saved attributes that you can apply anywhere on your site.",
         "elementor"
       ),
@@ -2414,8 +2542,8 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   ), hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
     EmptyState,
     {
-      title: (0, import_i18n15.__)("No compatible variables", "elementor"),
-      message: (0, import_i18n15.__)(
+      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"
       ),
@@ -2430,8 +2558,8 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = (0, import_react16.useState)(VIEW_LIST);
-  const [editId, setEditId] = (0, import_react16.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();
@@ -2513,13 +2641,14 @@ function RenderView(props) {
 var React21 = __toESM(require("react"));
 var import_icons11 = require("@elementor/icons");
 var import_ui21 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+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__ */ React21.createElement(import_ui21.IconButton, { key: "unlink", size: SIZE6, onClick: onUnlink, "aria-label": (0, import_i18n16.__)("Unlink", "elementor") }, /* @__PURE__ */ React21.createElement(import_icons11.DetachIcon, { fontSize: SIZE6 }))
+      /* @__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_icons11.DetachIcon, { fontSize: SIZE6 })))
     );
   }
   return /* @__PURE__ */ React21.createElement(import_ui21.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React21.createElement(
@@ -2539,8 +2668,8 @@ 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_react17.useRef)(null);
-  const popupId = (0, import_react17.useId)();
+  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}`
@@ -2580,19 +2709,19 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 var React26 = __toESM(require("react"));
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_editor_controls8 = require("@elementor/editor-controls");
 var import_ui26 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
+var import_i18n18 = require("@wordpress/i18n");
 
 // src/components/variable-restore.tsx
 var React23 = __toESM(require("react"));
-var import_react18 = 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_ui8 = require("@elementor/editor-ui");
 var import_ui23 = require("@elementor/ui");
-var import_i18n17 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 var SIZE7 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
@@ -2602,10 +2731,10 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = (0, import_react18.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react18.useState)("");
-  const [label, setLabel] = (0, import_react18.useState)(variable.label);
-  const [value, setValue] = (0, import_react18.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
@@ -2647,14 +2776,14 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     import_editor_ui8.PopoverHeader,
     {
       icon: /* @__PURE__ */ React23.createElement(VariableIcon, { fontSize: SIZE7 }),
-      title: (0, import_i18n17.__)("Restore variable", "elementor"),
+      title: (0, import_i18n16.__)("Restore variable", "elementor"),
       onClose
     }
   ), /* @__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_i18n17.__)("Name", "elementor"),
+      label: (0, import_i18n16.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
@@ -2676,7 +2805,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React23.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n17.__)("Value", "elementor") }, /* @__PURE__ */ React23.createElement(import_ui23.Typography, { variant: "h5" }, /* @__PURE__ */ React23.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,
@@ -2688,13 +2817,13 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), 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_i18n17.__)("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 React24 = __toESM(require("react"));
 var import_ui24 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
+var import_i18n17 = require("@wordpress/i18n");
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
   return /* @__PURE__ */ React24.createElement(import_ui24.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React24.createElement(
     import_ui24.Alert,
@@ -2702,11 +2831,11 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React24.createElement(React24.Fragment, null, onUnlink && /* @__PURE__ */ React24.createElement(import_ui24.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n18.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React24.createElement(import_ui24.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n18.__)("Restore", "elementor"))),
+      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__ */ React24.createElement(import_ui24.AlertTitle, null, (0, import_i18n18.__)("Deleted variable", "elementor")),
-    /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n18.__)("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", (0, import_i18n18.__)(
+    /* @__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"
     ))
@@ -2749,11 +2878,11 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = (0, import_editor_controls8.useBoundProp)();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = (0, import_react19.useState)(false);
+  const [showInfotip, setShowInfotip] = (0, import_react20.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = (0, import_react19.useRef)(null);
-  const popupId = (0, import_react19.useId)();
+  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}`
@@ -2813,7 +2942,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       {
         label: variable.label,
         onClick: toggleInfotip,
-        suffix: (0, import_i18n19.__)("deleted", "elementor")
+        suffix: (0, import_i18n18.__)("deleted", "elementor")
       }
     )
   ), /* @__PURE__ */ React26.createElement(
@@ -2840,24 +2969,24 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 var React28 = __toESM(require("react"));
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
 var import_ui28 = require("@elementor/ui");
-var import_i18n21 = require("@wordpress/i18n");
+var import_i18n20 = require("@wordpress/i18n");
 
 // src/components/ui/mismatch-variable-alert.tsx
 var React27 = __toESM(require("react"));
 var import_ui27 = require("@elementor/ui");
-var import_i18n20 = require("@wordpress/i18n");
+var import_i18n19 = require("@wordpress/i18n");
 var i18n = {
-  title: (0, import_i18n20.__)("Variable has changed", "elementor"),
-  message: (0, import_i18n20.__)(
+  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_i18n20.__)("Clear", "elementor"),
-    select: (0, import_i18n20.__)("Select variable", "elementor")
+    clear: (0, import_i18n19.__)("Clear", "elementor"),
+    select: (0, import_i18n19.__)("Select variable", "elementor")
   }
 };
 var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
@@ -2878,13 +3007,13 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue, value } = (0, import_editor_controls9.useBoundProp)();
-  const anchorRef = (0, import_react20.useRef)(null);
-  const popupId = (0, import_react20.useId)();
+  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_react20.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react21.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -2929,7 +3058,7 @@ var MismatchVariable = ({ variable }) => {
       {
         label: variable.label,
         onClick: toggleInfotip,
-        suffix: (0, import_i18n21.__)("changed", "elementor")
+        suffix: (0, import_i18n20.__)("changed", "elementor")
       }
     )
   ), /* @__PURE__ */ React28.createElement(
@@ -2957,15 +3086,15 @@ var MismatchVariable = ({ variable }) => {
 
 // src/components/ui/variable/missing-variable.tsx
 var React30 = __toESM(require("react"));
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_editor_controls10 = require("@elementor/editor-controls");
 var import_ui30 = require("@elementor/ui");
-var import_i18n23 = require("@wordpress/i18n");
+var import_i18n22 = require("@wordpress/i18n");
 
 // src/components/ui/missing-variable-alert.tsx
 var React29 = __toESM(require("react"));
 var import_ui29 = require("@elementor/ui");
-var import_i18n22 = require("@wordpress/i18n");
+var import_i18n21 = require("@wordpress/i18n");
 var MissingVariableAlert = ({ onClose, onClear }) => {
   return /* @__PURE__ */ React29.createElement(import_ui29.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
     import_ui29.Alert,
@@ -2973,11 +3102,11 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
       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_i18n22.__)("Clear", "elementor"))),
+      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_i18n22.__)("This variable is missing", "elementor")),
-    /* @__PURE__ */ React29.createElement(import_ui29.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n22.__)(
+    /* @__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"
     ))
@@ -2987,7 +3116,7 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = (0, import_editor_controls10.useBoundProp)();
-  const [infotipVisible, setInfotipVisible] = (0, import_react21.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react22.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
@@ -3011,7 +3140,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React30.createElement(WarningVariableTag, { label: (0, import_i18n23.__)("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React30.createElement(WarningVariableTag, { label: (0, import_i18n22.__)("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -3038,14 +3167,14 @@ var VariableControl = () => {
 var React32 = __toESM(require("react"));
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 var import_icons14 = require("@elementor/icons");
-var import_i18n24 = require("@wordpress/i18n");
+var import_i18n23 = require("@wordpress/i18n");
 var usePropVariableAction = () => {
   const { propType, path } = (0, import_editor_editing_panel6.useBoundProp)();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
     icon: import_icons14.ColorFilterIcon,
-    title: (0, import_i18n24.__)("Variables", "elementor"),
+    title: (0, import_i18n23.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
@@ -3334,12 +3463,12 @@ var import_icons16 = require("@elementor/icons");
 
 // src/components/fields/color-field.tsx
 var React33 = __toESM(require("react"));
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_ui31 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = (0, import_react22.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react22.useState)("");
-  const defaultRef = (0, import_react22.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);
@@ -3378,15 +3507,15 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 var React34 = __toESM(require("react"));
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_editor_controls12 = require("@elementor/editor-controls");
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
 var import_icons15 = require("@elementor/icons");
 var import_ui32 = require("@elementor/ui");
-var import_i18n25 = require("@wordpress/i18n");
+var import_i18n24 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = (0, import_react23.useState)(value);
-  const defaultRef = (0, import_react23.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_ui32.usePopupState)({ variant: "popover" });
   const fontFamilies = (0, import_editor_editing_panel7.useFontFamilies)();
@@ -3407,7 +3536,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = (0, import_react23.useId)();
+  const id2 = (0, import_react24.useId)();
   return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(
     import_ui32.UnstableTag,
     {
@@ -3437,7 +3566,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: (0, import_i18n25.__)("Font Family", "elementor"),
+        title: (0, import_i18n24.__)("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: import_editor_controls12.enqueueFont,
         icon: import_icons15.TextIcon
@@ -3469,7 +3598,7 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 var React36 = __toESM(require("react"));
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_ui33 = require("@elementor/ui");
 
@@ -3496,8 +3625,8 @@ 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_react24.useState)({});
-  (0, import_react24.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react25.useState)({});
+  (0, import_react25.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();