@elementor/editor-variables 3.32.0-66 → 3.32.0-67

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { controlActionsMenu, registerControlReplacement } from "@elementor/edito
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 
 // src/components/variables-manager/variables-manager-panel.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { useEffect } from "react";
 import {
   __createPanel as createPanel,
@@ -18,7 +18,7 @@ import { ThemeProvider } from "@elementor/editor-ui";
 import { changeEditMode } from "@elementor/editor-v1-adapters";
 import { ColorFilterIcon, TrashIcon, XIcon } from "@elementor/icons";
 import { Alert, Box, Button, Divider, ErrorBoundary, IconButton as IconButton3, Stack as Stack4 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/hooks/use-prop-variables.ts
 import { useMemo } from "react";
@@ -520,8 +520,8 @@ var restoreVariable = (restoreId, label, value) => {
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
-import * as React6 from "react";
-import { createElement as createElement8, useState as useState2 } from "react";
+import * as React7 from "react";
+import { createElement as createElement9, useState as useState3 } from "react";
 import { EllipsisWithTooltip } from "@elementor/editor-ui";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
@@ -532,22 +532,126 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  TextField,
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+
+// src/components/fields/label-field.tsx
+import * as React3 from "react";
+import { useState } from "react";
+import { TextField } from "@elementor/ui";
+
+// src/utils/validations.ts
 import { __ as __3 } from "@wordpress/i18n";
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: __3("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: __3("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: __3("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: __3("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: __3("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: __3("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: __3("There was a glitch. Try saving your variable again.", "elementor")
+};
+var VARIABLE_LABEL_MAX_LENGTH = 50;
+var mapServerError = (error) => {
+  if (error?.response?.data?.code === "duplicated_label") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.DUPLICATED_LABEL
+    };
+  }
+  return void 0;
+};
+var validateLabel = (name) => {
+  if (!name.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
+  }
+  const allowedChars = /^[a-zA-Z0-9_-]+$/;
+  if (!allowedChars.test(name)) {
+    return ERROR_MESSAGES.INVALID_CHARACTERS;
+  }
+  const hasAlphanumeric = /[a-zA-Z0-9]/;
+  if (!hasAlphanumeric.test(name)) {
+    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
+  }
+  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  return "";
+};
+var labelHint = (name) => {
+  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+  if (hintThreshold < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  return "";
+};
+var validateValue = (value) => {
+  if (!value.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+  }
+  return "";
+};
+
+// src/components/fields/label-field.tsx
+function isLabelEqual(a, b) {
+  return a.trim().toLowerCase() === b.trim().toLowerCase();
+}
+var useLabelError = (initialError) => {
+  const [error, setError] = useState(initialError ?? { value: "", message: "" });
+  return {
+    labelFieldError: error,
+    setLabelFieldError: setError
+  };
+};
+var LabelField = ({
+  value,
+  error,
+  onChange,
+  id: id2,
+  onErrorChange,
+  size = "tiny",
+  focusOnShow = false
+}) => {
+  const [label, setLabel] = useState(value);
+  const [errorMessage, setErrorMessage] = useState("");
+  const handleChange = (newValue) => {
+    setLabel(newValue);
+    const errorMsg2 = validateLabel(newValue);
+    setErrorMessage(errorMsg2);
+    onErrorChange?.(errorMsg2);
+    onChange(isLabelEqual(newValue, error?.value ?? "") || errorMsg2 ? "" : newValue);
+  };
+  let errorMsg = errorMessage;
+  if (isLabelEqual(label, error?.value ?? "") && error?.message) {
+    errorMsg = error.message;
+  }
+  return /* @__PURE__ */ React3.createElement(
+    TextField,
+    {
+      id: id2,
+      size,
+      fullWidth: true,
+      value: label,
+      error: !!errorMsg,
+      onChange: (e) => handleChange(e.target.value),
+      inputProps: { maxLength: VARIABLE_LABEL_MAX_LENGTH },
+      autoFocus: focusOnShow
+    }
+  );
+};
 
 // src/components/variables-manager/variable-edit-menu.tsx
-import * as React3 from "react";
-import { createElement as createElement4 } from "react";
+import * as React4 from "react";
+import { createElement as createElement5 } from "react";
 import { DotsVerticalIcon } from "@elementor/icons";
 import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, usePopupState } from "@elementor/ui";
 var VariableEditMenu = ({ menuActions, disabled }) => {
   const menuState = usePopupState({
     variant: "popover"
   });
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(IconButton, { ...bindTrigger(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React3.createElement(DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(IconButton, { ...bindTrigger(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React4.createElement(DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React4.createElement(
     Menu,
     {
       disablePortal: true,
@@ -570,7 +674,7 @@ var VariableEditMenu = ({ menuActions, disabled }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuActions.map((action) => /* @__PURE__ */ React3.createElement(
+    menuActions.map((action) => /* @__PURE__ */ React4.createElement(
       MenuItem,
       {
         key: action.name,
@@ -583,7 +687,7 @@ var VariableEditMenu = ({ menuActions, disabled }) => {
           gap: 1
         }
       },
-      action.icon && createElement4(action.icon, {
+      action.icon && createElement5(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -593,19 +697,18 @@ var VariableEditMenu = ({ menuActions, disabled }) => {
 };
 
 // src/components/variables-manager/variable-editable-cell.tsx
-import * as React4 from "react";
-import { useState } from "react";
+import * as React5 from "react";
+import { useState as useState2 } from "react";
 import { ClickAwayListener, Stack as Stack2 } from "@elementor/ui";
 var VariableEditableCell = ({
   initialValue,
   children,
   editableElement,
   onSave,
-  prefixElement,
-  disableCloseOnBlur
+  prefixElement
 }) => {
-  const [value, setValue] = useState(initialValue);
-  const [isEditing, setIsEditing] = useState(false);
+  const [value, setValue] = useState2(initialValue);
+  const [isEditing, setIsEditing] = useState2(false);
   const handleDoubleClick = () => {
     setIsEditing(true);
   };
@@ -628,14 +731,13 @@ var VariableEditableCell = ({
     setValue(newValue);
   };
   const editableContent = editableElement({ value, onChange: handleChange });
-  return /* @__PURE__ */ React4.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React5.createElement(
     Stack2,
     {
       direction: "row",
       alignItems: "center",
       gap: 1,
       onDoubleClick: handleDoubleClick,
-      onBlur: disableCloseOnBlur ? void 0 : handleSave,
       onKeyDown: handleKeyDown,
       tabIndex: 0,
       role: "button",
@@ -647,7 +749,7 @@ var VariableEditableCell = ({
 };
 
 // src/components/variables-manager/variable-table-cell.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { TableCell } from "@elementor/ui";
 var VariableTableCell = ({
   children,
@@ -663,15 +765,16 @@ var VariableTableCell = ({
     cursor: "initial",
     typography: "caption",
     ...isHeader && { color: "text.primary", fontWeight: "bold" },
+    ...isHeader && !noPadding && { padding: "10px 16px" },
     ...width && { width },
     ...sx
   };
-  return /* @__PURE__ */ React5.createElement(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+  return /* @__PURE__ */ React6.createElement(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
 var VariablesManagerTable = ({ menuActions, variables }) => {
-  const [ids, setIds] = useState2(Object.keys(variables));
+  const [ids, setIds] = useState3(Object.keys(variables));
   const rows = ids.map((id2) => {
     const variable = variables[id2];
     const variableType = getVariableType(variable.type);
@@ -687,16 +790,16 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
     minWidth: 250,
     tableLayout: "fixed"
   };
-  return /* @__PURE__ */ React6.createElement(TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React6.createElement(Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering" }, /* @__PURE__ */ React6.createElement(TableHead, null, /* @__PURE__ */ React6.createElement(TableRow, null, /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true }, __3("Name", "elementor")), /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true }, __3("Value", "elementor")), /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React6.createElement(TableBody, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React7.createElement(Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React7.createElement(TableHead, null, /* @__PURE__ */ React7.createElement(TableRow, null, /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true }, __4("Name", "elementor")), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true }, __4("Value", "elementor")), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React7.createElement(TableBody, null, /* @__PURE__ */ React7.createElement(
     UnstableSortableProvider,
     {
       value: ids,
       onChange: setIds,
       variant: "static",
       restrictAxis: true,
-      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React6.createElement(Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React6.createElement(TableBody, null, dragOverlayChildren))
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React7.createElement(Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React7.createElement(TableBody, null, dragOverlayChildren))
     },
-    rows.map((row) => /* @__PURE__ */ React6.createElement(
+    rows.map((row) => /* @__PURE__ */ React7.createElement(
       UnstableSortableItem,
       {
         key: row.id,
@@ -716,7 +819,7 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
         }) => {
           const showIndicationBefore = showDropIndication && dropPosition === "before";
           const showIndicationAfter = showDropIndication && dropPosition === "after";
-          return /* @__PURE__ */ React6.createElement(
+          return /* @__PURE__ */ React7.createElement(
             TableRow,
             {
               ...itemProps,
@@ -747,7 +850,7 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
               style: { ...itemStyle, ...triggerStyle },
               disableDivider: isDragOverlay || index === rows.length - 1
             },
-            /* @__PURE__ */ React6.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React6.createElement(
+            /* @__PURE__ */ React7.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React7.createElement(
               IconButton2,
               {
                 size: "small",
@@ -756,39 +859,54 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
                 disabled: isSorting,
                 draggable: true
               },
-              /* @__PURE__ */ React6.createElement(GripVerticalIcon, { fontSize: "inherit" })
+              /* @__PURE__ */ React7.createElement(GripVerticalIcon, { fontSize: "inherit" })
             )),
-            /* @__PURE__ */ React6.createElement(VariableTableCell, null, /* @__PURE__ */ React6.createElement(
+            /* @__PURE__ */ React7.createElement(VariableTableCell, null, /* @__PURE__ */ React7.createElement(
               VariableEditableCell,
               {
                 initialValue: row.name,
                 onSave: () => {
                 },
-                prefixElement: createElement8(row.icon, { fontSize: "inherit" }),
-                editableElement: ({ value, onChange }) => /* @__PURE__ */ React6.createElement(
-                  TextField,
+                prefixElement: createElement9(row.icon, { fontSize: "inherit" }),
+                editableElement: ({ value, onChange }) => /* @__PURE__ */ React7.createElement(
+                  LabelField,
                   {
+                    id: "variable-label-" + row.id,
                     size: "tiny",
                     value,
-                    onChange: (event) => onChange(event.target.value)
+                    onChange,
+                    focusOnShow: true
                   }
                 )
               },
-              /* @__PURE__ */ React6.createElement(EllipsisWithTooltip, { title: row.name }, row.name)
+              /* @__PURE__ */ React7.createElement(
+                EllipsisWithTooltip,
+                {
+                  title: row.name,
+                  sx: { border: "4px solid transparent" }
+                },
+                row.name
+              )
             )),
-            /* @__PURE__ */ React6.createElement(VariableTableCell, null, /* @__PURE__ */ React6.createElement(
+            /* @__PURE__ */ React7.createElement(VariableTableCell, null, /* @__PURE__ */ React7.createElement(
               VariableEditableCell,
               {
                 initialValue: row.value,
                 onSave: () => {
                 },
-                editableElement: row.valueField,
-                disableCloseOnBlur: true
+                editableElement: row.valueField
               },
               row.startIcon && row.startIcon({ value: row.value }),
-              /* @__PURE__ */ React6.createElement(EllipsisWithTooltip, { title: row.value }, row.value)
+              /* @__PURE__ */ React7.createElement(
+                EllipsisWithTooltip,
+                {
+                  title: row.value,
+                  sx: { border: "4px solid transparent" }
+                },
+                row.value
+              )
             )),
-            /* @__PURE__ */ React6.createElement(
+            /* @__PURE__ */ React7.createElement(
               VariableTableCell,
               {
                 align: "right",
@@ -797,7 +915,7 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
                 maxWidth: 16,
                 sx: { paddingInlineEnd: 1 }
               },
-              /* @__PURE__ */ React6.createElement(Stack3, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React6.createElement(
+              /* @__PURE__ */ React7.createElement(Stack3, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React7.createElement(
                 VariableEditMenu,
                 {
                   menuActions,
@@ -832,14 +950,14 @@ function VariablesManagerPanel() {
   usePreventUnload(isDirty);
   const menuActions = [
     {
-      name: __4("Delete", "elementor"),
+      name: __5("Delete", "elementor"),
       icon: TrashIcon,
       color: "error.main",
       onClick: () => {
       }
     }
   ];
-  return /* @__PURE__ */ React7.createElement(ThemeProvider, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(PanelHeader, null, /* @__PURE__ */ React7.createElement(Stack4, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(Stack4, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(ColorFilterIcon, { fontSize: "inherit" }), __4("Variable Manager", "elementor"))), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(ThemeProvider, null, /* @__PURE__ */ React8.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(Panel, null, /* @__PURE__ */ React8.createElement(PanelHeader, null, /* @__PURE__ */ React8.createElement(Stack4, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React8.createElement(Stack4, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React8.createElement(Stack4, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React8.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(ColorFilterIcon, { fontSize: "inherit" }), __5("Variable Manager", "elementor"))), /* @__PURE__ */ React8.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -847,7 +965,7 @@ function VariablesManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React8.createElement(Divider, { sx: { width: "100%" } }))), /* @__PURE__ */ React8.createElement(
     PanelBody,
     {
       sx: {
@@ -856,12 +974,11 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React7.createElement(Divider, null),
-    /* @__PURE__ */ React7.createElement(VariablesManagerTable, { menuActions, variables })
-  ), /* @__PURE__ */ React7.createElement(PanelFooter, null, /* @__PURE__ */ React7.createElement(Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, __4("Save changes", "elementor"))))));
+    /* @__PURE__ */ React8.createElement(VariablesManagerTable, { menuActions, variables })
+  ), /* @__PURE__ */ React8.createElement(PanelFooter, null, /* @__PURE__ */ React8.createElement(Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, __5("Save changes", "elementor"))))));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(IconButton3, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, __4("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React8.createElement(IconButton3, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React8.createElement(XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, __5("Something went wrong", "elementor"))));
 var usePreventUnload = (isDirty) => {
   useEffect(() => {
     const handleBeforeUnload = (event) => {
@@ -881,7 +998,7 @@ import * as React32 from "react";
 import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 
 // src/components/ui/variable/assigned-variable.tsx
-import { useId as useId2, useRef } from "react";
+import { useId, useRef } from "react";
 import * as React21 from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
@@ -909,13 +1026,13 @@ import { useState as useState9 } from "react";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 
 // src/context/variable-selection-popover.context.tsx
-import * as React8 from "react";
-import { createContext as createContext2, useContext as useContext2, useState as useState3 } from "react";
+import * as React9 from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState4 } from "react";
 import { Box as Box2 } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = useState3(null);
-  return /* @__PURE__ */ React8.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React8.createElement(Box2, { ref: setAnchorRef }, children));
+  const [anchorRef, setAnchorRef] = useState4(null);
+  return /* @__PURE__ */ React9.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React9.createElement(Box2, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
   return useContext2(PopoverContentRefContext);
@@ -943,8 +1060,8 @@ import { PopoverContent, useBoundProp as useBoundProp3 } from "@elementor/editor
 import { PopoverBody } from "@elementor/editor-editing-panel";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { ArrowLeftIcon } from "@elementor/icons";
-import { Button as Button2, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton4 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { Button as Button2, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton4, Typography as Typography2 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/hooks/use-initial-value.ts
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
@@ -976,112 +1093,11 @@ var trackVariableEvent = ({ varType, controlPath, action }) => {
   });
 };
 
-// src/utils/validations.ts
-import { __ as __5 } from "@wordpress/i18n";
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: __5("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: __5("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: __5("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: __5("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: __5("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: __5("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: __5("There was a glitch. Try saving your variable again.", "elementor")
-};
-var VARIABLE_LABEL_MAX_LENGTH = 50;
-var mapServerError = (error) => {
-  if (error?.response?.data?.code === "duplicated_label") {
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.DUPLICATED_LABEL
-    };
-  }
-  return void 0;
-};
-var validateLabel = (name) => {
-  if (!name.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
-  }
-  const allowedChars = /^[a-zA-Z0-9_-]+$/;
-  if (!allowedChars.test(name)) {
-    return ERROR_MESSAGES.INVALID_CHARACTERS;
-  }
-  const hasAlphanumeric = /[a-zA-Z0-9]/;
-  if (!hasAlphanumeric.test(name)) {
-    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
-  }
-  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  return "";
-};
-var labelHint = (name) => {
-  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
-  if (hintThreshold < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  return "";
-};
-var validateValue = (value) => {
-  if (!value.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
-  }
-  return "";
-};
-
-// src/components/fields/label-field.tsx
-import * as React10 from "react";
-import { useId, useState as useState4 } from "react";
-import { TextField as TextField2 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
-
 // src/components/ui/form-field.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { FormHelperText, FormLabel, Grid } from "@elementor/ui";
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React9.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React9.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React9.createElement(FormHelperText, null, noticeMsg)));
-};
-
-// src/components/fields/label-field.tsx
-function isLabelEqual(a, b) {
-  return a.trim().toLowerCase() === b.trim().toLowerCase();
-}
-var useLabelError = (initialError) => {
-  const [error, setError] = useState4(initialError ?? { value: "", message: "" });
-  return {
-    labelFieldError: error,
-    setLabelFieldError: setError
-  };
-};
-var LabelField = ({ value, error, onChange }) => {
-  const [label, setLabel] = useState4(value);
-  const [errorMessage, setErrorMessage] = useState4("");
-  const [noticeMessage, setNoticeMessage] = useState4(() => labelHint(value));
-  const handleChange = (newValue) => {
-    setLabel(newValue);
-    const errorMsg2 = validateLabel(newValue);
-    const hintMsg = labelHint(newValue);
-    setErrorMessage(errorMsg2);
-    setNoticeMessage(errorMsg2 ? "" : hintMsg);
-    onChange(isLabelEqual(newValue, error?.value ?? "") || errorMsg2 ? "" : newValue);
-  };
-  const id2 = useId();
-  let errorMsg = errorMessage;
-  if (isLabelEqual(label, error?.value ?? "") && error?.message) {
-    errorMsg = error.message;
-  }
-  const noticeMsg = errorMsg ? "" : noticeMessage;
-  return /* @__PURE__ */ React10.createElement(FormField, { id: id2, label: __6("Name", "elementor"), errorMsg, noticeMsg }, /* @__PURE__ */ React10.createElement(
-    TextField2,
-    {
-      id: id2,
-      size: "tiny",
-      fullWidth: true,
-      value: label,
-      error: !!errorMsg,
-      onChange: (e) => handleChange(e.target.value),
-      inputProps: { maxLength: VARIABLE_LABEL_MAX_LENGTH }
-    }
-  ));
+  return /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React10.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React10.createElement(FormHelperText, null, noticeMsg)));
 };
 
 // src/components/variable-creation.tsx
@@ -1148,21 +1164,37 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   return /* @__PURE__ */ React11.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React11.createElement(
     PopoverHeader,
     {
-      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(IconButton4, { size: SIZE, "aria-label": __7("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React11.createElement(VariableIcon, { fontSize: SIZE })),
-      title: __7("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(IconButton4, { size: SIZE, "aria-label": __6("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React11.createElement(VariableIcon, { fontSize: SIZE })),
+      title: __6("Create variable", "elementor"),
       onClose: closePopover
     }
   ), /* @__PURE__ */ React11.createElement(Divider2, null), /* @__PURE__ */ React11.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React11.createElement(
-    LabelField,
+    FormField,
     {
-      value: label,
-      error: labelFieldError,
-      onChange: (newValue) => {
-        setLabel(newValue);
-        setErrorMessage("");
+      id: "variable-label",
+      label: __6("Name", "elementor"),
+      errorMsg: labelFieldError?.message,
+      noticeMsg: labelHint(label)
+    },
+    /* @__PURE__ */ React11.createElement(
+      LabelField,
+      {
+        id: "variable-label",
+        value: label,
+        error: labelFieldError,
+        onChange: (newValue) => {
+          setLabel(newValue);
+          setErrorMessage("");
+        },
+        onErrorChange: (errorMsg) => {
+          setLabelFieldError({
+            value: label,
+            message: errorMsg
+          });
+        }
       }
-    }
-  ), /* @__PURE__ */ React11.createElement(FormField, { errorMsg: valueFieldError, label: __7("Value", "elementor") }, /* @__PURE__ */ React11.createElement(
+    )
+  ), /* @__PURE__ */ React11.createElement(FormField, { errorMsg: valueFieldError, label: __6("Value", "elementor") }, /* @__PURE__ */ React11.createElement(Typography2, { variant: "h5" }, /* @__PURE__ */ React11.createElement(
     ValueField,
     {
       value,
@@ -1174,7 +1206,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  )), errorMessage && /* @__PURE__ */ React11.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React11.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(Button2, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, __7("Create", "elementor"))));
+  ))), errorMessage && /* @__PURE__ */ React11.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React11.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(Button2, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, __6("Create", "elementor"))));
 };
 
 // src/components/variable-edit.tsx
@@ -1185,8 +1217,8 @@ import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { PopoverBody as PopoverBody2 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
 import { ArrowLeftIcon as ArrowLeftIcon2, TrashIcon as TrashIcon2 } from "@elementor/icons";
-import { Button as Button5, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { Button as Button5, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5, Typography as Typography5 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/components/ui/delete-confirmation-dialog.tsx
 import * as React12 from "react";
@@ -1198,9 +1230,9 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
-  Typography as Typography2
+  Typography as Typography3
 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 var TITLE_ID = "delete-variable-dialog";
 var DeleteConfirmationDialog = ({
   open,
@@ -1208,7 +1240,7 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  return /* @__PURE__ */ React12.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React12.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React12.createElement(AlertOctagonFilledIcon, { color: "error" }), __8("Delete this variable?", "elementor")), /* @__PURE__ */ React12.createElement(DialogContent, null, /* @__PURE__ */ React12.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __8("All elements using", "elementor"), /* @__PURE__ */ React12.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __8("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React12.createElement(DialogActions, null, /* @__PURE__ */ React12.createElement(Button3, { color: "secondary", onClick: closeDialog }, __8("Not now", "elementor")), /* @__PURE__ */ React12.createElement(Button3, { variant: "contained", color: "error", onClick: onConfirm }, __8("Delete", "elementor"))));
+  return /* @__PURE__ */ React12.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React12.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React12.createElement(AlertOctagonFilledIcon, { color: "error" }), __7("Delete this variable?", "elementor")), /* @__PURE__ */ React12.createElement(DialogContent, null, /* @__PURE__ */ React12.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __7("All elements using", "elementor"), /* @__PURE__ */ React12.createElement(Typography3, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __7("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React12.createElement(DialogActions, null, /* @__PURE__ */ React12.createElement(Button3, { color: "secondary", onClick: closeDialog }, __7("Not now", "elementor")), /* @__PURE__ */ React12.createElement(Button3, { variant: "contained", color: "error", onClick: onConfirm }, __7("Delete", "elementor"))));
 };
 
 // src/components/ui/edit-confirmation-dialog.tsx
@@ -1224,9 +1256,9 @@ import {
   DialogContentText as DialogContentText2,
   DialogTitle as DialogTitle2,
   FormControlLabel,
-  Typography as Typography3
+  Typography as Typography4
 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
@@ -1240,7 +1272,7 @@ var EditConfirmationDialog = ({
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React13.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React13.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __9("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React13.createElement(DialogContent2, null, /* @__PURE__ */ React13.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __9(
+  return /* @__PURE__ */ React13.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React13.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __8("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React13.createElement(DialogContent2, null, /* @__PURE__ */ React13.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __8(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
   ))), /* @__PURE__ */ React13.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React13.createElement(
@@ -1254,9 +1286,9 @@ var EditConfirmationDialog = ({
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React13.createElement(Typography3, { variant: "body2" }, __9("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React13.createElement(Typography4, { variant: "body2" }, __8("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(Button4, { color: "secondary", onClick: closeDialog }, __9("Keep editing", "elementor")), /* @__PURE__ */ React13.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __9("Save", "elementor")))));
+  ), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(Button4, { color: "secondary", onClick: closeDialog }, __8("Keep editing", "elementor")), /* @__PURE__ */ React13.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __8("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
@@ -1346,7 +1378,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         {
           key: "delete",
           size: SIZE2,
-          "aria-label": __10("Delete", "elementor"),
+          "aria-label": __9("Delete", "elementor"),
           onClick: handleDeleteConfirmation
         },
         /* @__PURE__ */ React14.createElement(TrashIcon2, { fontSize: SIZE2 })
@@ -1372,13 +1404,13 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React14.createElement(
     PopoverHeader2,
     {
-      title: __10("Edit variable", "elementor"),
+      title: __9("Edit variable", "elementor"),
       onClose,
       icon: /* @__PURE__ */ React14.createElement(React14.Fragment, null, onGoBack && /* @__PURE__ */ React14.createElement(
         IconButton5,
         {
           size: SIZE2,
-          "aria-label": __10("Go Back", "elementor"),
+          "aria-label": __9("Go Back", "elementor"),
           onClick: onGoBack
         },
         /* @__PURE__ */ React14.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })
@@ -1386,16 +1418,32 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       actions
     }
   ), /* @__PURE__ */ React14.createElement(Divider3, null), /* @__PURE__ */ React14.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React14.createElement(
-    LabelField,
+    FormField,
     {
-      value: label,
-      error: labelFieldError,
-      onChange: (newValue) => {
-        setLabel(newValue);
-        setErrorMessage("");
+      id: "variable-label",
+      label: __9("Name", "elementor"),
+      errorMsg: labelFieldError?.message,
+      noticeMsg: labelHint(label)
+    },
+    /* @__PURE__ */ React14.createElement(
+      LabelField,
+      {
+        id: "variable-label",
+        value: label,
+        error: labelFieldError,
+        onChange: (newValue) => {
+          setLabel(newValue);
+          setErrorMessage("");
+        },
+        onErrorChange: (errorMsg) => {
+          setLabelFieldError({
+            value: label,
+            message: errorMsg
+          });
+        }
       }
-    }
-  ), /* @__PURE__ */ React14.createElement(FormField, { errorMsg: valueFieldError, label: __10("Value", "elementor") }, /* @__PURE__ */ React14.createElement(
+    )
+  ), /* @__PURE__ */ React14.createElement(FormField, { errorMsg: valueFieldError, label: __9("Value", "elementor") }, /* @__PURE__ */ React14.createElement(Typography5, { variant: "h5" }, /* @__PURE__ */ React14.createElement(
     ValueField,
     {
       value,
@@ -1407,7 +1455,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  )), errorMessage && /* @__PURE__ */ React14.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React14.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React14.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __10("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
+  ))), errorMessage && /* @__PURE__ */ React14.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React14.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React14.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __9("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1433,14 +1481,14 @@ import { PopoverBody as PopoverBody3 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader3, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
 import { ColorFilterIcon as ColorFilterIcon2, PlusIcon, SettingsIcon } from "@elementor/icons";
 import { Divider as Divider4, IconButton as IconButton7 } from "@elementor/ui";
-import { __ as __14, sprintf } from "@wordpress/i18n";
+import { __ as __13, sprintf } from "@wordpress/i18n";
 
 // src/components/ui/menu-item-content.tsx
 import * as React15 from "react";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
-import { Box as Box3, IconButton as IconButton6, ListItemIcon, Typography as Typography4 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { Box as Box3, IconButton as IconButton6, ListItemIcon, Typography as Typography6 } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
@@ -1459,7 +1507,7 @@ var MenuItemContent = ({ item }) => {
       EllipsisWithTooltip2,
       {
         title: item.label || item.value,
-        as: Typography4,
+        as: Typography6,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
@@ -1470,7 +1518,7 @@ var MenuItemContent = ({ item }) => {
       EllipsisWithTooltip2,
       {
         title: item.secondaryText,
-        as: Typography4,
+        as: Typography6,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
@@ -1485,7 +1533,7 @@ var MenuItemContent = ({ item }) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": __11("Edit", "elementor")
+      "aria-label": __10("Edit", "elementor")
     },
     /* @__PURE__ */ React15.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
   ));
@@ -1493,8 +1541,8 @@ var MenuItemContent = ({ item }) => {
 
 // src/components/ui/no-search-results.tsx
 import * as React16 from "react";
-import { Link, Stack as Stack5, Typography as Typography5 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { Link, Stack as Stack5, Typography as Typography7 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
   return /* @__PURE__ */ React16.createElement(
     Stack5,
@@ -1508,15 +1556,15 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React16.createElement(Typography5, { align: "center", variant: "subtitle2" }, __12("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React16.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React16.createElement(Typography5, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __12("Try something else.", "elementor"), /* @__PURE__ */ React16.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __12("Clear & try again", "elementor")))
+    /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "subtitle2" }, __11("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React16.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __11("Try something else.", "elementor"), /* @__PURE__ */ React16.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __11("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
 import * as React17 from "react";
-import { Button as Button6, Stack as Stack6, Typography as Typography6 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { Button as Button6, Stack as Stack6, Typography as Typography8 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 var NoVariables = ({ icon, title, onAdd }) => {
   const canAdd = usePermissions().canAdd();
   return /* @__PURE__ */ React17.createElement(
@@ -1533,23 +1581,23 @@ var NoVariables = ({ icon, title, onAdd }) => {
     canAdd ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
       NoVariablesContent,
       {
-        title: title || __13("Create your first variable", "elementor"),
-        message: __13(
+        title: title || __12("Create your first variable", "elementor"),
+        message: __12(
           "Variables are saved attributes that you can apply anywhere on your site.",
           "elementor"
         )
       }
-    ), onAdd && /* @__PURE__ */ React17.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __13("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
+    ), onAdd && /* @__PURE__ */ React17.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __12("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
       NoVariablesContent,
       {
-        title: __13("There are no variables", "elementor"),
-        message: __13("With your current role, you can only connect and detach variables.", "elementor")
+        title: __12("There are no variables", "elementor"),
+        message: __12("With your current role, you can only connect and detach variables.", "elementor")
       }
     )
   );
 };
 function NoVariablesContent({ title, message }) {
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Typography6, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React17.createElement(Typography6, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "caption", maxWidth: "180px" }, message));
 }
 
 // src/components/ui/styled-menu-list.tsx
@@ -1640,13 +1688,13 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   };
   const noVariableTitle = sprintf(
     /* translators: %s: Variable Type. */
-    __14("Create your first %s variable", "elementor"),
+    __13("Create your first %s variable", "elementor"),
     variableType
   );
   return /* @__PURE__ */ React18.createElement(PopoverBody3, null, /* @__PURE__ */ React18.createElement(
     PopoverHeader3,
     {
-      title: __14("Variables", "elementor"),
+      title: __13("Variables", "elementor"),
       icon: /* @__PURE__ */ React18.createElement(ColorFilterIcon2, { fontSize: SIZE4 }),
       onClose: closePopover,
       actions
@@ -1656,7 +1704,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __14("Search", "elementor")
+      placeholder: __13("Search", "elementor")
     }
   ), /* @__PURE__ */ React18.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React18.createElement(
     PopoverMenuList,
@@ -1767,14 +1815,14 @@ function RenderView(props) {
 // src/components/ui/tags/assigned-tag.tsx
 import * as React20 from "react";
 import { DetachIcon } from "@elementor/icons";
-import { Box as Box4, IconButton as IconButton8, Stack as Stack7, Tooltip, Typography as Typography7, UnstableTag as Tag } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { Box as Box4, IconButton as IconButton8, Stack as Stack7, Tooltip, Typography as Typography9, UnstableTag as Tag } from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
 var SIZE5 = "tiny";
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React20.createElement(IconButton8, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": __15("Unlink", "elementor") }, /* @__PURE__ */ React20.createElement(DetachIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React20.createElement(IconButton8, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": __14("Unlink", "elementor") }, /* @__PURE__ */ React20.createElement(DetachIcon, { fontSize: SIZE5 }))
     );
   }
   return /* @__PURE__ */ React20.createElement(Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React20.createElement(
@@ -1783,7 +1831,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
       fullWidth: true,
       showActionsOnHover: true,
       startIcon: /* @__PURE__ */ React20.createElement(Stack7, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React20.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React20.createElement(Typography7, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      label: /* @__PURE__ */ React20.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React20.createElement(Typography9, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -1795,7 +1843,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = useBoundProp6();
   const anchorRef = useRef(null);
-  const popupId = useId2();
+  const popupId = useId();
   const popupState = usePopupState2({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
@@ -1835,7 +1883,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 import * as React25 from "react";
-import { useId as useId3, useRef as useRef2, useState as useState11 } from "react";
+import { useId as useId2, useRef as useRef2, useState as useState11 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip, Popover as Popover2, usePopupState as usePopupState3 } from "@elementor/ui";
 
@@ -1845,8 +1893,8 @@ import { useState as useState10 } from "react";
 import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { PopoverBody as PopoverBody4 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
-import { Button as Button7, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import { Button as Button7, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4, Typography as Typography10 } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
 var SIZE6 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
@@ -1901,20 +1949,36 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     PopoverHeader4,
     {
       icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: SIZE6 }),
-      title: __16("Restore variable", "elementor"),
+      title: __15("Restore variable", "elementor"),
       onClose
     }
   ), /* @__PURE__ */ React22.createElement(Divider5, null), /* @__PURE__ */ React22.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React22.createElement(
-    LabelField,
+    FormField,
     {
-      value: label,
-      error: labelFieldError,
-      onChange: (newValue) => {
-        setLabel(newValue);
-        setErrorMessage("");
+      id: "variable-label",
+      label: __15("Name", "elementor"),
+      errorMsg: labelFieldError?.message,
+      noticeMsg: labelHint(label)
+    },
+    /* @__PURE__ */ React22.createElement(
+      LabelField,
+      {
+        id: "variable-label",
+        value: label,
+        error: labelFieldError,
+        onChange: (newValue) => {
+          setLabel(newValue);
+          setErrorMessage("");
+        },
+        onErrorChange: (errorMsg) => {
+          setLabelFieldError({
+            value: label,
+            message: errorMsg
+          });
+        }
       }
-    }
-  ), /* @__PURE__ */ React22.createElement(FormField, { errorMsg: valueFieldError, label: __16("Value", "elementor") }, /* @__PURE__ */ React22.createElement(
+    )
+  ), /* @__PURE__ */ React22.createElement(FormField, { errorMsg: valueFieldError, label: __15("Value", "elementor") }, /* @__PURE__ */ React22.createElement(Typography10, { variant: "h5" }, /* @__PURE__ */ React22.createElement(
     ValueField,
     {
       value,
@@ -1926,14 +1990,14 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  )), errorMessage && /* @__PURE__ */ React22.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React22.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React22.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __16("Restore", "elementor")))));
+  ))), errorMessage && /* @__PURE__ */ React22.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React22.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React22.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __15("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
 import * as React23 from "react";
 import { useSectionWidth } from "@elementor/editor-editing-panel";
 import { Alert as Alert2, AlertAction, AlertTitle, ClickAwayListener as ClickAwayListener2 } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
   const sectionWidth = useSectionWidth();
   return /* @__PURE__ */ React23.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React23.createElement(
@@ -1942,16 +2006,16 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React23.createElement(React23.Fragment, null, onUnlink && /* @__PURE__ */ React23.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __17("Unlink", "elementor")), onRestore && /* @__PURE__ */ React23.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __17("Restore", "elementor"))),
+      action: /* @__PURE__ */ React23.createElement(React23.Fragment, null, onUnlink && /* @__PURE__ */ React23.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __16("Unlink", "elementor")), onRestore && /* @__PURE__ */ React23.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __16("Restore", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React23.createElement(AlertTitle, null, __17("Deleted variable", "elementor")),
-    __17("The variable", "elementor"),
+    /* @__PURE__ */ React23.createElement(AlertTitle, null, __16("Deleted variable", "elementor")),
+    __16("The variable", "elementor"),
     " '",
     label,
     "'",
     " ",
-    __17(
+    __16(
       "has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.",
       "elementor"
     )
@@ -1961,8 +2025,8 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 // src/components/ui/tags/deleted-tag.tsx
 import * as React24 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2 } from "@elementor/icons";
-import { Box as Box6, Chip, Tooltip as Tooltip2, Typography as Typography8 } from "@elementor/ui";
-import { __ as __18 } from "@wordpress/i18n";
+import { Box as Box6, Chip, Tooltip as Tooltip2, Typography as Typography11 } from "@elementor/ui";
+import { __ as __17 } from "@wordpress/i18n";
 var DeletedTag = React24.forwardRef(({ label, onClick, ...props }, ref) => {
   return /* @__PURE__ */ React24.createElement(
     Chip,
@@ -1974,7 +2038,7 @@ var DeletedTag = React24.forwardRef(({ label, onClick, ...props }, ref) => {
       variant: "standard",
       onClick,
       icon: /* @__PURE__ */ React24.createElement(AlertTriangleFilledIcon2, null),
-      label: /* @__PURE__ */ React24.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(Box6, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React24.createElement(Typography8, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React24.createElement(Typography8, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __18("deleted", "elementor"), ")"))),
+      label: /* @__PURE__ */ React24.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(Box6, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React24.createElement(Typography11, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React24.createElement(Typography11, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __17("deleted", "elementor"), ")"))),
       sx: {
         height: (theme) => theme.spacing(3.5),
         borderRadius: (theme) => theme.spacing(1),
@@ -1995,7 +2059,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
   const deletedChipAnchorRef = useRef2(null);
-  const popupId = useId3();
+  const popupId = useId2();
   const popupState = usePopupState3({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
@@ -2075,7 +2139,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 import * as React28 from "react";
-import { useId as useId4, useRef as useRef3, useState as useState12 } from "react";
+import { useId as useId3, useRef as useRef3, useState as useState12 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box9, Infotip as Infotip2, Popover as Popover3, usePopupState as usePopupState4 } from "@elementor/ui";
 
@@ -2083,16 +2147,16 @@ import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box9, Infoti
 import * as React26 from "react";
 import { useSectionWidth as useSectionWidth2 } from "@elementor/editor-editing-panel";
 import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener3 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 var i18n = {
-  title: __19("Variable has changed", "elementor"),
-  message: __19(
+  title: __18("Variable has changed", "elementor"),
+  message: __18(
     `This variable is no longer compatible with this property. You can clear it or select a different one.`,
     "elementor"
   ),
   buttons: {
-    clear: __19("Clear", "elementor"),
-    select: __19("Select variable", "elementor")
+    clear: __18("Clear", "elementor"),
+    select: __18("Select variable", "elementor")
   }
 };
 var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
@@ -2117,8 +2181,8 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 // src/components/ui/tags/mismatch-tag.tsx
 import * as React27 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
-import { Box as Box8, Chip as Chip2, Tooltip as Tooltip3, Typography as Typography9 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
+import { Box as Box8, Chip as Chip2, Tooltip as Tooltip3, Typography as Typography12 } from "@elementor/ui";
+import { __ as __19 } from "@wordpress/i18n";
 var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
   return /* @__PURE__ */ React27.createElement(
     Chip2,
@@ -2130,7 +2194,7 @@ var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
       variant: "standard",
       onClick,
       icon: /* @__PURE__ */ React27.createElement(AlertTriangleFilledIcon3, null),
-      label: /* @__PURE__ */ React27.createElement(Tooltip3, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(Box8, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(Typography9, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(Typography9, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __20("changed", "elementor"), ")"))),
+      label: /* @__PURE__ */ React27.createElement(Tooltip3, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(Box8, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(Typography12, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(Typography12, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __19("changed", "elementor"), ")"))),
       sx: {
         height: (theme) => theme.spacing(3.5),
         borderRadius: (theme) => theme.spacing(1),
@@ -2146,7 +2210,7 @@ var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
 var MismatchVariable = ({ variable }) => {
   const { setValue } = useBoundProp9();
   const anchorRef = useRef3(null);
-  const popupId = useId4();
+  const popupId = useId3();
   const popupState = usePopupState4({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
@@ -2219,13 +2283,13 @@ import * as React31 from "react";
 import { useState as useState13 } from "react";
 import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop3, Infotip as Infotip3 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
+import { __ as __21 } from "@wordpress/i18n";
 
 // src/components/ui/missing-variable-alert.tsx
 import * as React29 from "react";
 import { useSectionWidth as useSectionWidth3 } from "@elementor/editor-editing-panel";
 import { Alert as Alert4, AlertAction as AlertAction3, AlertTitle as AlertTitle3, ClickAwayListener as ClickAwayListener4 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 var MissingVariableAlert = ({ onClose, onClear }) => {
   const sectionWidth = useSectionWidth3();
   return /* @__PURE__ */ React29.createElement(ClickAwayListener4, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
@@ -2234,11 +2298,11 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(AlertAction3, { variant: "contained", onClick: onClear }, __21("Clear", "elementor"))),
+      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(AlertAction3, { variant: "contained", onClick: onClear }, __20("Clear", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React29.createElement(AlertTitle3, null, __21("This variable is missing", "elementor")),
-    __21(
+    /* @__PURE__ */ React29.createElement(AlertTitle3, null, __20("This variable is missing", "elementor")),
+    __20(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
     )
@@ -2299,7 +2363,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React31.createElement(MissingTag, { label: __22("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React31.createElement(MissingTag, { label: __21("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -2326,14 +2390,14 @@ var VariableControl = () => {
 import * as React33 from "react";
 import { useBoundProp as useBoundProp12 } from "@elementor/editor-editing-panel";
 import { ColorFilterIcon as ColorFilterIcon4 } from "@elementor/icons";
-import { __ as __23 } from "@wordpress/i18n";
+import { __ as __22 } from "@wordpress/i18n";
 var usePropVariableAction = () => {
   const { propType, path } = useBoundProp12();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
     icon: ColorFilterIcon4,
-    title: __23("Variables", "elementor"),
+    title: __22("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
@@ -2396,7 +2460,15 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
         colorPicker: {
           anchorEl: anchorRef,
           anchorOrigin: { vertical: "top", horizontal: "right" },
-          transformOrigin: { vertical: "top", horizontal: -10 }
+          transformOrigin: { vertical: "top", horizontal: -10 },
+          slotProps: {
+            colorIndicator: {
+              size: "inherit",
+              sx: {
+                borderRadius: 0.5
+              }
+            }
+          }
         }
       }
     }
@@ -2405,12 +2477,12 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 import * as React35 from "react";
-import { useId as useId5, useRef as useRef5, useState as useState15 } from "react";
+import { useId as useId4, useRef as useRef5, useState as useState15 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector } from "@elementor/editor-controls";
 import { useFontFamilies, useSectionWidth as useSectionWidth4 } from "@elementor/editor-editing-panel";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag, usePopupState as usePopupState5 } from "@elementor/ui";
-import { __ as __24 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 var FontField = ({ value, onChange, onValidationChange }) => {
   const [fontFamily, setFontFamily] = useState15(value);
   const defaultRef = useRef5(null);
@@ -2434,7 +2506,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = useId5();
+  const id2 = useId4();
   return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
     UnstableTag,
     {
@@ -2463,7 +2535,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: __24("Font Family", "elementor"),
+        title: __23("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: enqueueFont2,
         icon: TextIcon