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

package/dist/index.js

@@ -41,14 +41,14 @@ var import_editor_editing_panel11 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/variables-manager/variables-manager-panel.tsx
-var React7 = __toESM(require("react"));
-var import_react6 = require("react");
+var React8 = __toESM(require("react"));
+var import_react7 = require("react");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_icons3 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+var import_ui8 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
 
 // src/hooks/use-prop-variables.ts
 var import_react2 = require("react");
@@ -550,24 +550,129 @@ var restoreVariable = (restoreId, label, value) => {
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
-var React6 = __toESM(require("react"));
-var import_react5 = require("react");
+var React7 = __toESM(require("react"));
+var import_react6 = require("react");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_icons2 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_ui7 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 
-// src/components/variables-manager/variable-edit-menu.tsx
+// src/components/fields/label-field.tsx
 var React3 = __toESM(require("react"));
 var import_react3 = require("react");
-var import_icons = require("@elementor/icons");
 var import_ui3 = require("@elementor/ui");
+
+// src/utils/validations.ts
+var import_i18n3 = require("@wordpress/i18n");
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: (0, import_i18n3.__)("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: (0, import_i18n3.__)("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: (0, import_i18n3.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: (0, import_i18n3.__)("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n3.__)("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: (0, import_i18n3.__)("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: (0, import_i18n3.__)("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] = (0, import_react3.useState)(initialError ?? { value: "", message: "" });
+  return {
+    labelFieldError: error,
+    setLabelFieldError: setError
+  };
+};
+var LabelField = ({
+  value,
+  error,
+  onChange,
+  id: id2,
+  onErrorChange,
+  size = "tiny",
+  focusOnShow = false
+}) => {
+  const [label, setLabel] = (0, import_react3.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react3.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(
+    import_ui3.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
+var React4 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_icons = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
 var VariableEditMenu = ({ menuActions, disabled }) => {
-  const menuState = (0, import_ui3.usePopupState)({
+  const menuState = (0, import_ui4.usePopupState)({
     variant: "popover"
   });
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(import_ui3.IconButton, { ...(0, import_ui3.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React3.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React3.createElement(
-    import_ui3.Menu,
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(import_ui4.IconButton, { ...(0, import_ui4.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React4.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React4.createElement(
+    import_ui4.Menu,
     {
       disablePortal: true,
       MenuListProps: {
@@ -576,7 +681,7 @@ var VariableEditMenu = ({ menuActions, disabled }) => {
       PaperProps: {
         elevation: 6
       },
-      ...(0, import_ui3.bindMenu)(menuState),
+      ...(0, import_ui4.bindMenu)(menuState),
       anchorEl: menuState.anchorEl,
       anchorOrigin: {
         vertical: "bottom",
@@ -589,8 +694,8 @@ var VariableEditMenu = ({ menuActions, disabled }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuActions.map((action) => /* @__PURE__ */ React3.createElement(
-      import_ui3.MenuItem,
+    menuActions.map((action) => /* @__PURE__ */ React4.createElement(
+      import_ui4.MenuItem,
       {
         key: action.name,
         onClick: () => {
@@ -602,7 +707,7 @@ var VariableEditMenu = ({ menuActions, disabled }) => {
           gap: 1
         }
       },
-      action.icon && (0, import_react3.createElement)(action.icon, {
+      action.icon && (0, import_react4.createElement)(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -612,19 +717,18 @@ var VariableEditMenu = ({ menuActions, disabled }) => {
 };
 
 // src/components/variables-manager/variable-editable-cell.tsx
-var React4 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_ui4 = require("@elementor/ui");
+var React5 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_ui5 = require("@elementor/ui");
 var VariableEditableCell = ({
   initialValue,
   children,
   editableElement,
   onSave,
-  prefixElement,
-  disableCloseOnBlur
+  prefixElement
 }) => {
-  const [value, setValue] = (0, import_react4.useState)(initialValue);
-  const [isEditing, setIsEditing] = (0, import_react4.useState)(false);
+  const [value, setValue] = (0, import_react5.useState)(initialValue);
+  const [isEditing, setIsEditing] = (0, import_react5.useState)(false);
   const handleDoubleClick = () => {
     setIsEditing(true);
   };
@@ -647,14 +751,13 @@ var VariableEditableCell = ({
     setValue(newValue);
   };
   const editableContent = editableElement({ value, onChange: handleChange });
-  return /* @__PURE__ */ React4.createElement(import_ui4.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React4.createElement(
-    import_ui4.Stack,
+  return /* @__PURE__ */ React5.createElement(import_ui5.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React5.createElement(
+    import_ui5.Stack,
     {
       direction: "row",
       alignItems: "center",
       gap: 1,
       onDoubleClick: handleDoubleClick,
-      onBlur: disableCloseOnBlur ? void 0 : handleSave,
       onKeyDown: handleKeyDown,
       tabIndex: 0,
       role: "button",
@@ -666,8 +769,8 @@ var VariableEditableCell = ({
 };
 
 // src/components/variables-manager/variable-table-cell.tsx
-var React5 = __toESM(require("react"));
-var import_ui5 = require("@elementor/ui");
+var React6 = __toESM(require("react"));
+var import_ui6 = require("@elementor/ui");
 var VariableTableCell = ({
   children,
   isHeader,
@@ -682,15 +785,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(import_ui5.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+  return /* @__PURE__ */ React6.createElement(import_ui6.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] = (0, import_react5.useState)(Object.keys(variables));
+  const [ids, setIds] = (0, import_react6.useState)(Object.keys(variables));
   const rows = ids.map((id2) => {
     const variable = variables[id2];
     const variableType = getVariableType(variable.type);
@@ -706,17 +810,17 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
     minWidth: 250,
     tableLayout: "fixed"
   };
-  return /* @__PURE__ */ React6.createElement(import_ui6.TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React6.createElement(import_ui6.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering" }, /* @__PURE__ */ React6.createElement(import_ui6.TableHead, null, /* @__PURE__ */ React6.createElement(import_ui6.TableRow, null, /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n3.__)("Name", "elementor")), /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n3.__)("Value", "elementor")), /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React6.createElement(import_ui6.TableBody, null, /* @__PURE__ */ React6.createElement(
-    import_ui6.UnstableSortableProvider,
+  return /* @__PURE__ */ React7.createElement(import_ui7.TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React7.createElement(import_ui7.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React7.createElement(import_ui7.TableHead, null, /* @__PURE__ */ React7.createElement(import_ui7.TableRow, null, /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n4.__)("Name", "elementor")), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n4.__)("Value", "elementor")), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React7.createElement(import_ui7.TableBody, null, /* @__PURE__ */ React7.createElement(
+    import_ui7.UnstableSortableProvider,
     {
       value: ids,
       onChange: setIds,
       variant: "static",
       restrictAxis: true,
-      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React6.createElement(import_ui6.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React6.createElement(import_ui6.TableBody, null, dragOverlayChildren))
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React7.createElement(import_ui7.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React7.createElement(import_ui7.TableBody, null, dragOverlayChildren))
     },
-    rows.map((row) => /* @__PURE__ */ React6.createElement(
-      import_ui6.UnstableSortableItem,
+    rows.map((row) => /* @__PURE__ */ React7.createElement(
+      import_ui7.UnstableSortableItem,
       {
         key: row.id,
         id: row.id,
@@ -735,8 +839,8 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
         }) => {
           const showIndicationBefore = showDropIndication && dropPosition === "before";
           const showIndicationAfter = showDropIndication && dropPosition === "after";
-          return /* @__PURE__ */ React6.createElement(
-            import_ui6.TableRow,
+          return /* @__PURE__ */ React7.createElement(
+            import_ui7.TableRow,
             {
               ...itemProps,
               selected: isDragged,
@@ -766,8 +870,8 @@ 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(
-              import_ui6.IconButton,
+            /* @__PURE__ */ React7.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React7.createElement(
+              import_ui7.IconButton,
               {
                 size: "small",
                 ref: setTriggerRef,
@@ -775,39 +879,54 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
                 disabled: isSorting,
                 draggable: true
               },
-              /* @__PURE__ */ React6.createElement(import_icons2.GripVerticalIcon, { fontSize: "inherit" })
+              /* @__PURE__ */ React7.createElement(import_icons2.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: (0, import_react5.createElement)(row.icon, { fontSize: "inherit" }),
-                editableElement: ({ value, onChange }) => /* @__PURE__ */ React6.createElement(
-                  import_ui6.TextField,
+                prefixElement: (0, import_react6.createElement)(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(import_editor_ui.EllipsisWithTooltip, { title: row.name }, row.name)
+              /* @__PURE__ */ React7.createElement(
+                import_editor_ui.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(import_editor_ui.EllipsisWithTooltip, { title: row.value }, row.value)
+              /* @__PURE__ */ React7.createElement(
+                import_editor_ui.EllipsisWithTooltip,
+                {
+                  title: row.value,
+                  sx: { border: "4px solid transparent" }
+                },
+                row.value
+              )
             )),
-            /* @__PURE__ */ React6.createElement(
+            /* @__PURE__ */ React7.createElement(
               VariableTableCell,
               {
                 align: "right",
@@ -816,7 +935,7 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
                 maxWidth: 16,
                 sx: { paddingInlineEnd: 1 }
               },
-              /* @__PURE__ */ React6.createElement(import_ui6.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React6.createElement(
+              /* @__PURE__ */ React7.createElement(import_ui7.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React7.createElement(
                 VariableEditMenu,
                 {
                   menuActions,
@@ -851,14 +970,14 @@ function VariablesManagerPanel() {
   usePreventUnload(isDirty);
   const menuActions = [
     {
-      name: (0, import_i18n4.__)("Delete", "elementor"),
+      name: (0, import_i18n5.__)("Delete", "elementor"),
       icon: import_icons3.TrashIcon,
       color: "error.main",
       onClick: () => {
       }
     }
   ];
-  return /* @__PURE__ */ React7.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React7.createElement(import_ui7.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui7.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_ui7.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n4.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React8.createElement(import_ui8.ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React8.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React8.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React8.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -866,7 +985,7 @@ function VariablesManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React8.createElement(import_ui8.Divider, { sx: { width: "100%" } }))), /* @__PURE__ */ React8.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -875,14 +994,13 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React7.createElement(import_ui7.Divider, null),
-    /* @__PURE__ */ React7.createElement(VariablesManagerTable, { menuActions, variables })
-  ), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React7.createElement(import_ui7.Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, (0, import_i18n4.__)("Save changes", "elementor"))))));
+    /* @__PURE__ */ React8.createElement(VariablesManagerTable, { menuActions, variables })
+  ), /* @__PURE__ */ React8.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React8.createElement(import_ui8.Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, (0, import_i18n5.__)("Save changes", "elementor"))))));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(import_ui7.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(import_icons3.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui7.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui7.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n4.__)("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React8.createElement(import_ui8.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React8.createElement(import_icons3.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(import_ui8.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(import_ui8.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
 var usePreventUnload = (isDirty) => {
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -928,16 +1046,16 @@ var import_react13 = require("react");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
 // src/context/variable-selection-popover.context.tsx
-var React8 = __toESM(require("react"));
-var import_react7 = require("react");
-var import_ui8 = require("@elementor/ui");
-var PopoverContentRefContext = (0, import_react7.createContext)(null);
+var React9 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_ui9 = require("@elementor/ui");
+var PopoverContentRefContext = (0, import_react8.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = (0, import_react7.useState)(null);
-  return /* @__PURE__ */ React8.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React8.createElement(import_ui8.Box, { ref: setAnchorRef }, children));
+  const [anchorRef, setAnchorRef] = (0, import_react8.useState)(null);
+  return /* @__PURE__ */ React9.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React9.createElement(import_ui9.Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
-  return (0, import_react7.useContext)(PopoverContentRefContext);
+  return (0, import_react8.useContext)(PopoverContentRefContext);
 };
 
 // src/hooks/use-permissions.ts
@@ -963,7 +1081,7 @@ var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 
 // src/hooks/use-initial-value.ts
 var import_editor_controls2 = require("@elementor/editor-controls");
@@ -995,112 +1113,11 @@ var trackVariableEvent = ({ varType, controlPath, action }) => {
   });
 };
 
-// src/utils/validations.ts
-var import_i18n5 = require("@wordpress/i18n");
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: (0, import_i18n5.__)("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: (0, import_i18n5.__)("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: (0, import_i18n5.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: (0, import_i18n5.__)("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n5.__)("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: (0, import_i18n5.__)("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: (0, import_i18n5.__)("There was a glitch. Try saving your variable again.", "elementor")
-};
-var VARIABLE_LABEL_MAX_LENGTH = 50;
-var mapServerError = (error) => {
-  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
+// src/components/ui/form-field.tsx
 var React10 = __toESM(require("react"));
-var import_react8 = require("react");
 var import_ui10 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
-
-// src/components/ui/form-field.tsx
-var React9 = __toESM(require("react"));
-var import_ui9 = require("@elementor/ui");
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React9.createElement(import_ui9.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui9.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_ui9.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React9.createElement(import_ui9.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React9.createElement(import_ui9.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React9.createElement(import_ui9.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] = (0, import_react8.useState)(initialError ?? { value: "", message: "" });
-  return {
-    labelFieldError: error,
-    setLabelFieldError: setError
-  };
-};
-var LabelField = ({ value, error, onChange }) => {
-  const [label, setLabel] = (0, import_react8.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
-  const [noticeMessage, setNoticeMessage] = (0, import_react8.useState)(() => 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 = (0, import_react8.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: (0, import_i18n6.__)("Name", "elementor"), errorMsg, noticeMsg }, /* @__PURE__ */ React10.createElement(
-    import_ui10.TextField,
-    {
-      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(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui10.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React10.createElement(import_ui10.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React10.createElement(import_ui10.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React10.createElement(import_ui10.FormHelperText, null, noticeMsg)));
 };
 
 // src/components/variable-creation.tsx
@@ -1167,21 +1184,37 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   return /* @__PURE__ */ React11.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React11.createElement(
     import_editor_ui3.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(import_ui11.IconButton, { size: SIZE, "aria-label": (0, import_i18n7.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(import_icons4.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React11.createElement(VariableIcon, { fontSize: SIZE })),
-      title: (0, import_i18n7.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(import_ui11.IconButton, { size: SIZE, "aria-label": (0, import_i18n6.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(import_icons4.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React11.createElement(VariableIcon, { fontSize: SIZE })),
+      title: (0, import_i18n6.__)("Create variable", "elementor"),
       onClose: closePopover
     }
   ), /* @__PURE__ */ React11.createElement(import_ui11.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React11.createElement(
-    LabelField,
+    FormField,
     {
-      value: label,
-      error: labelFieldError,
-      onChange: (newValue) => {
-        setLabel(newValue);
-        setErrorMessage("");
+      id: "variable-label",
+      label: (0, import_i18n6.__)("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: (0, import_i18n7.__)("Value", "elementor") }, /* @__PURE__ */ React11.createElement(
+    )
+  ), /* @__PURE__ */ React11.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n6.__)("Value", "elementor") }, /* @__PURE__ */ React11.createElement(import_ui11.Typography, { variant: "h5" }, /* @__PURE__ */ React11.createElement(
     ValueField,
     {
       value,
@@ -1193,7 +1226,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  )), errorMessage && /* @__PURE__ */ React11.createElement(import_ui11.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React11.createElement(import_ui11.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(import_ui11.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n7.__)("Create", "elementor"))));
+  ))), errorMessage && /* @__PURE__ */ React11.createElement(import_ui11.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React11.createElement(import_ui11.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(import_ui11.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n6.__)("Create", "elementor"))));
 };
 
 // src/components/variable-edit.tsx
@@ -1205,13 +1238,13 @@ var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
 var import_ui14 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/ui/delete-confirmation-dialog.tsx
 var React12 = __toESM(require("react"));
 var import_icons5 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
 var TITLE_ID = "delete-variable-dialog";
 var DeleteConfirmationDialog = ({
   open,
@@ -1219,7 +1252,7 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  return /* @__PURE__ */ React12.createElement(import_ui12.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React12.createElement(import_ui12.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React12.createElement(import_icons5.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n8.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.DialogContent, null, /* @__PURE__ */ React12.createElement(import_ui12.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n8.__)("All elements using", "elementor"), /* @__PURE__ */ React12.createElement(import_ui12.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n8.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React12.createElement(import_ui12.DialogActions, null, /* @__PURE__ */ React12.createElement(import_ui12.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n8.__)("Not now", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n8.__)("Delete", "elementor"))));
+  return /* @__PURE__ */ React12.createElement(import_ui12.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React12.createElement(import_ui12.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React12.createElement(import_icons5.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n7.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.DialogContent, null, /* @__PURE__ */ React12.createElement(import_ui12.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n7.__)("All elements using", "elementor"), /* @__PURE__ */ React12.createElement(import_ui12.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__ */ React12.createElement(import_ui12.DialogActions, null, /* @__PURE__ */ React12.createElement(import_ui12.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n7.__)("Not now", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n7.__)("Delete", "elementor"))));
 };
 
 // src/components/ui/edit-confirmation-dialog.tsx
@@ -1227,7 +1260,7 @@ var React13 = __toESM(require("react"));
 var import_react10 = require("react");
 var import_icons6 = require("@elementor/icons");
 var import_ui13 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
@@ -1241,7 +1274,7 @@ var EditConfirmationDialog = ({
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React13.createElement(import_ui13.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(import_ui13.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React13.createElement(import_icons6.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n9.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React13.createElement(import_ui13.DialogContent, null, /* @__PURE__ */ React13.createElement(import_ui13.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n9.__)(
+  return /* @__PURE__ */ React13.createElement(import_ui13.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(import_ui13.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React13.createElement(import_icons6.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n8.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React13.createElement(import_ui13.DialogContent, null, /* @__PURE__ */ React13.createElement(import_ui13.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n8.__)(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
   ))), /* @__PURE__ */ React13.createElement(import_ui13.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React13.createElement(
@@ -1255,9 +1288,9 @@ var EditConfirmationDialog = ({
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "body2" }, (0, import_i18n9.__)("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "body2" }, (0, import_i18n8.__)("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(import_ui13.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n9.__)("Keep editing", "elementor")), /* @__PURE__ */ React13.createElement(import_ui13.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n9.__)("Save", "elementor")))));
+  ), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(import_ui13.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n8.__)("Keep editing", "elementor")), /* @__PURE__ */ React13.createElement(import_ui13.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n8.__)("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
@@ -1347,7 +1380,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         {
           key: "delete",
           size: SIZE2,
-          "aria-label": (0, import_i18n10.__)("Delete", "elementor"),
+          "aria-label": (0, import_i18n9.__)("Delete", "elementor"),
           onClick: handleDeleteConfirmation
         },
         /* @__PURE__ */ React14.createElement(import_icons7.TrashIcon, { fontSize: SIZE2 })
@@ -1373,13 +1406,13 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React14.createElement(
     import_editor_ui4.PopoverHeader,
     {
-      title: (0, import_i18n10.__)("Edit variable", "elementor"),
+      title: (0, import_i18n9.__)("Edit variable", "elementor"),
       onClose,
       icon: /* @__PURE__ */ React14.createElement(React14.Fragment, null, onGoBack && /* @__PURE__ */ React14.createElement(
         import_ui14.IconButton,
         {
           size: SIZE2,
-          "aria-label": (0, import_i18n10.__)("Go Back", "elementor"),
+          "aria-label": (0, import_i18n9.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
         /* @__PURE__ */ React14.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE2 })
@@ -1387,16 +1420,32 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       actions
     }
   ), /* @__PURE__ */ React14.createElement(import_ui14.Divider, null), /* @__PURE__ */ React14.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React14.createElement(
-    LabelField,
+    FormField,
     {
-      value: label,
-      error: labelFieldError,
-      onChange: (newValue) => {
-        setLabel(newValue);
-        setErrorMessage("");
+      id: "variable-label",
+      label: (0, import_i18n9.__)("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: (0, import_i18n10.__)("Value", "elementor") }, /* @__PURE__ */ React14.createElement(
+    )
+  ), /* @__PURE__ */ React14.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n9.__)("Value", "elementor") }, /* @__PURE__ */ React14.createElement(import_ui14.Typography, { variant: "h5" }, /* @__PURE__ */ React14.createElement(
     ValueField,
     {
       value,
@@ -1408,7 +1457,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  )), errorMessage && /* @__PURE__ */ React14.createElement(import_ui14.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React14.createElement(import_ui14.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React14.createElement(import_ui14.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n10.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
+  ))), errorMessage && /* @__PURE__ */ React14.createElement(import_ui14.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React14.createElement(import_ui14.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React14.createElement(import_ui14.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n9.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1434,14 +1483,14 @@ var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
 var React15 = __toESM(require("react"));
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons8 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
@@ -1486,7 +1535,7 @@ var MenuItemContent = ({ item }) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": (0, import_i18n11.__)("Edit", "elementor")
+      "aria-label": (0, import_i18n10.__)("Edit", "elementor")
     },
     /* @__PURE__ */ React15.createElement(import_icons8.EditIcon, { color: "action", fontSize: SIZE3 })
   ));
@@ -1495,7 +1544,7 @@ var MenuItemContent = ({ item }) => {
 // src/components/ui/no-search-results.tsx
 var React16 = __toESM(require("react"));
 var import_ui16 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
   return /* @__PURE__ */ React16.createElement(
     import_ui16.Stack,
@@ -1509,15 +1558,15 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n12.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React16.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n12.__)("Try something else.", "elementor"), /* @__PURE__ */ React16.createElement(import_ui16.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n12.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React16.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n11.__)("Try something else.", "elementor"), /* @__PURE__ */ React16.createElement(import_ui16.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
 var React17 = __toESM(require("react"));
 var import_ui17 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 var NoVariables = ({ icon, title, onAdd }) => {
   const canAdd = usePermissions().canAdd();
   return /* @__PURE__ */ React17.createElement(
@@ -1534,17 +1583,17 @@ var NoVariables = ({ icon, title, onAdd }) => {
     canAdd ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
       NoVariablesContent,
       {
-        title: title || (0, import_i18n13.__)("Create your first variable", "elementor"),
-        message: (0, import_i18n13.__)(
+        title: title || (0, import_i18n12.__)("Create your first variable", "elementor"),
+        message: (0, import_i18n12.__)(
           "Variables are saved attributes that you can apply anywhere on your site.",
           "elementor"
         )
       }
-    ), onAdd && /* @__PURE__ */ React17.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n13.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
+    ), onAdd && /* @__PURE__ */ React17.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n12.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
       NoVariablesContent,
       {
-        title: (0, import_i18n13.__)("There are no variables", "elementor"),
-        message: (0, import_i18n13.__)("With your current role, you can only connect and detach variables.", "elementor")
+        title: (0, import_i18n12.__)("There are no variables", "elementor"),
+        message: (0, import_i18n12.__)("With your current role, you can only connect and detach variables.", "elementor")
       }
     )
   );
@@ -1639,15 +1688,15 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  const noVariableTitle = (0, import_i18n14.sprintf)(
+  const noVariableTitle = (0, import_i18n13.sprintf)(
     /* translators: %s: Variable Type. */
-    (0, import_i18n14.__)("Create your first %s variable", "elementor"),
+    (0, import_i18n13.__)("Create your first %s variable", "elementor"),
     variableType
   );
   return /* @__PURE__ */ React18.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React18.createElement(
     import_editor_ui6.PopoverHeader,
     {
-      title: (0, import_i18n14.__)("Variables", "elementor"),
+      title: (0, import_i18n13.__)("Variables", "elementor"),
       icon: /* @__PURE__ */ React18.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE4 }),
       onClose: closePopover,
       actions
@@ -1657,7 +1706,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n14.__)("Search", "elementor")
+      placeholder: (0, import_i18n13.__)("Search", "elementor")
     }
   ), /* @__PURE__ */ React18.createElement(import_ui19.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React18.createElement(
     import_editor_ui6.PopoverMenuList,
@@ -1769,13 +1818,13 @@ function RenderView(props) {
 var React20 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 var SIZE5 = "tiny";
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React20.createElement(import_ui20.IconButton, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": (0, import_i18n15.__)("Unlink", "elementor") }, /* @__PURE__ */ React20.createElement(import_icons10.DetachIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React20.createElement(import_ui20.IconButton, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": (0, import_i18n14.__)("Unlink", "elementor") }, /* @__PURE__ */ React20.createElement(import_icons10.DetachIcon, { fontSize: SIZE5 }))
     );
   }
   return /* @__PURE__ */ React20.createElement(import_ui20.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React20.createElement(
@@ -1847,7 +1896,7 @@ var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_ui22 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
@@ -1902,20 +1951,36 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     import_editor_ui7.PopoverHeader,
     {
       icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: SIZE6 }),
-      title: (0, import_i18n16.__)("Restore variable", "elementor"),
+      title: (0, import_i18n15.__)("Restore variable", "elementor"),
       onClose
     }
   ), /* @__PURE__ */ React22.createElement(import_ui22.Divider, null), /* @__PURE__ */ React22.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React22.createElement(
-    LabelField,
+    FormField,
     {
-      value: label,
-      error: labelFieldError,
-      onChange: (newValue) => {
-        setLabel(newValue);
-        setErrorMessage("");
+      id: "variable-label",
+      label: (0, import_i18n15.__)("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: (0, import_i18n16.__)("Value", "elementor") }, /* @__PURE__ */ React22.createElement(
+    )
+  ), /* @__PURE__ */ React22.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n15.__)("Value", "elementor") }, /* @__PURE__ */ React22.createElement(import_ui22.Typography, { variant: "h5" }, /* @__PURE__ */ React22.createElement(
     ValueField,
     {
       value,
@@ -1927,14 +1992,14 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  )), errorMessage && /* @__PURE__ */ React22.createElement(import_ui22.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React22.createElement(import_ui22.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React22.createElement(import_ui22.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n16.__)("Restore", "elementor")))));
+  ))), errorMessage && /* @__PURE__ */ React22.createElement(import_ui22.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React22.createElement(import_ui22.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React22.createElement(import_ui22.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n15.__)("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
 var React23 = __toESM(require("react"));
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 var import_ui23 = require("@elementor/ui");
-var import_i18n17 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
   const sectionWidth = (0, import_editor_editing_panel6.useSectionWidth)();
   return /* @__PURE__ */ React23.createElement(import_ui23.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React23.createElement(
@@ -1943,16 +2008,16 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React23.createElement(React23.Fragment, null, onUnlink && /* @__PURE__ */ React23.createElement(import_ui23.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n17.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React23.createElement(import_ui23.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n17.__)("Restore", "elementor"))),
+      action: /* @__PURE__ */ React23.createElement(React23.Fragment, null, onUnlink && /* @__PURE__ */ React23.createElement(import_ui23.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n16.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React23.createElement(import_ui23.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n16.__)("Restore", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React23.createElement(import_ui23.AlertTitle, null, (0, import_i18n17.__)("Deleted variable", "elementor")),
-    (0, import_i18n17.__)("The variable", "elementor"),
+    /* @__PURE__ */ React23.createElement(import_ui23.AlertTitle, null, (0, import_i18n16.__)("Deleted variable", "elementor")),
+    (0, import_i18n16.__)("The variable", "elementor"),
     " '",
     label,
     "'",
     " ",
-    (0, import_i18n17.__)(
+    (0, import_i18n16.__)(
       "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"
     )
@@ -1963,7 +2028,7 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 var React24 = __toESM(require("react"));
 var import_icons12 = require("@elementor/icons");
 var import_ui24 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
+var import_i18n17 = require("@wordpress/i18n");
 var DeletedTag = React24.forwardRef(({ label, onClick, ...props }, ref) => {
   return /* @__PURE__ */ React24.createElement(
     import_ui24.Chip,
@@ -1975,7 +2040,7 @@ var DeletedTag = React24.forwardRef(({ label, onClick, ...props }, ref) => {
       variant: "standard",
       onClick,
       icon: /* @__PURE__ */ React24.createElement(import_icons12.AlertTriangleFilledIcon, null),
-      label: /* @__PURE__ */ React24.createElement(import_ui24.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(import_ui24.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n18.__)("deleted", "elementor"), ")"))),
+      label: /* @__PURE__ */ React24.createElement(import_ui24.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(import_ui24.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React24.createElement(import_ui24.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),
@@ -2084,16 +2149,16 @@ var import_ui28 = require("@elementor/ui");
 var React26 = __toESM(require("react"));
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
 var import_ui26 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
+var import_i18n18 = require("@wordpress/i18n");
 var i18n = {
-  title: (0, import_i18n19.__)("Variable has changed", "elementor"),
-  message: (0, import_i18n19.__)(
+  title: (0, import_i18n18.__)("Variable has changed", "elementor"),
+  message: (0, import_i18n18.__)(
     `This variable is no longer compatible with this property. You can clear it or select a different one.`,
     "elementor"
   ),
   buttons: {
-    clear: (0, import_i18n19.__)("Clear", "elementor"),
-    select: (0, import_i18n19.__)("Select variable", "elementor")
+    clear: (0, import_i18n18.__)("Clear", "elementor"),
+    select: (0, import_i18n18.__)("Select variable", "elementor")
   }
 };
 var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
@@ -2119,7 +2184,7 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 var React27 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
 var import_ui27 = require("@elementor/ui");
-var import_i18n20 = require("@wordpress/i18n");
+var import_i18n19 = require("@wordpress/i18n");
 var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
   return /* @__PURE__ */ React27.createElement(
     import_ui27.Chip,
@@ -2131,7 +2196,7 @@ var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
       variant: "standard",
       onClick,
       icon: /* @__PURE__ */ React27.createElement(import_icons13.AlertTriangleFilledIcon, null),
-      label: /* @__PURE__ */ React27.createElement(import_ui27.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(import_ui27.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n20.__)("changed", "elementor"), ")"))),
+      label: /* @__PURE__ */ React27.createElement(import_ui27.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(import_ui27.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n19.__)("changed", "elementor"), ")"))),
       sx: {
         height: (theme) => theme.spacing(3.5),
         borderRadius: (theme) => theme.spacing(1),
@@ -2220,13 +2285,13 @@ var React31 = __toESM(require("react"));
 var import_react18 = require("react");
 var import_editor_controls10 = require("@elementor/editor-controls");
 var import_ui31 = require("@elementor/ui");
-var import_i18n22 = require("@wordpress/i18n");
+var import_i18n21 = require("@wordpress/i18n");
 
 // src/components/ui/missing-variable-alert.tsx
 var React29 = __toESM(require("react"));
 var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_ui29 = require("@elementor/ui");
-var import_i18n21 = require("@wordpress/i18n");
+var import_i18n20 = require("@wordpress/i18n");
 var MissingVariableAlert = ({ onClose, onClear }) => {
   const sectionWidth = (0, import_editor_editing_panel8.useSectionWidth)();
   return /* @__PURE__ */ React29.createElement(import_ui29.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
@@ -2235,11 +2300,11 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(import_ui29.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n21.__)("Clear", "elementor"))),
+      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(import_ui29.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n20.__)("Clear", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React29.createElement(import_ui29.AlertTitle, null, (0, import_i18n21.__)("This variable is missing", "elementor")),
-    (0, import_i18n21.__)(
+    /* @__PURE__ */ React29.createElement(import_ui29.AlertTitle, null, (0, import_i18n20.__)("This variable is missing", "elementor")),
+    (0, import_i18n20.__)(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
     )
@@ -2300,7 +2365,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React31.createElement(MissingTag, { label: (0, import_i18n22.__)("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React31.createElement(MissingTag, { label: (0, import_i18n21.__)("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -2327,14 +2392,14 @@ var VariableControl = () => {
 var React33 = __toESM(require("react"));
 var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
 var import_icons15 = require("@elementor/icons");
-var import_i18n23 = require("@wordpress/i18n");
+var import_i18n22 = require("@wordpress/i18n");
 var usePropVariableAction = () => {
   const { propType, path } = (0, import_editor_editing_panel9.useBoundProp)();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
     icon: import_icons15.ColorFilterIcon,
-    title: (0, import_i18n23.__)("Variables", "elementor"),
+    title: (0, import_i18n22.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
@@ -2397,7 +2462,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
+              }
+            }
+          }
         }
       }
     }
@@ -2411,7 +2484,7 @@ var import_editor_controls12 = require("@elementor/editor-controls");
 var import_editor_editing_panel10 = require("@elementor/editor-editing-panel");
 var import_icons16 = require("@elementor/icons");
 var import_ui33 = require("@elementor/ui");
-var import_i18n24 = require("@wordpress/i18n");
+var import_i18n23 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
   const [fontFamily, setFontFamily] = (0, import_react20.useState)(value);
   const defaultRef = (0, import_react20.useRef)(null);
@@ -2464,7 +2537,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: (0, import_i18n24.__)("Font Family", "elementor"),
+        title: (0, import_i18n23.__)("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: import_editor_controls12.enqueueFont,
         icon: import_icons16.TextIcon