@elementor/editor-variables 3.32.0-28 → 3.32.0-29

package/dist/index.mjs

@@ -83,12 +83,12 @@ var usePreventUnload = (isDirty) => {
 };
 
 // src/controls/variable-control.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 
 // src/components/ui/variable/assigned-variable.tsx
 import { useId as useId2, useRef } from "react";
-import * as React16 from "react";
+import * as React17 from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon2 } from "@elementor/icons";
 import { bindPopover, bindTrigger, Box as Box5, Popover, usePopupState } from "@elementor/ui";
@@ -496,7 +496,7 @@ function createVariableTypeRegistry() {
 var { registerVariableType, getVariableType, hasVariableType } = createVariableTypeRegistry();
 
 // src/components/variable-selection-popover.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { useState as useState7 } from "react";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 
@@ -544,7 +544,7 @@ var usePermissions = () => {
 };
 
 // src/components/variable-creation.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { useState as useState3 } from "react";
 import { PopoverContent, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { PopoverBody } from "@elementor/editor-editing-panel";
@@ -696,10 +696,19 @@ var validateValue = (value) => {
 };
 
 // src/components/fields/label-field.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { useId, useState as useState2 } from "react";
-import { FormHelperText, FormLabel, Grid, TextField } from "@elementor/ui";
+import { TextField } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
+
+// src/components/ui/form-field.tsx
+import * as React5 from "react";
+import { FormHelperText, FormLabel, Grid } from "@elementor/ui";
+var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
+  return /* @__PURE__ */ React5.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React5.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React5.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React5.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React5.createElement(FormHelperText, null, noticeMsg)));
+};
+
+// src/components/fields/label-field.tsx
 function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
@@ -728,7 +737,7 @@ var LabelField = ({ value, error, onChange }) => {
     errorMsg = error.message;
   }
   const noticeMsg = errorMsg ? "" : noticeMessage;
-  return /* @__PURE__ */ React5.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React5.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, __5("Name", "elementor"))), /* @__PURE__ */ React5.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(FormField, { id: id2, label: __5("Name", "elementor"), errorMsg, noticeMsg }, /* @__PURE__ */ React6.createElement(
     TextField,
     {
       id: id2,
@@ -739,7 +748,7 @@ var LabelField = ({ value, error, onChange }) => {
       onChange: (e) => handleChange(e.target.value),
       inputProps: { maxLength: VARIABLE_LABEL_MAX_LENGTH }
     }
-  ), errorMsg && /* @__PURE__ */ React5.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React5.createElement(FormHelperText, null, noticeMsg)));
+  ));
 };
 
 // src/components/variable-creation.tsx
@@ -751,11 +760,13 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const [value, setValue] = useState3(initialValue);
   const [label, setLabel] = useState3("");
   const [errorMessage, setErrorMessage] = useState3("");
