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

package/dist/index.js

@@ -113,15 +113,15 @@ var usePreventUnload = (isDirty) => {
 };
 
 // src/controls/variable-control.tsx
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_editor_controls10 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
 var import_react11 = require("react");
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_icons9 = require("@elementor/icons");
-var import_ui16 = require("@elementor/ui");
+var import_ui17 = require("@elementor/ui");
 
 // src/variables-registry/create-variable-type-registry.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
@@ -526,7 +526,7 @@ function createVariableTypeRegistry() {
 var { registerVariableType, getVariableType, hasVariableType } = createVariableTypeRegistry();
 
 // src/components/variable-selection-popover.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_react10 = require("react");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
@@ -574,13 +574,13 @@ var usePermissions = () => {
 };
 
 // src/components/variable-creation.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_controls3 = require("@elementor/editor-controls");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons2 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
+var import_ui7 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/hooks/use-initial-value.ts
@@ -726,10 +726,19 @@ var validateValue = (value) => {
 };
 
 // src/components/fields/label-field.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_react5 = require("react");
-var import_ui5 = require("@elementor/ui");
+var import_ui6 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
+
+// src/components/ui/form-field.tsx
+var React5 = __toESM(require("react"));
+var import_ui5 = require("@elementor/ui");
+var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
+  return /* @__PURE__ */ React5.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React5.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(import_ui5.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React5.createElement(import_ui5.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React5.createElement(import_ui5.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React5.createElement(import_ui5.FormHelperText, null, noticeMsg)));
+};
+
+// src/components/fields/label-field.tsx
 function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
@@ -758,8 +767,8 @@ var LabelField = ({ value, error, onChange }) => {
     errorMsg = error.message;
   }
   const noticeMsg = errorMsg ? "" : noticeMessage;
-  return /* @__PURE__ */ React5.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React5.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(import_ui5.FormLabel, { htmlFor: id2, size: "tiny" }, (0, import_i18n5.__)("Name", "elementor"))), /* @__PURE__ */ React5.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(
-    import_ui5.TextField,
+  return /* @__PURE__ */ React6.createElement(FormField, { id: id2, label: (0, import_i18n5.__)("Name", "elementor"), errorMsg, noticeMsg }, /* @__PURE__ */ React6.createElement(
+    import_ui6.TextField,
     {
       id: id2,
       size: "tiny",
@@ -769,7 +778,7 @@ var LabelField = ({ value, error, onChange }) => {
       onChange: (e) => handleChange(e.target.value),
       inputProps: { maxLength: VARIABLE_LABEL_MAX_LENGTH }
     }
-  ), errorMsg && /* @__PURE__ */ React5.createElement(import_ui5.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React5.createElement(import_ui5.FormHelperText, null, noticeMsg)));
+  ));
 };
 
 // src/components/variable-creation.tsx
