@elementor/editor-variables 3.33.0-124 → 3.33.0-126

package/dist/index.js

@@ -43,14 +43,73 @@ var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_props6 = require("@elementor/editor-props");
 
 // src/components/variables-manager/variables-manager-panel.tsx
-var React9 = __toESM(require("react"));
-var import_react7 = require("react");
+var React10 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_icons4 = require("@elementor/icons");
-var import_ui9 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_icons5 = require("@elementor/icons");
+var import_ui10 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
+
+// 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)) {
+        operations.push({
+          type: "update",
+          id: id2,
+          variable: {
+            ...original.label !== variable.label && { label: variable.label },
+            ...original.value !== variable.value && { value: variable.value }
+          }
+        });
+      }
+    }
+  });
+  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/hooks/use-prop-variables.ts
 var import_react2 = require("react");
@@ -124,60 +183,6 @@ var apiClient = {
   }
 };
 
-// src/batch-operations.ts
-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)) {
-        operations.push({
-          type: "update",
-          id: id2,
-          variable: {
-            ...original.label !== variable.label && { label: variable.label },
-            ...original.value !== variable.value && { value: variable.value }
-          }
-        });
-      }
-    }
-  });
-  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";
@@ -427,6 +432,13 @@ var service = {
   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) {
@@ -516,6 +528,7 @@ function createVariableTypeRegistry() {
     valueField,
     propTypeUtil,
     variableType,
+    defaultValue,
     selectionFilter,
     valueTransformer,
     fallbackPropTypeUtil,
@@ -540,6 +553,7 @@ function createVariableTypeRegistry() {
       valueField,
       propTypeUtil,
       variableType,
+      defaultValue,
       selectionFilter,
       valueTransformer,
       fallbackPropTypeUtil,
@@ -557,18 +571,22 @@ 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/context/variable-type-context.tsx
 var VariableTypeContext = (0, import_react.createContext)(null);
@@ -661,29 +679,116 @@ var DeleteConfirmationDialog = ({
   return /* @__PURE__ */ React3.createElement(import_ui3.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(import_ui3.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(import_icons.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n3.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React3.createElement(import_ui3.DialogContent, null, /* @__PURE__ */ React3.createElement(import_ui3.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n3.__)("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", (0, import_i18n3.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui3.DialogActions, null, /* @__PURE__ */ React3.createElement(import_ui3.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n3.__)("Not now", "elementor")), /* @__PURE__ */ React3.createElement(import_ui3.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n3.__)("Delete", "elementor"))));
 };
 
+// src/components/variables-manager/variables-manager-create-menu.tsx
+var React4 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_icons2 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+var SIZE = "tiny";
+var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
+  const menuState = (0, import_ui4.usePopupState)({
+    variant: "popover"
+  });
+  const variableTypes = getVariableTypes();
+  const menuOptions = Object.entries(variableTypes).map(([key, variable]) => {
+    const displayName = variable.variableType.charAt(0).toUpperCase() + variable.variableType.slice(1);
+    return {
+      key,
+      name: displayName,
+      icon: variable.icon,
+      onClick: () => {
+        const defaultName = getDefaultName(variables, key, variable.variableType);
+        onCreate(key, defaultName, variable.defaultValue || "");
+      }
+    };
+  });
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    import_ui4.IconButton,
+    {
+      ...(0, import_ui4.bindTrigger)(menuState),
+      disabled,
+      size: SIZE,
+      "aria-label": (0, import_i18n4.__)("Add variable", "elementor")
+    },
+    /* @__PURE__ */ React4.createElement(import_icons2.PlusIcon, { fontSize: SIZE })
+  ), /* @__PURE__ */ React4.createElement(
+    import_ui4.Menu,
+    {
+      disablePortal: true,
+      MenuListProps: {
+        dense: true
+      },
+      PaperProps: {
+        elevation: 6
+      },
+      ...(0, import_ui4.bindMenu)(menuState),
+      anchorEl: menuState.anchorEl,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      open: menuState.isOpen,
+      onClose: menuState.close
+    },
+    menuOptions.map((option) => /* @__PURE__ */ React4.createElement(
+      import_ui4.MenuItem,
+      {
+        key: option.key,
+        onClick: () => {
+          option.onClick?.();
+          menuState.close();
+        },
+        sx: {
+          gap: 1.5
+        }
+      },
+      (0, import_react3.createElement)(option.icon, {
+        fontSize: SIZE,
+        color: "action"
+      }),
+      /* @__PURE__ */ React4.createElement(import_ui4.Typography, { variant: "caption", color: "text.primary" }, option.name)
+    ))
+  ));
+};
+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 name;
+};
+
 // src/components/variables-manager/variables-manager-table.tsx
-var React8 = __toESM(require("react"));
-var import_react6 = require("react");
+var React9 = __toESM(require("react"));
+var import_react7 = require("react");
 var import_editor_ui = require("@elementor/editor-ui");
-var import_icons3 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_icons4 = require("@elementor/icons");
+var import_ui9 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/fields/label-field.tsx
-var React4 = __toESM(require("react"));
-var import_react3 = require("react");
-var import_ui4 = require("@elementor/ui");
+var React5 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_ui5 = require("@elementor/ui");
 
 // src/utils/validations.ts
-var import_i18n4 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: (0, import_i18n4.__)("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: (0, import_i18n4.__)("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: (0, import_i18n4.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: (0, import_i18n4.__)("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n4.__)("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: (0, import_i18n4.__)("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: (0, import_i18n4.__)("There was a glitch. Try saving your variable again.", "elementor")
+  MISSING_VARIABLE_NAME: (0, import_i18n5.__)("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: (0, import_i18n5.__)("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: (0, import_i18n5.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: (0, import_i18n5.__)("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n5.__)("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: (0, import_i18n5.__)("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: (0, import_i18n5.__)("There was a glitch. Try saving your variable again.", "elementor")
 };
 var VARIABLE_LABEL_MAX_LENGTH = 50;
 var mapServerError = (error) => {
@@ -731,7 +836,7 @@ function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
 var useLabelError = (initialError) => {
-  const [error, setError] = (0, import_react3.useState)(initialError ?? { value: "", message: "" });
+  const [error, setError] = (0, import_react4.useState)(initialError ?? { value: "", message: "" });
   return {
     labelFieldError: error,
     setLabelFieldError: setError
@@ -744,10 +849,11 @@ var LabelField = ({
   id: id2,
   onErrorChange,
   size = "tiny",
-  focusOnShow = false
+  focusOnShow = false,
+  selectOnShow = false
 }) => {
-  const [label, setLabel] = (0, import_react3.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react3.useState)("");
+  const [label, setLabel] = (0, import_react4.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react4.useState)("");
   const handleChange = (newValue) => {
     setLabel(newValue);
     const errorMsg2 = validateLabel(newValue);
@@ -759,8 +865,8 @@ var LabelField = ({
   if (isLabelEqual(label, error?.value ?? "") && error?.message) {
     errorMsg = error.message;
   }
-  return /* @__PURE__ */ React4.createElement(
-    import_ui4.TextField,
+  return /* @__PURE__ */ React5.createElement(
+    import_ui5.TextField,
     {
       id: id2,
       size,
@@ -768,23 +874,26 @@ var LabelField = ({
       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() }
+      },
       autoFocus: focusOnShow
     }
   );
 };
 
 // src/components/variables-manager/variable-edit-menu.tsx
-var React5 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_icons2 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
+var React6 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_icons3 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
-  const menuState = (0, import_ui5.usePopupState)({
+  const menuState = (0, import_ui6.usePopupState)({
     variant: "popover"
   });
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui5.IconButton, { ...(0, import_ui5.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React5.createElement(import_icons2.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React5.createElement(
-    import_ui5.Menu,
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { ...(0, import_ui6.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React6.createElement(import_icons3.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React6.createElement(
+    import_ui6.Menu,
     {
       disablePortal: true,
       MenuListProps: {
@@ -793,7 +902,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       PaperProps: {
         elevation: 6
       },
-      ...(0, import_ui5.bindMenu)(menuState),
+      ...(0, import_ui6.bindMenu)(menuState),
       anchorEl: menuState.anchorEl,
       anchorOrigin: {
         vertical: "bottom",
@@ -806,8 +915,8 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuActions.map((action) => /* @__PURE__ */ React5.createElement(
-      import_ui5.MenuItem,
+    menuActions.map((action) => /* @__PURE__ */ React6.createElement(
+      import_ui6.MenuItem,
       {
         key: action.name,
         onClick: () => {
@@ -819,7 +928,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
           gap: 1
         }
       },
-      action.icon && (0, import_react4.createElement)(action.icon, {
+      action.icon && (0, import_react5.createElement)(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -829,18 +938,31 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
 };
 
 // src/components/variables-manager/variable-editable-cell.tsx
-var React6 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_ui6 = require("@elementor/ui");
+var React7 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_ui7 = require("@elementor/ui");
 var VariableEditableCell = ({
   initialValue,
   children,
   editableElement,
   onChange,
-  prefixElement
+  prefixElement,
+  autoEdit = false,
+  onRowRef,
+  onAutoEditComplete
 }) => {
-  const [value, setValue] = (0, import_react5.useState)(initialValue);
-  const [isEditing, setIsEditing] = (0, import_react5.useState)(false);
+  const [value, setValue] = (0, import_react6.useState)(initialValue);
+  const [isEditing, setIsEditing] = (0, import_react6.useState)(false);
+  const rowRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    onRowRef?.(rowRef?.current);
+  }, [onRowRef]);
+  (0, import_react6.useEffect)(() => {
+    if (autoEdit && !isEditing) {
+      setIsEditing(true);
+      onAutoEditComplete?.();
+    }
+  }, [autoEdit, isEditing, onAutoEditComplete]);
   const handleDoubleClick = () => {
     setIsEditing(true);
   };
@@ -864,9 +986,10 @@ var VariableEditableCell = ({
   };
   const editableContent = editableElement({ value, onChange: handleChange });
   if (isEditing) {
-    return /* @__PURE__ */ React6.createElement(import_ui6.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React6.createElement(
-      import_ui6.Stack,
+    return /* @__PURE__ */ React7.createElement(import_ui7.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React7.createElement(
+      import_ui7.Stack,
       {
+        ref: rowRef,
         direction: "row",
         alignItems: "center",
         gap: 1,
@@ -880,9 +1003,10 @@ var VariableEditableCell = ({
       editableContent
     ));
   }
-  return /* @__PURE__ */ React6.createElement(
-    import_ui6.Stack,
+  return /* @__PURE__ */ React7.createElement(
+    import_ui7.Stack,
     {
+      ref: rowRef,
       direction: "row",
       alignItems: "center",
       gap: 1,
@@ -898,8 +1022,8 @@ var VariableEditableCell = ({
 };
 
 // src/components/variables-manager/variable-table-cell.tsx
-var React7 = __toESM(require("react"));
-var import_ui7 = require("@elementor/ui");
+var React8 = __toESM(require("react"));
+var import_ui8 = require("@elementor/ui");
 var VariableTableCell = ({
   children,
   isHeader,
@@ -918,20 +1042,50 @@ var VariableTableCell = ({
     ...width && { width },
     ...sx
   };
-  return /* @__PURE__ */ React7.createElement(import_ui7.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+  return /* @__PURE__ */ React8.createElement(import_ui8.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
-var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange }) => {
-  const [ids, setIds] = (0, import_react6.useState)(Object.keys(variables));
+var VariablesManagerTable = ({
+  menuActions,
+  variables,
+  onChange: handleOnChange,
+  ids,
+  onIdsChange: setIds,
+  autoEditVariableId,
+  onAutoEditComplete
+}) => {
+  const tableContainerRef = (0, import_react7.useRef)(null);
+  const variableRowRefs = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react7.useEffect)(() => {
+    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 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
     };
   });
@@ -939,17 +1093,17 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
     minWidth: 250,
     tableLayout: "fixed"
   };
-  return /* @__PURE__ */ React8.createElement(import_ui8.TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React8.createElement(import_ui8.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React8.createElement(import_ui8.TableHead, null, /* @__PURE__ */ React8.createElement(import_ui8.TableRow, null, /* @__PURE__ */ React8.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React8.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n5.__)("Name", "elementor")), /* @__PURE__ */ React8.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n5.__)("Value", "elementor")), /* @__PURE__ */ React8.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React8.createElement(import_ui8.TableBody, null, /* @__PURE__ */ React8.createElement(
-    import_ui8.UnstableSortableProvider,
+  return /* @__PURE__ */ React9.createElement(import_ui9.TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React9.createElement(import_ui9.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React9.createElement(import_ui9.TableHead, null, /* @__PURE__ */ React9.createElement(import_ui9.TableRow, null, /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n6.__)("Name", "elementor")), /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n6.__)("Value", "elementor")), /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React9.createElement(import_ui9.TableBody, null, /* @__PURE__ */ React9.createElement(
+    import_ui9.UnstableSortableProvider,
     {
       value: ids,
       onChange: setIds,
       variant: "static",
       restrictAxis: true,
-      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React8.createElement(import_ui8.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React8.createElement(import_ui8.TableBody, null, dragOverlayChildren))
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React9.createElement(import_ui9.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React9.createElement(import_ui9.TableBody, null, dragOverlayChildren))
     },
-    rows.map((row) => /* @__PURE__ */ React8.createElement(
-      import_ui8.UnstableSortableItem,
+    rows.map((row) => /* @__PURE__ */ React9.createElement(
+      import_ui9.UnstableSortableItem,
       {
         key: row.id,
         id: row.id,
@@ -968,8 +1122,8 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
         }) => {
           const showIndicationBefore = showDropIndication && dropPosition === "before";
           const showIndicationAfter = showDropIndication && dropPosition === "after";
-          return /* @__PURE__ */ React8.createElement(
-            import_ui8.TableRow,
+          return /* @__PURE__ */ React9.createElement(
+            import_ui9.TableRow,
             {
               ...itemProps,
               selected: isDragged,
@@ -999,8 +1153,8 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
               style: { ...itemStyle, ...triggerStyle },
               disableDivider: isDragOverlay || index === rows.length - 1
             },
-            /* @__PURE__ */ React8.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React8.createElement(
-              import_ui8.IconButton,
+            /* @__PURE__ */ React9.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React9.createElement(
+              import_ui9.IconButton,
               {
                 size: "small",
                 ref: setTriggerRef,
@@ -1008,9 +1162,9 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                 disabled: isSorting,
                 draggable: true
               },
-              /* @__PURE__ */ React8.createElement(import_icons3.GripVerticalIcon, { fontSize: "inherit" })
+              /* @__PURE__ */ React9.createElement(import_icons4.GripVerticalIcon, { fontSize: "inherit" })
             )),
-            /* @__PURE__ */ React8.createElement(VariableTableCell, null, /* @__PURE__ */ React8.createElement(
+            /* @__PURE__ */ React9.createElement(VariableTableCell, null, /* @__PURE__ */ React9.createElement(
               VariableEditableCell,
               {
                 initialValue: row.name,
@@ -1022,19 +1176,23 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                     });
                   }
                 },
-                prefixElement: (0, import_react6.createElement)(row.icon, { fontSize: "inherit" }),
-                editableElement: ({ value, onChange }) => /* @__PURE__ */ React8.createElement(
+                prefixElement: (0, import_react7.createElement)(row.icon, { fontSize: "inherit" }),
+                editableElement: ({ value, onChange }) => /* @__PURE__ */ React9.createElement(
                   LabelField,
                   {
                     id: "variable-label-" + row.id,
                     size: "tiny",
                     value,
                     onChange,
-                    focusOnShow: true
+                    focusOnShow: true,
+                    selectOnShow: autoEditVariableId === row.id
                   }
-                )
+                ),
+                autoEdit: autoEditVariableId === row.id,
+                onRowRef: handleRowRef(row.id),
+                onAutoEditComplete: autoEditVariableId === row.id ? onAutoEditComplete : void 0
               },
-              /* @__PURE__ */ React8.createElement(
+              /* @__PURE__ */ React9.createElement(
                 import_editor_ui.EllipsisWithTooltip,
                 {
                   title: row.name,
@@ -1043,7 +1201,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                 row.name
               )
             )),
-            /* @__PURE__ */ React8.createElement(VariableTableCell, null, /* @__PURE__ */ React8.createElement(
+            /* @__PURE__ */ React9.createElement(VariableTableCell, null, /* @__PURE__ */ React9.createElement(
               VariableEditableCell,
               {
                 initialValue: row.value,
@@ -1055,10 +1213,11 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                     });
                   }
                 },
-                editableElement: row.valueField
+                editableElement: row.valueField,
+                onRowRef: handleRowRef(row.id)
               },
               row.startIcon && row.startIcon({ value: row.value }),
-              /* @__PURE__ */ React8.createElement(
+              /* @__PURE__ */ React9.createElement(
                 import_editor_ui.EllipsisWithTooltip,
                 {
                   title: row.value,
@@ -1067,7 +1226,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                 row.value
               )
             )),
-            /* @__PURE__ */ React8.createElement(
+            /* @__PURE__ */ React9.createElement(
               VariableTableCell,
               {
                 align: "right",
@@ -1076,7 +1235,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
                 maxWidth: 16,
                 sx: { paddingInlineEnd: 1 }
               },
-              /* @__PURE__ */ React8.createElement(import_ui8.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React8.createElement(
+              /* @__PURE__ */ React9.createElement(import_ui9.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React9.createElement(
                 VariableEditMenu,
                 {
                   menuActions,
@@ -1107,12 +1266,13 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
 });
 function VariablesManagerPanel() {
   const { close: closePanel } = usePanelActions();
-  const [variables, setVariables] = (0, import_react7.useState)(getVariables(false));
-  const [deletedVariables, setDeletedVariables] = (0, import_react7.useState)([]);
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react7.useState)(null);
-  const [isDirty, setIsDirty] = (0, import_react7.useState)(false);
-  const [isSaving, setIsSaving] = (0, import_react7.useState)(false);
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui2.useDialog)();
+  const [variables, setVariables] = (0, import_react8.useState)(getVariables(false));
+  const [deletedVariables, setDeletedVariables] = (0, import_react8.useState)([]);
+  const [ids, setIds] = (0, import_react8.useState)(Object.keys(variables));
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react8.useState)(null);
+  const [autoEditVariableId, setAutoEditVariableId] = (0, import_react8.useState)(void 0);
+  const [isDirty, setIsDirty] = (0, import_react8.useState)(false);
   usePreventUnload(isDirty);
   const handleClosePanel = () => {
     if (isDirty) {
@@ -1121,23 +1281,52 @@ function VariablesManagerPanel() {
     }
     closePanel();
   };
-  const handleSave = (0, import_react7.useCallback)(async () => {
-    setIsSaving(true);
+  const handleSave = (0, import_react8.useCallback)(async () => {
     const originalVariables = getVariables(false);
     const result = await service.batchSave(originalVariables, variables);
+    setIsDirty(false);
     if (result.success) {
       await service.load();
       const updatedVariables = service.variables();
       setVariables(updatedVariables);
-      setIsDirty(false);
+      setIds(Object.keys(updatedVariables));
       setDeletedVariables([]);
+    } else {
+      setIsDirty(true);
     }
-    setIsSaving(false);
   }, [variables]);
+  const handleOnChange = (newVariables) => {
+    setVariables(newVariables);
+    setIsDirty(true);
+  };
+  const createVariable2 = (0, import_react8.useCallback)((type, defaultName, defaultValue) => {
+    const newId = generateTempId();
+    const newVariable = {
+      id: newId,
+      label: defaultName,
+      value: defaultValue,
+      type
+    };
+    setVariables((prev) => ({ ...prev, [newId]: newVariable }));
+    setIds((prev) => [...prev, newId]);
+    setIsDirty(true);
+    setAutoEditVariableId(newId);
+  }, []);
+  const handleDeleteVariable = (itemId) => {
+    setDeletedVariables([...deletedVariables, itemId]);
+    setVariables({ ...variables, [itemId]: { ...variables[itemId], deleted: true } });
+    setIsDirty(true);
+    setDeleteConfirmation(null);
+  };
+  const handleAutoEditComplete = (0, import_react8.useCallback)(() => {
+    setTimeout(() => {
+      setAutoEditVariableId(void 0);
+    }, 100);
+  }, []);
   const menuActions = [
     {
-      name: (0, import_i18n6.__)("Delete", "elementor"),
-      icon: import_icons4.TrashIcon,
+      name: (0, import_i18n7.__)("Delete", "elementor"),
+      icon: import_icons5.TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
         if (variables[itemId]) {
@@ -1146,25 +1335,16 @@ function VariablesManagerPanel() {
       }
     }
   ];
-  const handleDeleteVariable = (itemId) => {
-    setDeletedVariables([...deletedVariables, itemId]);
-    setVariables({ ...variables, [itemId]: { ...variables[itemId], deleted: true } });
-    setIsDirty(true);
-    setDeleteConfirmation(null);
-  };
-  const handleOnChange = (newVariables) => {
-    setVariables(newVariables);
-    setIsDirty(true);
-  };
-  return /* @__PURE__ */ React9.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React9.createElement(import_ui9.ErrorBoundary, { fallback: /* @__PURE__ */ React9.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React9.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React9.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React9.createElement(import_ui9.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui9.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui9.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React9.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React9.createElement(import_icons4.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n6.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React9.createElement(
-    CloseButton,
+  return /* @__PURE__ */ React10.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React10.createElement(import_ui10.ErrorBoundary, { fallback: /* @__PURE__ */ React10.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React10.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React10.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React10.createElement(import_ui10.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React10.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React10.createElement(import_icons5.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n7.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React10.createElement(VariableManagerCreateMenu, { onCreate: createVariable2, variables }), /* @__PURE__ */ React10.createElement(
+    import_ui10.CloseButton,
     {
-      sx: { marginLeft: "auto" },
-      onClose: () => {
+      "aria-label": "Close",
+      slotProps: { icon: { fontSize: SIZE } },
+      onClick: () => {
         handleClosePanel();
       }
     }
-  )), /* @__PURE__ */ React9.createElement(import_ui9.Divider, { sx: { width: "100%" } }))), /* @__PURE__ */ React9.createElement(
+  ))), /* @__PURE__ */ React10.createElement(import_ui10.Divider, { sx: { width: "100%" } }))), /* @__PURE__ */ React10.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -1173,26 +1353,31 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(
       VariablesManagerTable,
       {
         menuActions,
         variables,
-        onChange: handleOnChange
+        onChange: handleOnChange,
+        ids,
+        onIdsChange: setIds,
+        autoEditVariableId,
+        onAutoEditComplete: handleAutoEditComplete
       }
-    )
-  ), /* @__PURE__ */ React9.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React9.createElement(
-    import_ui9.Button,
+    ),
+    /* @__PURE__ */ React10.createElement(import_ui10.Divider, { sx: { width: "100%" } })
+  ), /* @__PURE__ */ React10.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React10.createElement(
+    import_ui10.Button,
     {
       fullWidth: true,
       size: "small",
       color: "global",
       variant: "contained",
-      disabled: !isDirty || isSaving,
+      disabled: !isDirty,
       onClick: handleSave
     },
-    (0, import_i18n6.__)("Save changes", "elementor")
-  ))), deleteConfirmation && /* @__PURE__ */ React9.createElement(
+    (0, import_i18n7.__)("Save changes", "elementor")
+  ))), deleteConfirmation && /* @__PURE__ */ React10.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1200,19 +1385,19 @@ function VariablesManagerPanel() {
       onConfirm: () => handleDeleteVariable(deleteConfirmation.id),
       closeDialog: () => setDeleteConfirmation(null)
     }
-  )), isSaveChangesDialogOpen && /* @__PURE__ */ React9.createElement(import_editor_ui2.SaveChangesDialog, null, /* @__PURE__ */ React9.createElement(import_editor_ui2.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n6.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React9.createElement(import_editor_ui2.SaveChangesDialog.Content, null, /* @__PURE__ */ React9.createElement(import_editor_ui2.SaveChangesDialog.ContentText, null, (0, import_i18n6.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React9.createElement(
+  )), isSaveChangesDialogOpen && /* @__PURE__ */ React10.createElement(import_editor_ui2.SaveChangesDialog, null, /* @__PURE__ */ React10.createElement(import_editor_ui2.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n7.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React10.createElement(import_editor_ui2.SaveChangesDialog.Content, null, /* @__PURE__ */ React10.createElement(import_editor_ui2.SaveChangesDialog.ContentText, null, (0, import_i18n7.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React10.createElement(
     import_editor_ui2.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: (0, import_i18n6.__)("Discard", "elementor"),
+          label: (0, import_i18n7.__)("Discard", "elementor"),
           action: () => {
             closeSaveChangesDialog();
             closePanel();
           }
         },
         confirm: {
-          label: (0, import_i18n6.__)("Save", "elementor"),
+          label: (0, import_i18n7.__)("Save", "elementor"),
           action: async () => {
             await handleSave();
             closeSaveChangesDialog();
@@ -1223,10 +1408,9 @@ function VariablesManagerPanel() {
     }
   )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React9.createElement(import_ui9.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React9.createElement(import_icons4.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React9.createElement(import_ui9.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React9.createElement(import_ui9.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React9.createElement("strong", null, (0, import_i18n6.__)("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React10.createElement(import_ui10.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React10.createElement(import_ui10.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React10.createElement("strong", null, (0, import_i18n7.__)("Something went wrong", "elementor"))));
 var usePreventUnload = (isDirty) => {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -1240,15 +1424,15 @@ var usePreventUnload = (isDirty) => {
 };
 
 // src/controls/variable-control.tsx
-var React30 = __toESM(require("react"));
+var React31 = __toESM(require("react"));
 var import_editor_controls11 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
-var import_react14 = require("react");
-var React21 = __toESM(require("react"));
+var import_react15 = require("react");
+var React22 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
-var import_icons11 = require("@elementor/icons");
-var import_ui21 = require("@elementor/ui");
+var import_icons12 = require("@elementor/icons");
+var import_ui22 = require("@elementor/ui");
 
 // src/utils/unlink-variable.ts
 function transformValueBeforeUnlink(variable, propTypeKey) {
@@ -1267,21 +1451,21 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 }
 
 // src/components/variable-selection-popover.tsx
-var React19 = __toESM(require("react"));
-var import_react13 = require("react");
+var React20 = __toESM(require("react"));
+var import_react14 = require("react");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
 // src/context/variable-selection-popover.context.tsx
-var React10 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_ui10 = require("@elementor/ui");
-var PopoverContentRefContext = (0, import_react8.createContext)(null);
+var React11 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_ui11 = require("@elementor/ui");
+var PopoverContentRefContext = (0, import_react9.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = (0, import_react8.useState)(null);
-  return /* @__PURE__ */ React10.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React10.createElement(import_ui10.Box, { ref: setAnchorRef }, children));
+  const [anchorRef, setAnchorRef] = (0, import_react9.useState)(null);
+  return /* @__PURE__ */ React11.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React11.createElement(import_ui11.Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
-  return (0, import_react8.useContext)(PopoverContentRefContext);
+  return (0, import_react9.useContext)(PopoverContentRefContext);
 };
 
 // src/hooks/use-permissions.ts
@@ -1300,14 +1484,14 @@ var usePermissions = () => {
 };
 
 // src/components/variable-creation.tsx
-var React12 = __toESM(require("react"));
-var import_react9 = require("react");
+var React13 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui3 = require("@elementor/editor-ui");
-var import_icons5 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_icons6 = require("@elementor/icons");
+var import_ui13 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/hooks/use-initial-value.ts
 var import_editor_controls2 = require("@elementor/editor-controls");
@@ -1350,17 +1534,17 @@ var unwrapValue = (input) => {
 };
 
 // src/utils/tracking.ts
+var import_mixpanel = require("@elementor/mixpanel");
 var trackVariableEvent = ({ varType, controlPath, action }) => {
-  const extendedWindow = window;
-  const config = extendedWindow?.elementorCommon?.eventsManager?.config;
+  const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
   if (!config?.names?.variables?.[action]) {
     return;
   }
   const name = config.names.variables[action];
-  extendedWindow.elementorCommon?.eventsManager?.dispatchEvent(name, {
-    location: config.locations.variables,
-    secondaryLocation: config.secondaryLocations.variablesPopover,
-    trigger: config.triggers.click,
+  dispatchEvent?.(name, {
+    location: config?.locations?.variables || "",
+    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
+    trigger: config?.triggers?.click || "",
     var_type: varType,
     control_path: controlPath,
     action_type: name
@@ -1368,23 +1552,23 @@ var trackVariableEvent = ({ varType, controlPath, action }) => {
 };
 
 // src/components/ui/form-field.tsx
-var React11 = __toESM(require("react"));
-var import_ui11 = require("@elementor/ui");
+var React12 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React11.createElement(import_ui11.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui11.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React11.createElement(import_ui11.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React11.createElement(import_ui11.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React11.createElement(import_ui11.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React11.createElement(import_ui11.FormHelperText, null, noticeMsg)));
+  return /* @__PURE__ */ React12.createElement(import_ui12.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React12.createElement(import_ui12.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(import_ui12.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React12.createElement(import_ui12.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React12.createElement(import_ui12.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React12.createElement(import_ui12.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 { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls4.useBoundProp)();
   const initialValue = useInitialValue();
-  const [value, setValue] = (0, import_react9.useState)(initialValue);
-  const [label, setLabel] = (0, import_react9.useState)("");
-  const [errorMessage, setErrorMessage] = (0, import_react9.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react9.useState)("");
+  const [value, setValue] = (0, import_react10.useState)(initialValue);
+  const [label, setLabel] = (0, import_react10.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react10.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react10.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -1435,22 +1619,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React12.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React13.createElement(
     import_editor_ui3.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React12.createElement(React12.Fragment, null, onGoBack && /* @__PURE__ */ React12.createElement(import_ui12.IconButton, { size: SIZE, "aria-label": (0, import_i18n7.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React12.createElement(import_icons5.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React12.createElement(VariableIcon, { fontSize: SIZE })),
-      title: (0, import_i18n7.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React13.createElement(React13.Fragment, null, onGoBack && /* @__PURE__ */ React13.createElement(import_ui13.IconButton, { size: SIZE2, "aria-label": (0, import_i18n8.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React13.createElement(import_icons6.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: SIZE2 })),
+      title: (0, import_i18n8.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React12.createElement(import_ui12.Divider, null), /* @__PURE__ */ React12.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React13.createElement(import_ui13.Divider, null), /* @__PURE__ */ React13.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React13.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n7.__)("Name", "elementor"),
+      label: (0, import_i18n8.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -1468,7 +1652,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React12.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n7.__)("Value", "elementor") }, /* @__PURE__ */ React12.createElement(import_ui12.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React13.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n8.__)("Value", "elementor") }, /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React13.createElement(
     ValueField,
     {
       value,
@@ -1480,8 +1664,8 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React12.createElement(import_ui12.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React12.createElement(import_ui12.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(
-    import_ui12.Button,
+  ))), errorMessage && /* @__PURE__ */ React13.createElement(import_ui13.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React13.createElement(import_ui13.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React13.createElement(
+    import_ui13.Button,
     {
       id: "create-variable-button",
       size: "small",
@@ -1489,79 +1673,79 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       disabled: isSubmitDisabled,
       onClick: handleCreateAndTrack
     },
-    (0, import_i18n7.__)("Create", "elementor")
+    (0, import_i18n8.__)("Create", "elementor")
   )));
 };
 
 // src/components/variable-edit.tsx
-var React14 = __toESM(require("react"));
-var import_react11 = require("react");
+var React15 = __toESM(require("react"));
+var import_react12 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 var import_editor_ui4 = require("@elementor/editor-ui");
+var import_icons8 = require("@elementor/icons");
+var import_ui15 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
+
+// src/components/ui/edit-confirmation-dialog.tsx
+var React14 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_icons7 = require("@elementor/icons");
 var import_ui14 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
-
-// src/components/ui/edit-confirmation-dialog.tsx
-var React13 = __toESM(require("react"));
-var import_react10 = require("react");
-var import_icons6 = require("@elementor/icons");
-var import_ui13 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react10.useState)(false);
+  const [dontShowAgain, setDontShowAgain] = (0, import_react11.useState)(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React13.createElement(import_ui13.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(import_ui13.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React13.createElement(import_icons6.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n8.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React13.createElement(import_ui13.DialogContent, null, /* @__PURE__ */ React13.createElement(import_ui13.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n8.__)(
+  return /* @__PURE__ */ React14.createElement(import_ui14.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React14.createElement(import_ui14.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React14.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n9.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React14.createElement(import_ui14.DialogContent, null, /* @__PURE__ */ React14.createElement(import_ui14.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n9.__)(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React13.createElement(import_ui13.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React13.createElement(
-    import_ui13.FormControlLabel,
+  ))), /* @__PURE__ */ React14.createElement(import_ui14.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React14.createElement(
+    import_ui14.FormControlLabel,
     {
-      control: /* @__PURE__ */ React13.createElement(
-        import_ui13.Checkbox,
+      control: /* @__PURE__ */ React14.createElement(
+        import_ui14.Checkbox,
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "body2" }, (0, import_i18n8.__)("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React14.createElement(import_ui14.Typography, { variant: "body2" }, (0, import_i18n9.__)("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(import_ui13.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n8.__)("Keep editing", "elementor")), /* @__PURE__ */ React13.createElement(import_ui13.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n8.__)("Save", "elementor")))));
+  ), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement(import_ui14.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n9.__)("Keep editing", "elementor")), /* @__PURE__ */ React14.createElement(import_ui14.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n9.__)("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
-var SIZE2 = "tiny";
+var SIZE3 = "tiny";
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls5.useBoundProp)();
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user2.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react11.useState)(false);
-  const [editConfirmation, setEditConfirmation] = (0, import_react11.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, import_react11.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react11.useState)("");
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react12.useState)(false);
+  const [editConfirmation, setEditConfirmation] = (0, import_react12.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react12.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react12.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = (0, import_react11.useState)(() => variable.value);
-  const [label, setLabel] = (0, import_react11.useState)(() => variable.label);
-  (0, import_react11.useEffect)(() => {
+  const [value, setValue] = (0, import_react12.useState)(() => variable.value);
+  const [label, setLabel] = (0, import_react12.useState)(() => variable.label);
+  (0, import_react12.useEffect)(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -1624,15 +1808,15 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React14.createElement(
-        import_ui14.IconButton,
+      /* @__PURE__ */ React15.createElement(
+        import_ui15.IconButton,
         {
           key: "delete",
-          size: SIZE2,
-          "aria-label": (0, import_i18n9.__)("Delete", "elementor"),
+          size: SIZE3,
+          "aria-label": (0, import_i18n10.__)("Delete", "elementor"),
           onClick: handleDeleteConfirmation
         },
-        /* @__PURE__ */ React14.createElement(import_icons7.TrashIcon, { fontSize: SIZE2 })
+        /* @__PURE__ */ React15.createElement(import_icons8.TrashIcon, { fontSize: SIZE3 })
       )
     );
   }
@@ -1652,31 +1836,31 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React15.createElement(
     import_editor_ui4.PopoverHeader,
     {
-      title: (0, import_i18n9.__)("Edit variable", "elementor"),
+      title: (0, import_i18n10.__)("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React14.createElement(React14.Fragment, null, onGoBack && /* @__PURE__ */ React14.createElement(
-        import_ui14.IconButton,
+      icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(
+        import_ui15.IconButton,
         {
-          size: SIZE2,
-          "aria-label": (0, import_i18n9.__)("Go Back", "elementor"),
+          size: SIZE3,
+          "aria-label": (0, import_i18n10.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React14.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE2 })
-      ), /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: SIZE2 })),
+        /* @__PURE__ */ React15.createElement(import_icons8.ArrowLeftIcon, { fontSize: SIZE3 })
+      ), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE3 })),
       actions
     }
-  ), /* @__PURE__ */ React14.createElement(import_ui14.Divider, null), /* @__PURE__ */ React14.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React15.createElement(import_ui15.Divider, null), /* @__PURE__ */ React15.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React15.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n9.__)("Name", "elementor"),
+      label: (0, import_i18n10.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React15.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -1694,7 +1878,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React14.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n9.__)("Value", "elementor") }, /* @__PURE__ */ React14.createElement(import_ui14.Typography, { variant: "h5" }, /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n10.__)("Value", "elementor") }, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { variant: "h5" }, /* @__PURE__ */ React15.createElement(
     ValueField,
     {
       value,
@@ -1706,7 +1890,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React14.createElement(import_ui14.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React14.createElement(import_ui14.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React14.createElement(import_ui14.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n9.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
+  ))), errorMessage && /* @__PURE__ */ React15.createElement(import_ui15.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React15.createElement(import_ui15.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React15.createElement(import_ui15.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n10.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React15.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1714,7 +1898,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React14.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React15.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -1725,22 +1909,22 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-var React18 = __toESM(require("react"));
-var import_react12 = require("react");
+var React19 = __toESM(require("react"));
+var import_react13 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
-var import_icons9 = require("@elementor/icons");
-var import_ui19 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_icons10 = require("@elementor/icons");
+var import_ui20 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/components/ui/empty-state.tsx
-var React15 = __toESM(require("react"));
-var import_ui15 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var React16 = __toESM(require("react"));
+var import_ui16 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 var EmptyState = ({ icon, title, message, onAdd }) => {
   const canAdd = usePermissions().canAdd();
-  return /* @__PURE__ */ React15.createElement(
-    import_ui15.Stack,
+  return /* @__PURE__ */ React16.createElement(
+    import_ui16.Stack,
     {
       gap: 1,
       alignItems: "center",
@@ -1750,30 +1934,30 @@ var EmptyState = ({ icon, title, message, onAdd }) => {
       sx: { p: 2.5, pb: 5.5 }
     },
     icon,
-    canAdd ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React15.createElement(import_ui15.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n10.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React15.createElement(
+    canAdd ? /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React16.createElement(import_ui16.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n11.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React16.createElement(
       Content,
       {
-        title: (0, import_i18n10.__)("There are no variables", "elementor"),
-        message: (0, import_i18n10.__)("With your current role, you can only connect and detach variables.", "elementor")
+        title: (0, import_i18n11.__)("There are no variables", "elementor"),
+        message: (0, import_i18n11.__)("With your current role, you can only connect and detach variables.", "elementor")
       }
     )
   );
 };
 function Content({ title, message }) {
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React15.createElement(import_ui15.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
 }
 
 // src/components/ui/menu-item-content.tsx
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_editor_ui5 = require("@elementor/editor-ui");
-var import_icons8 = require("@elementor/icons");
-var import_ui16 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
-var SIZE3 = "tiny";
+var import_icons9 = require("@elementor/icons");
+var import_ui17 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
+var SIZE4 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_ui16.ListItemIcon, null, item.icon), /* @__PURE__ */ React16.createElement(
-    import_ui16.Box,
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui17.ListItemIcon, null, item.icon), /* @__PURE__ */ React17.createElement(
+    import_ui17.Box,
     {
       sx: {
         flex: 1,
@@ -1783,49 +1967,49 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React17.createElement(
       import_editor_ui5.EllipsisWithTooltip,
       {
         title: item.label || item.value,
-        as: import_ui16.Typography,
+        as: import_ui17.Typography,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React16.createElement(
+    item.secondaryText && /* @__PURE__ */ React17.createElement(
       import_editor_ui5.EllipsisWithTooltip,
       {
         title: item.secondaryText,
-        as: import_ui16.Typography,
+        as: import_ui17.Typography,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React16.createElement(
-    import_ui16.IconButton,
+  ), !!onEdit && /* @__PURE__ */ React17.createElement(
+    import_ui17.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": (0, import_i18n11.__)("Edit", "elementor")
+      "aria-label": (0, import_i18n12.__)("Edit", "elementor")
     },
-    /* @__PURE__ */ React16.createElement(import_icons8.EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React17.createElement(import_icons9.EditIcon, { color: "action", fontSize: SIZE4 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-var React17 = __toESM(require("react"));
-var import_ui17 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var React18 = __toESM(require("react"));
+var import_ui18 = require("@elementor/ui");
+var import_i18n13 = require("@wordpress/i18n");
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React17.createElement(
-    import_ui17.Stack,
+  return /* @__PURE__ */ React18.createElement(
+    import_ui18.Stack,
     {
       gap: 1,
       alignItems: "center",
@@ -1836,14 +2020,14 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n12.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React17.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n12.__)("Try something else.", "elementor"), /* @__PURE__ */ React17.createElement(import_ui17.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n12.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React18.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n13.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React18.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React18.createElement(import_ui18.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n13.__)("Try something else.", "elementor"), /* @__PURE__ */ React18.createElement(import_ui18.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n13.__)("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/styled-menu-list.tsx
-var import_ui18 = require("@elementor/ui");
-var VariablesStyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) => ({
+var import_ui19 = require("@elementor/ui");
+var VariablesStyledMenuList = (0, import_ui19.styled)(import_ui19.MenuList)(({ theme }) => ({
   "& > li": {
     height: 32,
     width: "100%",
@@ -1874,11 +2058,11 @@ var VariablesStyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ t
 }));
 
 // src/components/variables-selection.tsx
-var SIZE4 = "tiny";
+var SIZE5 = "tiny";
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
-  const [searchValue, setSearchValue] = (0, import_react12.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react13.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -1905,20 +2089,20 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React18.createElement(import_ui19.IconButton, { id: "add-variable-button", key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React18.createElement(import_icons9.PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React19.createElement(import_ui20.IconButton, { id: "add-variable-button", key: "add", size: SIZE5, onClick: onAddAndTrack }, /* @__PURE__ */ React19.createElement(import_icons10.PlusIcon, { fontSize: SIZE5 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React18.createElement(import_ui19.IconButton, { id: "variables-manager-button", key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React18.createElement(import_icons9.SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React19.createElement(import_ui20.IconButton, { id: "variables-manager-button", key: "settings", size: SIZE5, onClick: onSettings }, /* @__PURE__ */ React19.createElement(import_icons10.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
   }));
@@ -1928,27 +2112,27 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  const noVariableTitle = (0, import_i18n13.sprintf)(
+  const noVariableTitle = (0, import_i18n14.sprintf)(
     /* translators: %s: Variable Type. */
-    (0, import_i18n13.__)("Create your first %s variable", "elementor"),
+    (0, import_i18n14.__)("Create your first %s variable", "elementor"),
     variableType
   );
-  return /* @__PURE__ */ React18.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React19.createElement(
     import_editor_ui6.PopoverHeader,
     {
-      title: (0, import_i18n13.__)("Variables", "elementor"),
-      icon: /* @__PURE__ */ React18.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE4 }),
+      title: (0, import_i18n14.__)("Variables", "elementor"),
+      icon: /* @__PURE__ */ React19.createElement(import_icons10.ColorFilterIcon, { fontSize: SIZE5 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React18.createElement(
+  ), hasVariables && /* @__PURE__ */ React19.createElement(
     import_editor_ui6.PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n13.__)("Search", "elementor")
+      placeholder: (0, import_i18n14.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React18.createElement(import_ui19.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(import_ui20.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React19.createElement(
     import_editor_ui6.PopoverMenuList,
     {
       items,
@@ -1958,35 +2142,35 @@ 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__ */ React18.createElement(
+  ), !hasVariables && !hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
     EmptyState,
     {
       title: noVariableTitle,
-      message: (0, import_i18n13.__)(
+      message: (0, import_i18n14.__)(
         "Variables are saved attributes that you can apply anywhere on your site.",
         "elementor"
       ),
-      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }),
+      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
       onAdd
     }
-  ), hasNoCompatibleVariables && /* @__PURE__ */ React18.createElement(
+  ), hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
     EmptyState,
     {
-      title: (0, import_i18n13.__)("No compatible variables", "elementor"),
-      message: (0, import_i18n13.__)(
+      title: (0, import_i18n14.__)("No compatible variables", "elementor"),
+      message: (0, import_i18n14.__)(
         "Looks like none of your variables work with this control. Create a new variable to use it here.",
         "elementor"
       ),
-      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }),
+      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
       onAdd
     }
   ));
@@ -1997,13 +2181,13 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = (0, import_react13.useState)(VIEW_LIST);
-  const [editId, setEditId] = (0, import_react13.useState)("");
+  const [currentView, setCurrentView] = (0, import_react14.useState)(VIEW_LIST);
+  const [editId, setEditId] = (0, import_react14.useState)("");
   const { open } = usePanelActions();
   const onSettingsAvailable = (0, import_editor_v1_adapters2.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,
@@ -2049,7 +2233,7 @@ function RenderView(props) {
     }
   };
   if (VIEW_LIST === props.currentView) {
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       VariablesSelection,
       {
         closePopover: handlers.onClose,
@@ -2060,10 +2244,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,
@@ -2077,25 +2261,25 @@ function RenderView(props) {
 }
 
 // src/components/ui/tags/assigned-tag.tsx
-var React20 = __toESM(require("react"));
-var import_icons10 = require("@elementor/icons");
-var import_ui20 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
-var SIZE5 = "tiny";
+var React21 = __toESM(require("react"));
+var import_icons11 = require("@elementor/icons");
+var import_ui21 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
+var SIZE6 = "tiny";
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React20.createElement(import_ui20.IconButton, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": (0, import_i18n14.__)("Unlink", "elementor") }, /* @__PURE__ */ React20.createElement(import_icons10.DetachIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React21.createElement(import_ui21.IconButton, { key: "unlink", size: SIZE6, onClick: onUnlink, "aria-label": (0, import_i18n15.__)("Unlink", "elementor") }, /* @__PURE__ */ React21.createElement(import_icons11.DetachIcon, { fontSize: SIZE6 }))
     );
   }
-  return /* @__PURE__ */ React20.createElement(import_ui20.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React20.createElement(
-    import_ui20.UnstableTag,
+  return /* @__PURE__ */ React21.createElement(import_ui21.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React21.createElement(
+    import_ui21.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React20.createElement(import_ui20.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React20.createElement(import_ui20.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React20.createElement(import_ui20.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      startIcon: /* @__PURE__ */ React21.createElement(import_ui21.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React21.createElement(import_ui21.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React21.createElement(import_ui21.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -2106,24 +2290,24 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = (0, import_editor_controls6.useBoundProp)();
-  const anchorRef = (0, import_react14.useRef)(null);
-  const popupId = (0, import_react14.useId)();
-  const popupState = (0, import_ui21.usePopupState)({
+  const anchorRef = (0, import_react15.useRef)(null);
+  const popupId = (0, import_react15.useId)();
+  const popupState = (0, import_ui22.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React21.createElement(import_ui21.Box, { ref: anchorRef }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(import_ui22.Box, { ref: anchorRef }, /* @__PURE__ */ React22.createElement(
     AssignedTag,
     {
       label: variable.label,
-      startIcon: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE5 }), /* @__PURE__ */ React21.createElement(StartIcon, { value: variable.value })),
+      startIcon: /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_icons12.ColorFilterIcon, { fontSize: SIZE6 }), /* @__PURE__ */ React22.createElement(StartIcon, { value: variable.value })),
       onUnlink: unlinkVariable,
-      ...(0, import_ui21.bindTrigger)(popupState)
+      ...(0, import_ui22.bindTrigger)(popupState)
     }
-  ), /* @__PURE__ */ React21.createElement(
-    import_ui21.Popover,
+  ), /* @__PURE__ */ React22.createElement(
+    import_ui22.Popover,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
@@ -2132,9 +2316,9 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui21.bindPopover)(popupState)
+      ...(0, import_ui22.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React22.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -2146,21 +2330,21 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/deleted-variable.tsx
-var React25 = __toESM(require("react"));
-var import_react16 = require("react");
+var React26 = __toESM(require("react"));
+var import_react17 = require("react");
 var import_editor_controls8 = require("@elementor/editor-controls");
-var import_ui25 = require("@elementor/ui");
-var import_i18n17 = require("@wordpress/i18n");
+var import_ui26 = require("@elementor/ui");
+var import_i18n18 = require("@wordpress/i18n");
 
 // src/components/variable-restore.tsx
-var React22 = __toESM(require("react"));
-var import_react15 = require("react");
+var React23 = __toESM(require("react"));
+var import_react16 = require("react");
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_ui7 = require("@elementor/editor-ui");
-var import_ui22 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
-var SIZE6 = "tiny";
+var import_ui23 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
+var SIZE7 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
   const { setVariableValue: notifyBoundPropChange } = useVariableBoundProp();
@@ -2169,10 +2353,10 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = (0, import_react15.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react15.useState)("");
-  const [label, setLabel] = (0, import_react15.useState)(variable.label);
-  const [value, setValue] = (0, import_react15.useState)(variable.value);
+  const [errorMessage, setErrorMessage] = (0, import_react16.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react16.useState)("");
+  const [label, setLabel] = (0, import_react16.useState)(variable.label);
+  const [value, setValue] = (0, import_react16.useState)(variable.value);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -2210,22 +2394,22 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React22.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React22.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React23.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React23.createElement(
     import_editor_ui7.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: SIZE6 }),
-      title: (0, import_i18n15.__)("Restore variable", "elementor"),
+      icon: /* @__PURE__ */ React23.createElement(VariableIcon, { fontSize: SIZE7 }),
+      title: (0, import_i18n16.__)("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React22.createElement(import_ui22.Divider, null), /* @__PURE__ */ React22.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(import_ui23.Divider, null), /* @__PURE__ */ React23.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React23.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n15.__)("Name", "elementor"),
+      label: (0, import_i18n16.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React23.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -2243,7 +2427,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React22.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n15.__)("Value", "elementor") }, /* @__PURE__ */ React22.createElement(import_ui22.Typography, { variant: "h5" }, /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n16.__)("Value", "elementor") }, /* @__PURE__ */ React23.createElement(import_ui23.Typography, { variant: "h5" }, /* @__PURE__ */ React23.createElement(
     ValueField,
     {
       value,
@@ -2255,25 +2439,25 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React22.createElement(import_ui22.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React22.createElement(import_ui22.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React22.createElement(import_ui22.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n15.__)("Restore", "elementor")))));
+  ))), errorMessage && /* @__PURE__ */ React23.createElement(import_ui23.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React23.createElement(import_ui23.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React23.createElement(import_ui23.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n16.__)("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
-var React23 = __toESM(require("react"));
-var import_ui23 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var React24 = __toESM(require("react"));
+var import_ui24 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
-  return /* @__PURE__ */ React23.createElement(import_ui23.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React23.createElement(
-    import_ui23.Alert,
+  return /* @__PURE__ */ React24.createElement(import_ui24.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React24.createElement(
+    import_ui24.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React23.createElement(React23.Fragment, null, onUnlink && /* @__PURE__ */ React23.createElement(import_ui23.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n16.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React23.createElement(import_ui23.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n16.__)("Restore", "elementor"))),
+      action: /* @__PURE__ */ React24.createElement(React24.Fragment, null, onUnlink && /* @__PURE__ */ React24.createElement(import_ui24.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n17.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React24.createElement(import_ui24.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n17.__)("Restore", "elementor"))),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React23.createElement(import_ui23.AlertTitle, null, (0, import_i18n16.__)("Deleted variable", "elementor")),
-    /* @__PURE__ */ React23.createElement(import_ui23.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n16.__)("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React23.createElement(import_ui23.Typography, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", (0, import_i18n16.__)(
+    /* @__PURE__ */ React24.createElement(import_ui24.AlertTitle, null, (0, import_i18n17.__)("Deleted variable", "elementor")),
+    /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n17.__)("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", (0, import_i18n17.__)(
       "has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.",
       "elementor"
     ))
@@ -2281,14 +2465,14 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 };
 
 // src/components/ui/tags/warning-variable-tag.tsx
-var React24 = __toESM(require("react"));
-var import_icons12 = require("@elementor/icons");
-var import_ui24 = require("@elementor/ui");
-var WarningVariableTag = React24.forwardRef(
+var React25 = __toESM(require("react"));
+var import_icons13 = require("@elementor/icons");
+var import_ui25 = require("@elementor/ui");
+var WarningVariableTag = React25.forwardRef(
   ({ label, suffix, onClick, icon, ...props }, ref) => {
     const displayText = suffix ? `${label} (${suffix})` : label;
-    return /* @__PURE__ */ React24.createElement(
-      import_ui24.Chip,
+    return /* @__PURE__ */ React25.createElement(
+      import_ui25.Chip,
       {
         ref,
         size: "tiny",
@@ -2296,8 +2480,8 @@ var WarningVariableTag = React24.forwardRef(
         shape: "rounded",
         variant: "standard",
         onClick,
-        icon: /* @__PURE__ */ React24.createElement(import_icons12.AlertTriangleFilledIcon, null),
-        label: /* @__PURE__ */ React24.createElement(import_ui24.Tooltip, { title: displayText, placement: "top" }, /* @__PURE__ */ React24.createElement(import_ui24.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
+        icon: /* @__PURE__ */ React25.createElement(import_icons13.AlertTriangleFilledIcon, null),
+        label: /* @__PURE__ */ React25.createElement(import_ui25.Tooltip, { title: displayText, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui25.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React25.createElement(import_ui25.Typography, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
         sx: {
           height: (theme) => theme.spacing(3.5),
           borderRadius: (theme) => theme.spacing(1),
@@ -2316,12 +2500,12 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = (0, import_editor_controls8.useBoundProp)();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = (0, import_react16.useState)(false);
+  const [showInfotip, setShowInfotip] = (0, import_react17.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = (0, import_react16.useRef)(null);
-  const popupId = (0, import_react16.useId)();
-  const popupState = (0, import_ui25.usePopupState)({
+  const deletedChipAnchorRef = (0, import_react17.useRef)(null);
+  const popupId = (0, import_react17.useId)();
+  const popupState = (0, import_ui26.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
   });
@@ -2347,15 +2531,15 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_ui25.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React25.createElement(import_ui25.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React25.createElement(
-    import_ui25.Infotip,
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(import_ui26.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React26.createElement(import_ui26.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React26.createElement(
+    import_ui26.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: showInfotip,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React25.createElement(
+      content: /* @__PURE__ */ React26.createElement(
         DeletedVariableAlert,
         {
           onClose: closeInfotip,
@@ -2375,16 +2559,16 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
         }
       }
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(
       WarningVariableTag,
       {
         label: variable.label,
         onClick: toggleInfotip,
-        suffix: (0, import_i18n17.__)("deleted", "elementor")
+        suffix: (0, import_i18n18.__)("deleted", "elementor")
       }
     )
-  ), /* @__PURE__ */ React25.createElement(
-    import_ui25.Popover,
+  ), /* @__PURE__ */ React26.createElement(
+    import_ui26.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
@@ -2392,9 +2576,9 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui25.bindPopover)(popupState)
+      ...(0, import_ui26.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React25.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React26.createElement(
       VariableRestore,
       {
         variableId: variable.key ?? "",
@@ -2406,52 +2590,52 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/mismatch-variable.tsx
-var React27 = __toESM(require("react"));
-var import_react17 = require("react");
+var React28 = __toESM(require("react"));
+var import_react18 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
-var import_ui27 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
+var import_ui28 = require("@elementor/ui");
+var import_i18n20 = require("@wordpress/i18n");
 
 // src/components/ui/mismatch-variable-alert.tsx
-var React26 = __toESM(require("react"));
-var import_ui26 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
+var React27 = __toESM(require("react"));
+var import_ui27 = require("@elementor/ui");
+var import_i18n19 = require("@wordpress/i18n");
 var i18n = {
-  title: (0, import_i18n18.__)("Variable has changed", "elementor"),
-  message: (0, import_i18n18.__)(
+  title: (0, import_i18n19.__)("Variable has changed", "elementor"),
+  message: (0, import_i18n19.__)(
     `This variable is no longer compatible with this property. You can clear it or select a different one.`,
     "elementor"
   ),
   buttons: {
-    clear: (0, import_i18n18.__)("Clear", "elementor"),
-    select: (0, import_i18n18.__)("Select variable", "elementor")
+    clear: (0, import_i18n19.__)("Clear", "elementor"),
+    select: (0, import_i18n19.__)("Select variable", "elementor")
   }
 };
 var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
-  return /* @__PURE__ */ React26.createElement(import_ui26.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React26.createElement(
-    import_ui26.Alert,
+  return /* @__PURE__ */ React27.createElement(import_ui27.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React27.createElement(
+    import_ui27.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onClear && /* @__PURE__ */ React26.createElement(import_ui26.AlertAction, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React26.createElement(import_ui26.AlertAction, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
+      action: /* @__PURE__ */ React27.createElement(React27.Fragment, null, onClear && /* @__PURE__ */ React27.createElement(import_ui27.AlertAction, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React27.createElement(import_ui27.AlertAction, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React26.createElement(import_ui26.AlertTitle, null, i18n.title),
-    /* @__PURE__ */ React26.createElement(import_ui26.Typography, { variant: "body2", color: "textPrimary" }, i18n.message)
+    /* @__PURE__ */ React27.createElement(import_ui27.AlertTitle, null, i18n.title),
+    /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "body2", color: "textPrimary" }, i18n.message)
   ));
 };
 
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue, value } = (0, import_editor_controls9.useBoundProp)();
-  const anchorRef = (0, import_react17.useRef)(null);
-  const popupId = (0, import_react17.useId)();
-  const popupState = (0, import_ui27.usePopupState)({
+  const anchorRef = (0, import_react18.useRef)(null);
+  const popupId = (0, import_react18.useId)();
+  const popupState = (0, import_ui28.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = (0, import_react17.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react18.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -2464,15 +2648,15 @@ var MismatchVariable = ({ variable }) => {
     setValue(null);
   };
   const showClearButton = !!value;
-  return /* @__PURE__ */ React27.createElement(import_ui27.Box, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React27.createElement(import_ui27.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React27.createElement(
-    import_ui27.Infotip,
+  return /* @__PURE__ */ React28.createElement(import_ui28.Box, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(import_ui28.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
+    import_ui28.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React27.createElement(
+      content: /* @__PURE__ */ React28.createElement(
         MismatchVariableAlert,
         {
           onClose: closeInfotip,
@@ -2491,16 +2675,16 @@ var MismatchVariable = ({ variable }) => {
         }
       }
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(
       WarningVariableTag,
       {
         label: variable.label,
         onClick: toggleInfotip,
-        suffix: (0, import_i18n19.__)("changed", "elementor")
+        suffix: (0, import_i18n20.__)("changed", "elementor")
       }
     )
-  ), /* @__PURE__ */ React27.createElement(
-    import_ui27.Popover,
+  ), /* @__PURE__ */ React28.createElement(
+    import_ui28.Popover,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
@@ -2509,9 +2693,9 @@ var MismatchVariable = ({ variable }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui27.bindPopover)(popupState)
+      ...(0, import_ui28.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -2523,28 +2707,28 @@ var MismatchVariable = ({ variable }) => {
 };
 
 // src/components/ui/variable/missing-variable.tsx
-var React29 = __toESM(require("react"));
-var import_react18 = require("react");
+var React30 = __toESM(require("react"));
+var import_react19 = require("react");
 var import_editor_controls10 = require("@elementor/editor-controls");
-var import_ui29 = require("@elementor/ui");
-var import_i18n21 = require("@wordpress/i18n");
+var import_ui30 = require("@elementor/ui");
+var import_i18n22 = require("@wordpress/i18n");
 
 // src/components/ui/missing-variable-alert.tsx
-var React28 = __toESM(require("react"));
-var import_ui28 = require("@elementor/ui");
-var import_i18n20 = require("@wordpress/i18n");
+var React29 = __toESM(require("react"));
+var import_ui29 = require("@elementor/ui");
+var import_i18n21 = require("@wordpress/i18n");
 var MissingVariableAlert = ({ onClose, onClear }) => {
-  return /* @__PURE__ */ React28.createElement(import_ui28.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React28.createElement(
-    import_ui28.Alert,
+  return /* @__PURE__ */ React29.createElement(import_ui29.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
+    import_ui29.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React28.createElement(React28.Fragment, null, onClear && /* @__PURE__ */ React28.createElement(import_ui28.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n20.__)("Clear", "elementor"))),
+      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(import_ui29.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n21.__)("Clear", "elementor"))),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React28.createElement(import_ui28.AlertTitle, null, (0, import_i18n20.__)("This variable is missing", "elementor")),
-    /* @__PURE__ */ React28.createElement(import_ui28.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n20.__)(
+    /* @__PURE__ */ React29.createElement(import_ui29.AlertTitle, null, (0, import_i18n21.__)("This variable is missing", "elementor")),
+    /* @__PURE__ */ React29.createElement(import_ui29.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n21.__)(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
     ))
@@ -2554,19 +2738,19 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = (0, import_editor_controls10.useBoundProp)();
-  const [infotipVisible, setInfotipVisible] = (0, import_react18.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react19.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, infotipVisible && /* @__PURE__ */ React29.createElement(import_ui29.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React29.createElement(
-    import_ui29.Infotip,
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, infotipVisible && /* @__PURE__ */ React30.createElement(import_ui30.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React30.createElement(
+    import_ui30.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React29.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      content: /* @__PURE__ */ React30.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
       slotProps: {
         popper: {
           modifiers: [
@@ -2578,7 +2762,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React29.createElement(WarningVariableTag, { label: (0, import_i18n21.__)("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React30.createElement(WarningVariableTag, { label: (0, import_i18n22.__)("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -2588,37 +2772,37 @@ var VariableControl = () => {
   const boundPropValue = boundProp.value ?? boundProp.placeholder;
   const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
-    return /* @__PURE__ */ React30.createElement(MissingVariable, null);
+    return /* @__PURE__ */ React31.createElement(MissingVariable, null);
   }
   const { $$type: propTypeKey } = boundPropValue;
   if (assignedVariable?.deleted) {
-    return /* @__PURE__ */ React30.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__ */ React30.createElement(MismatchVariable, { variable: assignedVariable });
+    return /* @__PURE__ */ React31.createElement(MismatchVariable, { variable: assignedVariable });
   }
-  return /* @__PURE__ */ React30.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
+  return /* @__PURE__ */ React31.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
 // src/hooks/use-prop-variable-action.tsx
-var React31 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
-var import_icons13 = require("@elementor/icons");
-var import_i18n22 = require("@wordpress/i18n");
+var import_icons14 = require("@elementor/icons");
+var import_i18n23 = require("@wordpress/i18n");
 var usePropVariableAction = () => {
   const { propType, path } = (0, import_editor_editing_panel6.useBoundProp)();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
-    icon: import_icons13.ColorFilterIcon,
-    title: (0, import_i18n22.__)("Variables", "elementor"),
+    icon: import_icons14.ColorFilterIcon,
+    title: (0, import_i18n23.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
       }
       trackOpenVariablePopover(path, variable.variableType);
-      return /* @__PURE__ */ React31.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
+      return /* @__PURE__ */ React32.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
@@ -2643,18 +2827,18 @@ var trackOpenVariablePopover = (path, variableType) => {
 };
 
 // src/register-variable-types.tsx
-var React34 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 var import_editor_props4 = require("@elementor/editor-props");
-var import_icons15 = require("@elementor/icons");
+var import_icons16 = require("@elementor/icons");
 
 // src/components/fields/color-field.tsx
-var React32 = __toESM(require("react"));
-var import_react19 = require("react");
-var import_ui30 = require("@elementor/ui");
+var React33 = __toESM(require("react"));
+var import_react20 = require("react");
+var import_ui31 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = (0, import_react19.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react19.useState)("");
-  const defaultRef = (0, import_react19.useRef)(null);
+  const [color, setColor] = (0, import_react20.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react20.useState)("");
+  const defaultRef = (0, import_react20.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -2663,8 +2847,8 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
     onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React32.createElement(
-    import_ui30.UnstableColorField,
+  return /* @__PURE__ */ React33.createElement(
+    import_ui31.UnstableColorField,
     {
       id: "color-variable-field",
       size: "tiny",
@@ -2692,21 +2876,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/components/fields/font-field.tsx
-var React33 = __toESM(require("react"));
-var import_react20 = require("react");
+var React34 = __toESM(require("react"));
+var import_react21 = require("react");
 var import_editor_controls12 = require("@elementor/editor-controls");
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
-var import_icons14 = require("@elementor/icons");
-var import_ui31 = require("@elementor/ui");
-var import_i18n23 = require("@wordpress/i18n");
+var import_icons15 = require("@elementor/icons");
+var import_ui32 = require("@elementor/ui");
+var import_i18n24 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = (0, import_react20.useState)(value);
-  const defaultRef = (0, import_react20.useRef)(null);
+  const [fontFamily, setFontFamily] = (0, import_react21.useState)(value);
+  const defaultRef = (0, import_react21.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
-  const fontPopoverState = (0, import_ui31.usePopupState)({ variant: "popover" });
+  const fontPopoverState = (0, import_ui32.usePopupState)({ variant: "popover" });
   const fontFamilies = (0, import_editor_editing_panel7.useFontFamilies)();
   const sectionWidth = (0, import_editor_editing_panel7.useSectionWidth)();
-  const mapFontSubs = React33.useMemo(() => {
+  const mapFontSubs = React34.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -2722,28 +2906,28 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = (0, import_react20.useId)();
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(
-    import_ui31.UnstableTag,
+  const id2 = (0, import_react21.useId)();
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(
+    import_ui32.UnstableTag,
     {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React33.createElement(import_icons14.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui31.bindTrigger)(fontPopoverState),
+      endIcon: /* @__PURE__ */ React34.createElement(import_icons15.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui32.bindTrigger)(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React33.createElement(
-    import_ui31.Popover,
+  ), /* @__PURE__ */ React34.createElement(
+    import_ui32.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef,
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: -28 },
-      ...(0, import_ui31.bindPopover)(fontPopoverState)
+      ...(0, import_ui32.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React34.createElement(
       import_editor_controls12.ItemSelector,
       {
         id: "font-family-variables-selector",
@@ -2752,10 +2936,10 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: (0, import_i18n23.__)("Font Family", "elementor"),
+        title: (0, import_i18n24.__)("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: import_editor_controls12.enqueueFont,
-        icon: import_icons14.TextIcon
+        icon: import_icons15.TextIcon
       }
     )
   ));
@@ -2765,26 +2949,28 @@ var FontField = ({ value, onChange, onValidationChange }) => {
 function registerVariableTypes() {
   registerVariableType({
     valueField: ColorField,
-    icon: import_icons15.BrushIcon,
+    icon: import_icons16.BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props4.colorPropTypeUtil,
     variableType: "color",
-    startIcon: ({ value }) => /* @__PURE__ */ React34.createElement(ColorIndicator, { size: "inherit", component: "span", value })
+    startIcon: ({ value }) => /* @__PURE__ */ React35.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
+    defaultValue: "#ffffff"
   });
   registerVariableType({
     valueField: FontField,
-    icon: import_icons15.TextIcon,
+    icon: import_icons16.TextIcon,
     propTypeUtil: fontVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props4.stringPropTypeUtil,
-    variableType: "font"
+    variableType: "font",
+    defaultValue: "Roboto"
   });
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React35 = __toESM(require("react"));
-var import_react21 = require("react");
+var React36 = __toESM(require("react"));
+var import_react22 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_ui32 = require("@elementor/ui");
+var import_ui33 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -2803,14 +2989,14 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React35.createElement(import_ui32.Portal, { container }, /* @__PURE__ */ React35.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React36.createElement(import_ui33.Portal, { container }, /* @__PURE__ */ React36.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react21.useState)({});
-  (0, import_react21.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react22.useState)({});
+  (0, import_react22.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -2833,22 +3019,22 @@ var import_editor_controls13 = require("@elementor/editor-controls");
 var import_editor_props5 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
-var React36 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React36.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__ */ React36.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React37.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React36.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