@elementor/editor-variables 0.14.0 → 0.15.0

package/dist/index.js

@@ -39,8 +39,8 @@ var import_editor = require("@elementor/editor");
 
 // src/init-color-variables.ts
 var import_editor_canvas2 = require("@elementor/editor-canvas");
-var import_editor_controls7 = require("@elementor/editor-controls");
-var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
+var import_editor_controls8 = require("@elementor/editor-controls");
+var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
 var import_editor_props4 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
@@ -314,28 +314,27 @@ var useFilteredVariables = (searchValue, propTypeKey) => {
 var usePropVariables = (propKey) => {
   return (0, import_react.useMemo)(() => normalizeVariables(propKey), [propKey]);
 };
+var isNotDeleted = ({ deleted }) => !deleted;
 var normalizeVariables = (propKey) => {
   const variables = service.variables();
-  styleVariablesRepository.update(variables);
-  return Object.entries(variables).filter(([, { type }]) => type === propKey).map(([key, { label, value }]) => ({
+  return Object.entries(variables).filter(([, variable]) => variable.type === propKey && isNotDeleted(variable)).map(([key, { label, value }]) => ({
     key,
     label,
     value
   }));
 };
 var createVariable = (newVariable) => {
-  return service.create(newVariable).then(({ id, variable }) => {
-    styleVariablesRepository.update({
-      [id]: variable
-    });
+  return service.create(newVariable).then(({ id }) => {
     return id;
   });
 };
 var updateVariable = (updateId, { value, label }) => {
-  return service.update(updateId, { value, label }).then(({ id, variable }) => {
-    styleVariablesRepository.update({
-      [id]: variable
-    });
+  return service.update(updateId, { value, label }).then(({ id }) => {
+    return id;
+  });
+};
+var deleteVariable = (deleteId) => {
+  return service.delete(deleteId).then(({ id }) => {
     return id;
   });
 };
@@ -343,7 +342,8 @@ var updateVariable = (updateId, { value, label }) => {
 // src/components/ui/color-indicator.tsx
 var import_ui = require("@elementor/ui");
 var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  marginRight: theme.spacing(0.25)
 }));
 
 // src/components/variables-repeater-item-slot.tsx
@@ -365,17 +365,43 @@ var BoxShadowRepeaterColorIndicator = ({ value }) => {
 };
 
 // src/controls/color-variable-control.tsx
-var React12 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_editor_controls6 = require("@elementor/editor-controls");
+var React13 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_props3 = require("@elementor/editor-props");
 var import_icons9 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_ui14 = require("@elementor/ui");
+
+// src/components/ui/variable-tag.tsx
+var React2 = __toESM(require("react"));
+var import_icons = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+var SIZE = "tiny";
+var VariableTag = ({ startIcon, label, onUnlink, ...props }) => {
+  const actions = [];
+  if (onUnlink) {
+    actions.push(
+      /* @__PURE__ */ React2.createElement(import_ui2.IconButton, { key: "unlink", size: SIZE, onClick: onUnlink, "aria-label": (0, import_i18n.__)("Unlink", "elementor") }, /* @__PURE__ */ React2.createElement(import_icons.DetachIcon, { fontSize: SIZE }))
+    );
+  }
+  return /* @__PURE__ */ React2.createElement(
+    import_ui2.UnstableTag,
+    {
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React2.createElement(import_ui2.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React2.createElement(import_ui2.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React2.createElement(import_ui2.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      actions,
+      ...props
+    }
+  );
+};
 
 // src/components/variable-selection-popover.tsx
-var React11 = __toESM(require("react"));
-var import_react8 = require("react");
+var React12 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_ui13 = require("@elementor/ui");
 
 // src/prop-types/color-variable-prop-type.ts
 var import_editor_props = require("@elementor/editor-props");
@@ -388,19 +414,30 @@ var import_schema2 = require("@elementor/schema");
 var fontVariablePropTypeUtil = (0, import_editor_props2.createPropUtils)("global-font-variable", import_schema2.z.string());
 
 // src/components/color-variable-creation.tsx
-var React2 = __toESM(require("react"));
-var import_react2 = require("react");
+var React3 = __toESM(require("react"));
+var import_react3 = require("react");
 var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_ui = require("@elementor/editor-ui");
-var import_icons = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
-var SIZE = "tiny";
+var import_icons2 = require("@elementor/icons");
+var import_ui3 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+
+// src/components/variable-selection-popover.context.ts
+var import_react2 = require("react");
+var PopoverContentRefContext = (0, import_react2.createContext)(null);
+var usePopoverContentRef = () => {
+  return (0, import_react2.useContext)(PopoverContentRefContext);
+};
+
+// src/components/color-variable-creation.tsx
+var SIZE2 = "tiny";
 var ColorVariableCreation = ({ onGoBack, onClose }) => {
   const { setValue: setVariable } = (0, import_editor_controls.useBoundProp)(colorVariablePropTypeUtil);
-  const [color, setColor] = (0, import_react2.useState)("");
-  const [label, setLabel] = (0, import_react2.useState)("");
-  const anchorRef = (0, import_react2.useRef)(null);
+  const [color, setColor] = (0, import_react3.useState)("");
+  const [label, setLabel] = (0, import_react3.useState)("");
+  const defaultRef = (0, import_react3.useRef)(null);
+  const anchorRef = usePopoverContentRef() ?? defaultRef;
   const resetFields = () => {
     setColor("");
     setLabel("");
@@ -422,23 +459,23 @@ var ColorVariableCreation = ({ onGoBack, onClose }) => {
   const isFormInvalid = () => {
     return !color?.trim() || !label?.trim();
   };
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(import_editor_editing_panel.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React3.createElement(
     import_editor_ui.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React2.createElement(React2.Fragment, null, onGoBack && /* @__PURE__ */ React2.createElement(import_ui2.IconButton, { size: SIZE, "aria-label": (0, import_i18n.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React2.createElement(import_icons.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React2.createElement(import_icons.BrushIcon, { fontSize: SIZE })),
-      title: (0, import_i18n.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(import_ui3.IconButton, { size: SIZE2, "aria-label": (0, import_i18n2.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(import_icons2.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React3.createElement(import_icons2.BrushIcon, { fontSize: SIZE2 })),
+      title: (0, import_i18n2.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React2.createElement(import_ui2.Divider, null), /* @__PURE__ */ React2.createElement(import_ui2.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui2.FormLabel, { size: "small" }, (0, import_i18n.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
-    import_ui2.TextField,
+  ), /* @__PURE__ */ React3.createElement(import_ui3.Divider, null), /* @__PURE__ */ React3.createElement(import_editor_controls.PopoverContent, { p: 2 }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { size: "tiny" }, (0, import_i18n2.__)("Name", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    import_ui3.TextField,
     {
       size: "tiny",
       fullWidth: true,
       value: label,
       onChange: (e) => setLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui2.FormLabel, { size: "small" }, (0, import_i18n.__)("Value", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
-    import_ui2.UnstableColorField,
+  ))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { size: "tiny" }, (0, import_i18n2.__)("Value", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    import_ui3.UnstableColorField,
     {
       size: "tiny",
       fullWidth: true,
@@ -452,25 +489,27 @@ var ColorVariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     }
-  )))), /* @__PURE__ */ React2.createElement(import_ui2.CardActions, null, /* @__PURE__ */ React2.createElement(import_ui2.Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, (0, import_i18n.__)("Create", "elementor"))));
+  )))), /* @__PURE__ */ React3.createElement(import_ui3.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React3.createElement(import_ui3.Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, (0, import_i18n2.__)("Create", "elementor"))));
 };
 
 // src/components/color-variable-edit.tsx
-var React3 = __toESM(require("react"));
-var import_react3 = require("react");
+var React4 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_icons2 = require("@elementor/icons");
-var import_ui3 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
-var SIZE2 = "tiny";
+var import_icons3 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+var SIZE3 = "tiny";
 var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global color variable not found`);
   }
-  const anchorRef = (0, import_react3.useRef)(null);
-  const [color, setColor] = (0, import_react3.useState)(variable.value);
-  const [label, setLabel] = (0, import_react3.useState)(variable.label);
+  const defaultRef = (0, import_react4.useRef)(null);
+  const anchorRef = usePopoverContentRef() ?? defaultRef;
+  const [color, setColor] = (0, import_react4.useState)(variable.value);
+  const [label, setLabel] = (0, import_react4.useState)(variable.label);
   const handleUpdate = () => {
     updateVariable(editId, {
       value: color,
@@ -479,26 +518,36 @@ var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onSubmit?.();
     });
   };
+  const handleDelete = () => {
+    deleteVariable(editId).then(() => {
+      onSubmit?.();
+    });
+  };
   const noValueChanged = () => color === variable.value && label === variable.label;
   const hasEmptyValue = () => "" === color.trim() || "" === label.trim();
   const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+  const actions = [];
+  actions.push(
+    /* @__PURE__ */ React4.createElement(import_ui4.IconButton, { key: "delete", size: SIZE3, "aria-label": (0, import_i18n3.__)("Delete", "elementor"), onClick: handleDelete }, /* @__PURE__ */ React4.createElement(import_icons3.TrashIcon, { fontSize: SIZE3 }))
+  );
+  return /* @__PURE__ */ React4.createElement(import_editor_ui2.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React4.createElement(
     import_editor_ui2.PopoverHeader,
     {
-      title: (0, import_i18n2.__)("Edit variable", "elementor"),
+      title: (0, import_i18n3.__)("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(import_ui3.IconButton, { size: SIZE2, "aria-label": (0, import_i18n2.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(import_icons2.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React3.createElement(import_icons2.BrushIcon, { fontSize: SIZE2 }))
+      icon: /* @__PURE__ */ React4.createElement(React4.Fragment, null, onGoBack && /* @__PURE__ */ React4.createElement(import_ui4.IconButton, { size: SIZE3, "aria-label": (0, import_i18n3.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React4.createElement(import_icons3.ArrowLeftIcon, { fontSize: SIZE3 })), /* @__PURE__ */ React4.createElement(import_icons3.BrushIcon, { fontSize: SIZE3 })),
+      actions
     }
-  ), /* @__PURE__ */ React3.createElement(import_ui3.Divider, null), /* @__PURE__ */ React3.createElement(import_ui3.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { size: "small" }, (0, import_i18n2.__)("Name", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
-    import_ui3.TextField,
+  ), /* @__PURE__ */ React4.createElement(import_ui4.Divider, null), /* @__PURE__ */ React4.createElement(import_editor_controls2.PopoverContent, { p: 2 }, /* @__PURE__ */ React4.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React4.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(import_ui4.FormLabel, { size: "tiny" }, (0, import_i18n3.__)("Name", "elementor"))), /* @__PURE__ */ React4.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(
+    import_ui4.TextField,
     {
       size: "tiny",
       fullWidth: true,
       value: label,
       onChange: (e) => setLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { size: "small" }, (0, import_i18n2.__)("Value", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
-    import_ui3.UnstableColorField,
+  ))), /* @__PURE__ */ React4.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React4.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(import_ui4.FormLabel, { size: "tiny" }, (0, import_i18n3.__)("Value", "elementor"))), /* @__PURE__ */ React4.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(
+    import_ui4.UnstableColorField,
     {
       size: "tiny",
       fullWidth: true,
@@ -512,92 +561,105 @@ var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     }
-  )))), /* @__PURE__ */ React3.createElement(import_ui3.CardActions, null, /* @__PURE__ */ React3.createElement(import_ui3.Button, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, (0, import_i18n2.__)("Save", "elementor"))));
+  )))), /* @__PURE__ */ React4.createElement(import_ui4.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React4.createElement(import_ui4.Button, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, (0, import_i18n3.__)("Save", "elementor"))));
 };
 
 // src/components/color-variables-selection.tsx
-var React7 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_editor_controls2 = require("@elementor/editor-controls");
-var import_editor_ui3 = require("@elementor/editor-ui");
+var React8 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons5 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_ui9 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
-var React4 = __toESM(require("react"));
-var import_icons3 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
-var SIZE3 = "tiny";
+var React5 = __toESM(require("react"));
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_icons4 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+var SIZE4 = "tiny";
+var isVersion330Active = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30");
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(import_ui4.ListItemIcon, null, item.icon), /* @__PURE__ */ React4.createElement(
-    import_ui4.ListItemText,
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui5.ListItemIcon, null, item.icon), /* @__PURE__ */ React5.createElement(
+    import_ui5.Box,
     {
-      primary: item.label || item.value,
-      secondary: item.secondaryText,
-      primaryTypographyProps: {
-        variant: "body2",
-        color: "text.secondary",
-        style: {
-          lineHeight: 2,
-          display: "inline-block",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          maxWidth: "81px"
-        }
-      },
-      secondaryTypographyProps: {
+      sx: {
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        alignItems: "center",
+        gap: 1
+      }
+    },
+    /* @__PURE__ */ React5.createElement(
+      import_editor_ui3.EllipsisWithTooltip,
+      {
+        title: item.label || item.value,
+        as: import_ui5.Typography,
+        variant: isVersion330Active ? "caption" : "body2",
+        color: isVersion330Active ? "text.primary" : "text.secondary",
+        sx: { marginTop: "1px", lineHeight: "2" },
+        maxWidth: "50%"
+      }
+    ),
+    item.secondaryText && /* @__PURE__ */ React5.createElement(
+      import_editor_ui3.EllipsisWithTooltip,
+      {
+        title: item.secondaryText,
+        as: import_ui5.Typography,
         variant: "caption",
         color: "text.tertiary",
-        style: { marginTop: "1px", lineHeight: "1" }
-      },
-      sx: { display: "flex", alignItems: "center", gap: 1 }
-    }
-  ), !!onEdit && /* @__PURE__ */ React4.createElement(
-    import_ui4.IconButton,
+        sx: { marginTop: "1px", lineHeight: "1" },
+        maxWidth: "50%"
+      }
+    )
+  ), !!onEdit && /* @__PURE__ */ React5.createElement(
+    import_ui5.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": (0, import_i18n3.__)("Edit", "elementor")
+      "aria-label": (0, import_i18n4.__)("Edit", "elementor")
     },
-    /* @__PURE__ */ React4.createElement(import_icons3.EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React5.createElement(import_icons4.EditIcon, { color: "action", fontSize: SIZE4 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-var React5 = __toESM(require("react"));
-var import_icons4 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
-var NoSearchResults = ({ searchValue, onClear }) => {
-  return /* @__PURE__ */ React5.createElement(
-    import_ui5.Stack,
+var React6 = __toESM(require("react"));
+var import_ui6 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
+  return /* @__PURE__ */ React6.createElement(
+    import_ui6.Stack,
     {
       gap: 1,
       alignItems: "center",
       justifyContent: "center",
       height: "100%",
+      p: 2.5,
       color: "text.secondary",
-      sx: { p: 2.5, pb: 5.5 }
+      sx: { pb: 3.5 }
     },
-    /* @__PURE__ */ React5.createElement(import_icons4.ColorFilterIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React5.createElement(import_ui5.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n4.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React5.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React5.createElement(import_ui5.Typography, { align: "center", variant: "caption" }, (0, import_i18n4.__)("Try something else.", "elementor"), /* @__PURE__ */ React5.createElement("br", null), /* @__PURE__ */ React5.createElement(import_ui5.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n4.__)("Clear & try again", "elementor")))
+    icon,
+    /* @__PURE__ */ React6.createElement(import_ui6.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n5.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React6.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React6.createElement(import_ui6.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n5.__)("Try something else.", "elementor"), /* @__PURE__ */ React6.createElement(import_ui6.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n5.__)("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
-var React6 = __toESM(require("react"));
-var import_ui6 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
-var NoVariables = ({ icon, onAdd }) => /* @__PURE__ */ React6.createElement(
-  import_ui6.Stack,
+var React7 = __toESM(require("react"));
+var import_ui7 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
+var NoVariables = ({ icon, title, onAdd }) => /* @__PURE__ */ React7.createElement(
+  import_ui7.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -607,14 +669,14 @@ var NoVariables = ({ icon, onAdd }) => /* @__PURE__ */ React6.createElement(
     sx: { p: 2.5, pb: 5.5 }
   },
   icon,
-  /* @__PURE__ */ React6.createElement(import_ui6.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n5.__)("Create your first variable", "elementor")),
-  /* @__PURE__ */ React6.createElement(import_ui6.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, (0, import_i18n5.__)("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
-  onAdd && /* @__PURE__ */ React6.createElement(import_ui6.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n5.__)("Create a variable", "elementor"))
+  /* @__PURE__ */ React7.createElement(import_ui7.Typography, { align: "center", variant: "subtitle2" }, title),
+  /* @__PURE__ */ React7.createElement(import_ui7.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, (0, import_i18n6.__)("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
+  onAdd && /* @__PURE__ */ React7.createElement(import_ui7.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n6.__)("Create a variable", "elementor"))
 );
 
 // src/components/ui/styled-menu-list.tsx
-var import_ui7 = require("@elementor/ui");
-var VariablesStyledMenuList = (0, import_ui7.styled)(import_ui7.MenuList)(({ theme }) => ({
+var import_ui8 = require("@elementor/ui");
+var VariablesStyledMenuList = (0, import_ui8.styled)(import_ui8.MenuList)(({ theme }) => ({
   "& > li": {
     height: 32,
     width: "100%",
@@ -645,10 +707,10 @@ var VariablesStyledMenuList = (0, import_ui7.styled)(import_ui7.MenuList)(({ the
 }));
 
 // src/components/color-variables-selection.tsx
-var SIZE4 = "tiny";
+var SIZE5 = "tiny";
 var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
-  const { value: variable, setValue: setVariable } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
-  const [searchValue, setSearchValue] = (0, import_react4.useState)("");
+  const { value: variable, setValue: setVariable } = (0, import_editor_controls3.useBoundProp)(colorVariablePropTypeUtil);
+  const [searchValue, setSearchValue] = (0, import_react5.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -661,19 +723,19 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React7.createElement(import_ui8.IconButton, { key: "add", size: SIZE4, onClick: onAdd }, /* @__PURE__ */ React7.createElement(import_icons5.PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React8.createElement(import_ui9.IconButton, { key: "add", size: SIZE5, onClick: onAdd }, /* @__PURE__ */ React8.createElement(import_icons5.PlusIcon, { fontSize: SIZE5 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React7.createElement(import_ui8.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React7.createElement(import_icons5.SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React8.createElement(import_ui9.IconButton, { key: "settings", size: SIZE5, onClick: onSettings }, /* @__PURE__ */ React8.createElement(import_icons5.SettingsIcon, { fontSize: SIZE5 }))
     );
   }
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React7.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
+    icon: /* @__PURE__ */ React8.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
     secondaryText: value,
     onEdit: () => onEdit?.(key)
   }));
@@ -683,23 +745,23 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
-    import_editor_ui3.PopoverHeader,
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+    import_editor_ui4.PopoverHeader,
     {
-      title: (0, import_i18n6.__)("Variables", "elementor"),
-      icon: /* @__PURE__ */ React7.createElement(import_icons5.ColorFilterIcon, { fontSize: SIZE4 }),
+      title: (0, import_i18n7.__)("Variables", "elementor"),
+      icon: /* @__PURE__ */ React8.createElement(import_icons5.ColorFilterIcon, { fontSize: SIZE5 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React7.createElement(
-    import_editor_ui3.PopoverSearch,
+  ), hasVariables && /* @__PURE__ */ React8.createElement(
+    import_editor_ui4.PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n6.__)("Search", "elementor")
+      placeholder: (0, import_i18n7.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React7.createElement(import_ui8.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React7.createElement(
-    import_editor_ui3.PopoverMenuList,
+  ), /* @__PURE__ */ React8.createElement(import_ui9.Divider, null), /* @__PURE__ */ React8.createElement(import_editor_editing_panel2.PopoverScrollableContent, null, hasVariables && hasSearchResults && /* @__PURE__ */ React8.createElement(
+    import_editor_ui4.PopoverMenuList,
     {
       items,
       onSelect: handleSetColorVariable,
@@ -708,28 +770,42 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       selectedValue: variable,
       "data-testid": "color-variables-list",
       menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React7.createElement(MenuItemContent, { item })
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React8.createElement(MenuItemContent, { item })
+    }
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React8.createElement(
+    NoSearchResults,
+    {
+      searchValue,
+      onClear: handleClearSearch,
+      icon: /* @__PURE__ */ React8.createElement(import_icons5.BrushIcon, { fontSize: "large" })
+    }
+  ), !hasVariables && /* @__PURE__ */ React8.createElement(
+    NoVariables,
+    {
+      title: (0, import_i18n7.__)("Create your first color variable", "elementor"),
+      icon: /* @__PURE__ */ React8.createElement(import_icons5.BrushIcon, { fontSize: "large" }),
+      onAdd
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React7.createElement(NoSearchResults, { searchValue, onClear: handleClearSearch }), !hasVariables && /* @__PURE__ */ React7.createElement(NoVariables, { icon: /* @__PURE__ */ React7.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" }), onAdd }));
+  )));
 };
 
 // src/components/font-variable-creation.tsx
-var React8 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_editor_controls3 = require("@elementor/editor-controls");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_editor_ui4 = require("@elementor/editor-ui");
+var React9 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_editor_controls4 = require("@elementor/editor-controls");
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
-var import_ui9 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
-var SIZE5 = "tiny";
+var import_ui10 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
+var SIZE6 = "tiny";
 var FontVariableCreation = ({ onClose, onGoBack }) => {
-  const fontFamilies = (0, import_editor_editing_panel.useFontFamilies)();
-  const { setValue: setVariable } = (0, import_editor_controls3.useBoundProp)(fontVariablePropTypeUtil);
-  const [fontFamily, setFontFamily] = (0, import_react5.useState)("");
-  const [label, setLabel] = (0, import_react5.useState)("");
-  const anchorRef = (0, import_react5.useRef)(null);
-  const fontPopoverState = (0, import_ui9.usePopupState)({ variant: "popover" });
+  const fontFamilies = (0, import_editor_editing_panel3.useFontFamilies)();
+  const { setValue: setVariable } = (0, import_editor_controls4.useBoundProp)(fontVariablePropTypeUtil);
+  const [fontFamily, setFontFamily] = (0, import_react6.useState)("");
+  const [label, setLabel] = (0, import_react6.useState)("");
+  const anchorRef = (0, import_react6.useRef)(null);
+  const fontPopoverState = (0, import_ui10.usePopupState)({ variant: "popover" });
   const resetFields = () => {
     setFontFamily("");
     setLabel("");
@@ -751,74 +827,76 @@ var FontVariableCreation = ({ onClose, onGoBack }) => {
   const isFormInvalid = () => {
     return !fontFamily?.trim() || !label?.trim();
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
-    import_editor_ui4.PopoverHeader,
+  const sectionWidth = (0, import_editor_editing_panel3.useSectionWidth)();
+  return /* @__PURE__ */ React9.createElement(import_editor_editing_panel3.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React9.createElement(
+    import_editor_ui5.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React8.createElement(React8.Fragment, null, onGoBack && /* @__PURE__ */ React8.createElement(import_ui9.IconButton, { size: SIZE5, "aria-label": (0, import_i18n7.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React8.createElement(import_icons6.ArrowLeftIcon, { fontSize: SIZE5 })), /* @__PURE__ */ React8.createElement(import_icons6.TextIcon, { fontSize: SIZE5 })),
-      title: (0, import_i18n7.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(import_ui10.IconButton, { size: SIZE6, "aria-label": (0, import_i18n8.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React9.createElement(import_icons6.ArrowLeftIcon, { fontSize: SIZE6 })), /* @__PURE__ */ React9.createElement(import_icons6.TextIcon, { fontSize: SIZE6 })),
+      title: (0, import_i18n8.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React8.createElement(import_ui9.Divider, null), /* @__PURE__ */ React8.createElement(import_ui9.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React8.createElement(import_ui9.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui9.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_ui9.FormLabel, { size: "small" }, (0, import_i18n7.__)("Name", "elementor"))), /* @__PURE__ */ React8.createElement(import_ui9.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(
-    import_ui9.TextField,
+  ), /* @__PURE__ */ React9.createElement(import_ui10.Divider, null), /* @__PURE__ */ React9.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React9.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_ui10.FormLabel, { size: "tiny" }, (0, import_i18n8.__)("Name", "elementor"))), /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(
+    import_ui10.TextField,
     {
       size: "tiny",
       fullWidth: true,
       value: label,
       onChange: (e) => setLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React8.createElement(import_ui9.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui9.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_ui9.FormLabel, { size: "small" }, (0, import_i18n7.__)("Value", "elementor"))), /* @__PURE__ */ React8.createElement(import_ui9.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
-    import_ui9.UnstableTag,
+  ))), /* @__PURE__ */ React9.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_ui10.FormLabel, { size: "tiny" }, (0, import_i18n8.__)("Value", "elementor"))), /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+    import_ui10.UnstableTag,
     {
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React8.createElement(import_icons6.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui9.bindTrigger)(fontPopoverState),
+      endIcon: /* @__PURE__ */ React9.createElement(import_icons6.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui10.bindTrigger)(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React8.createElement(
-    import_ui9.Popover,
+  ), /* @__PURE__ */ React9.createElement(
+    import_ui10.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef.current,
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: -20 },
-      ...(0, import_ui9.bindPopover)(fontPopoverState)
+      ...(0, import_ui10.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React8.createElement(
-      import_editor_controls3.FontFamilySelector,
+    /* @__PURE__ */ React9.createElement(
+      import_editor_controls4.FontFamilySelector,
       {
         fontFamilies,
         fontFamily,
         onFontFamilyChange: setFontFamily,
-        onClose: fontPopoverState.close
+        onClose: fontPopoverState.close,
+        sectionWidth
       }
     )
-  ))))), /* @__PURE__ */ React8.createElement(import_ui9.CardActions, null, /* @__PURE__ */ React8.createElement(import_ui9.Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, (0, import_i18n7.__)("Create", "elementor"))));
+  ))))), /* @__PURE__ */ React9.createElement(import_ui10.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React9.createElement(import_ui10.Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, (0, import_i18n8.__)("Create", "elementor"))));
 };
 
 // src/components/font-variable-edit.tsx
-var React9 = __toESM(require("react"));
-var import_react6 = require("react");
-var import_editor_controls4 = require("@elementor/editor-controls");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_ui5 = require("@elementor/editor-ui");
+var React10 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
+var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
-var import_ui10 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
-var SIZE6 = "tiny";
+var import_ui11 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
+var SIZE7 = "tiny";
 var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global font variable "${editId}" not found`);
   }
-  const [fontFamily, setFontFamily] = (0, import_react6.useState)(variable.value);
-  const [label, setLabel] = (0, import_react6.useState)(variable.label);
-  const variableNameId = (0, import_react6.useId)();
-  const variableValueId = (0, import_react6.useId)();
-  const anchorRef = (0, import_react6.useRef)(null);
-  const fontPopoverState = (0, import_ui10.usePopupState)({ variant: "popover" });
-  const fontFamilies = (0, import_editor_editing_panel2.useFontFamilies)();
+  const [fontFamily, setFontFamily] = (0, import_react7.useState)(variable.value);
+  const [label, setLabel] = (0, import_react7.useState)(variable.label);
+  const variableNameId = (0, import_react7.useId)();
+  const variableValueId = (0, import_react7.useId)();
+  const anchorRef = (0, import_react7.useRef)(null);
+  const fontPopoverState = (0, import_ui11.usePopupState)({ variant: "popover" });
+  const fontFamilies = (0, import_editor_editing_panel4.useFontFamilies)();
   const handleUpdate = () => {
     updateVariable(editId, {
       value: fontFamily,
@@ -827,18 +905,29 @@ var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onSubmit?.();
     });
   };
+  const handleDelete = () => {
+    deleteVariable(editId).then(() => {
+      onSubmit?.();
+    });
+  };
   const noValueChanged = () => fontFamily === variable.value && label === variable.label;
   const hasEmptyValue = () => "" === fontFamily.trim() || "" === label.trim();
   const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
-    import_editor_ui5.PopoverHeader,
+  const sectionWidth = (0, import_editor_editing_panel4.useSectionWidth)();
+  const actions = [];
+  actions.push(
+    /* @__PURE__ */ React10.createElement(import_ui11.IconButton, { key: "delete", size: SIZE7, "aria-label": (0, import_i18n9.__)("Delete", "elementor"), onClick: handleDelete }, /* @__PURE__ */ React10.createElement(import_icons7.TrashIcon, { fontSize: SIZE7 }))
+  );
+  return /* @__PURE__ */ React10.createElement(import_editor_ui6.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React10.createElement(
+    import_editor_ui6.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(import_ui10.IconButton, { size: SIZE6, "aria-label": (0, import_i18n8.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React9.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE6 })), /* @__PURE__ */ React9.createElement(import_icons7.TextIcon, { fontSize: SIZE6 })),
-      title: (0, import_i18n8.__)("Edit variable", "elementor"),
-      onClose
+      icon: /* @__PURE__ */ React10.createElement(React10.Fragment, null, onGoBack && /* @__PURE__ */ React10.createElement(import_ui11.IconButton, { size: SIZE7, "aria-label": (0, import_i18n9.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React10.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE7 })), /* @__PURE__ */ React10.createElement(import_icons7.TextIcon, { fontSize: SIZE7 })),
+      title: (0, import_i18n9.__)("Edit variable", "elementor"),
+      onClose,
+      actions
     }
-  ), /* @__PURE__ */ React9.createElement(import_ui10.Divider, null), /* @__PURE__ */ React9.createElement(import_ui10.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_ui10.FormLabel, { htmlFor: variableNameId, size: "small" }, (0, import_i18n8.__)("Name", "elementor"))), /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(
-    import_ui10.TextField,
+  ), /* @__PURE__ */ React10.createElement(import_ui11.Divider, null), /* @__PURE__ */ React10.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React10.createElement(import_ui11.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui11.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui11.FormLabel, { htmlFor: variableNameId, size: "tiny" }, (0, import_i18n9.__)("Name", "elementor"))), /* @__PURE__ */ React10.createElement(import_ui11.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(
+    import_ui11.TextField,
     {
       id: variableNameId,
       size: "tiny",
@@ -846,50 +935,52 @@ var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       value: label,
       onChange: (e) => setLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React9.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_ui10.FormLabel, { htmlFor: variableValueId, size: "small" }, (0, import_i18n8.__)("Value", "elementor"))), /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
-    import_ui10.UnstableTag,
+  ))), /* @__PURE__ */ React10.createElement(import_ui11.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui11.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui11.FormLabel, { htmlFor: variableValueId, size: "tiny" }, (0, import_i18n9.__)("Value", "elementor"))), /* @__PURE__ */ React10.createElement(import_ui11.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+    import_ui11.UnstableTag,
     {
       id: variableValueId,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React9.createElement(import_icons7.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui10.bindTrigger)(fontPopoverState),
+      endIcon: /* @__PURE__ */ React10.createElement(import_icons7.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui11.bindTrigger)(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React9.createElement(
-    import_ui10.Popover,
+  ), /* @__PURE__ */ React10.createElement(
+    import_ui11.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef.current,
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: -20 },
-      ...(0, import_ui10.bindPopover)(fontPopoverState)
+      ...(0, import_ui11.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React9.createElement(
-      import_editor_controls4.FontFamilySelector,
+    /* @__PURE__ */ React10.createElement(
+      import_editor_controls5.FontFamilySelector,
       {
         fontFamilies,
         fontFamily,
         onFontFamilyChange: setFontFamily,
-        onClose: fontPopoverState.close
+        onClose: fontPopoverState.close,
+        sectionWidth
       }
     )
-  ))))), /* @__PURE__ */ React9.createElement(import_ui10.CardActions, null, /* @__PURE__ */ React9.createElement(import_ui10.Button, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, (0, import_i18n8.__)("Save", "elementor"))));
+  ))))), /* @__PURE__ */ React10.createElement(import_ui11.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React10.createElement(import_ui11.Button, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, (0, import_i18n9.__)("Save", "elementor"))));
 };
 
 // src/components/font-variables-selection.tsx
