@elementor/editor-variables 0.16.0 → 0.18.0

package/dist/index.js

@@ -39,11 +39,11 @@ var import_editor = require("@elementor/editor");
 
 // src/init-color-variables.ts
 var import_editor_canvas2 = require("@elementor/editor-canvas");
-var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel10 = require("@elementor/editor-editing-panel");
 
 // src/controls/color-variable-control.tsx
-var React19 = __toESM(require("react"));
-var import_editor_controls9 = require("@elementor/editor-controls");
+var React20 = __toESM(require("react"));
+var import_editor_controls10 = require("@elementor/editor-controls");
 var import_editor_props3 = require("@elementor/editor-props");
 
 // src/components/ui/color-indicator.tsx
@@ -83,11 +83,14 @@ var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_icons = require("@elementor/icons");
 var import_ui4 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 
 // src/hooks/use-prop-variables.ts
 var import_react = require("react");
 
+// src/service.ts
+var import_i18n = require("@wordpress/i18n");
+
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
 var BASE_PATH = "elementor/v1/variables";
@@ -170,6 +173,12 @@ var Storage = class {
   }
 };
 
+// src/sync/enqueue-font.ts
+var enqueueFont = (fontFamily, context = "preview") => {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
+};
+
 // src/create-style-variables-repository.ts
 var createStyleVariablesRepository = () => {
   const variables = {};
@@ -186,19 +195,46 @@ var createStyleVariablesRepository = () => {
       subscription({ ...variables });
     }
   };
-  const shouldUpdate = (key, newValue) => {
-    return !(key in variables) || variables[key] !== newValue;
+  const shouldUpdate = (key, maybeUpdated) => {
+    if (!(key in variables)) {
+      return true;
+    }
+    if (variables[key].label !== maybeUpdated.label) {
+      return true;
+    }
+    if (variables[key].value !== maybeUpdated.value) {
+      return true;
+    }
+    if (!variables[key]?.deleted && maybeUpdated?.deleted) {
+      return true;
+    }
+    if (variables[key]?.deleted && !maybeUpdated?.deleted) {
+      return true;
+    }
+    return false;
   };
   const applyUpdates = (updatedVars) => {
     let hasChanges = false;
-    for (const [key, { value }] of Object.entries(updatedVars)) {
-      if (shouldUpdate(key, value)) {
-        variables[key] = value;
+    for (const [key, variable] of Object.entries(updatedVars)) {
+      if (shouldUpdate(key, variable)) {
+        variables[key] = variable;
+        if (variable.type === fontVariablePropTypeUtil.key) {
+          fontEnqueue(variable.value);
+        }
         hasChanges = true;
       }
     }
     return hasChanges;
   };
+  const fontEnqueue = (value) => {
+    if (!value) {
+      return;
+    }
+    try {
+      enqueueFont(value);
+    } catch {
+    }
+  };
   const update = (updatedVars) => {
     if (applyUpdates(updatedVars)) {
       notify();
@@ -240,7 +276,8 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        throw new Error("Unexpected response from server");
+        const errorMessage = payload?.message || (0, import_i18n.__)("Unexpected response from server", "elementor");
+        throw new Error(errorMessage);
       }
       return payload;
     }).then((data) => {
@@ -255,13 +292,17 @@ var service = {
         id: variableId,
         variable: createdVariable
       };
+    }).catch((error) => {
+      const message = getErrorMessage(error.response);
+      throw message ? new Error(message) : error;
     });
   },
   update: (id, { label, value }) => {
     return apiClient.update(id, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        throw new Error("Unexpected response from server");
+        const errorMessage = payload?.message || (0, import_i18n.__)("Unexpected response from server", "elementor");
+        throw new Error(errorMessage);
       }
       return payload;
     }).then((data) => {
@@ -276,6 +317,9 @@ var service = {
         id: variableId,
         variable: updatedVariable
       };
+    }).catch((error) => {
+      const message = getErrorMessage(error.response);
+      throw message ? new Error(message) : error;
     });
   },
   delete: (id) => {
@@ -327,6 +371,12 @@ var handleWatermark = (operation, newWatermark) => {
   }
   storage.watermark(newWatermark);
 };
+var getErrorMessage = (response) => {
+  if (response?.data?.code === "duplicated_label") {
+    return (0, import_i18n.__)("This variable name already exists. Please choose a unique name.", "elementor");
+  }
+  return (0, import_i18n.__)("There was a glitch. Try saving your variable again.", "elementor");
+};
 
 // src/hooks/use-prop-variables.ts
 var useVariable = (key) => {
@@ -377,43 +427,48 @@ var deleteVariable = (deleteId) => {
     return id;
   });
 };
+var restoreVariable = (restoreId) => {
+  return service.restore(restoreId).then(({ id }) => {
+    return id;
+  });
+};
 
 // src/components/fields/color-field.tsx
 var React = __toESM(require("react"));
 var import_react3 = require("react");
 var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 
 // src/utils/validations.ts