@@ -781,11 +790,13 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const [value, setValue] = (0, import_react6.useState)(initialValue);
   const [label, setLabel] = (0, import_react6.useState)("");
   const [errorMessage, setErrorMessage] = (0, import_react6.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react6.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
     setLabel("");
     setErrorMessage("");
+    setValueFieldError("");
   };
   const closePopover = () => {
     resetFields();
@@ -824,14 +835,14 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyValue() || hasErrors();
-  return /* @__PURE__ */ React6.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React7.createElement(
     import_editor_ui2.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React6.createElement(React6.Fragment, null, onGoBack && /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { size: SIZE, "aria-label": (0, import_i18n6.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React6.createElement(import_icons2.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React6.createElement(VariableIcon, { fontSize: SIZE })),
+      icon: /* @__PURE__ */ React7.createElement(React7.Fragment, null, onGoBack && /* @__PURE__ */ React7.createElement(import_ui7.IconButton, { size: SIZE, "aria-label": (0, import_i18n6.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React7.createElement(import_icons2.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React7.createElement(VariableIcon, { fontSize: SIZE })),
       title: (0, import_i18n6.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(import_ui7.Divider, null), /* @__PURE__ */ React7.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React7.createElement(
     LabelField,
     {
       value: label,
@@ -841,33 +852,35 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n6.__)("Value", "elementor") }, /* @__PURE__ */ React7.createElement(
     ValueField,
     {
       value,
       onChange: (newValue) => {
         setValue(newValue);
         setErrorMessage("");
-      }
+        setValueFieldError("");
+      },
+      onValidationChange: setValueFieldError
     }
-  ), errorMessage && /* @__PURE__ */ React6.createElement(import_ui6.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React6.createElement(import_ui6.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React6.createElement(import_ui6.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n6.__)("Create", "elementor"))));
+  )), errorMessage && /* @__PURE__ */ React7.createElement(import_ui7.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React7.createElement(import_ui7.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React7.createElement(import_ui7.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n6.__)("Create", "elementor"))));
 };
 
 // src/components/variable-edit.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_react8 = require("react");
 var import_editor_controls4 = 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_ui3 = require("@elementor/editor-ui");
 var import_icons5 = require("@elementor/icons");
-var import_ui9 = require("@elementor/ui");
+var import_ui10 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/ui/delete-confirmation-dialog.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_icons3 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
+var import_ui8 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 var TITLE_ID = "delete-variable-dialog";
 var DeleteConfirmationDialog = ({
@@ -876,14 +889,14 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  return /* @__PURE__ */ React7.createElement(import_ui7.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React7.createElement(import_ui7.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React7.createElement(import_icons3.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n7.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React7.createElement(import_ui7.DialogContent, null, /* @__PURE__ */ React7.createElement(import_ui7.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n7.__)("All elements using", "elementor"), /* @__PURE__ */ React7.createElement(import_ui7.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n7.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React7.createElement(import_ui7.DialogActions, null, /* @__PURE__ */ React7.createElement(import_ui7.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n7.__)("Not now", "elementor")), /* @__PURE__ */ React7.createElement(import_ui7.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n7.__)("Delete", "elementor"))));
+  return /* @__PURE__ */ React8.createElement(import_ui8.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React8.createElement(import_ui8.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React8.createElement(import_icons3.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n7.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React8.createElement(import_ui8.DialogContent, null, /* @__PURE__ */ React8.createElement(import_ui8.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n7.__)("All elements using", "elementor"), /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n7.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React8.createElement(import_ui8.DialogActions, null, /* @__PURE__ */ React8.createElement(import_ui8.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n7.__)("Not now", "elementor")), /* @__PURE__ */ React8.createElement(import_ui8.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n7.__)("Delete", "elementor"))));
 };
 
 // src/components/ui/edit-confirmation-dialog.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_react7 = require("react");
 var import_icons4 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
+var import_ui9 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
@@ -898,23 +911,23 @@ var EditConfirmationDialog = ({
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React8.createElement(import_ui8.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React8.createElement(import_ui8.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React8.createElement(import_icons4.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n8.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React8.createElement(import_ui8.DialogContent, null, /* @__PURE__ */ React8.createElement(import_ui8.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n8.__)(
+  return /* @__PURE__ */ React9.createElement(import_ui9.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React9.createElement(import_ui9.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React9.createElement(import_icons4.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n8.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React9.createElement(import_ui9.DialogContent, null, /* @__PURE__ */ React9.createElement(import_ui9.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n8.__)(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React8.createElement(import_ui8.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React8.createElement(
-    import_ui8.FormControlLabel,
+  ))), /* @__PURE__ */ React9.createElement(import_ui9.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React9.createElement(
+    import_ui9.FormControlLabel,
     {
-      control: /* @__PURE__ */ React8.createElement(
-        import_ui8.Checkbox,
+      control: /* @__PURE__ */ React9.createElement(
+        import_ui9.Checkbox,
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "body2" }, (0, import_i18n8.__)("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React9.createElement(import_ui9.Typography, { variant: "body2" }, (0, import_i18n8.__)("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(import_ui8.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n8.__)("Keep editing", "elementor")), /* @__PURE__ */ React8.createElement(import_ui8.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n8.__)("Save", "elementor")))));
+  ), /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(import_ui9.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n8.__)("Keep editing", "elementor")), /* @__PURE__ */ React9.createElement(import_ui9.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n8.__)("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
@@ -926,6 +939,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const [deleteConfirmation, setDeleteConfirmation] = (0, import_react8.useState)(false);
   const [editConfirmation, setEditConfirmation] = (0, import_react8.useState)(false);
   const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react8.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
   if (!variable) {
@@ -997,15 +1011,15 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React9.createElement(
-        import_ui9.IconButton,
+      /* @__PURE__ */ React10.createElement(
+        import_ui10.IconButton,
         {
           key: "delete",
           size: SIZE2,
           "aria-label": (0, import_i18n9.__)("Delete", "elementor"),
           onClick: handleDeleteConfirmation
         },
-        /* @__PURE__ */ React9.createElement(import_icons5.TrashIcon, { fontSize: SIZE2 })
+        /* @__PURE__ */ React10.createElement(import_icons5.TrashIcon, { fontSize: SIZE2 })
       )
     );
   }
@@ -1019,23 +1033,23 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyValues() || hasErrors();
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React10.createElement(
     import_editor_ui3.PopoverHeader,
     {
       title: (0, import_i18n9.__)("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(
-        import_ui9.IconButton,
+      icon: /* @__PURE__ */ React10.createElement(React10.Fragment, null, onGoBack && /* @__PURE__ */ React10.createElement(
+        import_ui10.IconButton,
         {
           size: SIZE2,
           "aria-label": (0, import_i18n9.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React9.createElement(import_icons5.ArrowLeftIcon, { fontSize: SIZE2 })
-      ), /* @__PURE__ */ React9.createElement(VariableIcon, { fontSize: SIZE2 })),
+        /* @__PURE__ */ React10.createElement(import_icons5.ArrowLeftIcon, { fontSize: SIZE2 })
+      ), /* @__PURE__ */ React10.createElement(VariableIcon, { fontSize: SIZE2 })),
       actions
     }
-  ), /* @__PURE__ */ React9.createElement(import_ui9.Divider, null), /* @__PURE__ */ React9.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React10.createElement(
     LabelField,
     {
       value: label,
@@ -1045,16 +1059,18 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n9.__)("Value", "elementor") }, /* @__PURE__ */ React10.createElement(
     ValueField,
     {
       value,
       onChange: (newValue) => {
         setValue(newValue);
         setErrorMessage("");
-      }
+        setValueFieldError("");
+      },
+      onValidationChange: setValueFieldError
     }
-  ), errorMessage && /* @__PURE__ */ React9.createElement(import_ui9.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React9.createElement(import_ui9.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React9.createElement(import_ui9.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n9.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React9.createElement(
+  )), errorMessage && /* @__PURE__ */ React10.createElement(import_ui10.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React10.createElement(import_ui10.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React10.createElement(import_ui10.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n9.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React10.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1062,7 +1078,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React9.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React10.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -1073,26 +1089,26 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_react9 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
-var import_ui14 = require("@elementor/ui");
+var import_ui15 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
-var import_ui10 = require("@elementor/ui");
+var import_ui11 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui10.ListItemIcon, null, item.icon), /* @__PURE__ */ React10.createElement(
-    import_ui10.Box,
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(import_ui11.ListItemIcon, null, item.icon), /* @__PURE__ */ React11.createElement(
+    import_ui11.Box,
     {
       sx: {
         flex: 1,
@@ -1102,30 +1118,30 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
       import_editor_ui4.EllipsisWithTooltip,
       {
         title: item.label || item.value,
-        as: import_ui10.Typography,
+        as: import_ui11.Typography,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React10.createElement(
+    item.secondaryText && /* @__PURE__ */ React11.createElement(
       import_editor_ui4.EllipsisWithTooltip,
       {
         title: item.secondaryText,
-        as: import_ui10.Typography,
+        as: import_ui11.Typography,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React10.createElement(
-    import_ui10.IconButton,
+  ), !!onEdit && /* @__PURE__ */ React11.createElement(
+    import_ui11.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
@@ -1134,17 +1150,17 @@ var MenuItemContent = ({ item }) => {
       },
       "aria-label": (0, import_i18n10.__)("Edit", "elementor")
     },
-    /* @__PURE__ */ React10.createElement(import_icons6.EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React11.createElement(import_icons6.EditIcon, { color: "action", fontSize: SIZE3 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-var React11 = __toESM(require("react"));
-var import_ui11 = require("@elementor/ui");
+var React12 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React11.createElement(
-    import_ui11.Stack,
+  return /* @__PURE__ */ React12.createElement(
+    import_ui12.Stack,
     {
       gap: 1,
       alignItems: "center",
@@ -1155,19 +1171,19 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React11.createElement(import_ui11.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React11.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React11.createElement(import_ui11.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n11.__)("Try something else.", "elementor"), /* @__PURE__ */ React11.createElement(import_ui11.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React12.createElement(import_ui12.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React12.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React12.createElement(import_ui12.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n11.__)("Try something else.", "elementor"), /* @__PURE__ */ React12.createElement(import_ui12.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
-var React12 = __toESM(require("react"));
-var import_ui12 = require("@elementor/ui");
+var React13 = __toESM(require("react"));
+var import_ui13 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
 var NoVariables = ({ icon, title, onAdd }) => {
   const canAdd = usePermissions().canAdd();
-  return /* @__PURE__ */ React12.createElement(
-    import_ui12.Stack,
+  return /* @__PURE__ */ React13.createElement(
+    import_ui13.Stack,
     {
       gap: 1,
       alignItems: "center",
@@ -1177,7 +1193,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 || (0, import_i18n12.__)("Create your first variable", "elementor"),
@@ -1186,7 +1202,7 @@ var NoVariables = ({ icon, title, onAdd }) => {
           "elementor"
         )
       }
-    ), onAdd && /* @__PURE__ */ React12.createElement(import_ui12.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n12.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React12.createElement(
+    ), onAdd && /* @__PURE__ */ React13.createElement(import_ui13.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n12.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React13.createElement(
       NoVariablesContent,
       {
         title: (0, import_i18n12.__)("There are no variables", "elementor"),
@@ -1196,12 +1212,12 @@ var NoVariables = ({ icon, title, onAdd }) => {
   );
 };
 function NoVariablesContent({ title, message }) {
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(import_ui12.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React12.createElement(import_ui12.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(import_ui13.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React13.createElement(import_ui13.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
 }
 
 // src/components/ui/styled-menu-list.tsx
-var import_ui13 = require("@elementor/ui");
-var VariablesStyledMenuList = (0, import_ui13.styled)(import_ui13.MenuList)(({ theme }) => ({
+var import_ui14 = require("@elementor/ui");
+var VariablesStyledMenuList = (0, import_ui14.styled)(import_ui14.MenuList)(({ theme }) => ({
   "& > li": {
     height: 32,
     width: "100%",
@@ -1262,20 +1278,20 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React13.createElement(import_ui14.IconButton, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React13.createElement(import_icons7.PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React14.createElement(import_ui15.IconButton, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React14.createElement(import_icons7.PlusIcon, { fontSize: SIZE4 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React13.createElement(import_ui14.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React13.createElement(import_icons7.SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React14.createElement(import_ui15.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React14.createElement(import_icons7.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
   }));
@@ -1290,22 +1306,22 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     (0, import_i18n13.__)("Create your first %s variable", "elementor"),
     variableType
   );
-  return /* @__PURE__ */ React13.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React14.createElement(
     import_editor_ui5.PopoverHeader,
     {
       title: (0, import_i18n13.__)("Variables", "elementor"),
-      icon: /* @__PURE__ */ React13.createElement(import_icons7.ColorFilterIcon, { fontSize: SIZE4 }),
+      icon: /* @__PURE__ */ React14.createElement(import_icons7.ColorFilterIcon, { fontSize: SIZE4 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React13.createElement(
+  ), hasVariables && /* @__PURE__ */ React14.createElement(
     import_editor_ui5.PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
       placeholder: (0, import_i18n13.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React13.createElement(import_ui14.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React13.createElement(
+  ), /* @__PURE__ */ React14.createElement(import_ui15.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React14.createElement(
     import_editor_ui5.PopoverMenuList,
     {
       items,
@@ -1315,16 +1331,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
@@ -1338,7 +1354,7 @@ var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable })
   const onSettingsAvailable = (0, import_editor_v1_adapters2.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,
@@ -1384,7 +1400,7 @@ function RenderView(props) {
     }
   };
   if (VIEW_LIST === props.currentView) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React15.createElement(
       VariablesSelection,
       {
         closePopover: handlers.onClose,
@@ -1395,10 +1411,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,
@@ -1412,25 +1428,25 @@ function RenderView(props) {
 }
 
 // src/components/ui/tags/assigned-tag.tsx
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
-var import_ui15 = require("@elementor/ui");
+var import_ui16 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
 var SIZE5 = "tiny";
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React15.createElement(import_ui15.IconButton, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": (0, import_i18n14.__)("Unlink", "elementor") }, /* @__PURE__ */ React15.createElement(import_icons8.DetachIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React16.createElement(import_ui16.IconButton, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": (0, import_i18n14.__)("Unlink", "elementor") }, /* @__PURE__ */ React16.createElement(import_icons8.DetachIcon, { fontSize: SIZE5 }))
     );
   }
-  return /* @__PURE__ */ React15.createElement(import_ui15.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React15.createElement(
-    import_ui15.UnstableTag,
+  return /* @__PURE__ */ React16.createElement(import_ui16.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React16.createElement(
+    import_ui16.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React15.createElement(import_ui15.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React15.createElement(import_ui15.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      startIcon: /* @__PURE__ */ React16.createElement(import_ui16.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React16.createElement(import_ui16.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React16.createElement(import_ui16.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -1443,7 +1459,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
   const { setValue } = (0, import_editor_controls6.useBoundProp)();
   const anchorRef = (0, import_react11.useRef)(null);
   const popupId = (0, import_react11.useId)();
-  const popupState = (0, import_ui16.usePopupState)({
+  const popupState = (0, import_ui17.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
@@ -1452,16 +1468,16 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
     setValue(fallbackValue);
   };
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React16.createElement(import_ui16.Box, { ref: anchorRef }, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(import_ui17.Box, { ref: anchorRef }, /* @__PURE__ */ React17.createElement(
     AssignedTag,
     {
       label: variable.label,
-      startIcon: /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE5 }), /* @__PURE__ */ React16.createElement(StartIcon, { value: variable.value })),
+      startIcon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE5 }), /* @__PURE__ */ React17.createElement(StartIcon, { value: variable.value })),
       onUnlink: unlinkVariable,
-      ...(0, import_ui16.bindTrigger)(popupState)
+      ...(0, import_ui17.bindTrigger)(popupState)
     }
-  ), /* @__PURE__ */ React16.createElement(
-    import_ui16.Popover,
+  ), /* @__PURE__ */ React17.createElement(
+    import_ui17.Popover,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
@@ -1470,9 +1486,9 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui16.bindPopover)(popupState)
+      ...(0, import_ui17.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React17.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -1484,18 +1500,18 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/deleted-variable.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_editor_controls8 = require("@elementor/editor-controls");
-var import_ui20 = require("@elementor/ui");
+var import_ui21 = require("@elementor/ui");
 
 // src/components/variable-restore.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_react12 = require("react");
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
-var import_ui17 = require("@elementor/ui");
+var import_ui18 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
@@ -1506,6 +1522,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const [errorMessage, setErrorMessage] = (0, import_react12.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react12.useState)("");
   const [label, setLabel] = (0, import_react12.useState)(variable.label);
   const [value, setValue] = (0, import_react12.useState)(variable.value);
   const { labelFieldError, setLabelFieldError } = useLabelError({
@@ -1539,14 +1556,14 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyValues() || hasErrors();
-  return /* @__PURE__ */ React17.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React17.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React18.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React18.createElement(
     import_editor_ui6.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE6 }),
+      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE6 }),
       title: (0, import_i18n15.__)("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React17.createElement(import_ui17.Divider, null), /* @__PURE__ */ React17.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React18.createElement(import_ui18.Divider, null), /* @__PURE__ */ React18.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React18.createElement(
     LabelField,
     {
       value: label,
@@ -1556,35 +1573,37 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React18.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n15.__)("Value", "elementor") }, /* @__PURE__ */ React18.createElement(
     ValueField,
     {
       value,
       onChange: (newValue) => {
         setValue(newValue);
         setErrorMessage("");
-      }
+        setValueFieldError("");
+      },
+      onValidationChange: setValueFieldError
     }
-  ), errorMessage && /* @__PURE__ */ React17.createElement(import_ui17.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React17.createElement(import_ui17.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React17.createElement(import_ui17.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n15.__)("Restore", "elementor")))));
+  )), errorMessage && /* @__PURE__ */ React18.createElement(import_ui18.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React18.createElement(import_ui18.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React18.createElement(import_ui18.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n15.__)("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
-var import_ui18 = require("@elementor/ui");
+var import_ui19 = require("@elementor/ui");
 var import_i18n16 = require("@wordpress/i18n");
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
   const sectionWidth = (0, import_editor_editing_panel6.useSectionWidth)();
-  return /* @__PURE__ */ React18.createElement(import_ui18.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React18.createElement(
-    import_ui18.Alert,
+  return /* @__PURE__ */ React19.createElement(import_ui19.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React19.createElement(
+    import_ui19.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React18.createElement(React18.Fragment, null, onUnlink && /* @__PURE__ */ React18.createElement(import_ui18.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n16.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React18.createElement(import_ui18.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n16.__)("Restore", "elementor"))),
+      action: /* @__PURE__ */ React19.createElement(React19.Fragment, null, onUnlink && /* @__PURE__ */ React19.createElement(import_ui19.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n16.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React19.createElement(import_ui19.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n16.__)("Restore", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React18.createElement(import_ui18.AlertTitle, null, (0, import_i18n16.__)("Deleted variable", "elementor")),
+    /* @__PURE__ */ React19.createElement(import_ui19.AlertTitle, null, (0, import_i18n16.__)("Deleted variable", "elementor")),
     (0, import_i18n16.__)("The variable", "elementor"),
     " '",
     label,
@@ -1598,13 +1617,13 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 };
 
 // src/components/ui/tags/deleted-tag.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
-var import_ui19 = require("@elementor/ui");
+var import_ui20 = require("@elementor/ui");
 var import_i18n17 = require("@wordpress/i18n");
-var DeletedTag = React19.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React19.createElement(
-    import_ui19.Chip,
+var DeletedTag = React20.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React20.createElement(
+    import_ui20.Chip,
     {
       ref,
       size: "tiny",
@@ -1612,8 +1631,8 @@ var DeletedTag = React19.forwardRef(({ label, onClick, ...props }, ref) => {
       shape: "rounded",
       variant: "standard",
       onClick,
-      icon: /* @__PURE__ */ React19.createElement(import_icons10.AlertTriangleFilledIcon, null),
-      label: /* @__PURE__ */ React19.createElement(import_ui19.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React19.createElement(import_ui19.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React19.createElement(import_ui19.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React19.createElement(import_ui19.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n17.__)("deleted", "elementor"), ")"))),
+      icon: /* @__PURE__ */ React20.createElement(import_icons10.AlertTriangleFilledIcon, null),
+      label: /* @__PURE__ */ React20.createElement(import_ui20.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React20.createElement(import_ui20.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React20.createElement(import_ui20.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React20.createElement(import_ui20.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n17.__)("deleted", "elementor"), ")"))),
       sx: {
         height: (theme) => theme.spacing(3.5),
         borderRadius: (theme) => theme.spacing(1),
@@ -1635,7 +1654,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const closeInfotip = () => setShowInfotip(false);
   const deletedChipAnchorRef = (0, import_react13.useRef)(null);
   const popupId = (0, import_react13.useId)();
-  const popupState = (0, import_ui20.usePopupState)({
+  const popupState = (0, import_ui21.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
   });
@@ -1663,15 +1682,15 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui20.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React20.createElement(import_ui20.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React20.createElement(
-    import_ui20.Infotip,
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui21.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React21.createElement(import_ui21.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React21.createElement(
+    import_ui21.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: showInfotip,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React20.createElement(
+      content: /* @__PURE__ */ React21.createElement(
         DeletedVariableAlert,
         {
           onClose: closeInfotip,
@@ -1691,9 +1710,9 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
         }
       }
     },
-    /* @__PURE__ */ React20.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
-  ), /* @__PURE__ */ React20.createElement(
-    import_ui20.Popover,
+    /* @__PURE__ */ React21.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
+  ), /* @__PURE__ */ React21.createElement(
+    import_ui21.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
@@ -1701,9 +1720,9 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui20.bindPopover)(popupState)
+      ...(0, import_ui21.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React20.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React21.createElement(
       VariableRestore,
       {
         variableId: variable.key ?? "",
@@ -1715,29 +1734,29 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/missing-variable.tsx
-var React23 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var import_react14 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
-var import_ui23 = require("@elementor/ui");
+var import_ui24 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 
 // src/components/ui/missing-variable-alert.tsx
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
-var import_ui21 = require("@elementor/ui");
+var import_ui22 = require("@elementor/ui");
 var import_i18n18 = require("@wordpress/i18n");
 var MissingVariableAlert = ({ onClose, onClear }) => {
   const sectionWidth = (0, import_editor_editing_panel7.useSectionWidth)();
-  return /* @__PURE__ */ React21.createElement(import_ui21.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React21.createElement(
-    import_ui21.Alert,
+  return /* @__PURE__ */ React22.createElement(import_ui22.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React22.createElement(
+    import_ui22.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React21.createElement(React21.Fragment, null, onClear && /* @__PURE__ */ React21.createElement(import_ui21.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n18.__)("Clear", "elementor"))),
+      action: /* @__PURE__ */ React22.createElement(React22.Fragment, null, onClear && /* @__PURE__ */ React22.createElement(import_ui22.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n18.__)("Clear", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React21.createElement(import_ui21.AlertTitle, null, (0, import_i18n18.__)("This variable is missing", "elementor")),
+    /* @__PURE__ */ React22.createElement(import_ui22.AlertTitle, null, (0, import_i18n18.__)("This variable is missing", "elementor")),
     (0, import_i18n18.__)(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
@@ -1746,12 +1765,12 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 };
 
 // src/components/ui/tags/missing-tag.tsx
-var React22 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 var import_icons11 = require("@elementor/icons");
-var import_ui22 = require("@elementor/ui");
-var MissingTag = React22.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React22.createElement(
-    import_ui22.Chip,
+var import_ui23 = require("@elementor/ui");
+var MissingTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React23.createElement(
+    import_ui23.Chip,
     {
       ref,
       size: "tiny",
@@ -1759,7 +1778,7 @@ var MissingTag = React22.forwardRef(({ label, onClick, ...props }, ref) => {
       shape: "rounded",
       variant: "standard",
       onClick,
-      icon: /* @__PURE__ */ React22.createElement(import_icons11.AlertTriangleFilledIcon, null),
+      icon: /* @__PURE__ */ React23.createElement(import_icons11.AlertTriangleFilledIcon, null),
       label,
       sx: {
         height: (theme) => theme.spacing(3.5),
@@ -1779,15 +1798,15 @@ 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(import_ui23.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React23.createElement(
-    import_ui23.Infotip,
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, infotipVisible && /* @__PURE__ */ React24.createElement(import_ui24.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React24.createElement(
+    import_ui24.Infotip,
     {
       color: "warning",
       placement: "right-start",
       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: [
@@ -1799,7 +1818,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React23.createElement(MissingTag, { label: (0, import_i18n19.__)("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React24.createElement(MissingTag, { label: (0, import_i18n19.__)("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -1808,17 +1827,17 @@ var VariableControl = () => {
   const boundProp = (0, import_editor_controls10.useBoundProp)().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
-var React25 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_icons12 = require("@elementor/icons");
 var import_i18n20 = require("@wordpress/i18n");
@@ -1834,7 +1853,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 });
     }
   };
 };
@@ -1859,16 +1878,15 @@ var trackOpenVariablePopover = (path, variableType) => {
 };
 
 // src/register-variable-types.tsx
-var React28 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_editor_props3 = require("@elementor/editor-props");
 var import_icons14 = require("@elementor/icons");
 
 // src/components/fields/color-field.tsx
-var React26 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_react15 = require("react");
-var import_ui24 = require("@elementor/ui");
-var import_i18n21 = require("@wordpress/i18n");
-var ColorField = ({ value, onChange }) => {
+var import_ui25 = require("@elementor/ui");
+var ColorField = ({ value, onChange, onValidationChange }) => {
   const [color, setColor] = (0, import_react15.useState)(value);
   const [errorMessage, setErrorMessage] = (0, import_react15.useState)("");
   const defaultRef = (0, import_react15.useRef)(null);
@@ -1877,16 +1895,17 @@ var ColorField = ({ value, onChange }) => {
     setColor(newValue);
     const errorMsg = validateValue(newValue);
     setErrorMessage(errorMsg);
+    onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React26.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(import_ui24.FormLabel, { size: "tiny" }, (0, import_i18n21.__)("Value", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
-    import_ui24.UnstableColorField,
+  return /* @__PURE__ */ React27.createElement(
+    import_ui25.UnstableColorField,
     {
       size: "tiny",
       fullWidth: true,
       value: color,
       onChange: handleChange,
-      error: errorMessage ?? void 0,
+      error: errorMessage || void 0,
       slotProps: {
         colorPicker: {
           anchorEl: anchorRef,
@@ -1895,26 +1914,25 @@ var ColorField = ({ value, onChange }) => {
         }
       }
     }
-  ), errorMessage && /* @__PURE__ */ React26.createElement(import_ui24.FormHelperText, { error: true }, errorMessage)));
+  );
 };
 
 // src/components/fields/font-field.tsx
-var React27 = __toESM(require("react"));
+var React28 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_editor_controls11 = require("@elementor/editor-controls");
 var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
 var import_icons13 = require("@elementor/icons");
-var import_ui25 = require("@elementor/ui");
-var import_i18n22 = require("@wordpress/i18n");
-var FontField = ({ value, onChange }) => {
+var import_ui26 = require("@elementor/ui");
+var import_i18n21 = require("@wordpress/i18n");
+var FontField = ({ value, onChange, onValidationChange }) => {
   const [fontFamily, setFontFamily] = (0, import_react16.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react16.useState)("");
   const defaultRef = (0, import_react16.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
-  const fontPopoverState = (0, import_ui25.usePopupState)({ variant: "popover" });
+  const fontPopoverState = (0, import_ui26.usePopupState)({ variant: "popover" });
   const fontFamilies = (0, import_editor_editing_panel9.useFontFamilies)();
   const sectionWidth = (0, import_editor_editing_panel9.useSectionWidth)();
-  const mapFontSubs = React27.useMemo(() => {
+  const mapFontSubs = React28.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -1923,33 +1941,35 @@ 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(import_ui25.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui25.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(import_ui25.FormLabel, { size: "tiny" }, (0, import_i18n22.__)("Value", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui25.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
-    import_ui25.UnstableTag,
+  const id2 = (0, import_react16.useId)();
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
+    import_ui26.UnstableTag,
     {
+      id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React27.createElement(import_icons13.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui25.bindTrigger)(fontPopoverState),
+      endIcon: /* @__PURE__ */ React28.createElement(import_icons13.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui26.bindTrigger)(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React27.createElement(
-    import_ui25.Popover,
+  ), /* @__PURE__ */ React28.createElement(
+    import_ui26.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef,
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: -28 },
-      ...(0, import_ui25.bindPopover)(fontPopoverState)
+      ...(0, import_ui26.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(
       import_editor_controls11.ItemSelector,
       {
         itemsList: mapFontSubs,
@@ -1957,13 +1977,13 @@ var FontField = ({ value, onChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: (0, import_i18n22.__)("Font Family", "elementor"),
+        title: (0, import_i18n21.__)("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: import_editor_controls11.enqueueFont,
         icon: import_icons13.TextIcon
       }
     )
-  ), errorMessage && /* @__PURE__ */ React27.createElement(import_ui25.FormHelperText, { error: true }, errorMessage)));
+  ));
 };
 
 // src/register-variable-types.tsx
@@ -1974,7 +1994,7 @@ function registerVariableTypes() {
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props3.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,
@@ -1986,10 +2006,10 @@ function registerVariableTypes() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React29 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var import_react17 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_ui26 = require("@elementor/ui");
+var import_ui27 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -2008,7 +2028,7 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React29.createElement(import_ui26.Portal, { container }, /* @__PURE__ */ React29.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React30.createElement(import_ui27.Portal, { container }, /* @__PURE__ */ React30.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);
@@ -2038,22 +2058,22 @@ var import_editor_controls12 = require("@elementor/editor-controls");
 var import_editor_props4 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
-var React30 = __toESM(require("react"));
+var React31 = __toESM(require("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