-var React10 = __toESM(require("react"));
-var import_react7 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
-var import_editor_ui6 = require("@elementor/editor-ui");
+var React11 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_editor_controls6 = require("@elementor/editor-controls");
+var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
+var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons8 = require("@elementor/icons");
-var import_ui11 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
-var SIZE7 = "tiny";
+var import_ui12 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
+var SIZE8 = "tiny";
 var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
-  const { value: variable, setValue: setVariable } = (0, import_editor_controls5.useBoundProp)(fontVariablePropTypeUtil);
-  const [searchValue, setSearchValue] = (0, import_react7.useState)("");
+  const { value: variable, setValue: setVariable } = (0, import_editor_controls6.useBoundProp)(fontVariablePropTypeUtil);
+  const [searchValue, setSearchValue] = (0, import_react8.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -902,19 +993,19 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React10.createElement(import_ui11.IconButton, { key: "add", size: SIZE7, onClick: onAdd }, /* @__PURE__ */ React10.createElement(import_icons8.PlusIcon, { fontSize: SIZE7 }))
+      /* @__PURE__ */ React11.createElement(import_ui12.IconButton, { key: "add", size: SIZE8, onClick: onAdd }, /* @__PURE__ */ React11.createElement(import_icons8.PlusIcon, { fontSize: SIZE8 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React10.createElement(import_ui11.IconButton, { key: "settings", size: SIZE7, onClick: onSettings }, /* @__PURE__ */ React10.createElement(import_icons8.SettingsIcon, { fontSize: SIZE7 }))
+      /* @__PURE__ */ React11.createElement(import_ui12.IconButton, { key: "settings", size: SIZE8, onClick: onSettings }, /* @__PURE__ */ React11.createElement(import_icons8.SettingsIcon, { fontSize: SIZE8 }))
     );
   }
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React10.createElement(import_icons8.TextIcon, null),
+    icon: /* @__PURE__ */ React11.createElement(import_icons8.TextIcon, { fontSize: SIZE8 }),
     secondaryText: value,
     onEdit: () => onEdit?.(key)
   }));