-var import_i18n = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 var VARIABLE_LABEL_MAX_LENGTH = 50;
 var validateLabel = (name) => {
   if (!name.trim()) {
-    return (0, import_i18n.__)("Missing variable name.", "elementor");
+    return (0, import_i18n2.__)("Give your variable a name.", "elementor");
   }
   const allowedChars = /^[a-zA-Z0-9_-]+$/;
   if (!allowedChars.test(name)) {
-    return (0, import_i18n.__)("Names can only use letters, numbers, dashes (-) and underscores (_).", "elementor");
+    return (0, import_i18n2.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor");
   }
   const hasAlphanumeric = /[a-zA-Z0-9]/;
   if (!hasAlphanumeric.test(name)) {
-    return (0, import_i18n.__)("Names have to include at least one non-special character.", "elementor");
+    return (0, import_i18n2.__)("Names have to include at least one non-special character.", "elementor");
   }
   if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
-    return (0, import_i18n.__)("Variable names can contain up to 50 characters.", "elementor");
+    return (0, import_i18n2.__)("Keep names up to 50 characters.", "elementor");
   }
   return "";
 };
 var labelHint = (name) => {
   const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
   if (hintThreshold < name.length) {
-    return (0, import_i18n.__)("Variable names can contain up to 50 characters.", "elementor");
+    return (0, import_i18n2.__)("Keep names up to 50 characters.", "elementor");
   }
   return "";
 };
 var validateValue = (value) => {
   if (!value.trim()) {
-    return (0, import_i18n.__)("Missing variable value.", "elementor");
+    return (0, import_i18n2.__)("Add a value to complete your variable.", "elementor");
   }
   return "";
 };