+  const [valueFieldError, setValueFieldError] = useState3("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
     setLabel("");
     setErrorMessage("");
+    setValueFieldError("");
   };
   const closePopover = () => {
     resetFields();
@@ -794,14 +805,14 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyValue() || hasErrors();
-  return /* @__PURE__ */ React6.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React7.createElement(
     PopoverHeader,
     {
-      icon: /* @__PURE__ */ React6.createElement(React6.Fragment, null, onGoBack && /* @__PURE__ */ React6.createElement(IconButton2, { size: SIZE, "aria-label": __6("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React6.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React6.createElement(VariableIcon, { fontSize: SIZE })),
+      icon: /* @__PURE__ */ React7.createElement(React7.Fragment, null, onGoBack && /* @__PURE__ */ React7.createElement(IconButton2, { size: SIZE, "aria-label": __6("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React7.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React7.createElement(VariableIcon, { fontSize: SIZE })),
       title: __6("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React6.createElement(Divider2, null), /* @__PURE__ */ React6.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(Divider2, null), /* @__PURE__ */ React7.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React7.createElement(
     LabelField,
     {
       value: label,
@@ -811,20 +822,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(FormField, { errorMsg: valueFieldError, label: __6("Value", "elementor") }, /* @__PURE__ */ React7.createElement(
     ValueField,
     {
       value,
       onChange: (newValue) => {
         setValue(newValue);
         setErrorMessage("");
-      }
+        setValueFieldError("");
+      },
+      onValidationChange: setValueFieldError
     }
-  ), errorMessage && /* @__PURE__ */ React6.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React6.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React6.createElement(Button2, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, __6("Create", "elementor"))));
+  )), errorMessage && /* @__PURE__ */ React7.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React7.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React7.createElement(Button2, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, __6("Create", "elementor"))));
 };
 
 // src/components/variable-edit.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { useEffect as useEffect2, useState as useState5 } from "react";
 import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
@@ -835,7 +848,7 @@ import { Button as Button5, CardActions as CardActions2, Divider as Divider3, Fo
 import { __ as __9 } from "@wordpress/i18n";
 
 // src/components/ui/delete-confirmation-dialog.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { AlertOctagonFilledIcon } from "@elementor/icons";
 import {
   Button as Button3,
@@ -854,11 +867,11 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  return /* @__PURE__ */ React7.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React7.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React7.createElement(AlertOctagonFilledIcon, { color: "error" }), __7("Delete this variable?", "elementor")), /* @__PURE__ */ React7.createElement(DialogContent, null, /* @__PURE__ */ React7.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __7("All elements using", "elementor"), /* @__PURE__ */ React7.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __7("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React7.createElement(DialogActions, null, /* @__PURE__ */ React7.createElement(Button3, { color: "secondary", onClick: closeDialog }, __7("Not now", "elementor")), /* @__PURE__ */ React7.createElement(Button3, { variant: "contained", color: "error", onClick: onConfirm }, __7("Delete", "elementor"))));
+  return /* @__PURE__ */ React8.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React8.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React8.createElement(AlertOctagonFilledIcon, { color: "error" }), __7("Delete this variable?", "elementor")), /* @__PURE__ */ React8.createElement(DialogContent, null, /* @__PURE__ */ React8.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __7("All elements using", "elementor"), /* @__PURE__ */ React8.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __7("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React8.createElement(DialogActions, null, /* @__PURE__ */ React8.createElement(Button3, { color: "secondary", onClick: closeDialog }, __7("Not now", "elementor")), /* @__PURE__ */ React8.createElement(Button3, { variant: "contained", color: "error", onClick: onConfirm }, __7("Delete", "elementor"))));
 };
 
 // src/components/ui/edit-confirmation-dialog.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { useState as useState4 } from "react";
 import { AlertTriangleFilledIcon } from "@elementor/icons";
 import {
@@ -886,13 +899,13 @@ var EditConfirmationDialog = ({
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React8.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React8.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React8.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __8("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React8.createElement(DialogContent2, null, /* @__PURE__ */ React8.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __8(
+  return /* @__PURE__ */ React9.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React9.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React9.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __8("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React9.createElement(DialogContent2, null, /* @__PURE__ */ React9.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __8(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React8.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React9.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React9.createElement(
     FormControlLabel,
     {
-      control: /* @__PURE__ */ React8.createElement(
+      control: /* @__PURE__ */ React9.createElement(
         Checkbox,
         {
           checked: dontShowAgain,
@@ -900,9 +913,9 @@ var EditConfirmationDialog = ({
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React8.createElement(Typography3, { variant: "body2" }, __8("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React9.createElement(Typography3, { variant: "body2" }, __8("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(Button4, { color: "secondary", onClick: closeDialog }, __8("Keep editing", "elementor")), /* @__PURE__ */ React8.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __8("Save", "elementor")))));
+  ), /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(Button4, { color: "secondary", onClick: closeDialog }, __8("Keep editing", "elementor")), /* @__PURE__ */ React9.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __8("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
@@ -914,6 +927,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const [deleteConfirmation, setDeleteConfirmation] = useState5(false);
   const [editConfirmation, setEditConfirmation] = useState5(false);
   const [errorMessage, setErrorMessage] = useState5("");
+  const [valueFieldError, setValueFieldError] = useState5("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
   if (!variable) {
@@ -985,7 +999,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React10.createElement(
         IconButton3,
         {
           key: "delete",
@@ -993,7 +1007,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
           "aria-label": __9("Delete", "elementor"),
           onClick: handleDeleteConfirmation
         },
-        /* @__PURE__ */ React9.createElement(TrashIcon, { fontSize: SIZE2 })
+        /* @__PURE__ */ React10.createElement(TrashIcon, { fontSize: SIZE2 })
       )
     );
   }
@@ -1007,23 +1021,23 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyValues() || hasErrors();
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React10.createElement(
     PopoverHeader2,
     {
       title: __9("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(
+      icon: /* @__PURE__ */ React10.createElement(React10.Fragment, null, onGoBack && /* @__PURE__ */ React10.createElement(
         IconButton3,
         {
           size: SIZE2,
           "aria-label": __9("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React9.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })
-      ), /* @__PURE__ */ React9.createElement(VariableIcon, { fontSize: SIZE2 })),
+        /* @__PURE__ */ React10.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })
+      ), /* @__PURE__ */ React10.createElement(VariableIcon, { fontSize: SIZE2 })),
       actions
     }
-  ), /* @__PURE__ */ React9.createElement(Divider3, null), /* @__PURE__ */ React9.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(Divider3, null), /* @__PURE__ */ React10.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React10.createElement(
     LabelField,
     {
       value: label,
@@ -1033,16 +1047,18 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(FormField, { errorMsg: valueFieldError, label: __9("Value", "elementor") }, /* @__PURE__ */ React10.createElement(
     ValueField,
     {
       value,
       onChange: (newValue) => {
         setValue(newValue);
         setErrorMessage("");
-      }
+        setValueFieldError("");
+      },
+      onValidationChange: setValueFieldError
     }
-  ), errorMessage && /* @__PURE__ */ React9.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React9.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React9.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __9("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React9.createElement(
+  )), errorMessage && /* @__PURE__ */ React10.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React10.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React10.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __9("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React10.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1050,7 +1066,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React9.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React10.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -1061,7 +1077,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { useState as useState6 } from "react";
 import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { PopoverBody as PopoverBody3 } from "@elementor/editor-editing-panel";
@@ -1071,7 +1087,7 @@ import { Divider as Divider4, IconButton as IconButton5 } from "@elementor/ui";
 import { __ as __13, sprintf } from "@wordpress/i18n";
 
 // src/components/ui/menu-item-content.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { EllipsisWithTooltip } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
 import { Box as Box3, IconButton as IconButton4, ListItemIcon, Typography as Typography4 } from "@elementor/ui";
@@ -1079,7 +1095,7 @@ import { __ as __10 } from "@wordpress/i18n";
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React11.createElement(
     Box3,
     {
       sx: {
@@ -1090,7 +1106,7 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
       EllipsisWithTooltip,
       {
         title: item.label || item.value,
@@ -1101,7 +1117,7 @@ var MenuItemContent = ({ item }) => {
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React10.createElement(
+    item.secondaryText && /* @__PURE__ */ React11.createElement(
       EllipsisWithTooltip,
       {
         title: item.secondaryText,
@@ -1112,7 +1128,7 @@ var MenuItemContent = ({ item }) => {
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React10.createElement(
+  ), !!onEdit && /* @__PURE__ */ React11.createElement(
     IconButton4,
     {
       sx: { mx: 1, opacity: "0" },
@@ -1122,16 +1138,16 @@ var MenuItemContent = ({ item }) => {
       },
       "aria-label": __10("Edit", "elementor")
     },
-    /* @__PURE__ */ React10.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React11.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { Link, Stack as Stack3, Typography as Typography5 } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Stack3,
     {
       gap: 1,
@@ -1143,18 +1159,18 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React11.createElement(Typography5, { align: "center", variant: "subtitle2" }, __11("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React11.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React11.createElement(Typography5, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __11("Try something else.", "elementor"), /* @__PURE__ */ React11.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __11("Clear & try again", "elementor")))
+    /* @__PURE__ */ React12.createElement(Typography5, { align: "center", variant: "subtitle2" }, __11("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React12.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React12.createElement(Typography5, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __11("Try something else.", "elementor"), /* @__PURE__ */ React12.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __11("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { Button as Button6, Stack as Stack4, Typography as Typography6 } from "@elementor/ui";
 import { __ as __12 } from "@wordpress/i18n";
 var NoVariables = ({ icon, title, onAdd }) => {
   const canAdd = usePermissions().canAdd();
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Stack4,
     {
       gap: 1,
@@ -1165,7 +1181,7 @@ var NoVariables = ({ icon, title, onAdd }) => {
       sx: { p: 2.5, pb: 5.5 }
     },
     icon,
-    canAdd ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+    canAdd ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
       NoVariablesContent,
       {
         title: title || __12("Create your first variable", "elementor"),
@@ -1174,7 +1190,7 @@ var NoVariables = ({ icon, title, onAdd }) => {
           "elementor"
         )
       }
-    ), onAdd && /* @__PURE__ */ React12.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __12("Create a variable", "elementor"))) : /* @__PURE__ */ React12.createElement(
+    ), onAdd && /* @__PURE__ */ React13.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __12("Create a variable", "elementor"))) : /* @__PURE__ */ React13.createElement(
       NoVariablesContent,
       {
         title: __12("There are no variables", "elementor"),
@@ -1184,7 +1200,7 @@ var NoVariables = ({ icon, title, onAdd }) => {
   );
 };
 function NoVariablesContent({ title, message }) {
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Typography6, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React12.createElement(Typography6, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Typography6, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React13.createElement(Typography6, { align: "center", variant: "caption", maxWidth: "180px" }, message));
 }
 
 // src/components/ui/styled-menu-list.tsx
@@ -1250,20 +1266,20 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React13.createElement(IconButton5, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React13.createElement(PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React14.createElement(IconButton5, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React14.createElement(PlusIcon, { fontSize: SIZE4 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React13.createElement(IconButton5, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React13.createElement(SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React14.createElement(IconButton5, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React14.createElement(SettingsIcon, { fontSize: SIZE4 }))
     );
   }
-  const StartIcon = startIcon || (() => /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: SIZE4 }));
+  const StartIcon = startIcon || (() => /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: SIZE4 }));
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React13.createElement(StartIcon, { value }),
+    icon: /* @__PURE__ */ React14.createElement(StartIcon, { value }),
     secondaryText: value,
     onEdit: onEdit ? () => onEdit?.(key) : void 0
   }));
@@ -1278,22 +1294,22 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     __13("Create your first %s variable", "elementor"),
     variableType
   );
-  return /* @__PURE__ */ React13.createElement(PopoverBody3, null, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(PopoverBody3, null, /* @__PURE__ */ React14.createElement(
     PopoverHeader3,
     {
       title: __13("Variables", "elementor"),
-      icon: /* @__PURE__ */ React13.createElement(ColorFilterIcon, { fontSize: SIZE4 }),
+      icon: /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: SIZE4 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React13.createElement(
+  ), hasVariables && /* @__PURE__ */ React14.createElement(
     PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
       placeholder: __13("Search", "elementor")
     }
-  ), /* @__PURE__ */ React13.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React13.createElement(
+  ), /* @__PURE__ */ React14.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React14.createElement(
     PopoverMenuList,
     {
       items,
@@ -1303,16 +1319,16 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       selectedValue: variable,
       "data-testid": `${variableType}-variables-list`,
       menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React13.createElement(MenuItemContent, { item })
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React14.createElement(MenuItemContent, { item })
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React13.createElement(
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React14.createElement(
     NoSearchResults,
     {
       searchValue,
       onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: "large" })
+      icon: /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: "large" })
     }
-  ), !hasVariables && /* @__PURE__ */ React13.createElement(NoVariables, { title: noVariableTitle, icon: /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: "large" }), onAdd }));
+  ), !hasVariables && /* @__PURE__ */ React14.createElement(NoVariables, { title: noVariableTitle, icon: /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: "large" }), onAdd }));
 };
 
 // src/components/variable-selection-popover.tsx
@@ -1326,7 +1342,7 @@ var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable })
   const onSettingsAvailable = isExperimentActive("e_variables_settings") ? () => {
     open();
   } : void 0;
-  return /* @__PURE__ */ React14.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React14.createElement(PopoverContentRefContextProvider, null, RenderView({
+  return /* @__PURE__ */ React15.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React15.createElement(PopoverContentRefContextProvider, null, RenderView({
     propTypeKey,
     currentView,
     selectedVariable,
@@ -1372,7 +1388,7 @@ function RenderView(props) {
     }
   };
   if (VIEW_LIST === props.currentView) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React15.createElement(
       VariablesSelection,
       {
         closePopover: handlers.onClose,
@@ -1383,10 +1399,10 @@ function RenderView(props) {
     );
   }
   if (VIEW_ADD === props.currentView) {
-    return /* @__PURE__ */ React14.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
+    return /* @__PURE__ */ React15.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
   }
   if (VIEW_EDIT === props.currentView) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React15.createElement(
       VariableEdit,
       {
         editId: props.editId,
@@ -1400,7 +1416,7 @@ function RenderView(props) {
 }
 
 // src/components/ui/tags/assigned-tag.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { DetachIcon } from "@elementor/icons";
 import { Box as Box4, IconButton as IconButton6, Stack as Stack5, Tooltip, Typography as Typography7, UnstableTag as Tag } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
@@ -1409,16 +1425,16 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React15.createElement(IconButton6, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": __14("Unlink", "elementor") }, /* @__PURE__ */ React15.createElement(DetachIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React16.createElement(IconButton6, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": __14("Unlink", "elementor") }, /* @__PURE__ */ React16.createElement(DetachIcon, { fontSize: SIZE5 }))
     );
   }
-  return /* @__PURE__ */ React15.createElement(Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React16.createElement(
     Tag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React15.createElement(Stack5, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React15.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React15.createElement(Typography7, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      startIcon: /* @__PURE__ */ React16.createElement(Stack5, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React16.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React16.createElement(Typography7, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -1440,15 +1456,15 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
     setValue(fallbackValue);
   };
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React16.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React17.createElement(
     AssignedTag,
     {
       label: variable.label,
-      startIcon: /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(ColorFilterIcon2, { fontSize: SIZE5 }), /* @__PURE__ */ React16.createElement(StartIcon, { value: variable.value })),
+      startIcon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(ColorFilterIcon2, { fontSize: SIZE5 }), /* @__PURE__ */ React17.createElement(StartIcon, { value: variable.value })),
       onUnlink: unlinkVariable,
       ...bindTrigger(popupState)
     }
-  ), /* @__PURE__ */ React16.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     Popover,
     {
       disableScrollLock: true,
@@ -1460,7 +1476,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
       },
       ...bindPopover(popupState)
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React17.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -1472,13 +1488,13 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/deleted-variable.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import { useId as useId3, useRef as useRef2, useState as useState9 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip, Popover as Popover2, usePopupState as usePopupState2 } from "@elementor/ui";
 
 // src/components/variable-restore.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { useState as useState8 } from "react";
 import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { PopoverBody as PopoverBody4 } from "@elementor/editor-editing-panel";
@@ -1494,6 +1510,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const [errorMessage, setErrorMessage] = useState8("");
+  const [valueFieldError, setValueFieldError] = useState8("");
   const [label, setLabel] = useState8(variable.label);
   const [value, setValue] = useState8(variable.value);
   const { labelFieldError, setLabelFieldError } = useLabelError({
@@ -1527,14 +1544,14 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyValues() || hasErrors();
-  return /* @__PURE__ */ React17.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React17.createElement(PopoverBody4, { height: "auto" }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React18.createElement(PopoverBody4, { height: "auto" }, /* @__PURE__ */ React18.createElement(
     PopoverHeader4,
     {
-      icon: /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE6 }),
+      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE6 }),
       title: __15("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React17.createElement(Divider5, null), /* @__PURE__ */ React17.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React18.createElement(Divider5, null), /* @__PURE__ */ React18.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React18.createElement(
     LabelField,
     {
       value: label,
@@ -1544,35 +1561,37 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React18.createElement(FormField, { errorMsg: valueFieldError, label: __15("Value", "elementor") }, /* @__PURE__ */ React18.createElement(
     ValueField,
     {
       value,
       onChange: (newValue) => {
         setValue(newValue);
         setErrorMessage("");
-      }
+        setValueFieldError("");
+      },
+      onValidationChange: setValueFieldError
     }
-  ), errorMessage && /* @__PURE__ */ React17.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React17.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React17.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __15("Restore", "elementor")))));
+  )), errorMessage && /* @__PURE__ */ React18.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React18.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React18.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __15("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { useSectionWidth } from "@elementor/editor-editing-panel";
 import { Alert as Alert2, AlertAction, AlertTitle, ClickAwayListener } from "@elementor/ui";
 import { __ as __16 } from "@wordpress/i18n";
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
   const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React18.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React19.createElement(
     Alert2,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React18.createElement(React18.Fragment, null, onUnlink && /* @__PURE__ */ React18.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __16("Unlink", "elementor")), onRestore && /* @__PURE__ */ React18.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __16("Restore", "elementor"))),
+      action: /* @__PURE__ */ React19.createElement(React19.Fragment, null, onUnlink && /* @__PURE__ */ React19.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __16("Unlink", "elementor")), onRestore && /* @__PURE__ */ React19.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __16("Restore", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React18.createElement(AlertTitle, null, __16("Deleted variable", "elementor")),
+    /* @__PURE__ */ React19.createElement(AlertTitle, null, __16("Deleted variable", "elementor")),
     __16("The variable", "elementor"),
     " '",
     label,
@@ -1586,12 +1605,12 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 };
 
 // src/components/ui/tags/deleted-tag.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2 } from "@elementor/icons";
 import { Box as Box6, Chip, Tooltip as Tooltip2, Typography as Typography8 } from "@elementor/ui";
 import { __ as __17 } from "@wordpress/i18n";
-var DeletedTag = React19.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React19.createElement(
+var DeletedTag = React20.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React20.createElement(
     Chip,
     {
       ref,
@@ -1600,8 +1619,8 @@ var DeletedTag = React19.forwardRef(({ label, onClick, ...props }, ref) => {
       shape: "rounded",
       variant: "standard",
       onClick,
-      icon: /* @__PURE__ */ React19.createElement(AlertTriangleFilledIcon2, null),
-      label: /* @__PURE__ */ React19.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React19.createElement(Box6, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React19.createElement(Typography8, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React19.createElement(Typography8, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __17("deleted", "elementor"), ")"))),
+      icon: /* @__PURE__ */ React20.createElement(AlertTriangleFilledIcon2, null),
+      label: /* @__PURE__ */ React20.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React20.createElement(Box6, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React20.createElement(Typography8, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React20.createElement(Typography8, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __17("deleted", "elementor"), ")"))),
       sx: {
         height: (theme) => theme.spacing(3.5),
         borderRadius: (theme) => theme.spacing(1),
@@ -1651,7 +1670,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React20.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React21.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React21.createElement(
     Infotip,
     {
       color: "warning",
@@ -1659,7 +1678,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       open: showInfotip,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React20.createElement(
+      content: /* @__PURE__ */ React21.createElement(
         DeletedVariableAlert,
         {
           onClose: closeInfotip,
@@ -1679,8 +1698,8 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
         }
       }
     },
-    /* @__PURE__ */ React20.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
-  ), /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
+  ), /* @__PURE__ */ React21.createElement(
     Popover2,
     {
       disableScrollLock: true,
@@ -1691,7 +1710,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       },
       ...bindPopover2(popupState)
     },
-    /* @__PURE__ */ React20.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React21.createElement(
       VariableRestore,
       {
         variableId: variable.key ?? "",
@@ -1703,29 +1722,29 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/missing-variable.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 import { useState as useState10 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop2, Infotip as Infotip2 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 
 // src/components/ui/missing-variable-alert.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import { useSectionWidth as useSectionWidth2 } from "@elementor/editor-editing-panel";
 import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener2 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
 var MissingVariableAlert = ({ onClose, onClear }) => {
   const sectionWidth = useSectionWidth2();
-  return /* @__PURE__ */ React21.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React22.createElement(
     Alert3,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React21.createElement(React21.Fragment, null, onClear && /* @__PURE__ */ React21.createElement(AlertAction2, { variant: "contained", onClick: onClear }, __18("Clear", "elementor"))),
+      action: /* @__PURE__ */ React22.createElement(React22.Fragment, null, onClear && /* @__PURE__ */ React22.createElement(AlertAction2, { variant: "contained", onClick: onClear }, __18("Clear", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React21.createElement(AlertTitle2, null, __18("This variable is missing", "elementor")),
+    /* @__PURE__ */ React22.createElement(AlertTitle2, null, __18("This variable is missing", "elementor")),
     __18(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
@@ -1734,11 +1753,11 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 };
 
 // src/components/ui/tags/missing-tag.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
 import { Chip as Chip2 } from "@elementor/ui";
-var MissingTag = React22.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React22.createElement(
+var MissingTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React23.createElement(
     Chip2,
     {
       ref,
@@ -1747,7 +1766,7 @@ var MissingTag = React22.forwardRef(({ label, onClick, ...props }, ref) => {
       shape: "rounded",
       variant: "standard",
       onClick,
-      icon: /* @__PURE__ */ React22.createElement(AlertTriangleFilledIcon3, null),
+      icon: /* @__PURE__ */ React23.createElement(AlertTriangleFilledIcon3, null),
       label,
       sx: {
         height: (theme) => theme.spacing(3.5),
@@ -1767,7 +1786,7 @@ var MissingVariable = () => {
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, infotipVisible && /* @__PURE__ */ React23.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, infotipVisible && /* @__PURE__ */ React24.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React24.createElement(
     Infotip2,
     {
       color: "warning",
@@ -1775,7 +1794,7 @@ var MissingVariable = () => {
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React23.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      content: /* @__PURE__ */ React24.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
       slotProps: {
         popper: {
           modifiers: [
@@ -1787,7 +1806,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React23.createElement(MissingTag, { label: __19("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React24.createElement(MissingTag, { label: __19("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -1796,17 +1815,17 @@ var VariableControl = () => {
   const boundProp = useBoundProp10().value;
   const assignedVariable = useVariable(boundProp?.value);
   if (!assignedVariable) {
-    return /* @__PURE__ */ React24.createElement(MissingVariable, null);
+    return /* @__PURE__ */ React25.createElement(MissingVariable, null);
   }
   const { $$type: propTypeKey } = boundProp;
   if (assignedVariable?.deleted) {
-    return /* @__PURE__ */ React24.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
+    return /* @__PURE__ */ React25.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
   }
-  return /* @__PURE__ */ React24.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
+  return /* @__PURE__ */ React25.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
 // src/hooks/use-prop-variable-action.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import { useBoundProp as useBoundProp11 } from "@elementor/editor-editing-panel";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
 import { __ as __20 } from "@wordpress/i18n";
@@ -1822,7 +1841,7 @@ var usePropVariableAction = () => {
         return null;
       }
       trackOpenVariablePopover(path, variable.variableType);
-      return /* @__PURE__ */ React25.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
+      return /* @__PURE__ */ React26.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
@@ -1847,16 +1866,15 @@ var trackOpenVariablePopover = (path, variableType) => {
 };
 
 // src/register-variable-types.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { colorPropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 import { BrushIcon, TextIcon as TextIcon2 } from "@elementor/icons";
 
 // src/components/fields/color-field.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { useRef as useRef3, useState as useState11 } from "react";
-import { FormHelperText as FormHelperText5, FormLabel as FormLabel2, Grid as Grid2, UnstableColorField } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
-var ColorField = ({ value, onChange }) => {
+import { UnstableColorField } from "@elementor/ui";
+var ColorField = ({ value, onChange, onValidationChange }) => {
   const [color, setColor] = useState11(value);
   const [errorMessage, setErrorMessage] = useState11("");
   const defaultRef = useRef3(null);
@@ -1865,16 +1883,17 @@ var ColorField = ({ value, onChange }) => {
     setColor(newValue);
     const errorMsg = validateValue(newValue);
     setErrorMessage(errorMsg);
+    onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React26.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(FormLabel2, { size: "tiny" }, __21("Value", "elementor"))), /* @__PURE__ */ React26.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     UnstableColorField,
     {
       size: "tiny",
       fullWidth: true,
       value: color,
       onChange: handleChange,
-      error: errorMessage ?? void 0,
+      error: errorMessage || void 0,
       slotProps: {
         colorPicker: {
           anchorEl: anchorRef,
@@ -1883,35 +1902,25 @@ var ColorField = ({ value, onChange }) => {
         }
       }
     }
-  ), errorMessage && /* @__PURE__ */ React26.createElement(FormHelperText5, { error: true }, errorMessage)));
+  );
 };
 
 // src/components/fields/font-field.tsx
-import * as React27 from "react";
-import { useRef as useRef4, useState as useState12 } from "react";
+import * as React28 from "react";
+import { useId as useId4, useRef as useRef4, useState as useState12 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector } from "@elementor/editor-controls";
 import { useFontFamilies, useSectionWidth as useSectionWidth3 } from "@elementor/editor-editing-panel";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
-import {
-  bindPopover as bindPopover3,
-  bindTrigger as bindTrigger2,
-  FormHelperText as FormHelperText6,
-  FormLabel as FormLabel3,
-  Grid as Grid3,
-  Popover as Popover3,
-  UnstableTag,
-  usePopupState as usePopupState3
-} from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
-var FontField = ({ value, onChange }) => {
+import { bindPopover as bindPopover3, bindTrigger as bindTrigger2, Popover as Popover3, UnstableTag, usePopupState as usePopupState3 } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
+var FontField = ({ value, onChange, onValidationChange }) => {
   const [fontFamily, setFontFamily] = useState12(value);
-  const [errorMessage, setErrorMessage] = useState12("");
   const defaultRef = useRef4(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = usePopupState3({ variant: "popover" });
   const fontFamilies = useFontFamilies();
   const sectionWidth = useSectionWidth3();
-  const mapFontSubs = React27.useMemo(() => {
+  const mapFontSubs = React28.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -1920,23 +1929,25 @@ var FontField = ({ value, onChange }) => {
   const handleChange = (newValue) => {
     setFontFamily(newValue);
     const errorMsg = validateValue(newValue);
-    setErrorMessage(errorMsg);
+    onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
   const handleFontFamilyChange = (newFontFamily) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  return /* @__PURE__ */ React27.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(FormLabel3, { size: "tiny" }, __22("Value", "elementor"))), /* @__PURE__ */ React27.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+  const id2 = useId4();
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
     UnstableTag,
     {
+      id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React27.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React28.createElement(ChevronDownIcon, { fontSize: "tiny" }),
       ...bindTrigger2(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React27.createElement(
+  ), /* @__PURE__ */ React28.createElement(
     Popover3,
     {
       disablePortal: true,
@@ -1946,7 +1957,7 @@ var FontField = ({ value, onChange }) => {
       transformOrigin: { vertical: "top", horizontal: -28 },
       ...bindPopover3(fontPopoverState)
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(
       ItemSelector,
       {
         itemsList: mapFontSubs,
@@ -1954,13 +1965,13 @@ var FontField = ({ value, onChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: __22("Font Family", "elementor"),
+        title: __21("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: enqueueFont2,
         icon: TextIcon
       }
     )
-  ), errorMessage && /* @__PURE__ */ React27.createElement(FormHelperText6, { error: true }, errorMessage)));
+  ));
 };
 
 // src/register-variable-types.tsx
@@ -1971,7 +1982,7 @@ function registerVariableTypes() {
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: colorPropTypeUtil,
     variableType: "color",
-    startIcon: ({ value }) => /* @__PURE__ */ React28.createElement(ColorIndicator, { size: "inherit", component: "span", value })
+    startIcon: ({ value }) => /* @__PURE__ */ React29.createElement(ColorIndicator, { size: "inherit", component: "span", value })
   });
   registerVariableType({
     valueField: FontField,
@@ -1983,7 +1994,7 @@ function registerVariableTypes() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { useEffect as useEffect3, useState as useState13 } from "react";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
@@ -2005,7 +2016,7 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React29.createElement(Portal, { container }, /* @__PURE__ */ React29.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React30.createElement(Portal, { container }, /* @__PURE__ */ React30.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
@@ -2035,22 +2046,22 @@ import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elemen
 import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 
 // src/components/variables-repeater-item-slot.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React30.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React31.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React30.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React31.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React30.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React31.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 
 // src/repeater-injections.ts