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

package/dist/index.mjs

@@ -2,10 +2,11 @@
 import { injectIntoTop } from "@elementor/editor";
 import { controlActionsMenu, registerControlReplacement } from "@elementor/editor-editing-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
+import { isTransformable as isTransformable2 } from "@elementor/editor-props";
 
 // src/components/variables-manager/variables-manager-panel.tsx
-import * as React8 from "react";
-import { useEffect, useState as useState4 } from "react";
+import * as React12 from "react";
+import { useCallback as useCallback5, useEffect as useEffect3, useState as useState5 } from "react";
 import {
   __createPanel as createPanel,
   Panel,
@@ -14,19 +15,154 @@ import {
   PanelHeader,
   PanelHeaderTitle
 } from "@elementor/editor-panels";
-import { ThemeProvider } from "@elementor/editor-ui";
+import { SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
 import { changeEditMode } from "@elementor/editor-v1-adapters";
-import { ColorFilterIcon, TrashIcon, XIcon } from "@elementor/icons";
-import { Alert, Box, Button, Divider, ErrorBoundary, IconButton as IconButton3, Stack as Stack4 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, 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/hooks/use-prop-variables.ts
-import { useMemo } from "react";
-import { useBoundProp } from "@elementor/editor-controls";
+// src/utils/tracking.ts
+import { getMixpanel } from "@elementor/mixpanel";
+var trackVariableEvent = ({ varType, controlPath, action }) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  dispatchEvent?.(name, {
+    location: config?.locations?.variables || "",
+    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
+    trigger: config?.triggers?.click || "",
+    var_type: varType,
+    control_path: controlPath,
+    action_type: name
+  });
+};
+var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  const eventData = {
+    location: config?.locations?.variablesManager || "",
+    trigger: config?.triggers?.click || "",
+    action_type: name
+  };
+  if (varType) {
+    eventData.var_type = varType;
+  }
+  if (controlPath) {
+    eventData.style_control_path = controlPath;
+  }
+  dispatchEvent?.(name, eventData);
+};
 
-// src/context/variable-type-context.tsx
-import * as React2 from "react";
-import { createContext, useContext } from "react";
+// src/utils/validations.ts
+import { AlertTriangleFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
+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: __("There was a glitch.", "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),
+      severity: "error",
+      IconComponent: AlertTriangleFilledIcon,
+      action: {
+        label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
+        message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
+        data: {
+          duplicatedIds
+        }
+      }
+    };
+  }
+  if (error?.response?.data?.code === "batch_operation_failed") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
+      severity: "secondary",
+      IconComponent: InfoCircleFilledIcon,
+      action: {
+        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
+      }
+    };
+  }
+  return void 0;
+};
+var validateLabel = (name, variables) => {
+  if (!name.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
+  }
+  const allowedChars = /^[a-zA-Z0-9_-]+$/;
+  if (!allowedChars.test(name)) {
+    return ERROR_MESSAGES.INVALID_CHARACTERS;
+  }
+  const hasAlphanumeric = /[a-zA-Z0-9]/;
+  if (!hasAlphanumeric.test(name)) {
+    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
+  }
+  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  if (Object.values(variables ?? {}).some((variable) => variable.label === name)) {
+    return ERROR_MESSAGES.DUPLICATED_LABEL;
+  }
+  return "";
+};
+var labelHint = (name) => {
+  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+  if (hintThreshold < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  return "";
+};
+var validateValue = (value) => {
+  if (!value.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+  }
+  return "";
+};
 
 // src/variables-registry/create-variable-type-registry.ts
 import { styleTransformersRegistry } from "@elementor/editor-canvas";
@@ -36,7 +172,7 @@ import { stylesInheritanceTransformersRegistry } from "@elementor/editor-editing
 import * as React from "react";
 import { createTransformer } from "@elementor/editor-canvas";
 import { Stack, Typography } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/components/ui/color-indicator.tsx
 import { styled, UnstableColorIndicator } from "@elementor/ui";
@@ -51,7 +187,7 @@ import { z } from "@elementor/schema";
 var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
 
 // src/service.ts
-import { __ } from "@wordpress/i18n";
+import { __ as __2 } from "@wordpress/i18n";
 
 // src/api.ts
 import { httpService } from "@elementor/http-client";
@@ -86,9 +222,72 @@ var apiClient = {
       payload.value = value;
     }
     return httpService().post(BASE_PATH + "/restore", payload);
+  },
+  batch: (payload) => {
+    return httpService().post(BASE_PATH + "/batch", payload);
   }
 };
 
+// src/batch-operations.ts
+var generateTempId = () => {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 8);
+  return `tmp-${timestamp}-${random}`;
+};
+var isTempId = (id2) => {
+  return id2.startsWith("tmp-");
+};
+var buildOperationsArray = (originalVariables, currentVariables) => {
+  const operations = [];
+  Object.entries(currentVariables).forEach(([id2, variable]) => {
+    if (isTempId(id2)) {
+      operations.push({
+        type: "create",
+        variable: {
+          ...variable,
+          id: id2
+        }
+      });
+    } else if (originalVariables[id2]) {
+      const original = originalVariables[id2];
+      if (original.deleted && !variable.deleted) {
+        operations.push({
+          type: "restore",
+          id: id2,
+          ...original.label !== variable.label && { label: variable.label },
+          ...original.value !== variable.value && { value: variable.value }
+        });
+      } else if (!variable.deleted && (original.label !== variable.label || original.value !== variable.value || original.order !== variable.order)) {
+        operations.push({
+          type: "update",
+          id: id2,
+          variable: {
+            ...original.label !== variable.label && { label: variable.label },
+            ...original.value !== variable.value && { value: variable.value },
+            ...original.order !== variable.order && { order: variable.order }
+          }
+        });
+      }
+    }
+  });
+  Object.entries(originalVariables).forEach(([id2, variable]) => {
+    if (isTempId(id2) || variable.deleted) {
+      return;
+    }
+    const currentVariable = currentVariables[id2];
+    if (!currentVariable || currentVariable.deleted) {
+      operations.push({
+        type: "delete",
+        id: id2
+      });
+    }
+  });
+  return operations.filter((op) => {
+    const id2 = op.id || op.variable?.id;
+    return id2 && !(isTempId(id2) && currentVariables[id2]?.deleted);
+  });
+};
+
 // src/storage.ts
 var STORAGE_KEY = "elementor-global-variables";
 var STORAGE_WATERMARK_KEY = "elementor-global-variables-watermark";