@@ -437,7 +492,7 @@ var ColorField = ({ value, onChange }) => {
     setErrorMessage(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(import_ui2.FormLabel, { size: "tiny" }, (0, import_i18n2.__)("Value", "elementor"))), /* @__PURE__ */ React.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(import_ui2.FormLabel, { size: "tiny" }, (0, import_i18n3.__)("Value", "elementor"))), /* @__PURE__ */ React.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
     import_ui2.UnstableColorField,
     {
       size: "tiny",
@@ -460,7 +515,7 @@ var ColorField = ({ value, onChange }) => {
 var React2 = __toESM(require("react"));
 var import_react4 = require("react");
 var import_ui3 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
 var LabelField = ({ value, onChange }) => {
   const [label, setLabel] = (0, import_react4.useState)(value);
   const [errorMessage, setErrorMessage] = (0, import_react4.useState)("");
@@ -474,7 +529,7 @@ var LabelField = ({ value, onChange }) => {
     onChange(errorMsg ? "" : newValue);
   };
   const id = (0, import_react4.useId)();
-  return /* @__PURE__ */ React2.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui3.FormLabel, { htmlFor: id, size: "tiny" }, (0, import_i18n3.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui3.FormLabel, { htmlFor: id, size: "tiny" }, (0, import_i18n4.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
     import_ui3.TextField,
     {
       id,
@@ -494,9 +549,11 @@ var ColorVariableCreation = ({ onGoBack, onClose }) => {
   const { setValue: setVariable } = (0, import_editor_controls.useBoundProp)(colorVariablePropTypeUtil);
   const [color, setColor] = (0, import_react5.useState)("");
   const [label, setLabel] = (0, import_react5.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react5.useState)("");
   const resetFields = () => {
     setColor("");
     setLabel("");
+    setErrorMessage("");
   };
   const closePopover = () => {
     resetFields();
@@ -510,20 +567,40 @@ var ColorVariableCreation = ({ onGoBack, onClose }) => {
     }).then((key) => {
       setVariable(key);
       closePopover();
+    }).catch((error) => {
+      setErrorMessage(error.message);
     });
   };
   const hasEmptyValue = () => {
     return "" === color.trim() || "" === label.trim();
   };
   const isSubmitDisabled = hasEmptyValue();
-  return /* @__PURE__ */ React3.createElement(import_editor_editing_panel.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(import_editor_editing_panel.PopoverBody, { height: "auto" }, /* @__PURE__ */ React3.createElement(
     import_editor_ui.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(import_ui4.IconButton, { size: SIZE, "aria-label": (0, import_i18n4.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(import_icons.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React3.createElement(import_icons.BrushIcon, { fontSize: SIZE })),
-      title: (0, import_i18n4.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(import_ui4.IconButton, { size: SIZE, "aria-label": (0, import_i18n5.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(import_icons.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React3.createElement(import_icons.BrushIcon, { fontSize: SIZE })),
+      title: (0, import_i18n5.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React3.createElement(import_ui4.Divider, null), /* @__PURE__ */ React3.createElement(import_editor_controls.PopoverContent, { p: 2 }, /* @__PURE__ */ React3.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React3.createElement(ColorField, { value: color, onChange: setColor })), /* @__PURE__ */ React3.createElement(import_ui4.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React3.createElement(import_ui4.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreate }, (0, import_i18n4.__)("Create", "elementor"))));
+  ), /* @__PURE__ */ React3.createElement(import_ui4.Divider, null), /* @__PURE__ */ React3.createElement(import_editor_controls.PopoverContent, { p: 2 }, /* @__PURE__ */ React3.createElement(
+    LabelField,
+    {
+      value: label,
+      onChange: (value) => {
+        setLabel(value);
+        setErrorMessage("");
+      }
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    ColorField,
+    {
+      value: color,
+      onChange: (value) => {
+        setColor(value);
+        setErrorMessage("");
+      }
+    }
+  ), errorMessage && /* @__PURE__ */ React3.createElement(import_ui4.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React3.createElement(import_ui4.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React3.createElement(import_ui4.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreate }, (0, import_i18n5.__)("Create", "elementor"))));
 };
 
 // src/components/color-variable-edit.tsx
@@ -534,13 +611,13 @@ var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons3 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/components/ui/delete-confirmation-dialog.tsx
 var React4 = __toESM(require("react"));
 var import_icons2 = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 var TITLE_ID = "delete-variable-dialog";
 var DeleteConfirmationDialog = ({
   open,
@@ -548,10 +625,7 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  return /* @__PURE__ */ React4.createElement(import_ui5.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React4.createElement(import_ui5.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React4.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n5.__)("Delete Variable", "elementor")), /* @__PURE__ */ React4.createElement(import_ui5.DialogContent, null, /* @__PURE__ */ React4.createElement(import_ui5.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n5.__)("You are about to delete", "elementor"), /* @__PURE__ */ React4.createElement(import_ui5.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n5.__)(
-    "Variable. Note that its value is still being used anywhere on your site where it was connected to the variable.",
-    "elementor"
-  ))), /* @__PURE__ */ React4.createElement(import_ui5.DialogActions, null, /* @__PURE__ */ React4.createElement(import_ui5.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n5.__)("Cancel", "elementor")), /* @__PURE__ */ React4.createElement(import_ui5.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n5.__)("Delete", "elementor"))));
+  return /* @__PURE__ */ React4.createElement(import_ui5.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React4.createElement(import_ui5.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React4.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n6.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React4.createElement(import_ui5.DialogContent, null, /* @__PURE__ */ React4.createElement(import_ui5.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n6.__)("All elements using", "elementor"), /* @__PURE__ */ React4.createElement(import_ui5.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n6.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React4.createElement(import_ui5.DialogActions, null, /* @__PURE__ */ React4.createElement(import_ui5.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n6.__)("Not now", "elementor")), /* @__PURE__ */ React4.createElement(import_ui5.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n6.__)("Delete", "elementor"))));
 };
 
 // src/components/color-variable-edit.tsx
@@ -559,6 +633,7 @@ var SIZE2 = "tiny";
 var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { setValue: notifyBoundPropChange, value: assignedValue } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
   const [deleteConfirmation, setDeleteConfirmation] = (0, import_react6.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react6.useState)("");
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global color variable not found`);
@@ -572,6 +647,8 @@ var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     }).then(() => {
       maybeTriggerBoundPropChange();
       onSubmit?.();
+    }).catch((error) => {
+      setErrorMessage(error.message);
     });
   };
   const handleDelete = () => {
@@ -598,7 +675,7 @@ var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       {
         key: "delete",
         size: SIZE2,
-        "aria-label": (0, import_i18n6.__)("Delete", "elementor"),
+        "aria-label": (0, import_i18n7.__)("Delete", "elementor"),
         onClick: handleDeleteConfirmation
       },
       /* @__PURE__ */ React5.createElement(import_icons3.TrashIcon, { fontSize: SIZE2 })
@@ -611,23 +688,41 @@ var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return color === variable.value && label === variable.label;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyValues();
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_editor_editing_panel2.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React5.createElement(
     import_editor_ui2.PopoverHeader,
     {
-      title: (0, import_i18n6.__)("Edit variable", "elementor"),
+      title: (0, import_i18n7.__)("Edit variable", "elementor"),
       onClose,
       icon: /* @__PURE__ */ React5.createElement(React5.Fragment, null, onGoBack && /* @__PURE__ */ React5.createElement(
         import_ui6.IconButton,
         {
           size: SIZE2,
-          "aria-label": (0, import_i18n6.__)("Go Back", "elementor"),
+          "aria-label": (0, import_i18n7.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
         /* @__PURE__ */ React5.createElement(import_icons3.ArrowLeftIcon, { fontSize: SIZE2 })
       ), /* @__PURE__ */ React5.createElement(import_icons3.BrushIcon, { fontSize: SIZE2 })),
       actions
     }
-  ), /* @__PURE__ */ React5.createElement(import_ui6.Divider, null), /* @__PURE__ */ React5.createElement(import_editor_controls2.PopoverContent, { p: 2 }, /* @__PURE__ */ React5.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React5.createElement(ColorField, { value: color, onChange: setColor })), /* @__PURE__ */ React5.createElement(import_ui6.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React5.createElement(import_ui6.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n6.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React5.createElement(import_ui6.Divider, null), /* @__PURE__ */ React5.createElement(import_editor_controls2.PopoverContent, { p: 2 }, /* @__PURE__ */ React5.createElement(
+    LabelField,
+    {
+      value: label,
+      onChange: (value) => {
+        setLabel(value);
+        setErrorMessage("");
+      }
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    ColorField,
+    {
+      value: color,
+      onChange: (value) => {
+        setColor(value);
+        setErrorMessage("");
+      }
+    }
+  ), errorMessage && /* @__PURE__ */ React5.createElement(import_ui6.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React5.createElement(import_ui6.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React5.createElement(import_ui6.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n7.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React5.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -646,14 +741,14 @@ var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons5 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
 var React6 = __toESM(require("react"));
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
 var import_ui7 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
@@ -698,7 +793,7 @@ var MenuItemContent = ({ item }) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": (0, import_i18n7.__)("Edit", "elementor")
+      "aria-label": (0, import_i18n8.__)("Edit", "elementor")
     },
     /* @__PURE__ */ React6.createElement(import_icons4.EditIcon, { color: "action", fontSize: SIZE3 })
   ));
@@ -707,7 +802,7 @@ var MenuItemContent = ({ item }) => {
 // src/components/ui/no-search-results.tsx
 var React7 = __toESM(require("react"));
 var import_ui8 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
   return /* @__PURE__ */ React7.createElement(
     import_ui8.Stack,
@@ -721,15 +816,15 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React7.createElement(import_ui8.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React7.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React7.createElement(import_ui8.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React7.createElement(import_ui8.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n8.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React7.createElement(import_ui8.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n9.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React7.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React7.createElement(import_ui8.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n9.__)("Try something else.", "elementor"), /* @__PURE__ */ React7.createElement(import_ui8.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n9.__)("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
 var React8 = __toESM(require("react"));
 var import_ui9 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 var NoVariables = ({ icon, title, onAdd }) => /* @__PURE__ */ React8.createElement(
   import_ui9.Stack,
   {
@@ -742,8 +837,8 @@ var NoVariables = ({ icon, title, onAdd }) => /* @__PURE__ */ React8.createEleme
   },
   icon,
   /* @__PURE__ */ React8.createElement(import_ui9.Typography, { align: "center", variant: "subtitle2" }, title),
-  /* @__PURE__ */ React8.createElement(import_ui9.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, (0, import_i18n9.__)("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
-  onAdd && /* @__PURE__ */ React8.createElement(import_ui9.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n9.__)("Create a variable", "elementor"))
+  /* @__PURE__ */ React8.createElement(import_ui9.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, (0, import_i18n10.__)("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
+  onAdd && /* @__PURE__ */ React8.createElement(import_ui9.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n10.__)("Create a variable", "elementor"))
 );
 
 // src/components/ui/styled-menu-list.tsx
@@ -817,10 +912,10 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement(import_editor_editing_panel3.PopoverBody, null, /* @__PURE__ */ React9.createElement(
     import_editor_ui4.PopoverHeader,
     {
-      title: (0, import_i18n10.__)("Variables", "elementor"),
+      title: (0, import_i18n11.__)("Variables", "elementor"),
       icon: /* @__PURE__ */ React9.createElement(import_icons5.ColorFilterIcon, { fontSize: SIZE4 }),
       onClose: closePopover,
       actions
@@ -830,9 +925,9 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n10.__)("Search", "elementor")
+      placeholder: (0, import_i18n11.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React9.createElement(import_ui11.Divider, null), /* @__PURE__ */ React9.createElement(import_editor_editing_panel3.PopoverScrollableContent, null, hasVariables && hasSearchResults && /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React9.createElement(import_ui11.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React9.createElement(
     import_editor_ui4.PopoverMenuList,
     {
       items,
@@ -854,11 +949,11 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   ), !hasVariables && /* @__PURE__ */ React9.createElement(
     NoVariables,
     {
-      title: (0, import_i18n10.__)("Create your first color variable", "elementor"),
+      title: (0, import_i18n11.__)("Create your first color variable", "elementor"),
       icon: /* @__PURE__ */ React9.createElement(import_icons5.BrushIcon, { fontSize: "large" }),
       onAdd
     }
-  )));
+  ));
 };
 
 // src/components/font-variable-creation.tsx
@@ -869,7 +964,7 @@ var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
 var import_ui13 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/fields/font-field.tsx
 var React10 = __toESM(require("react"));
@@ -878,7 +973,7 @@ var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_icons6 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 var FontField = ({ value, onChange }) => {
   const [fontFamily, setFontFamily] = (0, import_react8.useState)(value);
   const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
@@ -897,7 +992,7 @@ var FontField = ({ value, onChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  return /* @__PURE__ */ React10.createElement(import_ui12.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui12.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui12.FormLabel, { size: "tiny" }, (0, import_i18n11.__)("Value", "elementor"))), /* @__PURE__ */ React10.createElement(import_ui12.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement(import_ui12.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui12.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui12.FormLabel, { size: "tiny" }, (0, import_i18n12.__)("Value", "elementor"))), /* @__PURE__ */ React10.createElement(import_ui12.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(
     import_ui12.UnstableTag,
     {
       variant: "outlined",
@@ -935,9 +1030,11 @@ var FontVariableCreation = ({ onClose, onGoBack }) => {
   const { setValue: setVariable } = (0, import_editor_controls5.useBoundProp)(fontVariablePropTypeUtil);
   const [fontFamily, setFontFamily] = (0, import_react9.useState)("");
   const [label, setLabel] = (0, import_react9.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react9.useState)("");
   const resetFields = () => {
     setFontFamily("");
     setLabel("");
+    setErrorMessage("");
   };
   const closePopover = () => {
     resetFields();
@@ -951,20 +1048,40 @@ var FontVariableCreation = ({ onClose, onGoBack }) => {
     }).then((key) => {
       setVariable(key);
       closePopover();
+    }).catch((error) => {
+      setErrorMessage(error.message);
     });
   };
   const hasEmptyValue = () => {
     return "" === fontFamily.trim() || "" === label.trim();
   };
   const isSubmitDisabled = hasEmptyValue();
-  return /* @__PURE__ */ React11.createElement(import_editor_editing_panel5.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React11.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React11.createElement(
     import_editor_ui5.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(import_ui13.IconButton, { size: SIZE5, "aria-label": (0, import_i18n12.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE5 })), /* @__PURE__ */ React11.createElement(import_icons7.TextIcon, { fontSize: SIZE5 })),
-      title: (0, import_i18n12.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(import_ui13.IconButton, { size: SIZE5, "aria-label": (0, import_i18n13.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE5 })), /* @__PURE__ */ React11.createElement(import_icons7.TextIcon, { fontSize: SIZE5 })),
+      title: (0, import_i18n13.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React11.createElement(import_ui13.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React11.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React11.createElement(FontField, { value: fontFamily, onChange: setFontFamily })), /* @__PURE__ */ React11.createElement(import_ui13.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(import_ui13.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreate }, (0, import_i18n12.__)("Create", "elementor"))));
+  ), /* @__PURE__ */ React11.createElement(import_ui13.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React11.createElement(
+    LabelField,
+    {
+      value: label,
+      onChange: (value) => {
+        setLabel(value);
+        setErrorMessage("");
+      }
+    }
+  ), /* @__PURE__ */ React11.createElement(
+    FontField,
+    {
+      value: fontFamily,
+      onChange: (value) => {
+        setFontFamily(value);
+        setErrorMessage("");
+      }
+    }
+  ), errorMessage && /* @__PURE__ */ React11.createElement(import_ui13.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React11.createElement(import_ui13.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(import_ui13.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreate }, (0, import_i18n13.__)("Create", "elementor"))));
 };
 
 // src/components/font-variable-edit.tsx
@@ -975,11 +1092,12 @@ var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons8 = require("@elementor/icons");
 var import_ui14 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
 var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { setValue: notifyBoundPropChange, value: assignedValue } = (0, import_editor_controls6.useBoundProp)(fontVariablePropTypeUtil);
   const [deleteConfirmation, setDeleteConfirmation] = (0, import_react10.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react10.useState)("");
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global font variable "${editId}" not found`);
@@ -993,6 +1111,8 @@ var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     }).then(() => {
       maybeTriggerBoundPropChange();
       onSubmit?.();
+    }).catch((error) => {
+      setErrorMessage(error.message);
     });
   };
   const handleDelete = () => {
@@ -1026,29 +1146,47 @@ var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       {
         key: "delete",
         size: SIZE6,
-        "aria-label": (0, import_i18n13.__)("Delete", "elementor"),
+        "aria-label": (0, import_i18n14.__)("Delete", "elementor"),
         onClick: handleDeleteConfirmation
       },
       /* @__PURE__ */ React12.createElement(import_icons8.TrashIcon, { fontSize: SIZE6 })
     )
   );
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(import_editor_editing_panel6.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(import_editor_editing_panel6.PopoverBody, { height: "auto" }, /* @__PURE__ */ React12.createElement(
     import_editor_ui6.PopoverHeader,
     {
       icon: /* @__PURE__ */ React12.createElement(React12.Fragment, null, onGoBack && /* @__PURE__ */ React12.createElement(
         import_ui14.IconButton,
         {
           size: SIZE6,
-          "aria-label": (0, import_i18n13.__)("Go Back", "elementor"),
+          "aria-label": (0, import_i18n14.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
         /* @__PURE__ */ React12.createElement(import_icons8.ArrowLeftIcon, { fontSize: SIZE6 })
       ), /* @__PURE__ */ React12.createElement(import_icons8.TextIcon, { fontSize: SIZE6 })),
-      title: (0, import_i18n13.__)("Edit variable", "elementor"),
+      title: (0, import_i18n14.__)("Edit variable", "elementor"),
       onClose,
       actions
     }
-  ), /* @__PURE__ */ React12.createElement(import_ui14.Divider, null), /* @__PURE__ */ React12.createElement(import_editor_controls6.PopoverContent, { p: 2 }, /* @__PURE__ */ React12.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React12.createElement(FontField, { value: fontFamily, onChange: setFontFamily })), /* @__PURE__ */ React12.createElement(import_ui14.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(import_ui14.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n13.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React12.createElement(import_ui14.Divider, null), /* @__PURE__ */ React12.createElement(import_editor_controls6.PopoverContent, { p: 2 }, /* @__PURE__ */ React12.createElement(
+    LabelField,
+    {
+      value: label,
+      onChange: (value) => {
+        setLabel(value);
+        setErrorMessage("");
+      }
+    }
+  ), /* @__PURE__ */ React12.createElement(
+    FontField,
+    {
+      value: fontFamily,
+      onChange: (value) => {
+        setFontFamily(value);
+        setErrorMessage("");
+      }
+    }
+  ), errorMessage && /* @__PURE__ */ React12.createElement(import_ui14.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React12.createElement(import_ui14.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(import_ui14.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n14.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React12.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1067,7 +1205,7 @@ var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 var SIZE7 = "tiny";
 var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { value: variable, setValue: setVariable } = (0, import_editor_controls7.useBoundProp)(fontVariablePropTypeUtil);
@@ -1106,10 +1244,10 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React13.createElement(import_editor_editing_panel7.PopoverBody, null, /* @__PURE__ */ React13.createElement(
     import_editor_ui7.PopoverHeader,
     {
-      title: (0, import_i18n14.__)("Variables", "elementor"),
+      title: (0, import_i18n15.__)("Variables", "elementor"),
       onClose: closePopover,
       icon: /* @__PURE__ */ React13.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE7 }),
       actions
@@ -1119,9 +1257,9 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n14.__)("Search", "elementor")
+      placeholder: (0, import_i18n15.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React13.createElement(import_ui15.Divider, null), /* @__PURE__ */ React13.createElement(import_editor_editing_panel7.PopoverScrollableContent, null, hasVariables && hasSearchResults && /* @__PURE__ */ React13.createElement(
+  ), /* @__PURE__ */ React13.createElement(import_ui15.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React13.createElement(
     import_editor_ui7.PopoverMenuList,
     {
       items,
@@ -1143,11 +1281,11 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   ), !hasVariables && /* @__PURE__ */ React13.createElement(
     NoVariables,
     {
-      title: (0, import_i18n14.__)("Create your first font variable", "elementor"),
+      title: (0, import_i18n15.__)("Create your first font variable", "elementor"),
       icon: /* @__PURE__ */ React13.createElement(import_icons9.TextIcon, { fontSize: "large" }),
       onAdd
     }
-  )));
+  ));
 };
 
 // src/components/variable-selection-popover.tsx
@@ -1256,16 +1394,16 @@ function renderStage(props) {
 var React15 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 var SIZE8 = "tiny";
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React15.createElement(import_ui17.IconButton, { key: "unlink", size: SIZE8, onClick: onUnlink, "aria-label": (0, import_i18n15.__)("Unlink", "elementor") }, /* @__PURE__ */ React15.createElement(import_icons10.DetachIcon, { fontSize: SIZE8 }))
+      /* @__PURE__ */ React15.createElement(import_ui17.IconButton, { key: "unlink", size: SIZE8, onClick: onUnlink, "aria-label": (0, import_i18n16.__)("Unlink", "elementor") }, /* @__PURE__ */ React15.createElement(import_icons10.DetachIcon, { fontSize: SIZE8 }))
     );
   }
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React15.createElement(import_ui17.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React15.createElement(
     import_ui17.UnstableTag,
     {
       fullWidth: true,
@@ -1275,7 +1413,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
       actions,
       ...props
     }
-  );
+  ));
 };
 
 // src/components/ui/variable/assigned-variable.tsx
@@ -1327,61 +1465,154 @@ var AssignedVariable = ({
 };
 
 // src/components/ui/variable/deleted-variable.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_react14 = require("react");
-var import_ui20 = require("@elementor/ui");
+var import_editor_controls9 = require("@elementor/editor-controls");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_ui21 = require("@elementor/ui");
 
-// src/components/ui/tags/deleted-tag.tsx
+// src/components/ui/deleted-variable-alert.tsx
 var React17 = __toESM(require("react"));
-var import_icons12 = require("@elementor/icons");
+var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_ui19 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
-var DeletedTag = ({ label }) => {
-  return /* @__PURE__ */ React17.createElement(
-    import_ui19.UnstableTag,
+var import_i18n17 = require("@wordpress/i18n");
+var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
+  const sectionWidth = (0, import_editor_editing_panel8.useSectionWidth)();
+  return /* @__PURE__ */ React17.createElement(import_ui19.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React17.createElement(
+    import_ui19.Alert,
     {
-      showActionsOnHover: true,
-      fullWidth: true,
-      label: /* @__PURE__ */ React17.createElement(import_ui19.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React17.createElement(import_ui19.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
-      startIcon: /* @__PURE__ */ React17.createElement(import_icons12.ColorFilterIcon, { fontSize: "tiny" }),
-      endAdornment: /* @__PURE__ */ React17.createElement(import_ui19.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, "(", (0, import_i18n16.__)("deleted", "elementor"), ")")
+      variant: "standard",
+      severity: "warning",
+      onClose,
+      action: /* @__PURE__ */ React17.createElement(React17.Fragment, null, onUnlink && /* @__PURE__ */ React17.createElement(import_ui19.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n17.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React17.createElement(import_ui19.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n17.__)("Restore", "elementor"))),
+      sx: { width: sectionWidth }
+    },
+    /* @__PURE__ */ React17.createElement(import_ui19.AlertTitle, null, (0, import_i18n17.__)("Deleted variable", "elementor")),
+    (0, import_i18n17.__)("The variable", "elementor"),
+    " '",
+    label,
+    "'",
+    " ",
+    (0, import_i18n17.__)(
+      "has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.",
+      "elementor"
+    )
+  ));
+};
+
+// src/components/ui/tags/deleted-tag.tsx
+var React18 = __toESM(require("react"));
+var import_icons12 = require("@elementor/icons");
+var import_ui20 = require("@elementor/ui");
+var import_i18n18 = require("@wordpress/i18n");
+var DeletedTag = React18.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React18.createElement(
+    import_ui20.Chip,
+    {
+      ref,
+      size: "tiny",
+      color: "warning",
+      shape: "rounded",
+      variant: "standard",
+      onClick,
+      icon: /* @__PURE__ */ React18.createElement(import_icons12.AlertTriangleFilledIcon, null),
+      label: /* @__PURE__ */ React18.createElement(import_ui20.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React18.createElement(import_ui20.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui20.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React18.createElement(import_ui20.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n18.__)("deleted", "elementor"), ")"))),
+      sx: {
+        height: (theme) => theme.spacing(3.5),
+        borderRadius: (theme) => theme.spacing(1),
+        justifyContent: "flex-start",
+        width: "100%"
+      },
+      ...props
     }
   );
-};
+});
 
 // src/components/ui/variable/deleted-variable.tsx
-var DeletedVariable = ({ variable }) => {
-  const anchorRef = (0, import_react14.useRef)(null);
-  return /* @__PURE__ */ React18.createElement(import_ui20.Box, { ref: anchorRef }, /* @__PURE__ */ React18.createElement(DeletedTag, { label: variable.label }));
+var isV331Active = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_31");
+var DeletedVariable = ({ variable, variablePropTypeUtil, fallbackPropTypeUtil }) => {
+  const { setValue } = (0, import_editor_controls9.useBoundProp)();
+  const [showInfotip, setShowInfotip] = (0, import_react14.useState)(false);
+  const toggleInfotip = () => setShowInfotip((prev) => !prev);
+  const closeInfotip = () => setShowInfotip(false);
+  const unlinkVariable = () => {
+    setValue(fallbackPropTypeUtil.create(variable.value));
+  };
+  const handleRestore = () => {
+    if (!variable.key) {
+      return;
+    }
+    restoreVariable(variable.key).then((key) => {
+      setValue(variablePropTypeUtil.create(key));
+      closeInfotip();
+    });
+  };
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, showInfotip && /* @__PURE__ */ React19.createElement(import_ui21.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React19.createElement(
+    import_ui21.Infotip,
+    {
+      color: "warning",
+      placement: "right-start",
+      open: showInfotip,
+      disableHoverListener: true,
+      onClose: closeInfotip,
+      content: /* @__PURE__ */ React19.createElement(
+        DeletedVariableAlert,
+        {
+          onClose: closeInfotip,
+          onUnlink: unlinkVariable,
+          onRestore: isV331Active ? handleRestore : void 0,
+          label: variable.label
+        }
+      ),
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [0, 24] }
+            }
+          ]
+        }
+      }
+    },
+    /* @__PURE__ */ React19.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
+  ));
 };
 
 // src/controls/color-variable-control.tsx
 var ColorVariableControl = () => {
-  const { value: variableValue } = (0, import_editor_controls9.useBoundProp)(colorVariablePropTypeUtil);
+  const { value: variableValue } = (0, import_editor_controls10.useBoundProp)(colorVariablePropTypeUtil);
   const assignedVariable = useVariable(variableValue);
   if (!assignedVariable) {
     throw new Error(`Global color variable ${variableValue} not found`);
   }
   const isVariableDeleted = assignedVariable?.deleted;
   if (isVariableDeleted) {
-    return /* @__PURE__ */ React19.createElement(DeletedVariable, { variable: assignedVariable });
+    return /* @__PURE__ */ React20.createElement(
+      DeletedVariable,
+      {
+        variable: assignedVariable,
+        variablePropTypeUtil: colorVariablePropTypeUtil,
+        fallbackPropTypeUtil: import_editor_props3.colorPropTypeUtil
+      }
+    );
   }
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     AssignedVariable,
     {
       variable: assignedVariable,
       variablePropTypeUtil: colorVariablePropTypeUtil,
       fallbackPropTypeUtil: import_editor_props3.colorPropTypeUtil,
-      additionalStartIcon: /* @__PURE__ */ React19.createElement(ColorIndicator, { size: "inherit", value: assignedVariable.value, component: "span" })
+      additionalStartIcon: /* @__PURE__ */ React20.createElement(ColorIndicator, { size: "inherit", value: assignedVariable.value, component: "span" })
     }
   );
 };
 
 // src/hooks/use-prop-color-variable-action.tsx
-var React20 = __toESM(require("react"));
-var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
+var React21 = __toESM(require("react"));
+var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
 var import_icons13 = require("@elementor/icons");
-var import_i18n17 = require("@wordpress/i18n");
+var import_i18n19 = require("@wordpress/i18n");
 
 // src/utils.ts
 var hasAssignedColorVariable = (propValue) => {
@@ -1399,58 +1630,58 @@ var supportsFontVariables = (propType) => {
 
 // src/hooks/use-prop-color-variable-action.tsx
 var usePropColorVariableAction = () => {
-  const { propType } = (0, import_editor_editing_panel8.useBoundProp)();
+  const { propType } = (0, import_editor_editing_panel9.useBoundProp)();
   const visible = !!propType && supportsColorVariables(propType);
   return {
     visible,
     icon: import_icons13.ColorFilterIcon,
-    title: (0, import_i18n17.__)("Variables", "elementor"),
+    title: (0, import_i18n19.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React20.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
+      return /* @__PURE__ */ React21.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
     }
   };
 };
 
 // src/repeater-injections.ts
-var import_editor_controls10 = require("@elementor/editor-controls");
+var import_editor_controls11 = require("@elementor/editor-controls");
 var import_editor_props4 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React21.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React22.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React21.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React22.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React21.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React22.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 
 // src/repeater-injections.ts
 function registerRepeaterInjections() {
-  (0, import_editor_controls10.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls11.injectIntoRepeaterItemIcon)({
     id: "color-variables-background-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: ({ value: prop }) => {
       return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
     }
   });
-  (0, import_editor_controls10.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls11.injectIntoRepeaterItemIcon)({
     id: "color-variables-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value: prop }) => {
       return hasAssignedColorVariable(import_editor_props4.shadowPropTypeUtil.extract(prop)?.color);
     }
   });
-  (0, import_editor_controls10.injectIntoRepeaterItemLabel)({
+  (0, import_editor_controls11.injectIntoRepeaterItemLabel)({
     id: "color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: ({ value: prop }) => {
@@ -1461,17 +1692,29 @@ function registerRepeaterInjections() {
 
 // src/transformers/variable-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
-var variableTransformer = (0, import_editor_canvas.createTransformer)((value) => {
-  if (!value.trim()) {
+var variableTransformer = (0, import_editor_canvas.createTransformer)((id) => {
+  const variables = service.variables();
+  let name = id;
+  let fallbackValue = "";
+  if (variables[id]) {
+    fallbackValue = variables[id].value;
+    if (!variables[id]?.deleted) {
+      name = variables[id].label;
+    }
+  }
+  if (!name.trim()) {
     return null;
   }
-  return `var(--${value})`;
+  if (!fallbackValue.trim()) {
+    return `var(--${name})`;
+  }
+  return `var(--${name}, ${fallbackValue})`;
 });
 
 // src/init-color-variables.ts
-var { registerPopoverAction } = import_editor_editing_panel9.controlActionsMenu;
+var { registerPopoverAction } = import_editor_editing_panel10.controlActionsMenu;
 function initColorVariables() {
-  (0, import_editor_editing_panel9.registerControlReplacement)({
+  (0, import_editor_editing_panel10.registerControlReplacement)({
     component: ColorVariableControl,
     condition: ({ value }) => hasAssignedColorVariable(value)
   });
@@ -1485,23 +1728,30 @@ function initColorVariables() {
 
 // src/init-font-variables.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
-var import_editor_editing_panel11 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel12 = require("@elementor/editor-editing-panel");
 
 // src/controls/font-variable-control.tsx
-var React22 = __toESM(require("react"));
-var import_editor_controls11 = require("@elementor/editor-controls");
+var React23 = __toESM(require("react"));
+var import_editor_controls12 = require("@elementor/editor-controls");
 var import_editor_props5 = require("@elementor/editor-props");
 var FontVariableControl = () => {
-  const { value: variableValue } = (0, import_editor_controls11.useBoundProp)(fontVariablePropTypeUtil);
+  const { value: variableValue } = (0, import_editor_controls12.useBoundProp)(fontVariablePropTypeUtil);
   const assignedVariable = useVariable(variableValue);
   if (!assignedVariable) {
     throw new Error(`Global font variable ${variableValue} not found`);
   }
   const isVariableDeleted = assignedVariable?.deleted;
   if (isVariableDeleted) {
-    return /* @__PURE__ */ React22.createElement(DeletedVariable, { variable: assignedVariable });
+    return /* @__PURE__ */ React23.createElement(
+      DeletedVariable,
+      {
+        variable: assignedVariable,
+        variablePropTypeUtil: fontVariablePropTypeUtil,
+        fallbackPropTypeUtil: import_editor_props5.stringPropTypeUtil
+      }
+    );
   }
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(
     AssignedVariable,
     {
       variable: assignedVariable,
@@ -1512,27 +1762,27 @@ var FontVariableControl = () => {
 };
 
 // src/hooks/use-prop-font-variable-action.tsx
-var React23 = __toESM(require("react"));
-var import_editor_editing_panel10 = require("@elementor/editor-editing-panel");
+var React24 = __toESM(require("react"));
+var import_editor_editing_panel11 = require("@elementor/editor-editing-panel");
 var import_icons14 = require("@elementor/icons");
-var import_i18n18 = require("@wordpress/i18n");
+var import_i18n20 = require("@wordpress/i18n");
 var usePropFontVariableAction = () => {
-  const { propType } = (0, import_editor_editing_panel10.useBoundProp)();
+  const { propType } = (0, import_editor_editing_panel11.useBoundProp)();
   const visible = !!propType && supportsFontVariables(propType);
   return {
     visible,
     icon: import_icons14.ColorFilterIcon,
-    title: (0, import_i18n18.__)("Variables", "elementor"),
+    title: (0, import_i18n20.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React23.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
+      return /* @__PURE__ */ React24.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
     }
   };
 };
 
 // src/init-font-variables.ts
-var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel11.controlActionsMenu;
+var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel12.controlActionsMenu;
 function initFontVariables() {
-  (0, import_editor_editing_panel11.registerControlReplacement)({
+  (0, import_editor_editing_panel12.registerControlReplacement)({
     component: FontVariableControl,
     condition: ({ value }) => hasAssignedFontVariable(value)
   });
@@ -1544,10 +1794,10 @@ function initFontVariables() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_react15 = require("react");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_ui21 = require("@elementor/ui");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_ui22 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -1566,10 +1816,10 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React24.createElement(import_ui21.Portal, { container }, /* @__PURE__ */ React24.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React25.createElement(import_ui22.Portal, { container }, /* @__PURE__ */ React25.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
-  return (0, import_editor_v1_adapters.__privateUseListenTo)((0, import_editor_v1_adapters.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+  return (0, import_editor_v1_adapters2.__privateUseListenTo)((0, import_editor_v1_adapters2.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
   const [variables, setVariables] = (0, import_react15.useState)({});
@@ -1581,8 +1831,14 @@ function useStyleVariables() {
   }, []);
   return variables;
 }
+function cssVariableDeclaration(key, variable) {
+  const variableName = variable?.deleted ? key : variable.label;
+  const value = variable.value;
+  return `--${variableName}:${value};`;
+}
 function convertToCssVariables(variables) {
-  return Object.entries(variables).map(([key, value]) => `--${key}:${value};`).join("");
+  const listOfVariables = Object.entries(variables);
+  return listOfVariables.map(([key, variable]) => cssVariableDeclaration(key, variable)).join("");
 }
 
 // src/init.ts