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

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { isTransformable as isTransformable2 } from "@elementor/editor-props";
 
 // src/components/variables-manager/variables-manager-panel.tsx
 import * as React12 from "react";
-import { useCallback as useCallback4, useEffect as useEffect3, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect3, useState as useState5 } from "react";
 import {
   __createPanel as createPanel,
   Panel,
@@ -17,9 +17,107 @@ import {
 } from "@elementor/editor-panels";
 import { SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
 import { changeEditMode } from "@elementor/editor-v1-adapters";
-import { ColorFilterIcon, TrashIcon } from "@elementor/icons";
-import { Alert, Box, Button as Button3, CloseButton, Divider, ErrorBoundary, Stack as Stack6, usePopupState as usePopupState2 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { AlertTriangleFilledIcon, ColorFilterIcon, TrashIcon } from "@elementor/icons";
+import {
+  Alert,
+  AlertAction,
+  AlertTitle,
+  Button as Button3,
+  CloseButton,
+  Divider,
+  Infotip,
+  Stack as Stack6,
+  usePopupState as usePopupState2
+} from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
+
+// src/utils/validations.ts
+import { __, sprintf } from "@wordpress/i18n";
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: __("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: __("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: __("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: __("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: __("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: __("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: __("There was a glitch. Try saving your variable again.", "elementor"),
+  BATCH: {
+    DUPLICATED_LABELS: (count, name) => (
+      // eslint-disable-next-line @wordpress/i18n-translator-comments
+      sprintf(__("We found %1$d duplicated %2$s.", "elementor"), count, name)
+    ),
+    UNEXPECTED_ERROR: __("The save didn\u2019t go through.", "elementor"),
+    DUPLICATED_LABEL_ACTION: __("Take me there", "elementor"),
+    DUPLICATED_LABEL_ACTION_MESSAGE: __("Please rename the variables.", "elementor"),
+    UNEXPECTED_ERROR_ACTION_MESSAGE: __("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
 import * as React from "react";
@@ -33,7 +131,7 @@ import {
   DialogTitle,
   Typography
 } from "@elementor/ui";
-import { __ } from "@wordpress/i18n";
+import { __ as __2 } from "@wordpress/i18n";
 var TITLE_ID = "delete-variable-dialog";
 var DeleteConfirmationDialog = ({
   open,
@@ -41,13 +139,13 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React.createElement(AlertOctagonFilledIcon, { color: "error" }), __("Delete this variable?", "elementor")), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", __("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { color: "secondary", onClick: closeDialog }, __("Not now", "elementor")), /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __("Delete", "elementor"))));
+  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React.createElement(AlertOctagonFilledIcon, { color: "error" }), __2("Delete this variable?", "elementor")), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __2("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", __2("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { color: "secondary", onClick: closeDialog }, __2("Not now", "elementor")), /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __2("Delete", "elementor"))));
 };
 
 // src/components/ui/empty-state.tsx
 import * as React2 from "react";
 import { Button as Button2, Stack, Typography as Typography2 } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/hooks/use-permissions.ts
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
@@ -78,11 +176,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(Button2, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __2("Create a variable", "elementor"))) : /* @__PURE__ */ React2.createElement(
+    canAdd ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React2.createElement(Button2, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __3("Create a variable", "elementor"))) : /* @__PURE__ */ React2.createElement(
       Content,
       {
-        title: __2("There are no variables", "elementor"),
-        message: __2("With your current role, you can only connect and detach variables.", "elementor")
+        title: __3("There are no variables", "elementor"),
+        message: __3("With your current role, you can only connect and detach variables.", "elementor")
       }
     )
   );
@@ -94,7 +192,7 @@ function Content({ title, message }) {
 // src/components/ui/no-search-results.tsx
 import * as React3 from "react";
 import { Link, Stack as Stack2, Typography as Typography3 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
   return /* @__PURE__ */ React3.createElement(
     Stack2,
@@ -107,8 +205,8 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5, pt: 8 }
     },
     icon,
-    /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "subtitle2" }, __3("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React3.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __3("Try something else.", "elementor"), /* @__PURE__ */ React3.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __3("Clear & try again", "elementor")))
+    /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "subtitle2" }, __4("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React3.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __4("Try something else.", "elementor"), /* @__PURE__ */ React3.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __4("Clear & try again", "elementor")))
   );
 };
 
@@ -131,9 +229,43 @@ var useAutoEdit = () => {
   };
 };
 
+// src/components/variables-manager/hooks/use-error-navigation.ts
+import { useCallback as useCallback2, useRef } from "react";
+var useErrorNavigation = () => {
+  const currentIndexRef = useRef(0);
+  const createNavigationCallback = useCallback2(
+    (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 = useCallback2(() => {
+    currentIndexRef.current = 0;
+  }, []);
+  return {
+    createNavigationCallback,
+    resetNavigation
+  };
+};
+
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
-import { __ as __7 } from "@wordpress/i18n";
+import { useCallback as useCallback3, useState as useState2 } from "react";
 
 // src/batch-operations.ts
 var generateTempId = () => {
@@ -211,7 +343,7 @@ import { stylesInheritanceTransformersRegistry } from "@elementor/editor-editing
 import * as React4 from "react";
 import { createTransformer } from "@elementor/editor-canvas";
 import { Stack as Stack3, Typography as Typography4 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/components/ui/color-indicator.tsx
 import { styled, UnstableColorIndicator } from "@elementor/ui";
@@ -226,7 +358,7 @@ import { z } from "@elementor/schema";
 var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
 
 // src/service.ts
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/api.ts
 import { httpService } from "@elementor/http-client";
@@ -431,7 +563,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __4("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __5("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -453,7 +585,7 @@ var service = {
     return apiClient.update(id2, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __4("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __5("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -586,7 +718,7 @@ var inheritanceTransformer = createTransformer((id2) => {
   const variables = service.variables();
   const variable = variables[id2];
   if (!variable) {
-    return /* @__PURE__ */ React4.createElement("span", null, __5("Missing variable", "elementor"));
+    return /* @__PURE__ */ React4.createElement("span", null, __6("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
   const css = resolveCssVariable(id2, variable);
@@ -756,77 +888,22 @@ var restoreVariable = (restoreId, label, value) => {
   return service.restore(restoreId, label, value).then(extractId);
 };
 
-// src/utils/validations.ts
-import { __ as __6 } from "@wordpress/i18n";
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: __6("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: __6("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: __6("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: __6("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: __6("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: __6("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: __6("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] = useState2(() => getVariables(false));
   const [deletedVariables, setDeletedVariables] = useState2([]);
+  const [isSaveDisabled, setIsSaveDisabled] = useState2(false);
   const [isDirty, setIsDirty] = useState2(false);
-  const [hasValidationErrors, setHasValidationErrors] = useState2(false);
   const [isSaving, setIsSaving] = useState2(false);
   const [searchValue, setSearchValue] = useState2("");
-  const handleOnChange = useCallback2(
+  const handleOnChange = useCallback3(
     (newVariables) => {
       setVariables({ ...variables, ...newVariables });
       setIsDirty(true);
     },
     [variables]
   );
-  const createVariable2 = useCallback2((type, defaultName, defaultValue) => {
+  const createVariable2 = useCallback3((type, defaultName, defaultValue) => {
     const newId = generateTempId();
     const newVariable = {
       id: newId,
@@ -838,7 +915,7 @@ var useVariablesManagerState = () => {
     setIsDirty(true);
     return newId;
   }, []);
-  const handleDeleteVariable = useCallback2((itemId) => {
+  const handleDeleteVariable = useCallback3((itemId) => {
     setDeletedVariables((prev) => [...prev, itemId]);
     setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
     setIsDirty(true);
@@ -846,26 +923,18 @@ var useVariablesManagerState = () => {
   const handleSearch = (searchTerm) => {
     setSearchValue(searchTerm);
   };
-  const handleSave = useCallback2(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(__7("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 = useCallback3(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 }));
@@ -876,7 +945,7 @@ var useVariablesManagerState = () => {
     variables: filteredVariables(),
     deletedVariables,
     isDirty,
-    hasValidationErrors,
+    isSaveDisabled,
     handleOnChange,
     createVariable: createVariable2,
     handleDeleteVariable,
@@ -884,16 +953,17 @@ var useVariablesManagerState = () => {
     isSaving,
     handleSearch,
     searchValue,
-    setHasValidationErrors
+    setIsSaving,
+    setIsSaveDisabled
   };
 };
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
 import * as React6 from "react";
-import { createElement as createElement7, useRef } from "react";
+import { createElement as createElement7, useRef as useRef2 } from "react";
 import { PlusIcon } from "@elementor/icons";
 import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, Typography as Typography5 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 var SIZE = "tiny";
 var VariableManagerCreateMenu = ({
   variables,
@@ -901,7 +971,7 @@ var VariableManagerCreateMenu = ({
   disabled,
   menuState
 }) => {
-  const buttonRef = useRef(null);
+  const buttonRef = useRef2(null);
   const variableTypes = getVariableTypes();
   const menuOptions = Object.entries(variableTypes).map(([key, variable]) => {
     const displayName = variable.variableType.charAt(0).toUpperCase() + variable.variableType.slice(1);
@@ -922,7 +992,7 @@ var VariableManagerCreateMenu = ({
       ref: buttonRef,
       disabled,
       size: SIZE,
-      "aria-label": __8("Add variable", "elementor")
+      "aria-label": __7("Add variable", "elementor")
     },
     /* @__PURE__ */ React6.createElement(PlusIcon, { fontSize: SIZE })
   ), /* @__PURE__ */ React6.createElement(
@@ -980,7 +1050,7 @@ var getDefaultName = (variables, type, baseName) => {
 
 // src/components/variables-manager/variables-manager-table.tsx
 import * as React11 from "react";
-import { createElement as createElement14, useEffect as useEffect2, useRef as useRef4 } from "react";
+import { createElement as createElement14, useEffect as useEffect2, useRef as useRef5 } from "react";
 import { EllipsisWithTooltip } from "@elementor/editor-ui";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
@@ -994,11 +1064,11 @@ import {
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/components/fields/label-field.tsx
 import * as React7 from "react";
-import { useRef as useRef2, useState as useState3 } from "react";
+import { useRef as useRef3, useState as useState3 } from "react";
 import { WarningInfotip } from "@elementor/editor-ui";
 import { TextField } from "@elementor/ui";
 function isLabelEqual(a, b) {
@@ -1025,7 +1095,7 @@ var LabelField = ({
 }) => {
   const [label, setLabel] = useState3(value);
   const [errorMessage, setErrorMessage] = useState3("");
-  const fieldRef = useRef2(null);
+  const fieldRef = useRef3(null);
   const handleChange = (newValue) => {
     setLabel(newValue);
     const errorMsg2 = validateLabel(newValue, variables);
@@ -1154,7 +1224,7 @@ var VariableTableCell = ({
 
 // src/components/variables-manager/variable-editable-cell.tsx
 import * as React10 from "react";
-import { useCallback as useCallback3, useEffect, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect, useRef as useRef4, useState as useState4 } from "react";
 import { ClickAwayListener, Stack as Stack4 } from "@elementor/ui";
 var VariableEditableCell = React10.memo(
   ({
@@ -1173,8 +1243,8 @@ var VariableEditableCell = React10.memo(
     const [isEditing, setIsEditing] = useState4(false);
     const { labelFieldError, setLabelFieldError } = useLabelError();
     const [valueFieldError, setValueFieldError] = useState4("");
-    const rowRef = useRef3(null);
-    const handleSave = useCallback3(() => {
+    const rowRef = useRef4(null);
+    const handleSave = useCallback4(() => {
       const hasError = fieldType === "label" && labelFieldError?.message || fieldType === "value" && valueFieldError;
       if (!hasError) {
         onChange(value);
@@ -1204,10 +1274,10 @@ var VariableEditableCell = React10.memo(
         setIsEditing(true);
       }
     };
-    const handleChange = useCallback3((newValue) => {
+    const handleChange = useCallback4((newValue) => {
       setValue(newValue);
     }, []);
-    const handleValidationChange = useCallback3(
+    const handleValidationChange = useCallback4(
       (errorMsg) => {
         if (fieldType === "label") {
           setLabelFieldError({
@@ -1278,8 +1348,8 @@ var VariablesManagerTable = ({
   onAutoEditComplete,
   onFieldError
 }) => {
-  const tableContainerRef = useRef4(null);
-  const variableRowRefs = useRef4(/* @__PURE__ */ new Map());
+  const tableContainerRef = useRef5(null);
+  const variableRowRefs = useRef5(/* @__PURE__ */ new Map());
   useEffect2(() => {
     if (autoEditVariableId && tableContainerRef.current) {
       const rowElement = variableRowRefs.current.get(autoEditVariableId);
@@ -1328,7 +1398,7 @@ var VariablesManagerTable = ({
     });
     handleOnChange(updatedVariables);
   };
-  return /* @__PURE__ */ React11.createElement(TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React11.createElement(Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React11.createElement(TableHead, null, /* @__PURE__ */ React11.createElement(TableRow, null, /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true }, __9("Name", "elementor")), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true }, __9("Value", "elementor")), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React11.createElement(TableBody, null, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React11.createElement(TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React11.createElement(Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React11.createElement(TableHead, null, /* @__PURE__ */ React11.createElement(TableRow, null, /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true }, __8("Name", "elementor")), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true }, __8("Value", "elementor")), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React11.createElement(TableBody, null, /* @__PURE__ */ React11.createElement(
     UnstableSortableProvider,
     {
       value: ids,
@@ -1544,18 +1614,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 { createNavigationCallback, resetNavigation } = useErrorNavigation();
   const [deleteConfirmation, setDeleteConfirmation] = useState5(null);
+  const [serverError, setServerError] = useState5(null);
   usePreventUnload(isDirty);
   const handleClosePanel = () => {
     if (isDirty) {
@@ -1564,7 +1637,7 @@ function VariablesManagerPanel() {
     }
     closePanel();
   };
-  const handleCreateVariable = useCallback4(
+  const handleCreateVariable = useCallback5(
     (type, defaultName, defaultValue) => {
       const newId = createVariable2(type, defaultName, defaultValue);
       if (newId) {
@@ -1573,7 +1646,30 @@ function VariablesManagerPanel() {
     },
     [createVariable2, startAutoEdit]
   );
-  const handleDeleteVariableWithConfirmation = useCallback4(
+  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 = useCallback5(
     (itemId) => {
       handleDeleteVariable(itemId);
       setDeleteConfirmation(null);
@@ -1582,7 +1678,7 @@ function VariablesManagerPanel() {
   );
   const menuActions = [
     {
-      name: __10("Delete", "elementor"),
+      name: __9("Delete", "elementor"),
       icon: TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
@@ -1593,14 +1689,14 @@ function VariablesManagerPanel() {
     }
   ];
   const hasVariables = Object.values(variables).some((variable) => !variable.deleted);
-  return /* @__PURE__ */ React12.createElement(ThemeProvider, null, /* @__PURE__ */ React12.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React12.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React12.createElement(Panel, null, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React12.createElement(ThemeProvider, null, /* @__PURE__ */ React12.createElement(Panel, null, /* @__PURE__ */ React12.createElement(
     PanelHeader,
     {
       sx: {
         height: "unset"
       }
     },
-    /* @__PURE__ */ React12.createElement(Stack6, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React12.createElement(Stack6, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React12.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React12.createElement(ColorFilterIcon, { fontSize: "inherit" }), __10("Variable Manager", "elementor"))), /* @__PURE__ */ React12.createElement(Stack6, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React12.createElement(Stack6, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React12.createElement(Stack6, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React12.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React12.createElement(ColorFilterIcon, { fontSize: "inherit" }), __9("Variable Manager", "elementor"))), /* @__PURE__ */ React12.createElement(Stack6, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React12.createElement(
       VariableManagerCreateMenu,
       {
         onCreate: handleCreateVariable,
@@ -1623,7 +1719,7 @@ function VariablesManagerPanel() {
           display: "flex",
           flex: 1
         },
-        placeholder: __10("Search", "elementor"),
+        placeholder: __9("Search", "elementor"),
         value: searchValue,
         onSearch: handleSearch
       }
@@ -1645,7 +1741,7 @@ function VariablesManagerPanel() {
         onChange: handleOnChange,
         autoEditVariableId,
         onAutoEditComplete: handleAutoEditComplete,
-        onFieldError: setHasValidationErrors
+        onFieldError: setIsSaveDisabled
       }
     ),
     !hasVariables && searchValue && /* @__PURE__ */ React12.createElement(
@@ -1659,8 +1755,8 @@ function VariablesManagerPanel() {
     !hasVariables && !searchValue && /* @__PURE__ */ React12.createElement(
       EmptyState,
       {
-        title: __10("Create your first variable", "elementor"),
-        message: __10(
+        title: __9("Create your first variable", "elementor"),
+        message: __9(
           "Variables are saved attributes that you can apply anywhere on your site.",
           "elementor"
         ),
@@ -1669,17 +1765,45 @@ function VariablesManagerPanel() {
       }
     )
   ), /* @__PURE__ */ React12.createElement(PanelFooter, null, /* @__PURE__ */ React12.createElement(
-    Button3,
+    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(
+        Alert,
+        {
+          severity: "error",
+          action: serverError.action ? /* @__PURE__ */ React12.createElement(AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
+          icon: /* @__PURE__ */ React12.createElement(AlertTriangleFilledIcon, null)
+        },
+        /* @__PURE__ */ React12.createElement(AlertTitle, null, serverError.message),
+        serverError.action?.message
+      ) : null,
+      arrow: false,
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [-10, 10] }
+            }
+          ]
+        }
+      }
     },
-    __10("Save changes", "elementor")
+    /* @__PURE__ */ React12.createElement(
+      Button3,
+      {
+        fullWidth: true,
+        size: "small",
+        color: "global",
+        variant: "contained",
+        disabled: isSaveDisabled || !isDirty || isSaving,
+        onClick: handleSaveClick,
+        loading: isSaving
+      },
+      __9("Save changes", "elementor")
+    )
   ))), deleteConfirmation && /* @__PURE__ */ React12.createElement(
     DeleteConfirmationDialog,
     {
@@ -1688,30 +1812,31 @@ function VariablesManagerPanel() {
       onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
       closeDialog: () => setDeleteConfirmation(null)
     }
-  )), isSaveChangesDialogOpen && /* @__PURE__ */ React12.createElement(SaveChangesDialog, null, /* @__PURE__ */ React12.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __10("You have unsaved changes", "elementor")), /* @__PURE__ */ React12.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React12.createElement(SaveChangesDialog.ContentText, null, __10("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React12.createElement(
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React12.createElement(SaveChangesDialog, null, /* @__PURE__ */ React12.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __9("You have unsaved changes", "elementor")), /* @__PURE__ */ React12.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React12.createElement(SaveChangesDialog.ContentText, null, __9("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React12.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: __10("Discard", "elementor"),
+          label: __9("Discard", "elementor"),
           action: () => {
             closeSaveChangesDialog();
             closePanel();
           }
         },
         confirm: {
-          label: __10("Save", "elementor"),
+          label: __9("Save", "elementor"),
           action: async () => {
-            await handleSave();
+            const result = await handleSaveClick();
             closeSaveChangesDialog();
-            closePanel();
+            if (result?.success) {
+              closePanel();
+            }
           }
         }
       }
     }
   )));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React12.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React12.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React12.createElement("strong", null, __10("Something went wrong", "elementor"))));
 var usePreventUnload = (isDirty) => {
   useEffect3(() => {
     const handleBeforeUnload = (event) => {
@@ -1731,11 +1856,11 @@ import * as React31 from "react";
 import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 
 // src/components/ui/variable/assigned-variable.tsx
-import { useId, useRef as useRef5 } from "react";
+import { useId, useRef as useRef6 } from "react";
 import * as React22 from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
-import { bindPopover, bindTrigger as bindTrigger3, Box as Box5, Popover, usePopupState as usePopupState3 } from "@elementor/ui";
+import { bindPopover, bindTrigger as bindTrigger3, Box as Box4, Popover, usePopupState as usePopupState3 } from "@elementor/ui";
 
 // src/utils/unlink-variable.ts
 function transformValueBeforeUnlink(variable, propTypeKey) {
@@ -1761,11 +1886,11 @@ import { isExperimentActive } from "@elementor/editor-v1-adapters";
 // src/context/variable-selection-popover.context.tsx
 import * as React13 from "react";
 import { createContext as createContext2, useContext as useContext2, useState as useState6 } from "react";
-import { Box as Box2 } from "@elementor/ui";
+import { Box } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
   const [anchorRef, setAnchorRef] = useState6(null);
-  return /* @__PURE__ */ React13.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React13.createElement(Box2, { ref: setAnchorRef }, children));
+  return /* @__PURE__ */ React13.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React13.createElement(Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
   return useContext2(PopoverContentRefContext);
@@ -1779,7 +1904,7 @@ import { PopoverBody } from "@elementor/editor-editing-panel";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { ArrowLeftIcon } from "@elementor/icons";
 import { Button as Button4, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton4, Typography as Typography6 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/hooks/use-initial-value.ts
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
@@ -1910,15 +2035,15 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   return /* @__PURE__ */ React15.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React15.createElement(
     PopoverHeader,
     {
-      icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(IconButton4, { size: SIZE2, "aria-label": __11("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React15.createElement(ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE2 })),
-      title: __11("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(IconButton4, { size: SIZE2, "aria-label": __10("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React15.createElement(ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE2 })),
+      title: __10("Create variable", "elementor"),
       onClose: closePopover
     }
   ), /* @__PURE__ */ React15.createElement(Divider2, null), /* @__PURE__ */ React15.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React15.createElement(
     FormField,
     {
       id: "variable-label",
-      label: __11("Name", "elementor"),
+      label: __10("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
@@ -1940,7 +2065,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: __11("Value", "elementor") }, /* @__PURE__ */ React15.createElement(Typography6, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: __10("Value", "elementor") }, /* @__PURE__ */ React15.createElement(Typography6, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React15.createElement(
     ValueField,
     {
       value,
@@ -1961,7 +2086,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       disabled: isSubmitDisabled,
       onClick: handleCreateAndTrack
     },
-    __11("Create", "elementor")
+    __10("Create", "elementor")
   )));
 };
 
@@ -1973,13 +2098,13 @@ import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { PopoverBody as PopoverBody2 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
 import { ArrowLeftIcon as ArrowLeftIcon2, TrashIcon as TrashIcon2 } from "@elementor/icons";
-import { Button as Button6, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5, Typography as Typography8 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { Button as Button6, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5, Tooltip, Typography as Typography8 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 
 // src/components/ui/edit-confirmation-dialog.tsx
 import * as React16 from "react";
 import { useState as useState8 } from "react";
-import { AlertTriangleFilledIcon } from "@elementor/icons";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2 } from "@elementor/icons";
 import {
   Button as Button5,
   Checkbox,
@@ -1991,7 +2116,7 @@ import {
   FormControlLabel,
   Typography as Typography7
 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
@@ -2005,7 +2130,7 @@ var EditConfirmationDialog = ({
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React16.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React16.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __12("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React16.createElement(DialogContent2, null, /* @__PURE__ */ React16.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __12(
+  return /* @__PURE__ */ React16.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React16.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(AlertTriangleFilledIcon2, { color: "secondary" }), __11("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React16.createElement(DialogContent2, null, /* @__PURE__ */ React16.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __11(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
   ))), /* @__PURE__ */ React16.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React16.createElement(
@@ -2019,13 +2144,14 @@ var EditConfirmationDialog = ({
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React16.createElement(Typography7, { variant: "body2" }, __12("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React16.createElement(Typography7, { variant: "body2" }, __11("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement(Button5, { color: "secondary", onClick: closeDialog }, __12("Keep editing", "elementor")), /* @__PURE__ */ React16.createElement(Button5, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __12("Save", "elementor")))));
+  ), /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement(Button5, { color: "secondary", onClick: closeDialog }, __11("Keep editing", "elementor")), /* @__PURE__ */ React16.createElement(Button5, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __11("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
 var SIZE3 = "tiny";
+var DELETE_LABEL = __12("Delete variable", "elementor");
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
@@ -2106,16 +2232,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React17.createElement(
-        IconButton5,
-        {
-          key: "delete",
-          size: SIZE3,
-          "aria-label": __13("Delete", "elementor"),
-          onClick: handleDeleteConfirmation
-        },
-        /* @__PURE__ */ React17.createElement(TrashIcon2, { fontSize: SIZE3 })
-      )
+      /* @__PURE__ */ React17.createElement(Tooltip, { key: "delete", placement: "top", title: DELETE_LABEL }, /* @__PURE__ */ React17.createElement(IconButton5, { size: SIZE3, onClick: handleDeleteConfirmation, "aria-label": DELETE_LABEL }, /* @__PURE__ */ React17.createElement(TrashIcon2, { fontSize: SIZE3 })))
     );
   }
   const hasEmptyFields = () => {
@@ -2137,13 +2254,13 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React17.createElement(
     PopoverHeader2,
     {
-      title: __13("Edit variable", "elementor"),
+      title: __12("Edit variable", "elementor"),
       onClose,
       icon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, onGoBack && /* @__PURE__ */ React17.createElement(
         IconButton5,
         {
           size: SIZE3,
-          "aria-label": __13("Go Back", "elementor"),
+          "aria-label": __12("Go Back", "elementor"),
           onClick: onGoBack
         },
         /* @__PURE__ */ React17.createElement(ArrowLeftIcon2, { fontSize: SIZE3 })
@@ -2154,7 +2271,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     FormField,
     {
       id: "variable-label",
-      label: __13("Name", "elementor"),
+      label: __12("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
@@ -2176,7 +2293,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: __13("Value", "elementor") }, /* @__PURE__ */ React17.createElement(Typography8, { variant: "h5" }, /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: __12("Value", "elementor") }, /* @__PURE__ */ React17.createElement(Typography8, { variant: "h5" }, /* @__PURE__ */ React17.createElement(
     ValueField,
     {
       value,
@@ -2188,7 +2305,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React17.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React17.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React17.createElement(Button6, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __13("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React17.createElement(
+  ))), errorMessage && /* @__PURE__ */ React17.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React17.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React17.createElement(Button6, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __12("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React17.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -2212,20 +2329,21 @@ import { useState as useState10 } from "react";
 import { PopoverBody as PopoverBody3 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader3, PopoverMenuList, SearchField as SearchField2 } from "@elementor/editor-ui";
 import { ColorFilterIcon as ColorFilterIcon2, PlusIcon as PlusIcon2, SettingsIcon } from "@elementor/icons";
-import { Divider as Divider4, IconButton as IconButton7 } from "@elementor/ui";
-import { __ as __15, sprintf } from "@wordpress/i18n";
+import { Divider as Divider4, IconButton as IconButton7, Tooltip as Tooltip3 } from "@elementor/ui";
+import { __ as __14, sprintf as sprintf2 } from "@wordpress/i18n";
 
 // src/components/ui/menu-item-content.tsx
 import * as React18 from "react";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
-import { Box as Box3, IconButton as IconButton6, ListItemIcon, Typography as Typography9 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { Box as Box2, IconButton as IconButton6, ListItemIcon, Tooltip as Tooltip2, Typography as Typography9 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
 var SIZE4 = "tiny";
+var EDIT_LABEL = __13("Edit variable", "elementor");
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
   return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React18.createElement(
-    Box3,
+    Box2,
     {
       sx: {
         flex: 1,
@@ -2257,7 +2375,7 @@ var MenuItemContent = ({ item }) => {
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React18.createElement(
+  ), !!onEdit && /* @__PURE__ */ React18.createElement(Tooltip2, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React18.createElement(
     IconButton6,
     {
       sx: { mx: 1, opacity: "0" },
@@ -2265,10 +2383,10 @@ var MenuItemContent = ({ item }) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": __14("Edit", "elementor")
+      "aria-label": EDIT_LABEL
     },
     /* @__PURE__ */ React18.createElement(EditIcon, { color: "action", fontSize: SIZE4 })
-  ));
+  )));
 };
 
 // src/components/ui/styled-menu-list.tsx
@@ -2305,6 +2423,8 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
 
 // src/components/variables-selection.tsx
 var SIZE5 = "tiny";
+var CREATE_LABEL = __14("Create variable", "elementor");
+var MANAGER_LABEL = __14("Variable Manager", "elementor");
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
@@ -2335,12 +2455,30 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React19.createElement(IconButton7, { id: "add-variable-button", key: "add", size: SIZE5, onClick: onAddAndTrack }, /* @__PURE__ */ React19.createElement(PlusIcon2, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React19.createElement(Tooltip3, { key: "add", placement: "top", title: CREATE_LABEL }, /* @__PURE__ */ React19.createElement(
+        IconButton7,
+        {
+          id: "add-variable-button",
+          size: SIZE5,
+          onClick: onAddAndTrack,
+          "aria-label": CREATE_LABEL
+        },
+        /* @__PURE__ */ React19.createElement(PlusIcon2, { fontSize: SIZE5 })
+      ))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React19.createElement(IconButton7, { id: "variables-manager-button", key: "settings", size: SIZE5, onClick: onSettings }, /* @__PURE__ */ React19.createElement(SettingsIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React19.createElement(Tooltip3, { key: "settings", placement: "top", title: MANAGER_LABEL }, /* @__PURE__ */ React19.createElement(
+        IconButton7,
+        {
+          id: "variables-manager-button",
+          size: SIZE5,
+          onClick: onSettings,
+          "aria-label": MANAGER_LABEL
+        },
+        /* @__PURE__ */ React19.createElement(SettingsIcon, { fontSize: SIZE5 })
+      ))
     );
   }
   const StartIcon = startIcon || (() => /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: SIZE5 }));
@@ -2358,15 +2496,15 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  const noVariableTitle = sprintf(
+  const noVariableTitle = sprintf2(
     /* translators: %s: Variable Type. */
-    __15("Create your first %s variable", "elementor"),
+    __14("Create your first %s variable", "elementor"),
     variableType
   );
   return /* @__PURE__ */ React19.createElement(PopoverBody3, null, /* @__PURE__ */ React19.createElement(
     PopoverHeader3,
     {
-      title: __15("Variables", "elementor"),
+      title: __14("Variables", "elementor"),
       icon: /* @__PURE__ */ React19.createElement(ColorFilterIcon2, { fontSize: SIZE5 }),
       onClose: closePopover,
       actions
@@ -2376,7 +2514,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __15("Search", "elementor")
+      placeholder: __14("Search", "elementor")
     }
   ), /* @__PURE__ */ React19.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React19.createElement(
     PopoverMenuList,
@@ -2401,7 +2539,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     EmptyState,
     {
       title: noVariableTitle,
-      message: __15(
+      message: __14(
         "Variables are saved attributes that you can apply anywhere on your site.",
         "elementor"
       ),
@@ -2411,8 +2549,8 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   ), hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
     EmptyState,
     {
-      title: __15("No compatible variables", "elementor"),
-      message: __15(
+      title: __14("No compatible variables", "elementor"),
+      message: __14(
         "Looks like none of your variables work with this control. Create a new variable to use it here.",
         "elementor"
       ),
@@ -2509,23 +2647,24 @@ function RenderView(props) {
 // src/components/ui/tags/assigned-tag.tsx
 import * as React21 from "react";
 import { DetachIcon } from "@elementor/icons";
-import { Box as Box4, IconButton as IconButton8, Stack as Stack7, Tooltip, Typography as Typography10, UnstableTag as Tag } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import { Box as Box3, IconButton as IconButton8, Stack as Stack7, Tooltip as Tooltip4, Typography as Typography10, UnstableTag as Tag } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
 var SIZE6 = "tiny";
+var UNLINK_LABEL = __15("Unlink variable", "elementor");
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React21.createElement(IconButton8, { key: "unlink", size: SIZE6, onClick: onUnlink, "aria-label": __16("Unlink", "elementor") }, /* @__PURE__ */ React21.createElement(DetachIcon, { fontSize: SIZE6 }))
+      /* @__PURE__ */ React21.createElement(Tooltip4, { key: "unlink", title: UNLINK_LABEL, placement: "bottom" }, /* @__PURE__ */ React21.createElement(IconButton8, { size: SIZE6, onClick: onUnlink, "aria-label": UNLINK_LABEL }, /* @__PURE__ */ React21.createElement(DetachIcon, { fontSize: SIZE6 })))
     );
   }
-  return /* @__PURE__ */ React21.createElement(Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement(Tooltip4, { title: label, placement: "top" }, /* @__PURE__ */ React21.createElement(
     Tag,
     {
       fullWidth: true,
       showActionsOnHover: true,
       startIcon: /* @__PURE__ */ React21.createElement(Stack7, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React21.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React21.createElement(Typography10, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      label: /* @__PURE__ */ React21.createElement(Box3, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React21.createElement(Typography10, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -2536,7 +2675,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = useBoundProp6();
-  const anchorRef = useRef5(null);
+  const anchorRef = useRef6(null);
   const popupId = useId();
   const popupState = usePopupState3({
     variant: "popover",
@@ -2544,7 +2683,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React22.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React22.createElement(Box4, { ref: anchorRef }, /* @__PURE__ */ React22.createElement(
     AssignedTag,
     {
       label: variable.label,
@@ -2577,10 +2716,10 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 import * as React26 from "react";
-import { useId as useId2, useRef as useRef6, useState as useState13 } from "react";
+import { useId as useId2, useRef as useRef7, useState as useState13 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
-import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import { Backdrop, bindPopover as bindPopover2, Box as Box6, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
+import { __ as __18 } from "@wordpress/i18n";
 
 // src/components/variable-restore.tsx
 import * as React23 from "react";
@@ -2589,7 +2728,7 @@ import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp7 } from
 import { PopoverBody as PopoverBody4 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
 import { Button as Button7, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4, Typography as Typography11 } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 var SIZE7 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
@@ -2644,14 +2783,14 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     PopoverHeader4,
     {
       icon: /* @__PURE__ */ React23.createElement(VariableIcon, { fontSize: SIZE7 }),
-      title: __17("Restore variable", "elementor"),
+      title: __16("Restore variable", "elementor"),
       onClose
     }
   ), /* @__PURE__ */ React23.createElement(Divider5, null), /* @__PURE__ */ React23.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React23.createElement(
     FormField,
     {
       id: "variable-label",
-      label: __17("Name", "elementor"),
+      label: __16("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
@@ -2673,7 +2812,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React23.createElement(FormField, { errorMsg: valueFieldError, label: __17("Value", "elementor") }, /* @__PURE__ */ React23.createElement(Typography11, { variant: "h5" }, /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React23.createElement(FormField, { errorMsg: valueFieldError, label: __16("Value", "elementor") }, /* @__PURE__ */ React23.createElement(Typography11, { variant: "h5" }, /* @__PURE__ */ React23.createElement(
     ValueField,
     {
       value,
@@ -2685,13 +2824,13 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React23.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React23.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React23.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __17("Restore", "elementor")))));
+  ))), errorMessage && /* @__PURE__ */ React23.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React23.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React23.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __16("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
 import * as React24 from "react";
-import { Alert as Alert2, AlertAction, AlertTitle, ClickAwayListener as ClickAwayListener2, Typography as Typography12 } from "@elementor/ui";
-import { __ as __18 } from "@wordpress/i18n";
+import { Alert as Alert2, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener2, Typography as Typography12 } from "@elementor/ui";
+import { __ as __17 } from "@wordpress/i18n";
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
   return /* @__PURE__ */ React24.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React24.createElement(
     Alert2,
@@ -2699,11 +2838,11 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React24.createElement(React24.Fragment, null, onUnlink && /* @__PURE__ */ React24.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __18("Unlink", "elementor")), onRestore && /* @__PURE__ */ React24.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __18("Restore", "elementor"))),
+      action: /* @__PURE__ */ React24.createElement(React24.Fragment, null, onUnlink && /* @__PURE__ */ React24.createElement(AlertAction2, { variant: "contained", onClick: onUnlink }, __17("Unlink", "elementor")), onRestore && /* @__PURE__ */ React24.createElement(AlertAction2, { variant: "outlined", onClick: onRestore }, __17("Restore", "elementor"))),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React24.createElement(AlertTitle, null, __18("Deleted variable", "elementor")),
-    /* @__PURE__ */ React24.createElement(Typography12, { variant: "body2", color: "textPrimary" }, __18("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React24.createElement(Typography12, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", __18(
+    /* @__PURE__ */ React24.createElement(AlertTitle2, null, __17("Deleted variable", "elementor")),
+    /* @__PURE__ */ React24.createElement(Typography12, { variant: "body2", color: "textPrimary" }, __17("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React24.createElement(Typography12, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", __17(
       "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"
     ))
@@ -2712,8 +2851,8 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 
 // src/components/ui/tags/warning-variable-tag.tsx
 import * as React25 from "react";
-import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2 } from "@elementor/icons";
-import { Box as Box6, Chip, Tooltip as Tooltip2, Typography as Typography13 } from "@elementor/ui";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
+import { Box as Box5, Chip, Tooltip as Tooltip5, Typography as Typography13 } from "@elementor/ui";
 var WarningVariableTag = React25.forwardRef(
   ({ label, suffix, onClick, icon, ...props }, ref) => {
     const displayText = suffix ? `${label} (${suffix})` : label;
@@ -2726,8 +2865,8 @@ var WarningVariableTag = React25.forwardRef(
         shape: "rounded",
         variant: "standard",
         onClick,
-        icon: /* @__PURE__ */ React25.createElement(AlertTriangleFilledIcon2, null),
-        label: /* @__PURE__ */ React25.createElement(Tooltip2, { title: displayText, placement: "top" }, /* @__PURE__ */ React25.createElement(Box6, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React25.createElement(Typography13, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
+        icon: /* @__PURE__ */ React25.createElement(AlertTriangleFilledIcon3, null),
+        label: /* @__PURE__ */ React25.createElement(Tooltip5, { title: displayText, placement: "top" }, /* @__PURE__ */ React25.createElement(Box5, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React25.createElement(Typography13, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
         sx: {
           height: (theme) => theme.spacing(3.5),
           borderRadius: (theme) => theme.spacing(1),
@@ -2749,7 +2888,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const [showInfotip, setShowInfotip] = useState13(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = useRef6(null);
+  const deletedChipAnchorRef = useRef7(null);
   const popupId = useId2();
   const popupState = usePopupState4({
     variant: "popover",
@@ -2777,8 +2916,8 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React26.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React26.createElement(
-    Infotip,
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Box6, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React26.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React26.createElement(
+    Infotip2,
     {
       color: "warning",
       placement: "right-start",
@@ -2810,7 +2949,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       {
         label: variable.label,
         onClick: toggleInfotip,
-        suffix: __19("deleted", "elementor")
+        suffix: __18("deleted", "elementor")
       }
     )
   ), /* @__PURE__ */ React26.createElement(
@@ -2837,24 +2976,24 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 import * as React28 from "react";
-import { useId as useId3, useRef as useRef7, useState as useState14 } from "react";
+import { useId as useId3, useRef as useRef8, useState as useState14 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
-import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box8, Infotip as Infotip2, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
+import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box7, Infotip as Infotip3, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
+import { __ as __20 } from "@wordpress/i18n";
 
 // src/components/ui/mismatch-variable-alert.tsx
 import * as React27 from "react";
-import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener3, Typography as Typography14 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
+import { Alert as Alert3, AlertAction as AlertAction3, AlertTitle as AlertTitle3, ClickAwayListener as ClickAwayListener3, Typography as Typography14 } from "@elementor/ui";
+import { __ as __19 } from "@wordpress/i18n";
 var i18n = {
-  title: __20("Variable has changed", "elementor"),
-  message: __20(
+  title: __19("Variable has changed", "elementor"),
+  message: __19(
     `This variable is no longer compatible with this property. You can clear it or select a different one.`,
     "elementor"
   ),
   buttons: {
-    clear: __20("Clear", "elementor"),
-    select: __20("Select variable", "elementor")
+    clear: __19("Clear", "elementor"),
+    select: __19("Select variable", "elementor")
   }
 };
 var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
@@ -2864,10 +3003,10 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React27.createElement(React27.Fragment, null, onClear && /* @__PURE__ */ React27.createElement(AlertAction2, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React27.createElement(AlertAction2, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
+      action: /* @__PURE__ */ React27.createElement(React27.Fragment, null, onClear && /* @__PURE__ */ React27.createElement(AlertAction3, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React27.createElement(AlertAction3, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React27.createElement(AlertTitle2, null, i18n.title),
+    /* @__PURE__ */ React27.createElement(AlertTitle3, null, i18n.title),
     /* @__PURE__ */ React27.createElement(Typography14, { variant: "body2", color: "textPrimary" }, i18n.message)
   ));
 };
@@ -2875,7 +3014,7 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue, value } = useBoundProp9();
-  const anchorRef = useRef7(null);
+  const anchorRef = useRef8(null);
   const popupId = useId3();
   const popupState = usePopupState5({
     variant: "popover",
@@ -2894,8 +3033,8 @@ var MismatchVariable = ({ variable }) => {
     setValue(null);
   };
   const showClearButton = !!value;
-  return /* @__PURE__ */ React28.createElement(Box8, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
-    Infotip2,
+  return /* @__PURE__ */ React28.createElement(Box7, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
+    Infotip3,
     {
       color: "warning",
       placement: "right-start",
@@ -2926,7 +3065,7 @@ var MismatchVariable = ({ variable }) => {
       {
         label: variable.label,
         onClick: toggleInfotip,
-        suffix: __21("changed", "elementor")
+        suffix: __20("changed", "elementor")
       }
     )
   ), /* @__PURE__ */ React28.createElement(
@@ -2956,13 +3095,13 @@ var MismatchVariable = ({ variable }) => {
 import * as React30 from "react";
 import { useState as useState15 } from "react";
 import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
-import { Backdrop as Backdrop3, Infotip as Infotip3 } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
+import { Backdrop as Backdrop3, Infotip as Infotip4 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
 
 // src/components/ui/missing-variable-alert.tsx
 import * as React29 from "react";
-import { Alert as Alert4, AlertAction as AlertAction3, AlertTitle as AlertTitle3, ClickAwayListener as ClickAwayListener4, Typography as Typography15 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
+import { Alert as Alert4, AlertAction as AlertAction4, AlertTitle as AlertTitle4, ClickAwayListener as ClickAwayListener4, Typography as Typography15 } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
 var MissingVariableAlert = ({ onClose, onClear }) => {
   return /* @__PURE__ */ React29.createElement(ClickAwayListener4, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
     Alert4,
@@ -2970,11 +3109,11 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(AlertAction3, { variant: "contained", onClick: onClear }, __22("Clear", "elementor"))),
+      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(AlertAction4, { variant: "contained", onClick: onClear }, __21("Clear", "elementor"))),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React29.createElement(AlertTitle3, null, __22("This variable is missing", "elementor")),
-    /* @__PURE__ */ React29.createElement(Typography15, { variant: "body2", color: "textPrimary" }, __22(
+    /* @__PURE__ */ React29.createElement(AlertTitle4, null, __21("This variable is missing", "elementor")),
+    /* @__PURE__ */ React29.createElement(Typography15, { variant: "body2", color: "textPrimary" }, __21(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
     ))
@@ -2989,7 +3128,7 @@ var MissingVariable = () => {
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
   return /* @__PURE__ */ React30.createElement(React30.Fragment, null, infotipVisible && /* @__PURE__ */ React30.createElement(Backdrop3, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React30.createElement(
-    Infotip3,
+    Infotip4,
     {
       color: "warning",
       placement: "right-start",
@@ -3008,7 +3147,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React30.createElement(WarningVariableTag, { label: __23("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React30.createElement(WarningVariableTag, { label: __22("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -3035,14 +3174,14 @@ var VariableControl = () => {
 import * as React32 from "react";
 import { useBoundProp as useBoundProp12 } from "@elementor/editor-editing-panel";
 import { ColorFilterIcon as ColorFilterIcon4 } from "@elementor/icons";
-import { __ as __24 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 var usePropVariableAction = () => {
   const { propType, path } = useBoundProp12();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
     icon: ColorFilterIcon4,
-    title: __24("Variables", "elementor"),
+    title: __23("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
@@ -3331,12 +3470,12 @@ import { BrushIcon, TextIcon as TextIcon2 } from "@elementor/icons";
 
 // src/components/fields/color-field.tsx
 import * as React33 from "react";
-import { useRef as useRef8, useState as useState16 } from "react";
+import { useRef as useRef9, useState as useState16 } from "react";
 import { UnstableColorField } from "@elementor/ui";
 var ColorField = ({ value, onChange, onValidationChange }) => {
   const [color, setColor] = useState16(value);
   const [errorMessage, setErrorMessage] = useState16("");
-  const defaultRef = useRef8(null);
+  const defaultRef = useRef9(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -3375,15 +3514,15 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 import * as React34 from "react";
-import { useId as useId4, useRef as useRef9, useState as useState17 } from "react";
+import { useId as useId4, useRef as useRef10, useState as useState17 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector } from "@elementor/editor-controls";
 import { useFontFamilies, useSectionWidth } from "@elementor/editor-editing-panel";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger4, Popover as Popover4, UnstableTag, usePopupState as usePopupState6 } from "@elementor/ui";
-import { __ as __25 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 var FontField = ({ value, onChange, onValidationChange }) => {
   const [fontFamily, setFontFamily] = useState17(value);
-  const defaultRef = useRef9(null);
+  const defaultRef = useRef10(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = usePopupState6({ variant: "popover" });
   const fontFamilies = useFontFamilies();
@@ -3434,7 +3573,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: __25("Font Family", "elementor"),
+        title: __24("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: enqueueFont2,
         icon: TextIcon