@@ -96,6 +295,9 @@ var OP_RW = "RW";
 var OP_RO = "RO";
 var Storage = class {
   state;
+  notifyChange() {
+    window.dispatchEvent(new Event("variables:updated"));
+  }
   constructor() {
     this.state = {
       watermark: -1,
@@ -115,16 +317,19 @@ var Storage = class {
     this.state.watermark = watermark;
     localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
+    this.notifyChange();
   }
   add(id2, variable) {
     this.load();
     this.state.variables[id2] = variable;
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
+    this.notifyChange();
   }
   update(id2, variable) {
     this.load();
     this.state.variables[id2] = variable;
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
+    this.notifyChange();
   }
   watermark(watermark) {
     this.state.watermark = watermark;
@@ -229,8 +434,11 @@ var service = {
   variables: () => {
     return storage.load();
   },
+  getWatermark: () => {
+    return storage.state.watermark;
+  },
   init: () => {
-    service.load();
+    return service.load();
   },
   load: () => {
     return apiClient.list().then((response) => {
@@ -250,7 +458,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -272,7 +480,7 @@ var service = {
     return apiClient.update(id2, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -331,6 +539,47 @@ var service = {
         variable: restoredVariable
       };
     });
+  },
+  batchSave: (originalVariables, currentVariables) => {
+    const operations = buildOperationsArray(originalVariables, currentVariables);
+    const batchPayload = { operations, watermark: storage.state.watermark };
+    if (operations.length === 0) {
+      return Promise.resolve({
+        success: true,
+        watermark: storage.state.watermark,
+        operations: 0
+      });
+    }
+    return apiClient.batch(batchPayload).then((response) => {
+      const { success, data: payload } = response.data;
+      if (!success) {
+        throw new Error("Unexpected response from server");
+      }
+      return payload;
+    }).then((data) => {
+      const { results, watermark } = data;
+      handleWatermark(OP_RW, watermark);
+      if (results) {
+        results.forEach((result) => {
+          if (result.variable) {
+            const { id: variableId, ...variableData } = result.variable;
+            if (result.type === "create") {
+              storage.add(variableId, variableData);
+            } else {
+              storage.update(variableId, variableData);
+            }
+            styleVariablesRepository.update({
+              [variableId]: variableData
+            });
+          }
+        });
+      }
+      return {
+        success: true,
+        watermark,
+        operations: operations.length
+      };
+    });
   }
 };
 var handleWatermark = (operation, newWatermark) => {
@@ -364,7 +613,7 @@ var inheritanceTransformer = createTransformer((id2) => {
   const variables = service.variables();
   const variable = variables[id2];
   if (!variable) {
-    return /* @__PURE__ */ React.createElement("span", null, __2("Missing variable", "elementor"));
+    return /* @__PURE__ */ React.createElement("span", null, __3("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
   const css = resolveCssVariable(id2, variable);
@@ -385,19 +634,19 @@ var variableTransformer = createTransformer2((id2) => {
 function createVariableTypeRegistry() {
   const variableTypes = {};
   const registerVariableType2 = ({
+    key,
     icon,
     startIcon,
     valueField,
     propTypeUtil,
     variableType,
+    defaultValue,
     selectionFilter,
     valueTransformer,
     fallbackPropTypeUtil,
     isCompatible
   }) => {
-    if (variableTypes[propTypeUtil.key]) {
-      throw new Error(`Variable with key "${propTypeUtil.key}" is already registered.`);
-    }
+    const variableTypeKey = key ?? propTypeUtil.key;
     if (!isCompatible) {
       isCompatible = (propType, variable) => {
         if ("union" === propType.kind) {
@@ -408,12 +657,13 @@ function createVariableTypeRegistry() {
         return false;
       };
     }
-    variableTypes[propTypeUtil.key] = {
+    variableTypes[variableTypeKey] = {
       icon,
       startIcon,
       valueField,
       propTypeUtil,
       variableType,
+      defaultValue,
       selectionFilter,
       valueTransformer,
       fallbackPropTypeUtil,
@@ -431,23 +681,181 @@ function createVariableTypeRegistry() {
   const getVariableType2 = (key) => {
     return variableTypes[key];
   };
+  const getVariableTypes2 = () => {
+    return variableTypes;
+  };
   const hasVariableType2 = (key) => {
     return key in variableTypes;
   };
   return {
     registerVariableType: registerVariableType2,
     getVariableType: getVariableType2,
+    getVariableTypes: getVariableTypes2,
     hasVariableType: hasVariableType2
   };
 }
 
 // src/variables-registry/variable-type-registry.ts
-var { registerVariableType, getVariableType, hasVariableType } = createVariableTypeRegistry();
+var { registerVariableType, getVariableType, getVariableTypes, hasVariableType } = createVariableTypeRegistry();
+
+// src/components/ui/delete-confirmation-dialog.tsx
+import * as React2 from "react";
+import { AlertOctagonFilledIcon } from "@elementor/icons";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Typography as Typography2
+} from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+var TITLE_ID = "delete-variable-dialog";
+var DeleteConfirmationDialog = ({
+  open,
+  label,
+  closeDialog,
+  onConfirm
+}) => {
+  return /* @__PURE__ */ React2.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React2.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React2.createElement(AlertOctagonFilledIcon, { color: "error" }), __4("Delete this variable?", "elementor")), /* @__PURE__ */ React2.createElement(DialogContent, null, /* @__PURE__ */ React2.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __4("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React2.createElement(Typography2, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", __4("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React2.createElement(DialogActions, null, /* @__PURE__ */ React2.createElement(Button, { color: "secondary", onClick: closeDialog }, __4("Not now", "elementor")), /* @__PURE__ */ React2.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __4("Delete", "elementor"))));
+};
+
+// src/components/ui/empty-state.tsx
+import * as React3 from "react";
+import { Button as Button2, Stack as Stack2, Typography as Typography3 } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+
+// src/hooks/use-permissions.ts
+import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
+var usePermissions = () => {
+  const { canUser } = useCurrentUserCapabilities();
+  return {
+    canAssign: () => canUser("edit_posts"),
+    canUnlink: () => canUser("edit_posts"),
+    canAdd: () => canUser("manage_options"),
+    canDelete: () => canUser("manage_options"),
+    canEdit: () => canUser("manage_options"),
+    canRestore: () => canUser("manage_options"),
+    canManageSettings: () => canUser("manage_options")
+  };
+};
+
+// src/components/ui/empty-state.tsx
+var EmptyState = ({ icon, title, message, onAdd }) => {
+  const canAdd = usePermissions().canAdd();
+  return /* @__PURE__ */ React3.createElement(
+    Stack2,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "flex-start",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pt: 8, pb: 5.5 }
+    },
+    icon,
+    canAdd ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React3.createElement(Button2, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __5("Create a variable", "elementor"))) : /* @__PURE__ */ React3.createElement(
+      Content,
+      {
+        title: __5("There are no variables", "elementor"),
+        message: __5("With your current role, you can only connect and detach variables.", "elementor")
+      }
+    )
+  );
+};
+function Content({ title, message }) {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+}
+
+// src/components/ui/no-search-results.tsx
+import * as React4 from "react";
+import { Link, Stack as Stack3, Typography as Typography4 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
+  return /* @__PURE__ */ React4.createElement(
+    Stack3,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      p: 2.5,
+      color: "text.secondary",
+      sx: { pb: 3.5, pt: 8 }
+    },
+    icon,
+    /* @__PURE__ */ React4.createElement(Typography4, { align: "center", variant: "subtitle2" }, __6("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React4.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React4.createElement(Typography4, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __6("Try something else.", "elementor"), /* @__PURE__ */ React4.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __6("Clear & try again", "elementor")))
+  );
+};
+
+// src/components/variables-manager/hooks/use-auto-edit.ts
+import { useCallback, useState } from "react";
+var useAutoEdit = () => {
+  const [autoEditVariableId, setAutoEditVariableId] = useState(void 0);
+  const startAutoEdit = useCallback((variableId) => {
+    setAutoEditVariableId(variableId);
+  }, []);
+  const handleAutoEditComplete = useCallback(() => {
+    setTimeout(() => {
+      setAutoEditVariableId(void 0);
+    }, 100);
+  }, []);
+  return {
+    autoEditVariableId,
+    startAutoEdit,
+    handleAutoEditComplete
+  };
+};
+
+// 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 useCallback3, useState as useState2 } from "react";
+
+// src/hooks/use-prop-variables.ts
+import { useMemo } from "react";
+import { useBoundProp } from "@elementor/editor-controls";
 
 // src/context/variable-type-context.tsx
+import * as React5 from "react";
+import { createContext, useContext } from "react";
 var VariableTypeContext = createContext(null);
 function VariableTypeProvider({ children, propTypeKey }) {
-  return /* @__PURE__ */ React2.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
+  return /* @__PURE__ */ React5.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
 }
 function useVariableType() {
   const context = useContext(VariableTypeContext);
@@ -457,6 +865,12 @@ function useVariableType() {
   return getVariableType(context);
 }
 
+// src/utils/filter-by-search.ts
+function filterBySearch(variables, searchValue) {
+  const lowerSearchValue = searchValue.toLowerCase();
+  return variables.filter((variable) => variable.label.toLowerCase().includes(lowerSearchValue));
+}
+
 // src/hooks/use-prop-variables.ts
 var getVariables = (includeDeleted = true) => {
   const variables = service.variables();
@@ -478,11 +892,17 @@ var useVariable = (key) => {
 var useFilteredVariables = (searchValue, propTypeKey) => {
   const baseVariables = usePropVariables(propTypeKey);
   const typeFilteredVariables = useVariableSelectionFilter(baseVariables);
-  const searchFilteredVariables = filterVariablesBySearchValue(typeFilteredVariables, searchValue);
+  const searchFilteredVariables = filterBySearch(typeFilteredVariables, searchValue);
+  const sortedVariables = searchFilteredVariables.sort((a, b) => {
+    const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
+    const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
+    return orderA - orderB;
+  });
   return {
-    list: searchFilteredVariables,
+    list: sortedVariables,
     hasMatches: searchFilteredVariables.length > 0,
-    isSourceNotEmpty: typeFilteredVariables.length > 0
+    isSourceNotEmpty: typeFilteredVariables.length > 0,
+    hasNoCompatibleVariables: baseVariables.length > 0 && typeFilteredVariables.length === 0
   };
 };
 var useVariableSelectionFilter = (variables) => {
@@ -490,19 +910,28 @@ var useVariableSelectionFilter = (variables) => {
   const { propType } = useBoundProp();
   return selectionFilter ? selectionFilter(variables, propType) : variables;
 };
-var filterVariablesBySearchValue = (variables, searchValue) => {
-  const lowerSearchValue = searchValue.toLowerCase();
-  return variables.filter(({ label }) => label.toLowerCase().includes(lowerSearchValue));
-};
 var usePropVariables = (propKey) => {
   return useMemo(() => normalizeVariables(propKey), [propKey]);
 };
+var getMatchingTypes = (propKey) => {
+  const matchingTypes = [];
+  const allTypes = getVariableTypes();
+  const variableType = getVariableType(propKey);
+  Object.entries(allTypes).forEach(([key, typeOptions]) => {
+    if (variableType.variableType === typeOptions.variableType) {
+      matchingTypes.push(key);
+    }
+  });
+  return matchingTypes;
+};
 var normalizeVariables = (propKey) => {
   const variables = getVariables(false);
-  return Object.entries(variables).filter(([, variable]) => variable.type === propKey).map(([key, { label, value }]) => ({
+  const matchingTypes = getMatchingTypes(propKey);
+  return Object.entries(variables).filter(([, variable]) => matchingTypes.includes(variable.type)).map(([key, { label, value, order }]) => ({
     key,
     label,
-    value
+    value,
+    order
   }));
 };
 var extractId = ({ id: id2 }) => id2;
@@ -519,87 +948,195 @@ var restoreVariable = (restoreId, label, value) => {
   return service.restore(restoreId, label, value).then(extractId);
 };
 
-// src/components/variables-manager/variables-manager-table.tsx
-import * as React7 from "react";
-import { createElement as createElement9, useState as useState3 } from "react";
-import { EllipsisWithTooltip } from "@elementor/editor-ui";
-import { GripVerticalIcon } from "@elementor/icons";
-import {
-  IconButton as IconButton2,
-  Stack as Stack3,
-  Table,
-  TableBody,
-  TableContainer,
-  TableHead,
-  TableRow,
-  UnstableSortableItem,
-  UnstableSortableProvider
-} from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
-
-// src/components/fields/label-field.tsx
-import * as React3 from "react";
-import { useState } from "react";
-import { TextField } from "@elementor/ui";
-
-// src/utils/validations.ts
-import { __ as __3 } from "@wordpress/i18n";
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: __3("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: __3("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: __3("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: __3("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: __3("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: __3("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: __3("There was a glitch. Try saving your variable again.", "elementor")
+// src/components/variables-manager/hooks/use-variables-manager-state.ts
+var useVariablesManagerState = () => {
+  const [variables, setVariables] = useState2(() => getVariables(false));
+  const [deletedVariables, setDeletedVariables] = useState2([]);
+  const [isSaveDisabled, setIsSaveDisabled] = useState2(false);
+  const [isDirty, setIsDirty] = useState2(false);
+  const [isSaving, setIsSaving] = useState2(false);
+  const [searchValue, setSearchValue] = useState2("");
+  const handleOnChange = useCallback3(
+    (newVariables) => {
+      setVariables({ ...variables, ...newVariables });
+      setIsDirty(true);
+    },
+    [variables]
+  );
+  const createVariable2 = useCallback3((type, defaultName, defaultValue) => {
+    const newId = generateTempId();
+    const newVariable = {
+      id: newId,
+      label: defaultName.trim(),
+      value: defaultValue.trim(),
+      type
+    };
+    setVariables((prev) => ({ ...prev, [newId]: newVariable }));
+    setIsDirty(true);
+    return newId;
+  }, []);
+  const handleDeleteVariable = useCallback3((itemId) => {
+    setDeletedVariables((prev) => [...prev, itemId]);
+    setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
+    setIsDirty(true);
+  }, []);
+  const handleSearch = (searchTerm) => {
+    setSearchValue(searchTerm);
+  };
+  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 }));
+    const filtered = filterBySearch(list, searchValue);
+    return Object.fromEntries(filtered.map(({ id: id2, ...rest }) => [id2, rest]));
+  };
+  return {
+    variables: filteredVariables(),
+    deletedVariables,
+    isDirty,
+    isSaveDisabled,
+    handleOnChange,
+    createVariable: createVariable2,
+    handleDeleteVariable,
+    handleSave,
+    isSaving,
+    handleSearch,
+    searchValue,
+    setIsSaving,
+    setIsSaveDisabled
+  };
 };
-var VARIABLE_LABEL_MAX_LENGTH = 50;
-var mapServerError = (error) => {
-  if (error?.response?.data?.code === "duplicated_label") {
+
+// src/components/variables-manager/variables-manager-create-menu.tsx
+import * as React6 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 __7 } from "@wordpress/i18n";
+var SIZE = "tiny";
+var VariableManagerCreateMenu = ({
+  variables,
+  onCreate,
+  disabled,
+  menuState
+}) => {
+  const buttonRef = useRef2(null);
+  const variableTypes = getVariableTypes();
+  const menuOptions = Object.entries(variableTypes).filter(([, variable]) => !!variable.defaultValue).map(([key, variable]) => {
+    const displayName = variable.variableType.charAt(0).toUpperCase() + variable.variableType.slice(1);
     return {
-      field: "label",
-      message: ERROR_MESSAGES.DUPLICATED_LABEL
+      key,
+      name: displayName,
+      icon: variable.icon,
+      onClick: () => {
+        const defaultName = getDefaultName(variables, key, variable.variableType);
+        onCreate(key, defaultName, variable.defaultValue || "");
+        trackVariablesManagerEvent({ action: "add", varType: variable.variableType });
+      }
     };
-  }
-  return void 0;
-};
-var validateLabel = (name) => {
-  if (!name.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
-  }
-  const allowedChars = /^[a-zA-Z0-9_-]+$/;
-  if (!allowedChars.test(name)) {
-    return ERROR_MESSAGES.INVALID_CHARACTERS;
-  }
-  const hasAlphanumeric = /[a-zA-Z0-9]/;
-  if (!hasAlphanumeric.test(name)) {
-    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
-  }
-  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  return "";
-};
-var labelHint = (name) => {
-  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
-  if (hintThreshold < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  return "";
+  });
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+    IconButton,
+    {
+      ...bindTrigger(menuState),
+      ref: buttonRef,
+      disabled,
+      size: SIZE,
+      "aria-label": __7("Add variable", "elementor")
+    },
+    /* @__PURE__ */ React6.createElement(PlusIcon, { fontSize: SIZE })
+  ), /* @__PURE__ */ React6.createElement(
+    Menu,
+    {
+      disablePortal: true,
+      MenuListProps: {
+        dense: true
+      },
+      PaperProps: {
+        elevation: 6
+      },
+      ...bindMenu(menuState),
+      anchorEl: buttonRef.current,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      "data-testid": "variable-manager-create-menu"
+    },
+    menuOptions.map((option) => /* @__PURE__ */ React6.createElement(
+      MenuItem,
+      {
+        key: option.key,
+        onClick: () => {
+          option.onClick?.();
+          menuState.close();
+        },
+        sx: {
+          gap: 1.5
+        }
+      },
+      createElement7(option.icon, {
+        fontSize: SIZE,
+        color: "action"
+      }),
+      /* @__PURE__ */ React6.createElement(Typography5, { variant: "caption", color: "text.primary" }, option.name)
+    ))
+  ));
 };
-var validateValue = (value) => {
-  if (!value.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+var getDefaultName = (variables, type, baseName) => {
+  const existingNames = Object.values(variables).filter((variable) => variable.type === type).map((variable) => variable.label);
+  let counter = 1;
+  let name = `${baseName}-${counter}`;
+  while (existingNames.includes(name)) {
+    counter++;
+    name = `${baseName}-${counter}`;
   }
-  return "";
+  return name;
 };
 
+// src/components/variables-manager/variables-manager-table.tsx
+import * as React11 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 {
+  IconButton as IconButton3,
+  Stack as Stack5,
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableRow,
+  UnstableSortableItem,
+  UnstableSortableProvider
+} from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
+
 // src/components/fields/label-field.tsx
+import * as React7 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) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
 var useLabelError = (initialError) => {
-  const [error, setError] = useState(initialError ?? { value: "", message: "" });
+  const [error, setError] = useState3(initialError ?? { value: "", message: "" });
   return {
     labelFieldError: error,
     setLabelFieldError: setError
@@ -612,13 +1149,17 @@ var LabelField = ({
   id: id2,
   onErrorChange,
   size = "tiny",
-  focusOnShow = false
+  focusOnShow = false,
+  selectOnShow = false,
+  showWarningInfotip = false,
+  variables
 }) => {
-  const [label, setLabel] = useState(value);
-  const [errorMessage, setErrorMessage] = useState("");
+  const [label, setLabel] = useState3(value);
+  const [errorMessage, setErrorMessage] = useState3("");
+  const fieldRef = useRef3(null);
   const handleChange = (newValue) => {
     setLabel(newValue);
-    const errorMsg2 = validateLabel(newValue);
+    const errorMsg2 = validateLabel(newValue, variables);
     setErrorMessage(errorMsg2);
     onErrorChange?.(errorMsg2);
     onChange(isLabelEqual(newValue, error?.value ?? "") || errorMsg2 ? "" : newValue);
@@ -627,32 +1168,54 @@ var LabelField = ({
   if (isLabelEqual(label, error?.value ?? "") && error?.message) {
     errorMsg = error.message;
   }
-  return /* @__PURE__ */ React3.createElement(
+  const hintMsg = !errorMsg ? labelHint(label) : "";
+  const textField = /* @__PURE__ */ React7.createElement(
     TextField,
     {
+      ref: fieldRef,
       id: id2,
       size,
       fullWidth: true,
       value: label,
       error: !!errorMsg,
       onChange: (e) => handleChange(e.target.value),
-      inputProps: { maxLength: VARIABLE_LABEL_MAX_LENGTH },
+      inputProps: {
+        maxLength: VARIABLE_LABEL_MAX_LENGTH,
+        ...selectOnShow && { onFocus: (e) => e.target.select() },
+        "aria-label": "Name"
+      },
       autoFocus: focusOnShow
     }
   );
+  if (showWarningInfotip) {
+    const tooltipWidth = Math.max(240, fieldRef.current?.getBoundingClientRect().width ?? 240);
+    return /* @__PURE__ */ React7.createElement(
+      WarningInfotip,
+      {
+        open: Boolean(errorMsg || hintMsg),
+        text: errorMsg || hintMsg,
+        placement: "bottom-start",
+        width: tooltipWidth,
+        offset: [0, -15],
+        ...hintMsg && { hasError: false }
+      },
+      textField
+    );
+  }
+  return textField;
 };
 
-// src/components/variables-manager/variable-edit-menu.tsx
-import * as React4 from "react";
-import { createElement as createElement5 } from "react";
+// src/components/variables-manager/ui/variable-edit-menu.tsx
+import * as React8 from "react";
+import { createElement as createElement10 } from "react";
 import { DotsVerticalIcon } from "@elementor/icons";
-import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, usePopupState } from "@elementor/ui";
+import { bindMenu as bindMenu2, bindTrigger as bindTrigger2, IconButton as IconButton2, Menu as Menu2, MenuItem as MenuItem2, usePopupState } from "@elementor/ui";
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
   const menuState = usePopupState({
     variant: "popover"
   });
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(IconButton, { ...bindTrigger(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React4.createElement(DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React4.createElement(
-    Menu,
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(IconButton2, { ...bindTrigger2(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React8.createElement(DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React8.createElement(
+    Menu2,
     {
       disablePortal: true,
       MenuListProps: {
@@ -661,7 +1224,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       PaperProps: {
         elevation: 6
       },
-      ...bindMenu(menuState),
+      ...bindMenu2(menuState),
       anchorEl: menuState.anchorEl,
       anchorOrigin: {
         vertical: "bottom",
@@ -674,8 +1237,8 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuActions.map((action) => /* @__PURE__ */ React4.createElement(
-      MenuItem,
+    menuActions.map((action) => /* @__PURE__ */ React8.createElement(
+      MenuItem2,
       {
         key: action.name,
         onClick: () => {
@@ -687,7 +1250,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
           gap: 1
         }
       },
-      action.icon && createElement5(action.icon, {
+      action.icon && createElement10(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -696,77 +1259,8 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
   ));
 };
 
-// src/components/variables-manager/variable-editable-cell.tsx
-import * as React5 from "react";
-import { useState as useState2 } from "react";
-import { ClickAwayListener, Stack as Stack2 } from "@elementor/ui";
-var VariableEditableCell = ({
-  initialValue,
-  children,
-  editableElement,
-  onChange,
-  prefixElement
-}) => {
-  const [value, setValue] = useState2(initialValue);
-  const [isEditing, setIsEditing] = useState2(false);
-  const handleDoubleClick = () => {
-    setIsEditing(true);
-  };
-  const handleSave = () => {
-    onChange(value);
-    setIsEditing(false);
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      handleSave();
-    } else if (event.key === "Escape") {
-      setIsEditing(false);
-    }
-    if (event.key === " " && !isEditing) {
-      event.preventDefault();
-      setIsEditing(true);
-    }
-  };
-  const handleChange = (newValue) => {
-    setValue(newValue);
-  };
-  const editableContent = editableElement({ value, onChange: handleChange });
-  if (isEditing) {
-    return /* @__PURE__ */ React5.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React5.createElement(
-      Stack2,
-      {
-        direction: "row",
-        alignItems: "center",
-        gap: 1,
-        onDoubleClick: handleDoubleClick,
-        onKeyDown: handleKeyDown,
-        tabIndex: 0,
-        role: "button",
-        "aria-label": "Double click or press Space to edit"
-      },
-      prefixElement,
-      editableContent
-    ));
-  }
-  return /* @__PURE__ */ React5.createElement(
-    Stack2,
-    {
-      direction: "row",
-      alignItems: "center",
-      gap: 1,
-      onDoubleClick: handleDoubleClick,
-      onKeyDown: handleKeyDown,
-      tabIndex: 0,
-      role: "button",
-      "aria-label": "Double click or press Space to edit"
-    },
-    prefixElement,
-    children
-  );
-};
-
-// src/components/variables-manager/variable-table-cell.tsx
-import * as React6 from "react";
+// src/components/variables-manager/ui/variable-table-cell.tsx
+import * as React9 from "react";
 import { TableCell } from "@elementor/ui";
 var VariableTableCell = ({
   children,
@@ -786,20 +1280,167 @@ var VariableTableCell = ({
     ...width && { width },
     ...sx
   };
-  return /* @__PURE__ */ React6.createElement(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+  return /* @__PURE__ */ React9.createElement(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
 };
 
+// src/components/variables-manager/variable-editable-cell.tsx
+import * as React10 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(
+  ({
+    initialValue,
+    children,
+    editableElement,
+    onChange,
+    prefixElement,
+    autoEdit = false,
+    onRowRef,
+    onAutoEditComplete,
+    gap = 1,
+    fieldType
+  }) => {
+    const [value, setValue] = useState4(initialValue);
+    const [isEditing, setIsEditing] = useState4(false);
+    const { labelFieldError, setLabelFieldError } = useLabelError();
+    const [valueFieldError, setValueFieldError] = useState4("");
+    const rowRef = useRef4(null);
+    const handleSave = useCallback4(() => {
+      const hasError = fieldType === "label" && labelFieldError?.message || fieldType === "value" && valueFieldError;
+      if (!hasError) {
+        onChange(value);
+      }
+      setIsEditing(false);
+    }, [value, onChange, fieldType, labelFieldError, valueFieldError]);
+    useEffect(() => {
+      onRowRef?.(rowRef?.current);
+    }, [onRowRef]);
+    useEffect(() => {
+      if (autoEdit && !isEditing) {
+        setIsEditing(true);
+        onAutoEditComplete?.();
+      }
+    }, [autoEdit, isEditing, onAutoEditComplete]);
+    const handleDoubleClick = () => {
+      setIsEditing(true);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter") {
+        handleSave();
+      } else if (event.key === "Escape") {
+        setIsEditing(false);
+      }
+      if (event.key === " " && !isEditing) {
+        event.preventDefault();
+        setIsEditing(true);
+      }
+    };
+    const handleChange = useCallback4((newValue) => {
+      setValue(newValue);
+    }, []);
+    const handleValidationChange = useCallback4(
+      (errorMsg) => {
+        if (fieldType === "label") {
+          setLabelFieldError({
+            value,
+            message: errorMsg
+          });
+        } else {
+          setValueFieldError(errorMsg);
+        }
+      },
+      [fieldType, value, setLabelFieldError, setValueFieldError]
+    );
+    let currentError;
+    if (fieldType === "label") {
+      currentError = labelFieldError;
+    } else if (fieldType === "value") {
+      currentError = { value, message: valueFieldError };
+    }
+    const editableContent = editableElement({
+      value,
+      onChange: handleChange,
+      onValidationChange: handleValidationChange,
+      error: currentError
+    });
+    if (isEditing) {
+      return /* @__PURE__ */ React10.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React10.createElement(
+        Stack4,
+        {
+          ref: rowRef,
+          direction: "row",
+          alignItems: "center",
+          gap,
+          onDoubleClick: handleDoubleClick,
+          onKeyDown: handleKeyDown,
+          tabIndex: 0,
+          role: "button",
+          "aria-label": "Double click or press Space to edit"
+        },
+        prefixElement,
+        editableContent
+      ));
+    }
+    return /* @__PURE__ */ React10.createElement(
+      Stack4,
+      {
+        ref: rowRef,
+        direction: "row",
+        alignItems: "center",
+        gap,
+        onDoubleClick: handleDoubleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        role: "button",
+        "aria-label": "Double click or press Space to edit"
+      },
+      prefixElement,
+      children
+    );
+  }
+);
+
 // src/components/variables-manager/variables-manager-table.tsx
-var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange }) => {
-  const [ids, setIds] = useState3(Object.keys(variables));
+var VariablesManagerTable = ({
+  menuActions,
+  variables,
+  onChange: handleOnChange,
+  autoEditVariableId,
+  onAutoEditComplete,
+  onFieldError
+}) => {
+  const tableContainerRef = useRef5(null);
+  const variableRowRefs = useRef5(/* @__PURE__ */ new Map());
+  useEffect2(() => {
+    if (autoEditVariableId && tableContainerRef.current) {
+      const rowElement = variableRowRefs.current.get(autoEditVariableId);
+      if (rowElement) {
+        setTimeout(() => {
+          rowElement.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+            inline: "nearest"
+          });
+        }, 100);
+      }
+    }
+  }, [autoEditVariableId]);
+  const handleRowRef = (id2) => (ref) => {
+    if (ref) {
+      variableRowRefs.current.set(id2, ref);
+    } else {
+      variableRowRefs.current.delete(id2);
+    }
+  };
+  const ids = Object.keys(variables).sort(sortVariablesOrder(variables));
   const rows = ids.filter((id2) => !variables[id2].deleted).map((id2) => {
     const variable = variables[id2];
     const variableType = getVariableType(variable.type);
     return {
       id: id2,
+      type: variable.type,
       name: variable.label,
       value: variable.value,
-      type: variable.type,
       ...variableType
     };
   });
@@ -807,16 +1448,27 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
     minWidth: 250,
     tableLayout: "fixed"
   };
-  return /* @__PURE__ */ React7.createElement(TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React7.createElement(Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React7.createElement(TableHead, null, /* @__PURE__ */ React7.createElement(TableRow, null, /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true }, __4("Name", "elementor")), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true }, __4("Value", "elementor")), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React7.createElement(TableBody, null, /* @__PURE__ */ React7.createElement(
+  const handleReorder = (newIds) => {
+    const updatedVariables = { ...variables };
+    newIds.forEach((id2, index) => {
+      const current = updatedVariables[id2];
+      if (!current) {
+        return;
+      }
+      updatedVariables[id2] = Object.assign({}, current, { order: index + 1 });
+    });
+    handleOnChange(updatedVariables);
+  };
+  return /* @__PURE__ */ React11.createElement(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,
-      onChange: setIds,
+      onChange: handleReorder,
       variant: "static",
       restrictAxis: true,
-      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React7.createElement(Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React7.createElement(TableBody, null, dragOverlayChildren))
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React11.createElement(Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React11.createElement(TableBody, null, dragOverlayChildren))
     },
-    rows.map((row) => /* @__PURE__ */ React7.createElement(
+    rows.map((row) => /* @__PURE__ */ React11.createElement(
       UnstableSortableItem,
       {
         key: row.id,
@@ -830,16 +1482,15 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
           isDragged,
           dropPosition,
           setTriggerRef,
-          isDragOverlay,
-          isSorting,
-          index
+          isSorting
         }) => {
           const showIndicationBefore = showDropIndication && dropPosition === "before";
           const showIndicationAfter = showDropIndication && dropPosition === "after";
-          return /* @__PURE__ */ React7.createElement(
+          return /* @__PURE__ */ React11.createElement(
             TableRow,
             {
               ...itemProps,
+              ref: handleRowRef("table-ref-" + row.id),
               selected: isDragged,
               sx: {
                 ...showIndicationBefore && {
@@ -864,11 +1515,10 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                   }
                 }
               },
-              style: { ...itemStyle, ...triggerStyle },
-              disableDivider: isDragOverlay || index === rows.length - 1
+              style: { ...itemStyle, ...triggerStyle }
             },
-            /* @__PURE__ */ React7.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React7.createElement(
-              IconButton2,
+            /* @__PURE__ */ React11.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React11.createElement(
+              IconButton3,
               {
                 size: "small",
                 ref: setTriggerRef,
@@ -876,9 +1526,9 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                 disabled: isSorting,
                 draggable: true
               },
-              /* @__PURE__ */ React7.createElement(GripVerticalIcon, { fontSize: "inherit" })
+              /* @__PURE__ */ React11.createElement(GripVerticalIcon, { fontSize: "inherit" })
             )),
-            /* @__PURE__ */ React7.createElement(VariableTableCell, null, /* @__PURE__ */ React7.createElement(
+            /* @__PURE__ */ React11.createElement(VariableTableCell, null, /* @__PURE__ */ React11.createElement(
               VariableEditableCell,
               {
                 initialValue: row.name,
@@ -890,19 +1540,36 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                     });
                   }
                 },
-                prefixElement: createElement9(row.icon, { fontSize: "inherit" }),
-                editableElement: ({ value, onChange }) => /* @__PURE__ */ React7.createElement(
+                prefixElement: createElement14(row.icon, { fontSize: "inherit" }),
+                editableElement: ({
+                  value,
+                  onChange,
+                  onValidationChange,
+                  error
+                }) => /* @__PURE__ */ React11.createElement(
                   LabelField,
                   {
                     id: "variable-label-" + row.id,
                     size: "tiny",
                     value,
                     onChange,
-                    focusOnShow: true
+                    onErrorChange: (errorMsg) => {
+                      onValidationChange?.(errorMsg);
+                      onFieldError?.(!!errorMsg);
+                    },
+                    error,
+                    focusOnShow: true,
+                    selectOnShow: autoEditVariableId === row.id,
+                    showWarningInfotip: true,
+                    variables
                   }
-                )
+                ),
+                autoEdit: autoEditVariableId === row.id,
+                onRowRef: handleRowRef(row.id),
+                onAutoEditComplete: autoEditVariableId === row.id ? onAutoEditComplete : void 0,
+                fieldType: "label"
               },
-              /* @__PURE__ */ React7.createElement(
+              /* @__PURE__ */ React11.createElement(
                 EllipsisWithTooltip,
                 {
                   title: row.name,
@@ -911,7 +1578,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                 row.name
               )
             )),
-            /* @__PURE__ */ React7.createElement(VariableTableCell, null, /* @__PURE__ */ React7.createElement(
+            /* @__PURE__ */ React11.createElement(VariableTableCell, null, /* @__PURE__ */ React11.createElement(
               VariableEditableCell,
               {
                 initialValue: row.value,
@@ -923,19 +1590,51 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                     });
                   }
                 },
-                editableElement: row.valueField
+                editableElement: ({
+                  value,
+                  onChange,
+                  onValidationChange,
+                  error
+                }) => row.valueField({
+                  ref: {
+                    current: variableRowRefs.current.get(
+                      "table-ref-" + row.id
+                    )
+                  },
+                  value,
+                  onChange,
+                  onPropTypeKeyChange: (type) => {
+                    handleOnChange({
+                      ...variables,
+                      [row.id]: { ...variables[row.id], type }
+                    });
+                  },
+                  propTypeKey: row.type,
+                  onValidationChange: (errorMsg) => {
+                    onValidationChange?.(errorMsg);
+                    onFieldError?.(!!errorMsg);
+                  },
+                  error
+                }),
+                onRowRef: handleRowRef(row.id),
+                gap: 0.25,
+                fieldType: "value"
               },
               row.startIcon && row.startIcon({ value: row.value }),
-              /* @__PURE__ */ React7.createElement(
+              /* @__PURE__ */ React11.createElement(
                 EllipsisWithTooltip,
                 {
                   title: row.value,
-                  sx: { border: "4px solid transparent" }
+                  sx: {
+                    border: "4px solid transparent",
+                    lineHeight: "1",
+                    pt: 0.25
+                  }
                 },
                 row.value
               )
             )),
-            /* @__PURE__ */ React7.createElement(
+            /* @__PURE__ */ React11.createElement(
               VariableTableCell,
               {
                 align: "right",
@@ -944,7 +1643,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                 maxWidth: 16,
                 sx: { paddingInlineEnd: 1 }
               },
-              /* @__PURE__ */ React7.createElement(Stack3, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React7.createElement(
+              /* @__PURE__ */ React11.createElement(Stack5, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React11.createElement(
                 VariableEditMenu,
                 {
                   menuActions,
@@ -959,6 +1658,13 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
     ))
   ))));
 };
+function sortVariablesOrder(variables) {
+  return (a, b) => {
+    const orderA = variables[a]?.order ?? Number.MAX_SAFE_INTEGER;
+    const orderB = variables[b]?.order ?? Number.MAX_SAFE_INTEGER;
+    return orderA - orderB;
+  };
+}
 
 // src/components/variables-manager/variables-manager-panel.tsx
 var id = "variables-manager";
@@ -971,39 +1677,134 @@ var { panel, usePanelActions } = createPanel({
   },
   onClose: () => {
     changeEditMode("edit");
-  }
+  },
+  isOpenPreviousElement: true
 });
 function VariablesManagerPanel() {
   const { close: closePanel } = usePanelActions();
-  const [isDirty, setIsDirty] = useState4(false);
-  const [variables, setVariables] = useState4(getVariables(false));
-  const [deletedVariables, setDeletedVariables] = useState4([]);
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const createMenuState = usePopupState2({
+    variant: "popover"
+  });
+  const {
+    variables,
+    isDirty,
+    searchValue,
+    isSaveDisabled,
+    handleOnChange,
+    createVariable: createVariable2,
+    handleDeleteVariable,
+    handleSave,
+    isSaving,
+    handleSearch,
+    setIsSaving,
+    setIsSaveDisabled
+  } = useVariablesManagerState();
+  const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
+  const { createNavigationCallback, resetNavigation } = useErrorNavigation();
+  const [deleteConfirmation, setDeleteConfirmation] = useState5(null);
+  const [serverError, setServerError] = useState5(null);
   usePreventUnload(isDirty);
+  const handleClosePanel = () => {
+    if (isDirty) {
+      openSaveChangesDialog();
+      return;
+    }
+    closePanel();
+  };
+  const handleCreateVariable = useCallback5(
+    (type, defaultName, defaultValue) => {
+      const newId = createVariable2(type, defaultName, defaultValue);
+      if (newId) {
+        startAutoEdit(newId);
+      }
+    },
+    [createVariable2, startAutoEdit]
+  );
+  const handleSaveClick = async () => {
+    try {
+      setServerError(null);
+      resetNavigation();
+      const result = await handleSave();
+      trackVariablesManagerEvent({ action: "saveChanges" });
+      return result;
+    } catch (error) {
+      const mappedError = mapServerError(error);
+      const duplicatedIds = mappedError?.action?.data?.duplicatedIds;
+      if (mappedError && "label" === mappedError.field) {
+        if (duplicatedIds && mappedError.action) {
+          mappedError.action.callback = createNavigationCallback(duplicatedIds, startAutoEdit, () => {
+            setIsSaveDisabled(false);
+          });
+        }
+        setServerError(mappedError);
+        setIsSaveDisabled(true);
+        resetNavigation();
+      }
+      return { success: false, error: mappedError };
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleDeleteVariableWithConfirmation = useCallback5(
+    (itemId) => {
+      handleDeleteVariable(itemId);
+      setDeleteConfirmation(null);
+    },
+    [handleDeleteVariable]
+  );
   const menuActions = [
     {
-      name: __5("Delete", "elementor"),
+      name: __9("Delete", "elementor"),
       icon: TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
-        setDeletedVariables([...deletedVariables, itemId]);
-        setVariables({ ...variables, [itemId]: { ...variables[itemId], deleted: true } });
-        setIsDirty(true);
+        const variable = variables[itemId];
+        if (variable) {
+          setDeleteConfirmation({ id: itemId, label: variable.label });
+          const variableTypeOptions = getVariableType(variable.type);
+          trackVariablesManagerEvent({ action: "delete", varType: variableTypeOptions?.variableType });
+        }
       }
     }
   ];
-  const handleOnChange = (newVariables) => {
-    setVariables(newVariables);
-    setIsDirty(true);
-  };
-  return /* @__PURE__ */ React8.createElement(ThemeProvider, null, /* @__PURE__ */ React8.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(Panel, null, /* @__PURE__ */ React8.createElement(PanelHeader, null, /* @__PURE__ */ React8.createElement(Stack4, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React8.createElement(Stack4, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React8.createElement(Stack4, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React8.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(ColorFilterIcon, { fontSize: "inherit" }), __5("Variable Manager", "elementor"))), /* @__PURE__ */ React8.createElement(
-    CloseButton,
+  const hasVariables = Object.values(variables).some((variable) => !variable.deleted);
+  return /* @__PURE__ */ React12.createElement(ThemeProvider, null, /* @__PURE__ */ React12.createElement(Panel, null, /* @__PURE__ */ React12.createElement(
+    PanelHeader,
     {
-      sx: { marginLeft: "auto" },
-      onClose: () => {
-        closePanel();
+      sx: {
+        height: "unset"
       }
-    }
-  )), /* @__PURE__ */ React8.createElement(Divider, { sx: { width: "100%" } }))), /* @__PURE__ */ React8.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("Variables Manager", "elementor"))), /* @__PURE__ */ React12.createElement(Stack6, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React12.createElement(
+      VariableManagerCreateMenu,
+      {
+        onCreate: handleCreateVariable,
+        variables,
+        menuState: createMenuState
+      }
+    ), /* @__PURE__ */ React12.createElement(
+      CloseButton,
+      {
+        "aria-label": "Close",
+        slotProps: { icon: { fontSize: SIZE } },
+        onClick: () => {
+          handleClosePanel();
+        }
+      }
+    ))), /* @__PURE__ */ React12.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(
+      SearchField,
+      {
+        sx: {
+          display: "flex",
+          flex: 1
+        },
+        placeholder: __9("Search", "elementor"),
+        value: searchValue,
+        onSearch: handleSearch
+      }
+    )), /* @__PURE__ */ React12.createElement(Divider, { sx: { width: "100%" } }))
+  ), /* @__PURE__ */ React12.createElement(
     PanelBody,
     {
       sx: {
@@ -1012,20 +1813,116 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React8.createElement(
+    hasVariables && /* @__PURE__ */ React12.createElement(
       VariablesManagerTable,
       {
         menuActions,
         variables,
-        onChange: handleOnChange
+        onChange: handleOnChange,
+        autoEditVariableId,
+        onAutoEditComplete: handleAutoEditComplete,
+        onFieldError: setIsSaveDisabled
+      }
+    ),
+    !hasVariables && searchValue && /* @__PURE__ */ React12.createElement(
+      NoSearchResults,
+      {
+        searchValue,
+        onClear: () => handleSearch(""),
+        icon: /* @__PURE__ */ React12.createElement(ColorFilterIcon, { fontSize: "large" })
+      }
+    ),
+    !hasVariables && !searchValue && /* @__PURE__ */ React12.createElement(
+      EmptyState,
+      {
+        title: __9("Create your first variable", "elementor"),
+        message: __9(
+          "Variables are saved attributes that you can apply anywhere on your site.",
+          "elementor"
+        ),
+        icon: /* @__PURE__ */ React12.createElement(ColorFilterIcon, { fontSize: "large" }),
+        onAdd: createMenuState.open
       }
     )
-  ), /* @__PURE__ */ React8.createElement(PanelFooter, null, /* @__PURE__ */ React8.createElement(Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, __5("Save changes", "elementor"))))));
+  ), /* @__PURE__ */ React12.createElement(PanelFooter, null, /* @__PURE__ */ React12.createElement(
+    Infotip,
+    {
+      placement: "right",
+      open: !!serverError,
+      content: serverError ? /* @__PURE__ */ React12.createElement(
+        Alert,
+        {
+          severity: serverError.severity ?? "error",
+          action: serverError.action?.label ? /* @__PURE__ */ React12.createElement(AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
+          onClose: !serverError.action?.label ? () => {
+            setServerError(null);
+            setIsSaveDisabled(false);
+          } : void 0,
+          icon: serverError.IconComponent ? /* @__PURE__ */ React12.createElement(serverError.IconComponent, null) : /* @__PURE__ */ React12.createElement(AlertTriangleFilledIcon2, null)
+        },
+        /* @__PURE__ */ React12.createElement(AlertTitle, null, serverError.message),
+        serverError.action?.message
+      ) : null,
+      arrow: false,
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [-10, 10] }
+            }
+          ]
+        }
+      }
+    },
+    /* @__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,
+    {
+      open: true,
+      label: deleteConfirmation.label,
+      onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
+      closeDialog: () => setDeleteConfirmation(null)
+    }
+  ), 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: __9("Discard", "elementor"),
+          action: () => {
+            closeSaveChangesDialog();
+            closePanel();
+          }
+        },
+        confirm: {
+          label: __9("Save", "elementor"),
+          action: async () => {
+            const result = await handleSaveClick();
+            closeSaveChangesDialog();
+            if (result?.success) {
+              closePanel();
+            }
+          }
+        }
+      }
+    }
+  )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React8.createElement(IconButton3, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React8.createElement(XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, __5("Something went wrong", "elementor"))));
 var usePreventUnload = (isDirty) => {
-  useEffect(() => {
+  useEffect3(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -1039,21 +1936,21 @@ var usePreventUnload = (isDirty) => {
 };
 
 // src/controls/variable-control.tsx
-import * as React32 from "react";
+import * as React31 from "react";
 import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 
 // src/components/ui/variable/assigned-variable.tsx
-import { useId, useRef } from "react";
-import * as React21 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 bindTrigger2, Box as Box5, Popover, usePopupState as usePopupState2 } 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) {
   const { valueTransformer } = getVariableType(propTypeKey);
   if (valueTransformer) {
-    return valueTransformer(variable.value);
+    return valueTransformer(variable);
   }
   return variable.value;
 }
@@ -1066,96 +1963,92 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 }
 
 // src/components/variable-selection-popover.tsx
-import * as React19 from "react";
-import { useState as useState10 } from "react";
+import * as React20 from "react";
+import { useState as useState11 } from "react";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 
 // src/context/variable-selection-popover.context.tsx
-import * as React9 from "react";
-import { createContext as createContext2, useContext as useContext2, useState as useState5 } from "react";
-import { Box as Box2 } from "@elementor/ui";
+import * as React13 from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState6 } from "react";
+import { Box } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = useState5(null);
-  return /* @__PURE__ */ React9.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React9.createElement(Box2, { ref: setAnchorRef }, children));
+  const [anchorRef, setAnchorRef] = useState6(null);
+  return /* @__PURE__ */ React13.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React13.createElement(Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
   return useContext2(PopoverContentRefContext);
 };
 
-// src/hooks/use-permissions.ts
-import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
-var usePermissions = () => {
-  const { canUser } = useCurrentUserCapabilities();
-  return {
-    canAssign: () => canUser("edit_posts"),
-    canUnlink: () => canUser("edit_posts"),
-    canAdd: () => canUser("manage_options"),
-    canDelete: () => canUser("manage_options"),
-    canEdit: () => canUser("manage_options"),
-    canRestore: () => canUser("manage_options"),
-    canManageSettings: () => canUser("manage_options")
-  };
-};
-
 // src/components/variable-creation.tsx
-import * as React11 from "react";
-import { useState as useState6 } from "react";
-import { PopoverContent, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import * as React15 from "react";
+import { useState as useState7 } from "react";
+import { PopoverContent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { PopoverBody } from "@elementor/editor-editing-panel";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { ArrowLeftIcon } from "@elementor/icons";
-import { Button as Button2, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton4, Typography as Typography2 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { Button as Button4, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton4, Typography as Typography6 } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/hooks/use-initial-value.ts
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 var useInitialValue = () => {
   const { value: initial } = useBoundProp2();
-  const hasAssignedVariable2 = hasVariableType(initial?.$$type) && Boolean(initial?.value);
-  const variable = useVariable(hasAssignedVariable2 ? initial.value : "");
-  if (hasAssignedVariable2) {
+  const hasAssignedVariable = hasVariableType(initial?.$$type) && Boolean(initial?.value);
+  const variable = useVariable(hasAssignedVariable ? initial.value : "");
+  if (hasAssignedVariable) {
     return variable ? variable.value : "";
   }
   return initial?.value ?? "";
 };
 
-// src/utils/tracking.ts
-var trackVariableEvent = ({ varType, controlPath, action }) => {
-  const extendedWindow = window;
-  const config = extendedWindow?.elementorCommon?.eventsManager?.config;
-  if (!config?.names?.variables?.[action]) {
-    return;
+// src/hooks/use-variable-bound-prop.ts
+import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { isTransformable } from "@elementor/editor-props";
+var useVariableBoundProp = () => {
+  const { propTypeUtil } = useVariableType();
+  const boundProp = useBoundProp3(propTypeUtil);
+  return {
+    ...boundProp,
+    setVariableValue: (value) => resolveBoundPropAndSetValue(value, boundProp),
+    variableId: boundProp.value ?? boundProp.placeholder
+  };
+};
+var resolveBoundPropAndSetValue = (value, boundProp) => {
+  const propValue = unwrapValue(boundProp.value);
+  const placeholder = unwrapValue(boundProp.placeholder);
+  const newValue = unwrapValue(value);
+  if (!propValue && placeholder === newValue) {
+    return boundProp.setValue(null);
   }
-  const name = config.names.variables[action];
-  extendedWindow.elementorCommon?.eventsManager?.dispatchEvent(name, {
-    location: config.locations.variables,
-    secondaryLocation: config.secondaryLocations.variablesPopover,
-    trigger: config.triggers.click,
-    var_type: varType,
-    control_path: controlPath,
-    action_type: name
-  });
+  return boundProp.setValue(value);
+};
+var unwrapValue = (input) => {
+  if (isTransformable(input)) {
+    return input.value;
+  }
+  return input;
 };
 
 // src/components/ui/form-field.tsx
-import * as React10 from "react";
+import * as React14 from "react";
 import { FormHelperText, FormLabel, Grid } from "@elementor/ui";
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React10.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React10.createElement(FormHelperText, null, noticeMsg)));
+  return /* @__PURE__ */ React14.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React14.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React14.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React14.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React14.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React14.createElement(FormHelperText, null, noticeMsg)));
 };
 
 // src/components/variable-creation.tsx
-var SIZE = "tiny";
+var SIZE2 = "tiny";
 var VariableCreation = ({ onGoBack, onClose }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: setVariable, path } = useBoundProp3(propTypeUtil);
-  const { propType } = useBoundProp3();
+  const { setVariableValue: setVariable, path } = useVariableBoundProp();
+  const { propType } = useBoundProp4();
   const initialValue = useInitialValue();
-  const [value, setValue] = useState6(initialValue);
-  const [label, setLabel] = useState6("");
-  const [errorMessage, setErrorMessage] = useState6("");
-  const [valueFieldError, setValueFieldError] = useState6("");
+  const [value, setValue] = useState7(initialValue);
+  const [label, setLabel] = useState7("");
+  const [errorMessage, setErrorMessage] = useState7("");
+  const [valueFieldError, setValueFieldError] = useState7("");
+  const [propTypeKey, setPropTypeKey] = useState7(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -1171,7 +2064,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     createVariable({
       value,
       label,
-      type: propTypeUtil.key
+      type: propTypeKey
     }).then((key) => {
       setVariable(key);
       closePopover();
@@ -1206,22 +2099,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React11.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React15.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React15.createElement(
     PopoverHeader,
     {
-      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(IconButton4, { size: SIZE, "aria-label": __6("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React11.createElement(VariableIcon, { fontSize: SIZE })),
-      title: __6("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__ */ React11.createElement(Divider2, null), /* @__PURE__ */ React11.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React15.createElement(Divider2, null), /* @__PURE__ */ React15.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React15.createElement(
     FormField,
     {
       id: "variable-label",
-      label: __6("Name", "elementor"),
+      label: __10("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React15.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -1239,61 +2132,49 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React11.createElement(FormField, { errorMsg: valueFieldError, label: __6("Value", "elementor") }, /* @__PURE__ */ React11.createElement(Typography2, { variant: "h5" }, /* @__PURE__ */ React11.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,
+      onPropTypeKeyChange: (key) => setPropTypeKey(key),
       onChange: (newValue) => {
         setValue(newValue);
         setErrorMessage("");
         setValueFieldError("");
-      },
-      onValidationChange: setValueFieldError,
-      propType
-    }
-  ))), errorMessage && /* @__PURE__ */ React11.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React11.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(Button2, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, __6("Create", "elementor"))));
-};
-
-// src/components/variable-edit.tsx
-import * as React14 from "react";
-import { useEffect as useEffect2, useState as useState8 } from "react";
-import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
-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 Button5, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5, Typography as Typography5 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
-
-// src/components/ui/delete-confirmation-dialog.tsx
-import * as React12 from "react";
-import { AlertOctagonFilledIcon } from "@elementor/icons";
-import {
-  Button as Button3,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Typography as Typography3
-} from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
-var TITLE_ID = "delete-variable-dialog";
-var DeleteConfirmationDialog = ({
-  open,
-  label,
-  closeDialog,
-  onConfirm
-}) => {
-  return /* @__PURE__ */ React12.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React12.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React12.createElement(AlertOctagonFilledIcon, { color: "error" }), __7("Delete this variable?", "elementor")), /* @__PURE__ */ React12.createElement(DialogContent, null, /* @__PURE__ */ React12.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __7("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React12.createElement(Typography3, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", __7("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React12.createElement(DialogActions, null, /* @__PURE__ */ React12.createElement(Button3, { color: "secondary", onClick: closeDialog }, __7("Not now", "elementor")), /* @__PURE__ */ React12.createElement(Button3, { variant: "contained", color: "error", onClick: onConfirm }, __7("Delete", "elementor"))));
+      },
+      onValidationChange: setValueFieldError,
+      propType
+    }
+  ))), errorMessage && /* @__PURE__ */ React15.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React15.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React15.createElement(
+    Button4,
+    {
+      id: "create-variable-button",
+      size: "small",
+      variant: "contained",
+      disabled: isSubmitDisabled,
+      onClick: handleCreateAndTrack
+    },
+    __10("Create", "elementor")
+  )));
 };
 
+// src/components/variable-edit.tsx
+import * as React17 from "react";
+import { useEffect as useEffect4, useState as useState9 } from "react";
+import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+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, Tooltip, Typography as Typography8 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
+
 // src/components/ui/edit-confirmation-dialog.tsx
-import * as React13 from "react";
-import { useState as useState7 } from "react";
-import { AlertTriangleFilledIcon } from "@elementor/icons";
+import * as React16 from "react";
+import { useState as useState8 } from "react";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
 import {
-  Button as Button4,
+  Button as Button5,
   Checkbox,
   Dialog as Dialog2,
   DialogActions as DialogActions2,
@@ -1301,29 +2182,29 @@ import {
   DialogContentText as DialogContentText2,
   DialogTitle as DialogTitle2,
   FormControlLabel,
-  Typography as Typography4
+  Typography as Typography7
 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = useState7(false);
+  const [dontShowAgain, setDontShowAgain] = useState8(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React13.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React13.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __8("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React13.createElement(DialogContent2, null, /* @__PURE__ */ React13.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __8(
+  return /* @__PURE__ */ React16.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React16.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(AlertTriangleFilledIcon3, { 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__ */ React13.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React13.createElement(
+  ))), /* @__PURE__ */ React16.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React16.createElement(
     FormControlLabel,
     {
-      control: /* @__PURE__ */ React13.createElement(
+      control: /* @__PURE__ */ React16.createElement(
         Checkbox,
         {
           checked: dontShowAgain,
@@ -1331,31 +2212,32 @@ var EditConfirmationDialog = ({
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React13.createElement(Typography4, { variant: "body2" }, __8("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React16.createElement(Typography7, { variant: "body2" }, __11("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(Button4, { color: "secondary", onClick: closeDialog }, __8("Keep editing", "elementor")), /* @__PURE__ */ React13.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __8("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 SIZE2 = "tiny";
+var SIZE3 = "tiny";
+var DELETE_LABEL = __12("Delete variable", "elementor");
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
-  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp4(propTypeUtil);
-  const { propType } = useBoundProp4();
+  const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
+  const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
+  const { propType } = useBoundProp5();
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = useState8(false);
-  const [editConfirmation, setEditConfirmation] = useState8(false);
-  const [errorMessage, setErrorMessage] = useState8("");
-  const [valueFieldError, setValueFieldError] = useState8("");
+  const [deleteConfirmation, setDeleteConfirmation] = useState9(false);
+  const [editConfirmation, setEditConfirmation] = useState9(false);
+  const [errorMessage, setErrorMessage] = useState9("");
+  const [valueFieldError, setValueFieldError] = useState9("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = useState8(() => variable.value);
-  const [label, setLabel] = useState8(() => variable.label);
-  useEffect2(() => {
+  const [value, setValue] = useState9(() => variable.value);
+  const [label, setLabel] = useState9(() => variable.label);
+  useEffect4(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -1402,7 +2284,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     });
   };
   const maybeTriggerBoundPropChange = () => {
-    if (editId === assignedValue) {
+    if (editId === variableId) {
       notifyBoundPropChange(editId);
     }
   };
@@ -1418,16 +2300,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React14.createElement(
-        IconButton5,
-        {
-          key: "delete",
-          size: SIZE2,
-          "aria-label": __9("Delete", "elementor"),
-          onClick: handleDeleteConfirmation
-        },
-        /* @__PURE__ */ React14.createElement(TrashIcon2, { fontSize: SIZE2 })
-      )
+      /* @__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 = () => {
@@ -1446,31 +2319,31 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React17.createElement(
     PopoverHeader2,
     {
-      title: __9("Edit variable", "elementor"),
+      title: __12("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React14.createElement(React14.Fragment, null, onGoBack && /* @__PURE__ */ React14.createElement(
+      icon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, onGoBack && /* @__PURE__ */ React17.createElement(
         IconButton5,
         {
-          size: SIZE2,
-          "aria-label": __9("Go Back", "elementor"),
+          size: SIZE3,
+          "aria-label": __12("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React14.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })
-      ), /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: SIZE2 })),
+        /* @__PURE__ */ React17.createElement(ArrowLeftIcon2, { fontSize: SIZE3 })
+      ), /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE3 })),
       actions
     }
-  ), /* @__PURE__ */ React14.createElement(Divider3, null), /* @__PURE__ */ React14.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React17.createElement(Divider3, null), /* @__PURE__ */ React17.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React17.createElement(
     FormField,
     {
       id: "variable-label",
-      label: __9("Name", "elementor"),
+      label: __12("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React17.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -1488,9 +2361,10 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React14.createElement(FormField, { errorMsg: valueFieldError, label: __9("Value", "elementor") }, /* @__PURE__ */ React14.createElement(Typography5, { variant: "h5" }, /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: __12("Value", "elementor") }, /* @__PURE__ */ React17.createElement(Typography8, { variant: "h5" }, /* @__PURE__ */ React17.createElement(
     ValueField,
     {
+      propTypeKey: variable.type,
       value,
       onChange: (newValue) => {
         setValue(newValue);
@@ -1500,7 +2374,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React14.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React14.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React14.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __9("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React14.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,
@@ -1508,7 +2382,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React14.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React17.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -1519,26 +2393,26 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import * as React18 from "react";
-import { useState as useState9 } from "react";
-import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+import * as React19 from "react";
+import { useState as useState10 } from "react";
 import { PopoverBody as PopoverBody3 } from "@elementor/editor-editing-panel";
-import { PopoverHeader as PopoverHeader3, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
-import { ColorFilterIcon as ColorFilterIcon2, PlusIcon, SettingsIcon } from "@elementor/icons";
-import { Divider as Divider4, IconButton as IconButton7 } from "@elementor/ui";
-import { __ as __13, sprintf } from "@wordpress/i18n";
+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, Tooltip as Tooltip3 } from "@elementor/ui";
+import { __ as __14, sprintf as sprintf2 } from "@wordpress/i18n";
 
 // src/components/ui/menu-item-content.tsx
-import * as React15 from "react";
+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 Typography6 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
-var SIZE3 = "tiny";
+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__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React15.createElement(
-    Box3,
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React18.createElement(
+    Box2,
     {
       sx: {
         flex: 1,
@@ -1548,29 +2422,29 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React18.createElement(
       EllipsisWithTooltip2,
       {
         title: item.label || item.value,
-        as: Typography6,
+        as: Typography9,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React15.createElement(
+    item.secondaryText && /* @__PURE__ */ React18.createElement(
       EllipsisWithTooltip2,
       {
         title: item.secondaryText,
-        as: Typography6,
+        as: Typography9,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React15.createElement(
+  ), !!onEdit && /* @__PURE__ */ React18.createElement(Tooltip2, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React18.createElement(
     IconButton6,
     {
       sx: { mx: 1, opacity: "0" },
@@ -1578,72 +2452,11 @@ var MenuItemContent = ({ item }) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": __10("Edit", "elementor")
-    },
-    /* @__PURE__ */ React15.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
-  ));
-};
-
-// src/components/ui/no-search-results.tsx
-import * as React16 from "react";
-import { Link, Stack as Stack5, Typography as Typography7 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
-var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React16.createElement(
-    Stack5,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      p: 2.5,
-      color: "text.secondary",
-      sx: { pb: 3.5 }
-    },
-    icon,
-    /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "subtitle2" }, __11("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React16.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __11("Try something else.", "elementor"), /* @__PURE__ */ React16.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __11("Clear & try again", "elementor")))
-  );
-};
-
-// src/components/ui/no-variables.tsx
-import * as React17 from "react";
-import { Button as Button6, Stack as Stack6, Typography as Typography8 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
-var NoVariables = ({ icon, title, onAdd }) => {
-  const canAdd = usePermissions().canAdd();
-  return /* @__PURE__ */ React17.createElement(
-    Stack6,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      color: "text.secondary",
-      sx: { p: 2.5, pb: 5.5 }
+      "aria-label": EDIT_LABEL
     },
-    icon,
-    canAdd ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
-      NoVariablesContent,
-      {
-        title: title || __12("Create your first variable", "elementor"),
-        message: __12(
-          "Variables are saved attributes that you can apply anywhere on your site.",
-          "elementor"
-        )
-      }
-    ), onAdd && /* @__PURE__ */ React17.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __12("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
-      NoVariablesContent,
-      {
-        title: __12("There are no variables", "elementor"),
-        message: __12("With your current role, you can only connect and detach variables.", "elementor")
-      }
-    )
-  );
+    /* @__PURE__ */ React18.createElement(EditIcon, { color: "action", fontSize: SIZE4 })
+  )));
 };
-function NoVariablesContent({ title, message }) {
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "caption", maxWidth: "180px" }, message));
-}
 
 // src/components/ui/styled-menu-list.tsx
 import { MenuList, styled as styled2 } from "@elementor/ui";
@@ -1678,15 +2491,18 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
 }));
 
 // src/components/variables-selection.tsx
-var SIZE4 = "tiny";
+var SIZE5 = "tiny";
+var CREATE_LABEL = __14("Create variable", "elementor");
+var MANAGER_LABEL = __14("Variables Manager", "elementor");
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
-  const { value: variable, setValue: setVariable, path } = useBoundProp5(propTypeUtil);
-  const [searchValue, setSearchValue] = useState9("");
+  const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
+  const [searchValue, setSearchValue] = useState10("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
-    isSourceNotEmpty: hasVariables
+    isSourceNotEmpty: hasVariables,
+    hasNoCompatibleVariables
   } = useFilteredVariables(searchValue, propTypeUtil.key);
   const handleSetVariable = (key) => {
     setVariable(key);
@@ -1708,20 +2524,46 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React18.createElement(IconButton7, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React18.createElement(PlusIcon, { fontSize: SIZE4 }))
+      /* @__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) {
+    const handleOpenManager = () => {
+      onSettings();
+      trackVariablesManagerEvent({
+        action: "openManager",
+        varType: variableType,
+        controlPath: path.join(".")
+      });
+    };
     actions.push(
-      /* @__PURE__ */ React18.createElement(IconButton7, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React18.createElement(SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React19.createElement(Tooltip3, { key: "settings", placement: "top", title: MANAGER_LABEL }, /* @__PURE__ */ React19.createElement(
+        IconButton7,
+        {
+          id: "variables-manager-button",
+          size: SIZE5,
+          onClick: handleOpenManager,
+          "aria-label": MANAGER_LABEL
+        },
+        /* @__PURE__ */ React19.createElement(SettingsIcon, { fontSize: SIZE5 })
+      ))
     );
   }
-  const StartIcon = startIcon || (() => /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE4 }));
+  const StartIcon = startIcon || (() => /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: SIZE5 }));
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React18.createElement(StartIcon, { value }),
+    icon: /* @__PURE__ */ React19.createElement(StartIcon, { value }),
     secondaryText: value,
     onEdit: onEdit ? () => onEdit?.(key) : void 0
   }));
@@ -1731,27 +2573,27 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  const noVariableTitle = sprintf(
+  const noVariableTitle = sprintf2(
     /* translators: %s: Variable Type. */
-    __13("Create your first %s variable", "elementor"),
+    __14("Create your first %s variable", "elementor"),
     variableType
   );
-  return /* @__PURE__ */ React18.createElement(PopoverBody3, null, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(PopoverBody3, null, /* @__PURE__ */ React19.createElement(
     PopoverHeader3,
     {
-      title: __13("Variables", "elementor"),
-      icon: /* @__PURE__ */ React18.createElement(ColorFilterIcon2, { fontSize: SIZE4 }),
+      title: __14("Variables", "elementor"),
+      icon: /* @__PURE__ */ React19.createElement(ColorFilterIcon2, { fontSize: SIZE5 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React18.createElement(
-    PopoverSearch,
+  ), hasVariables && /* @__PURE__ */ React19.createElement(
+    SearchField2,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __13("Search", "elementor")
+      placeholder: __14("Search", "elementor")
     }
-  ), /* @__PURE__ */ React18.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React19.createElement(
     PopoverMenuList,
     {
       items,
@@ -1761,16 +2603,38 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       selectedValue: variable,
       "data-testid": `${variableType}-variables-list`,
       menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React18.createElement(MenuItemContent, { item })
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React19.createElement(MenuItemContent, { item })
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React18.createElement(
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React19.createElement(
     NoSearchResults,
     {
       searchValue,
       onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" })
+      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" })
+    }
+  ), !hasVariables && !hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
+    EmptyState,
+    {
+      title: noVariableTitle,
+      message: __14(
+        "Variables are saved attributes that you can apply anywhere on your site.",
+        "elementor"
+      ),
+      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
+      onAdd
+    }
+  ), hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
+    EmptyState,
+    {
+      title: __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"
+      ),
+      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
+      onAdd
     }
-  ), !hasVariables && /* @__PURE__ */ React18.createElement(NoVariables, { title: noVariableTitle, icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }), onAdd }));
+  ));
 };
 
 // src/components/variable-selection-popover.tsx
@@ -1778,13 +2642,13 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = useState10(VIEW_LIST);
-  const [editId, setEditId] = useState10("");
+  const [currentView, setCurrentView] = useState11(VIEW_LIST);
+  const [editId, setEditId] = useState11("");
   const { open } = usePanelActions();
   const onSettingsAvailable = isExperimentActive("e_variables_manager") ? () => {
     open();
   } : void 0;
-  return /* @__PURE__ */ React19.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React19.createElement(PopoverContentRefContextProvider, null, RenderView({
+  return /* @__PURE__ */ React20.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React20.createElement(PopoverContentRefContextProvider, null, RenderView({
     propTypeKey,
     currentView,
     selectedVariable,
@@ -1830,7 +2694,7 @@ function RenderView(props) {
     }
   };
   if (VIEW_LIST === props.currentView) {
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       VariablesSelection,
       {
         closePopover: handlers.onClose,
@@ -1841,10 +2705,10 @@ function RenderView(props) {
     );
   }
   if (VIEW_ADD === props.currentView) {
-    return /* @__PURE__ */ React19.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
+    return /* @__PURE__ */ React20.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
   }
   if (VIEW_EDIT === props.currentView) {
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       VariableEdit,
       {
         editId: props.editId,
@@ -1858,25 +2722,26 @@ function RenderView(props) {
 }
 
 // src/components/ui/tags/assigned-tag.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import { DetachIcon } from "@elementor/icons";
-import { Box as Box4, IconButton as IconButton8, Stack as Stack7, Tooltip, Typography as Typography9, UnstableTag as Tag } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
-var SIZE5 = "tiny";
+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__ */ React20.createElement(IconButton8, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": __14("Unlink", "elementor") }, /* @__PURE__ */ React20.createElement(DetachIcon, { fontSize: SIZE5 }))
+      /* @__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__ */ React20.createElement(Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(Tooltip4, { title: label, placement: "top" }, /* @__PURE__ */ React21.createElement(
     Tag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React20.createElement(Stack7, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React20.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React20.createElement(Typography9, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      startIcon: /* @__PURE__ */ React21.createElement(Stack7, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      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
     }
@@ -1887,23 +2752,23 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = useBoundProp6();
-  const anchorRef = useRef(null);
+  const anchorRef = useRef6(null);
   const popupId = useId();
-  const popupState = usePopupState2({
+  const popupState = usePopupState3({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React21.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(Box4, { ref: anchorRef }, /* @__PURE__ */ React22.createElement(
     AssignedTag,
     {
       label: variable.label,
-      startIcon: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(ColorFilterIcon3, { fontSize: SIZE5 }), /* @__PURE__ */ React21.createElement(StartIcon, { value: variable.value })),
+      startIcon: /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(ColorFilterIcon3, { fontSize: SIZE6 }), /* @__PURE__ */ React22.createElement(StartIcon, { value: variable.value })),
       onUnlink: unlinkVariable,
-      ...bindTrigger2(popupState)
+      ...bindTrigger3(popupState)
     }
-  ), /* @__PURE__ */ React21.createElement(
+  ), /* @__PURE__ */ React22.createElement(
     Popover,
     {
       disableScrollLock: true,
@@ -1915,7 +2780,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
       },
       ...bindPopover(popupState)
     },
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React22.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -1927,32 +2792,33 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/deleted-variable.tsx
-import * as React25 from "react";
-import { useId as useId2, useRef as useRef2, useState as useState12 } from "react";
+import * as React26 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 usePopupState3 } from "@elementor/ui";
+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 React22 from "react";
-import { useState as useState11 } from "react";
+import * as React23 from "react";
+import { useState as useState12 } from "react";
 import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 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 Typography10 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
-var SIZE6 = "tiny";
+import { Button as Button7, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4, Typography as Typography11 } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
+var SIZE7 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
-  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: notifyBoundPropChange } = useBoundProp7(propTypeUtil);
+  const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
+  const { setVariableValue: notifyBoundPropChange } = useVariableBoundProp();
   const { propType } = useBoundProp7();
   const variable = useVariable(variableId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = useState11("");
-  const [valueFieldError, setValueFieldError] = useState11("");
-  const [label, setLabel] = useState11(variable.label);
-  const [value, setValue] = useState11(variable.value);
+  const [errorMessage, setErrorMessage] = useState12("");
+  const [valueFieldError, setValueFieldError] = useState12("");
+  const [label, setLabel] = useState12(variable.label);
+  const [value, setValue] = useState12(variable.value);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -1990,22 +2856,22 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React22.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React22.createElement(PopoverBody4, { height: "auto" }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React23.createElement(PopoverBody4, { height: "auto" }, /* @__PURE__ */ React23.createElement(
     PopoverHeader4,
     {
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: SIZE6 }),
-      title: __15("Restore variable", "elementor"),
+      icon: /* @__PURE__ */ React23.createElement(VariableIcon, { fontSize: SIZE7 }),
+      title: __16("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React22.createElement(Divider5, null), /* @__PURE__ */ React22.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(Divider5, null), /* @__PURE__ */ React23.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React23.createElement(
     FormField,
     {
       id: "variable-label",
-      label: __15("Name", "elementor"),
+      label: __16("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React23.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -2023,7 +2889,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React22.createElement(FormField, { errorMsg: valueFieldError, label: __15("Value", "elementor") }, /* @__PURE__ */ React22.createElement(Typography10, { variant: "h5" }, /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(FormField, { errorMsg: valueFieldError, label: __16("Value", "elementor") }, /* @__PURE__ */ React23.createElement(Typography11, { variant: "h5" }, /* @__PURE__ */ React23.createElement(
     ValueField,
     {
       value,
@@ -2035,91 +2901,87 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React22.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React22.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React22.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __15("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 React23 from "react";
-import { useSectionWidth } from "@elementor/editor-editing-panel";
-import { Alert as Alert2, AlertAction, AlertTitle, ClickAwayListener as ClickAwayListener2 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import * as React24 from "react";
+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 }) => {
-  const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React23.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React24.createElement(
     Alert2,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React23.createElement(React23.Fragment, null, onUnlink && /* @__PURE__ */ React23.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __16("Unlink", "elementor")), onRestore && /* @__PURE__ */ React23.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __16("Restore", "elementor"))),
-      sx: { width: sectionWidth }
+      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__ */ React23.createElement(AlertTitle, null, __16("Deleted variable", "elementor")),
-    __16("The variable", "elementor"),
-    " '",
-    label,
-    "'",
-    " ",
-    __16(
+    /* @__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"
-    )
+    ))
   ));
 };
 
-// src/components/ui/tags/deleted-tag.tsx
-import * as React24 from "react";
-import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2 } from "@elementor/icons";
-import { Box as Box6, Chip, Tooltip as Tooltip2, Typography as Typography11 } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
-var DeletedTag = React24.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React24.createElement(
-    Chip,
-    {
-      ref,
-      size: "tiny",
-      color: "warning",
-      shape: "rounded",
-      variant: "standard",
-      onClick,
-      icon: /* @__PURE__ */ React24.createElement(AlertTriangleFilledIcon2, null),
-      label: /* @__PURE__ */ React24.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(Box6, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React24.createElement(Typography11, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React24.createElement(Typography11, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __17("deleted", "elementor"), ")"))),
-      sx: {
-        height: (theme) => theme.spacing(3.5),
-        borderRadius: (theme) => theme.spacing(1),
-        justifyContent: "flex-start",
-        width: "100%"
-      },
-      ...props
-    }
-  );
-});
+// src/components/ui/tags/warning-variable-tag.tsx
+import * as React25 from "react";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon4 } 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;
+    return /* @__PURE__ */ React25.createElement(
+      Chip,
+      {
+        ref,
+        size: "tiny",
+        color: "warning",
+        shape: "rounded",
+        variant: "standard",
+        onClick,
+        icon: /* @__PURE__ */ React25.createElement(AlertTriangleFilledIcon4, 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),
+          justifyContent: "flex-start",
+          width: "100%"
+        },
+        ...props
+      }
+    );
+  }
+);
+WarningVariableTag.displayName = "WarningVariableTag";
 
 // src/components/ui/variable/deleted-variable.tsx
 var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
-  const { setValue } = useBoundProp8();
+  const boundProp = useBoundProp8();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = useState12(false);
+  const [showInfotip, setShowInfotip] = useState13(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = useRef2(null);
+  const deletedChipAnchorRef = useRef7(null);
   const popupId = useId2();
-  const popupState = usePopupState3({
+  const popupState = usePopupState4({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
   });
   const handlers = {};
   if (userPermissions.canUnlink()) {
-    handlers.onUnlink = createUnlinkHandler(variable, propTypeKey, setValue);
+    handlers.onUnlink = createUnlinkHandler(variable, propTypeKey, boundProp.setValue);
   }
   if (userPermissions.canRestore()) {
     handlers.onRestore = () => {
       if (!variable.key) {
         return;
       }
-      restoreVariable(variable.key).then((key) => {
-        setValue(propTypeUtil.create(key));
+      restoreVariable(variable.key).then((id2) => {
+        resolveBoundPropAndSetValue(propTypeUtil.create(id2), boundProp);
         closeInfotip();
       }).catch(() => {
         closeInfotip();
@@ -2131,15 +2993,15 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React25.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React25.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",
       open: showInfotip,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React25.createElement(
+      content: /* @__PURE__ */ React26.createElement(
         DeletedVariableAlert,
         {
           onClose: closeInfotip,
@@ -2159,8 +3021,15 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
         }
       }
     },
-    /* @__PURE__ */ React25.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
-  ), /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(
+      WarningVariableTag,
+      {
+        label: variable.label,
+        onClick: toggleInfotip,
+        suffix: __18("deleted", "elementor")
+      }
+    )
+  ), /* @__PURE__ */ React26.createElement(
     Popover2,
     {
       disableScrollLock: true,
@@ -2171,7 +3040,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       },
       ...bindPopover2(popupState)
     },
-    /* @__PURE__ */ React25.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React26.createElement(
       VariableRestore,
       {
         variableId: variable.key ?? "",
@@ -2184,83 +3053,51 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 import * as React28 from "react";
-import { useId as useId3, useRef as useRef3, useState as useState13 } 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 Box9, Infotip as Infotip2, Popover as Popover3, usePopupState as usePopupState4 } from "@elementor/ui";
+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 React26 from "react";
-import { useSectionWidth as useSectionWidth2 } from "@elementor/editor-editing-panel";
-import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener3 } from "@elementor/ui";
-import { __ as __18 } from "@wordpress/i18n";
+import * as React27 from "react";
+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: __18("Variable has changed", "elementor"),
-  message: __18(
+  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: __18("Clear", "elementor"),
-    select: __18("Select variable", "elementor")
+    clear: __19("Clear", "elementor"),
+    select: __19("Select variable", "elementor")
   }
 };
 var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
-  const sectionWidth = useSectionWidth2();
-  return /* @__PURE__ */ React26.createElement(ClickAwayListener3, { onClickAway: onClose }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(ClickAwayListener3, { onClickAway: onClose }, /* @__PURE__ */ React27.createElement(
     Alert3,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onClear && /* @__PURE__ */ React26.createElement(AlertAction2, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React26.createElement(AlertAction2, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
-      sx: {
-        width: sectionWidth,
-        minWidth: 300
-      }
+      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__ */ React26.createElement(AlertTitle2, null, i18n.title),
-    i18n.message
+    /* @__PURE__ */ React27.createElement(AlertTitle3, null, i18n.title),
+    /* @__PURE__ */ React27.createElement(Typography14, { variant: "body2", color: "textPrimary" }, i18n.message)
   ));
 };
 
-// src/components/ui/tags/mismatch-tag.tsx
-import * as React27 from "react";
-import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
-import { Box as Box8, Chip as Chip2, Tooltip as Tooltip3, Typography as Typography12 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
-var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React27.createElement(
-    Chip2,
-    {
-      ref,
-      size: "tiny",
-      color: "warning",
-      shape: "rounded",
-      variant: "standard",
-      onClick,
-      icon: /* @__PURE__ */ React27.createElement(AlertTriangleFilledIcon3, null),
-      label: /* @__PURE__ */ React27.createElement(Tooltip3, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(Box8, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(Typography12, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(Typography12, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __19("changed", "elementor"), ")"))),
-      sx: {
-        height: (theme) => theme.spacing(3.5),
-        borderRadius: (theme) => theme.spacing(1),
-        justifyContent: "flex-start",
-        width: "100%"
-      },
-      ...props
-    }
-  );
-});
-
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
-  const { setValue } = useBoundProp9();
-  const anchorRef = useRef3(null);
+  const { setValue, value } = useBoundProp9();
+  const anchorRef = useRef8(null);
   const popupId = useId3();
-  const popupState = usePopupState4({
+  const popupState = usePopupState5({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = useState13(false);
+  const [infotipVisible, setInfotipVisible] = useState14(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -2272,8 +3109,9 @@ var MismatchVariable = ({ variable }) => {
     closeInfotip();
     setValue(null);
   };
-  return /* @__PURE__ */ React28.createElement(Box9, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
-    Infotip2,
+  const showClearButton = !!value;
+  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",
@@ -2284,7 +3122,7 @@ var MismatchVariable = ({ variable }) => {
         MismatchVariableAlert,
         {
           onClose: closeInfotip,
-          onClear: clearValue,
+          onClear: showClearButton ? clearValue : void 0,
           triggerSelect
         }
       ),
@@ -2299,7 +3137,14 @@ var MismatchVariable = ({ variable }) => {
         }
       }
     },
-    /* @__PURE__ */ React28.createElement(MismatchTag, { label: variable.label, onClick: toggleInfotip })
+    /* @__PURE__ */ React28.createElement(
+      WarningVariableTag,
+      {
+        label: variable.label,
+        onClick: toggleInfotip,
+        suffix: __20("changed", "elementor")
+      }
+    )
   ), /* @__PURE__ */ React28.createElement(
     Popover3,
     {
@@ -2324,79 +3169,50 @@ var MismatchVariable = ({ variable }) => {
 };
 
 // src/components/ui/variable/missing-variable.tsx
-import * as React31 from "react";
-import { useState as useState14 } from "react";
+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 __21 } 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 { useSectionWidth as useSectionWidth3 } from "@elementor/editor-editing-panel";
-import { Alert as Alert4, AlertAction as AlertAction3, AlertTitle as AlertTitle3, ClickAwayListener as ClickAwayListener4 } from "@elementor/ui";
-import { __ as __20 } 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 }) => {
-  const sectionWidth = useSectionWidth3();
   return /* @__PURE__ */ React29.createElement(ClickAwayListener4, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
     Alert4,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(AlertAction3, { variant: "contained", onClick: onClear }, __20("Clear", "elementor"))),
-      sx: { width: sectionWidth }
+      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, __20("This variable is missing", "elementor")),
-    __20(
+    /* @__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"
-    )
+    ))
   ));
 };
 
-// src/components/ui/tags/missing-tag.tsx
-import * as React30 from "react";
-import { AlertTriangleFilledIcon as AlertTriangleFilledIcon4 } from "@elementor/icons";
-import { Chip as Chip3 } from "@elementor/ui";
-var MissingTag = React30.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React30.createElement(
-    Chip3,
-    {
-      ref,
-      size: "tiny",
-      color: "warning",
-      shape: "rounded",
-      variant: "standard",
-      onClick,
-      icon: /* @__PURE__ */ React30.createElement(AlertTriangleFilledIcon4, null),
-      label,
-      sx: {
-        height: (theme) => theme.spacing(3.5),
-        borderRadius: (theme) => theme.spacing(1),
-        justifyContent: "flex-start",
-        width: "100%"
-      },
-      ...props
-    }
-  );
-});
-
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = useBoundProp10();
-  const [infotipVisible, setInfotipVisible] = useState14(false);
+  const [infotipVisible, setInfotipVisible] = useState15(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, infotipVisible && /* @__PURE__ */ React31.createElement(Backdrop3, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React31.createElement(
-    Infotip3,
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, infotipVisible && /* @__PURE__ */ React30.createElement(Backdrop3, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React30.createElement(
+    Infotip4,
     {
       color: "warning",
       placement: "right-start",
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React31.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      content: /* @__PURE__ */ React30.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
       slotProps: {
         popper: {
           modifiers: [
@@ -2408,47 +3224,47 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React31.createElement(MissingTag, { label: __21("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React30.createElement(WarningVariableTag, { label: __22("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
 // src/controls/variable-control.tsx
 var VariableControl = () => {
   const boundProp = useBoundProp11();
-  const boundPropValue = boundProp.value;
+  const boundPropValue = boundProp.value ?? boundProp.placeholder;
   const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
-    return /* @__PURE__ */ React32.createElement(MissingVariable, null);
+    return /* @__PURE__ */ React31.createElement(MissingVariable, null);
   }
   const { $$type: propTypeKey } = boundPropValue;
   if (assignedVariable?.deleted) {
-    return /* @__PURE__ */ React32.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
+    return /* @__PURE__ */ React31.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
   }
   const { isCompatible } = getVariableType(assignedVariable.type);
   if (isCompatible && !isCompatible(boundProp?.propType, assignedVariable)) {
-    return /* @__PURE__ */ React32.createElement(MismatchVariable, { variable: assignedVariable });
+    return /* @__PURE__ */ React31.createElement(MismatchVariable, { variable: assignedVariable });
   }
-  return /* @__PURE__ */ React32.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
+  return /* @__PURE__ */ React31.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
 // src/hooks/use-prop-variable-action.tsx
-import * as React33 from "react";
+import * as React32 from "react";
 import { useBoundProp as useBoundProp12 } from "@elementor/editor-editing-panel";
 import { ColorFilterIcon as ColorFilterIcon4 } from "@elementor/icons";
-import { __ as __22 } 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: __22("Variables", "elementor"),
+    title: __23("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
       }
       trackOpenVariablePopover(path, variable.variableType);
-      return /* @__PURE__ */ React33.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
+      return /* @__PURE__ */ React32.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
@@ -2472,19 +3288,297 @@ var trackOpenVariablePopover = (path, variableType) => {
   });
 };
 
+// src/mcp/index.ts
+import { getMCPByDomain as getMCPByDomain6 } from "@elementor/editor-mcp";
+
+// src/mcp/create-variable-tool.ts
+import { getMCPByDomain } from "@elementor/editor-mcp";
+import { z as z3 } from "@elementor/schema";
+var InputSchema = {
+  type: z3.string().describe('The type of the variable. Example values: "global-color-variable" or "global-font-variable".'),
+  label: z3.string().describe("The label of the variable, displayed to the user"),
+  value: z3.string().describe("The value of the variable, should correspond to the type")
+};
+var OutputSchema = {
+  status: z3.enum(["ok", "error"]).describe("The status of the operation"),
+  message: z3.string().optional().describe("Optional message providing additional information about the operation")
+};
+var initCreateVariableTool = () => {
+  getMCPByDomain("variables").addTool({
+    name: "create-global-variable",
+    schema: InputSchema,
+    outputSchema: OutputSchema,
+    description: `Create a new global variable
+## When to use this tool:
+- When a user requests to create a new global variable in the Elementor editor.
+- When you need to add a new variable to be used in the editor.
+
+## Prequisites:
+- Ensure you have the most up-to-date list of existing global variables to avoid label duplication. You can use the "list-global-variables" tool to fetch the current variables.
+- Make sure when creating a new variable, the label is unique and not already in use.
+- If the user does not provide a label, ask them to provide one before proceeding.
+- If the user does not provide a type, ask them to provide one before proceeding.
+- If the user does not provide a value, ask them to provide one before proceeding.
+
+## Required parameters:
+- type: The type of the variable. Possible values are 'global-color-variable' or 'global-font-variable'.
+- label: The label of the variable, displayed to the user. Must be unique and not already in use.
+- value: The value of the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif').
+
+## Example tool call (JSON format):
+\`\`\`json
+{ "type": "global-color-variable", "label": "My Cool Color", "value": "rgb(1,2,3)" }
+\`\`\`
+
+## Example tool response (JSON format):
+\`\`\`json
+{ "status": "ok" }
+\`\`\`
+
+## Example to a failed tool response, which must be displayed to the end user. If the error message is not plain, attempt to find the most useful part of the message and display it.
+{ "status": "error", "message": "Unsupported type 'global-kuku-variable'" }
+
+In that case, inform the user the type is unsupported and they should try another type, perhaps consult to online documentation.
+`,
+    handler: async (params) => {
+      const { type, label, value } = params;
+      try {
+        await service.create({ type, label, value });
+      } catch (error) {
+        const message = error.message || "Unknown server error";
+        return {
+          status: "error",
+          message: `There was an error creating the variable: ${message}`
+        };
+      }
+      return { status: "ok" };
+    }
+  });
+};
+
+// src/mcp/delete-variable-tool.ts
+import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
+import { z as z4 } from "@elementor/schema";
+var initDeleteVariableTool = () => {
+  getMCPByDomain2("variables").addTool({
+    name: "delete-global-variable",
+    schema: {
+      id: z4.string().describe("The unique identifier of the variable to be deleted.")
+    },
+    outputSchema: {
+      status: z4.enum(["ok", "error"]).describe("The status of the operation")
+    },
+    description: `Delete an existing global variable
+    
+## When to use this tool:
+- When a user requests to delete an existing global variable in the Elementor editor.
+- When you need to remove a variable that is no longer needed or relevant, with the user's confirmation.
+
+## Prerequisites:
+- Ensure you have the most up-to-date list of existing global variables. You can use the "list-global-variables" tool to fetch the current variables.
+- Reference the variable by the "id" property, given from the "list-global-variables" tool.
+- Make sure you have the unique identifier of the variable to be deleted before using this tool.
+- Confirm with the user that they want to proceed with the deletion, as this action is irreversible.
+
+<notice>
+A use might reference a variable by it's label, but you must always use the unique identifier (id) to delete it.
+If you only have the label, use the "list-global-variables" tool to find the corresponding id.
+</notice>
+
+<important>
+This operation is destructive and cannot be undone. Ensure that the user is fully aware of the consequences before proceeding.
+When a variable is deleted, all references to it in all pages accross the website will lose their effect.
+</important>`,
+    handler: async (params) => {
+      const { id: id2 } = params;
+      try {
+        await service.delete(id2);
+        return { status: "ok" };
+      } catch (err) {
+        return {
+          status: "error"
+        };
+      }
+    },
+    isDestrcutive: true
+  });
+};
+
+// src/mcp/list-variables-tool.ts
+import { getMCPByDomain as getMCPByDomain3 } from "@elementor/editor-mcp";
+import { z as z5 } from "@elementor/schema";
+var VariableSchema = {
+  type: z5.string().describe("The type of the variable."),
+  label: z5.string().describe("The label of the variable, displayed to the user"),
+  value: z5.string().describe("The value of the variable."),
+  id: z5.string().describe(
+    "The unique identifier of the variable. Used for internal reference, not to be exposed to end users"
+  )
+};
+var VariableListSchema = {
+  variables: z5.array(z5.object(VariableSchema)).describe("List of variables")
+};
+var initListVariablesTool = () => {
+  getMCPByDomain3("variables").addTool({
+    name: "list-global-variables",
+    description: `List editor global variables
+  
+  ## When to use this tool:
+  - When a user requests to see all available global variables in the Elementor editor.
+  - When you need to be exact on a variable label, to avoid any mistakes.
+  - When you want to see the most up-to-date list of global variables.
+  - Before using any other variables related tools that makes changes, such as deletion, creation, or updates. This ensures you have the latest information and there is no naming collision or mismatching.
+  
+  ## Example tool response (JSON format):
+  \`\`\`json
+  { variables: [
+   { type: 'global-color-variable', label: 'Cool', value: 'rgb(1,2,3)', id: 'some-unique-id' },
+   { type: 'global-font-variable', label: 'Headline', value: 'serif', id: 'some-other-unique-id' },
+  ] }
+  \`\`\`
+  
+  Once you get the response, please display the variables in a user-friendly way, unless explicitly requested otherwise.
+  Unless explicitly requested otherwise, response in HTML Format, prefer to use tables or unordered lists.
+  
+  Note: **The label is most improtant to be seen as-is without any changes.**
+  
+  <important>
+  **Do not omit the label**. This is important for the user to identify the variable.
+  **Do not change the label**, it must be displayed exactly as it is, in it's original characters as received from this tool.
+  </important>
+  `,
+    outputSchema: VariableListSchema,
+    handler: async () => {
+      const variables = service.variables();
+      return {
+        variables: Object.entries(variables).map(([id2, varData]) => ({ id: id2, ...varData }))
+      };
+    }
+  });
+};
+
+// src/mcp/update-variable-tool.ts
+import { getMCPByDomain as getMCPByDomain4 } from "@elementor/editor-mcp";
+import { z as z6 } from "@elementor/schema";
+var initUpdateVariableTool = () => {
+  getMCPByDomain4("variables").addTool({
+    schema: {
+      id: z6.string().describe("The unique identifier of the variable to be updated or renamed."),
+      label: z6.string().describe(
+        "The label of the variable to be stored after the change. If the user only wishes to update the value, this must be strictly equal to the current label."
+      ),
+      value: z6.string().describe(
+        "The new value for the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif'). If the user wishes to rename only, make sure you provide the existing value."
+      )
+    },
+    outputSchema: {
+      status: z6.enum(["ok", "error"]).describe("The status of the operation"),
+      message: z6.string().optional().describe("Optional message providing additional information about the operation")
+    },
+    name: "update-global-variable",
+    description: `Update an existing global variable
+
+## When to use this tool:
+- When a user requests to update an existing global variable in the Elementor editor.
+- When you need to modify the value of an existing variable.
+- When you want to rename an existing variable (change its label).
+- When you want to both rename and modify the value of an existing variable.
+
+## Prerequisites:
+- Ensure you have the most up-to-date list of existing global variables to avoid label duplication. You can use the "list-global-variables" tool to fetch the current variables.
+- Make sure when updating a variable, the new label is unique and not already in use by another variable.
+- Make sure you understand whether you are updating a value, renaming, or both.
+- Reference the variable by the "id" property, given from the "list-global-variables" tool.
+- If the user wishes to rename, make sure you have the existing value.
+- If the user wishes to update the value, make sure you have to **correct label**.
+- You must have the unique identifier, the current label, the current value, and the new value or label or both, before using this tool.
+
+## Required parameters:
+- id: The unique identifier of the variable to be updated or renamed.
+- label: The label of the variable to be stored after the change. If the user only wishes to update the value, this must be strictly equal to the current label.
+- value: The new value for the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif'). If the user wishes to rename only, make sure you provide the existing value.
+
+## Example tool call (JSON format):
+\`\`\`json
+{ "id": "some-unique-id", "label": "Cool", "value": "rgb(0,140,250)" }
+\`\`\`
+
+## Example responses (JSON format):
+Successful update:
+\`\`\`json
+{ "status": "ok" }
+\`\`\`
+
+Failed update, which must be displayed to the end user. If the error message is not plain, attempt to find the most useful part of the message and display it.
+\`\`\`json
+{ "status": "error", "message": "Label 'Cool' is already in use by another variable." }
+\`\`\`
+`,
+    handler: async (params) => {
+      const { id: id2, label, value } = params;
+      try {
+        await service.update(id2, { label, value });
+        return { status: "ok" };
+      } catch (error) {
+        const message = error.message || "Unknown server error";
+        return {
+          status: "error",
+          message: `There was an error creating the variable: ${message}`
+        };
+      }
+    }
+  });
+};
+
+// src/mcp/variables-resource.ts
+import { getMCPByDomain as getMCPByDomain5 } from "@elementor/editor-mcp";
+var GLOBAL_VARIABLES_URI = "elementor://variables";
+var initVariablesResource = () => {
+  const { mcpServer } = getMCPByDomain5("variables");
+  mcpServer.resource(
+    "global-variables",
+    GLOBAL_VARIABLES_URI,
+    {
+      description: "Global variables list. Variables are being used in this way: If it is directly in the schema, you need to put the ID which is the key inside the object."
+    },
+    async () => {
+      return {
+        contents: [{ uri: GLOBAL_VARIABLES_URI, text: localStorage["elementor-global-variables"] }]
+      };
+    }
+  );
+  window.addEventListener("variables:updated", () => {
+    mcpServer.server.sendResourceUpdated({
+      uri: GLOBAL_VARIABLES_URI,
+      contents: [{ uri: GLOBAL_VARIABLES_URI, text: localStorage["elementor-global-variables"] }]
+    });
+  });
+};
+
+// src/mcp/index.ts
+function initMcp() {
+  const { setMCPDescription } = getMCPByDomain6("variables");
+  setMCPDescription(`Elementor Editor Variables MCP`);
+  initListVariablesTool();
+  initCreateVariableTool();
+  initUpdateVariableTool();
+  initDeleteVariableTool();
+  initVariablesResource();
+}
+
 // src/register-variable-types.tsx
-import * as React36 from "react";
+import * as React35 from "react";
 import { colorPropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 import { BrushIcon, TextIcon as TextIcon2 } from "@elementor/icons";
 
 // src/components/fields/color-field.tsx
-import * as React34 from "react";
-import { useRef as useRef4, useState as useState15 } from "react";
+import * as React33 from "react";
+import { useRef as useRef9, useState as useState16 } from "react";
 import { UnstableColorField } from "@elementor/ui";
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = useState15(value);
-  const [errorMessage, setErrorMessage] = useState15("");
-  const defaultRef = useRef4(null);
+  const [color, setColor] = useState16(value);
+  const [errorMessage, setErrorMessage] = useState16("");
+  const defaultRef = useRef9(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -2493,9 +3587,10 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
     onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React33.createElement(
     UnstableColorField,
     {
+      id: "color-variable-field",
       size: "tiny",
       fullWidth: true,
       value: color,
@@ -2521,21 +3616,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/components/fields/font-field.tsx
-import * as React35 from "react";
-import { useId as useId4, useRef as useRef5, useState as useState16 } from "react";
+import * as React34 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 as useSectionWidth4 } from "@elementor/editor-editing-panel";
+import { useFontFamilies, useSectionWidth } from "@elementor/editor-editing-panel";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
-import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag, usePopupState as usePopupState5 } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
+import { bindPopover as bindPopover4, bindTrigger as bindTrigger4, Popover as Popover4, UnstableTag, usePopupState as usePopupState6 } from "@elementor/ui";
+import { __ as __24 } from "@wordpress/i18n";
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = useState16(value);
-  const defaultRef = useRef5(null);
+  const [fontFamily, setFontFamily] = useState17(value);
+  const defaultRef = useRef10(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
-  const fontPopoverState = usePopupState5({ variant: "popover" });
+  const fontPopoverState = usePopupState6({ variant: "popover" });
   const fontFamilies = useFontFamilies();
-  const sectionWidth = useSectionWidth4();
-  const mapFontSubs = React35.useMemo(() => {
+  const sectionWidth = useSectionWidth();
+  const mapFontSubs = React34.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -2552,17 +3647,17 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     fontPopoverState.close();
   };
   const id2 = useId4();
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(
     UnstableTag,
     {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React35.createElement(ChevronDownIcon, { fontSize: "tiny" }),
-      ...bindTrigger3(fontPopoverState),
+      endIcon: /* @__PURE__ */ React34.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      ...bindTrigger4(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React34.createElement(
     Popover4,
     {
       disablePortal: true,
@@ -2572,15 +3667,16 @@ var FontField = ({ value, onChange, onValidationChange }) => {
       transformOrigin: { vertical: "top", horizontal: -28 },
       ...bindPopover4(fontPopoverState)
     },
-    /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React34.createElement(
       ItemSelector,
       {
+        id: "font-family-variables-selector",
         itemsList: mapFontSubs,
         selectedItem: fontFamily,
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: __23("Font Family", "elementor"),
+        title: __24("Font family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: enqueueFont2,
         icon: TextIcon
@@ -2592,25 +3688,29 @@ var FontField = ({ value, onChange, onValidationChange }) => {
 // src/register-variable-types.tsx
 function registerVariableTypes() {
   registerVariableType({
+    key: colorVariablePropTypeUtil.key,
     valueField: ColorField,
     icon: BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: colorPropTypeUtil,
     variableType: "color",
-    startIcon: ({ value }) => /* @__PURE__ */ React36.createElement(ColorIndicator, { size: "inherit", component: "span", value })
+    startIcon: ({ value }) => /* @__PURE__ */ React35.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
+    defaultValue: "#ffffff"
   });
   registerVariableType({
+    key: fontVariablePropTypeUtil.key,
     valueField: FontField,
     icon: TextIcon2,
     propTypeUtil: fontVariablePropTypeUtil,
     fallbackPropTypeUtil: stringPropTypeUtil,
-    variableType: "font"
+    variableType: "font",
+    defaultValue: "Roboto"
   });
 }
 
 // src/renderers/style-variables-renderer.tsx
-import * as React37 from "react";
-import { useEffect as useEffect3, useState as useState17 } from "react";
+import * as React36 from "react";
+import { useEffect as useEffect5, useState as useState18 } from "react";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
@@ -2631,14 +3731,14 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React37.createElement(Portal, { container }, /* @__PURE__ */ React37.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React36.createElement(Portal, { container }, /* @__PURE__ */ React36.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = useState17({});
-  useEffect3(() => {
+  const [variables, setVariables] = useState18({});
+  useEffect5(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -2661,22 +3761,22 @@ import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elemen
 import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 
 // src/components/variables-repeater-item-slot.tsx
-import * as React38 from "react";
+import * as React37 from "react";
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React38.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React37.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React38.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React37.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React38.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React37.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 
 // src/repeater-injections.ts
@@ -2714,27 +3814,30 @@ function init() {
   registerRepeaterInjections();
   registerControlReplacement({
     component: VariableControl,
-    condition: ({ value }) => hasAssignedVariable(value)
+    condition: ({ value, placeholder }) => hasVariable(value) || hasVariable(placeholder)
   });
   registerPopoverAction({
     id: "variables",
     useProps: usePropVariableAction
   });
-  service.init();
+  service.init().then(() => {
+    initMcp();
+  });
   injectIntoTop({
     id: "canvas-style-variables-render",
     component: StyleVariablesRenderer
   });
   registerPanel(panel);
 }
-function hasAssignedVariable(propValue) {
-  if (propValue && typeof propValue === "object" && "$$type" in propValue) {
-    return hasVariableType(propValue.$$type);
+function hasVariable(value) {
+  if (isTransformable2(value)) {
+    return hasVariableType(value.$$type);
   }
   return false;
 }
 export {
   init,
-  registerVariableType
+  registerVariableType,
+  registerVariableTypes
 };
 //# sourceMappingURL=index.mjs.map