@@ -924,23 +1015,23 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
-    import_editor_ui6.PopoverHeader,
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+    import_editor_ui7.PopoverHeader,
     {
-      title: (0, import_i18n9.__)("Variables", "elementor"),
+      title: (0, import_i18n10.__)("Variables", "elementor"),
       onClose: closePopover,
-      icon: /* @__PURE__ */ React10.createElement(import_icons8.ColorFilterIcon, { fontSize: SIZE7 }),
+      icon: /* @__PURE__ */ React11.createElement(import_icons8.ColorFilterIcon, { fontSize: SIZE8 }),
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React10.createElement(
-    import_editor_ui6.PopoverSearch,
+  ), hasVariables && /* @__PURE__ */ React11.createElement(
+    import_editor_ui7.PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n9.__)("Search", "elementor")
+      placeholder: (0, import_i18n10.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React10.createElement(import_ui11.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React10.createElement(
-    import_editor_ui6.PopoverMenuList,
+  ), /* @__PURE__ */ React11.createElement(import_ui12.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_editing_panel5.PopoverScrollableContent, null, hasVariables && hasSearchResults && /* @__PURE__ */ React11.createElement(
+    import_editor_ui7.PopoverMenuList,
     {
       items,
       onSelect: handleSetVariable,
@@ -949,9 +1040,23 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       selectedValue: variable,
       "data-testid": "font-variables-list",
       menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React10.createElement(MenuItemContent, { item })
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React11.createElement(MenuItemContent, { item })
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React10.createElement(NoSearchResults, { searchValue, onClear: handleClearSearch }), !hasVariables && /* @__PURE__ */ React10.createElement(NoVariables, { icon: /* @__PURE__ */ React10.createElement(import_icons8.TextIcon, { fontSize: "large" }), onAdd }));
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React11.createElement(
+    NoSearchResults,
+    {
+      searchValue,
+      onClear: handleClearSearch,
+      icon: /* @__PURE__ */ React11.createElement(import_icons8.TextIcon, { fontSize: "large" })
+    }
+  ), !hasVariables && /* @__PURE__ */ React11.createElement(
+    NoVariables,
+    {
+      title: (0, import_i18n10.__)("Create your first font variable", "elementor"),
+      icon: /* @__PURE__ */ React11.createElement(import_icons8.TextIcon, { fontSize: "large" }),
+      onAdd
+    }
+  )));
 };
 
 // src/components/variable-selection-popover.tsx
@@ -959,16 +1064,17 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = (0, import_react8.useState)(VIEW_LIST);
-  const editIdRef = (0, import_react8.useRef)("");
-  return renderStage({
+  const [currentView, setCurrentView] = (0, import_react9.useState)(VIEW_LIST);
+  const editIdRef = (0, import_react9.useRef)("");
+  const anchorRef = (0, import_react9.useRef)(null);
+  return /* @__PURE__ */ React12.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React12.createElement(import_ui13.Box, { ref: anchorRef }, renderStage({
     propTypeKey,
     currentView,
     selectedVariable,
     editIdRef,
     setCurrentView,
     closePopover
-  });
+  })));
 };
 function renderStage(props) {
   const handleSubmitOnEdit = () => {
@@ -980,7 +1086,7 @@ function renderStage(props) {
   };
   if (fontVariablePropTypeUtil.key === props.propTypeKey) {
     if (VIEW_LIST === props.currentView) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         FontVariablesSelection,
         {
           closePopover: props.closePopover,
@@ -995,7 +1101,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_ADD === props.currentView) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         FontVariableCreation,
         {
           onGoBack: () => props.setCurrentView(VIEW_LIST),
@@ -1004,7 +1110,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_EDIT === props.currentView) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         FontVariableEdit,
         {
           editId: props.editIdRef.current ?? "",
@@ -1017,7 +1123,7 @@ function renderStage(props) {
   }
   if (colorVariablePropTypeUtil.key === props.propTypeKey) {
     if (VIEW_LIST === props.currentView) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         ColorVariablesSelection,
         {
           closePopover: props.closePopover,
@@ -1032,7 +1138,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_ADD === props.currentView) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         ColorVariableCreation,
         {
           onGoBack: () => props.setCurrentView(VIEW_LIST),
@@ -1041,7 +1147,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_EDIT === props.currentView) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         ColorVariableEdit,
         {
           editId: props.editIdRef.current ?? "",
@@ -1056,13 +1162,12 @@ function renderStage(props) {
 }
 
 // src/controls/color-variable-control.tsx
-var SIZE8 = "tiny";
 var ColorVariableControl = () => {
-  const { setValue: setColor } = (0, import_editor_controls6.useBoundProp)();
-  const { value: variableValue } = (0, import_editor_controls6.useBoundProp)(colorVariablePropTypeUtil);
-  const anchorRef = (0, import_react9.useRef)(null);
-  const popupId = (0, import_react9.useId)();
-  const popupState = (0, import_ui12.usePopupState)({
+  const { setValue: setColor } = (0, import_editor_controls7.useBoundProp)();
+  const { value: variableValue } = (0, import_editor_controls7.useBoundProp)(colorVariablePropTypeUtil);
+  const anchorRef = (0, import_react10.useRef)(null);
+  const popupId = (0, import_react10.useId)();
+  const popupState = (0, import_ui14.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
@@ -1073,33 +1178,27 @@ var ColorVariableControl = () => {
   const unlinkVariable = () => {
     setColor(import_editor_props3.colorPropTypeUtil.create(selectedVariable.value));
   };
-  return /* @__PURE__ */ React12.createElement(import_ui12.Box, { ref: anchorRef }, /* @__PURE__ */ React12.createElement(
-    import_ui12.UnstableTag,
+  return /* @__PURE__ */ React13.createElement(import_ui14.Box, { ref: anchorRef }, /* @__PURE__ */ React13.createElement(
+    VariableTag,
     {
-      fullWidth: true,
-      showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React12.createElement(import_ui12.Stack, { spacing: 0.75, direction: "row", alignItems: "center" }, /* @__PURE__ */ React12.createElement(ColorIndicator, { size: "inherit", value: selectedVariable.value, component: "span" }), /* @__PURE__ */ React12.createElement(import_icons9.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
-      label: /* @__PURE__ */ React12.createElement(import_ui12.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React12.createElement(
-        import_ui12.Typography,
-        {
-          sx: { textOverflow: "ellipsis", overflowX: "hidden", lineHeight: 1 },
-          variant: "caption"
-        },
-        selectedVariable.label
-      )),
-      actions: /* @__PURE__ */ React12.createElement(import_ui12.IconButton, { size: SIZE8, onClick: unlinkVariable, "aria-label": (0, import_i18n10.__)("Unlink", "elementor") }, /* @__PURE__ */ React12.createElement(import_icons9.DetachIcon, { fontSize: SIZE8 })),
-      ...(0, import_ui12.bindTrigger)(popupState)
+      label: selectedVariable.label,
+      startIcon: /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE }), /* @__PURE__ */ React13.createElement(ColorIndicator, { size: "inherit", value: selectedVariable.value, component: "span" })),
+      onUnlink: unlinkVariable,
+      ...(0, import_ui14.bindTrigger)(popupState)
     }
-  ), /* @__PURE__ */ React12.createElement(
-    import_ui12.Popover,
+  ), /* @__PURE__ */ React13.createElement(
+    import_ui14.Popover,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },
-      ...(0, import_ui12.bindPopover)(popupState)
+      PaperProps: {
+        sx: { my: 1 }
+      },
+      ...(0, import_ui14.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       VariableSelectionPopover,
       {
         selectedVariable,
@@ -1111,8 +1210,8 @@ var ColorVariableControl = () => {
 };
 
 // src/hooks/use-prop-color-variable-action.tsx
-var React13 = __toESM(require("react"));
-var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var React14 = __toESM(require("react"));
+var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 var import_icons10 = require("@elementor/icons");
 var import_i18n11 = require("@wordpress/i18n");
 
@@ -1132,14 +1231,14 @@ var supportsFontVariables = (propType) => {
 
 // src/hooks/use-prop-color-variable-action.tsx
 var usePropColorVariableAction = () => {
-  const { propType } = (0, import_editor_editing_panel3.useBoundProp)();
+  const { propType } = (0, import_editor_editing_panel6.useBoundProp)();
   const visible = !!propType && supportsColorVariables(propType);
   return {
     visible,
     icon: import_icons10.ColorFilterIcon,
     title: (0, import_i18n11.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React13.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
+      return /* @__PURE__ */ React14.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
     }
   };
 };
@@ -1154,7 +1253,7 @@ var variableTransformer = (0, import_editor_canvas.createTransformer)((value) =>
 });
 
 // src/init-color-variables.ts
-var { registerPopoverAction } = import_editor_editing_panel4.controlActionsMenu;
+var { registerPopoverAction } = import_editor_editing_panel7.controlActionsMenu;
 var conditions = {
   backgroundOverlay: ({ value: prop }) => {
     return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
@@ -1164,7 +1263,7 @@ var conditions = {
   }
 };
 function registerControlsAndActions() {
-  (0, import_editor_editing_panel4.registerControlReplacement)({
+  (0, import_editor_editing_panel7.registerControlReplacement)({
     component: ColorVariableControl,
     condition: ({ value }) => hasAssignedColorVariable(value)
   });
@@ -1174,19 +1273,19 @@ function registerControlsAndActions() {
   });
 }
 function registerRepeaterItemIcons() {
-  (0, import_editor_controls7.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls8.injectIntoRepeaterItemIcon)({
     id: "color-variables-background-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: conditions.backgroundOverlay
   });
-  (0, import_editor_controls7.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls8.injectIntoRepeaterItemIcon)({
     id: "color-variables-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: conditions.boxShadow
   });
 }
 function registerRepeaterItemLabels() {
-  (0, import_editor_controls7.injectIntoRepeaterItemLabel)({
+  (0, import_editor_controls8.injectIntoRepeaterItemLabel)({
     id: "color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: conditions.backgroundOverlay
@@ -1204,23 +1303,21 @@ function initColorVariables() {
 
 // src/init-font-variables.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
-var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
 
 // src/controls/font-variable-control.tsx
-var React14 = __toESM(require("react"));
-var import_react10 = require("react");
-var import_editor_controls8 = require("@elementor/editor-controls");
+var React15 = __toESM(require("react"));
+var import_react11 = require("react");
+var import_editor_controls9 = require("@elementor/editor-controls");
 var import_editor_props5 = require("@elementor/editor-props");
 var import_icons11 = require("@elementor/icons");
-var import_ui13 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
-var SIZE9 = "tiny";
+var import_ui15 = require("@elementor/ui");
 var FontVariableControl = () => {
-  const { setValue: setFontFamily } = (0, import_editor_controls8.useBoundProp)();
-  const { value: variableValue } = (0, import_editor_controls8.useBoundProp)(fontVariablePropTypeUtil);
-  const anchorRef = (0, import_react10.useRef)(null);
-  const popupId = (0, import_react10.useId)();
-  const popupState = (0, import_ui13.usePopupState)({
+  const { setValue: setFontFamily } = (0, import_editor_controls9.useBoundProp)();
+  const { value: variableValue } = (0, import_editor_controls9.useBoundProp)(fontVariablePropTypeUtil);
+  const anchorRef = (0, import_react11.useRef)(null);
+  const popupId = (0, import_react11.useId)();
+  const popupState = (0, import_ui15.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
@@ -1231,33 +1328,27 @@ var FontVariableControl = () => {
   const unlinkVariable = () => {
     setFontFamily(import_editor_props5.stringPropTypeUtil.create(selectedVariable.value));
   };
-  return /* @__PURE__ */ React14.createElement(import_ui13.Box, { ref: anchorRef }, /* @__PURE__ */ React14.createElement(
-    import_ui13.UnstableTag,
+  return /* @__PURE__ */ React15.createElement(import_ui15.Box, { ref: anchorRef }, /* @__PURE__ */ React15.createElement(
+    VariableTag,
     {
-      fullWidth: true,
-      showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React14.createElement(import_ui13.Stack, { spacing: 0.75, direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(import_icons11.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
-      label: /* @__PURE__ */ React14.createElement(import_ui13.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React14.createElement(
-        import_ui13.Typography,
-        {
-          sx: { textOverflow: "ellipsis", overflowX: "hidden", lineHeight: 1 },
-          variant: "caption"
-        },
-        selectedVariable.label
-      )),
-      actions: /* @__PURE__ */ React14.createElement(import_ui13.IconButton, { size: SIZE9, onClick: unlinkVariable, "aria-label": (0, import_i18n12.__)("Unlink", "elementor") }, /* @__PURE__ */ React14.createElement(import_icons11.DetachIcon, { fontSize: SIZE9 })),
-      ...(0, import_ui13.bindTrigger)(popupState)
+      label: selectedVariable.label,
+      startIcon: /* @__PURE__ */ React15.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE }),
+      onUnlink: unlinkVariable,
+      ...(0, import_ui15.bindTrigger)(popupState)
     }
-  ), /* @__PURE__ */ React14.createElement(
-    import_ui13.Popover,
+  ), /* @__PURE__ */ React15.createElement(
+    import_ui15.Popover,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },
-      ...(0, import_ui13.bindPopover)(popupState)
+      PaperProps: {
+        sx: { my: 1 }
+      },
+      ...(0, import_ui15.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React15.createElement(
       VariableSelectionPopover,
       {
         selectedVariable,
@@ -1269,27 +1360,27 @@ var FontVariableControl = () => {
 };
 
 // src/hooks/use-prop-font-variable-action.tsx
-var React15 = __toESM(require("react"));
-var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
+var React16 = __toESM(require("react"));
+var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_icons12 = require("@elementor/icons");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 var usePropFontVariableAction = () => {
-  const { propType } = (0, import_editor_editing_panel5.useBoundProp)();
+  const { propType } = (0, import_editor_editing_panel8.useBoundProp)();
   const visible = !!propType && supportsFontVariables(propType);
   return {
     visible,
     icon: import_icons12.ColorFilterIcon,
-    title: (0, import_i18n13.__)("Variables", "elementor"),
+    title: (0, import_i18n12.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React15.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
+      return /* @__PURE__ */ React16.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
     }
   };
 };
 
 // src/init-font-variables.ts
-var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel6.controlActionsMenu;
+var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel9.controlActionsMenu;
 function initFontVariables() {
-  (0, import_editor_editing_panel6.registerControlReplacement)({
+  (0, import_editor_editing_panel9.registerControlReplacement)({
     component: FontVariableControl,
     condition: ({ value }) => hasAssignedFontVariable(value)
   });
@@ -1301,10 +1392,10 @@ function initFontVariables() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React16 = __toESM(require("react"));
-var import_react11 = require("react");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_ui14 = require("@elementor/ui");
+var React17 = __toESM(require("react"));
+var import_react12 = require("react");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_ui16 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -1323,14 +1414,14 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React16.createElement(import_ui14.Portal, { container }, /* @__PURE__ */ React16.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React17.createElement(import_ui16.Portal, { container }, /* @__PURE__ */ React17.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
-  return (0, import_editor_v1_adapters.__privateUseListenTo)((0, import_editor_v1_adapters.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+  return (0, import_editor_v1_adapters2.__privateUseListenTo)((0, import_editor_v1_adapters2.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react11.useState)({});
-  (0, import_react11.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react12.useState)({});
+  (0, import_react12.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();