@elementor/editor-variables 0.14.0 → 0.15.0

package/dist/index.mjs

@@ -278,28 +278,27 @@ var useFilteredVariables = (searchValue, propTypeKey) => {
 var usePropVariables = (propKey) => {
   return 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;
   });
 };
@@ -307,7 +306,8 @@ var updateVariable = (updateId, { value, label }) => {
 // src/components/ui/color-indicator.tsx
 import { styled, UnstableColorIndicator } from "@elementor/ui";
 var ColorIndicator = styled(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
@@ -329,27 +329,43 @@ var BoxShadowRepeaterColorIndicator = ({ value }) => {
 };
 
 // src/controls/color-variable-control.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { useId as useId2, useRef as useRef6 } from "react";
 import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { colorPropTypeUtil } from "@elementor/editor-props";
-import { ColorFilterIcon as ColorFilterIcon4, DetachIcon } from "@elementor/icons";
-import {
-  bindPopover as bindPopover3,
-  bindTrigger as bindTrigger3,
-  Box,
-  IconButton as IconButton8,
-  Popover as Popover3,
-  Stack as Stack7,
-  Typography as Typography3,
-  UnstableTag as Tag,
-  usePopupState as usePopupState3
-} from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
+import { bindPopover as bindPopover3, bindTrigger as bindTrigger3, Box as Box4, Popover as Popover3, usePopupState as usePopupState3 } from "@elementor/ui";
+
+// src/components/ui/variable-tag.tsx
+import * as React2 from "react";
+import { DetachIcon } from "@elementor/icons";
+import { Box, IconButton, Stack, Typography, UnstableTag as Tag } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+var SIZE = "tiny";
+var VariableTag = ({ startIcon, label, onUnlink, ...props }) => {
+  const actions = [];
+  if (onUnlink) {
+    actions.push(
+      /* @__PURE__ */ React2.createElement(IconButton, { key: "unlink", size: SIZE, onClick: onUnlink, "aria-label": __("Unlink", "elementor") }, /* @__PURE__ */ React2.createElement(DetachIcon, { fontSize: SIZE }))
+    );
+  }
+  return /* @__PURE__ */ React2.createElement(
+    Tag,
+    {
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React2.createElement(Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React2.createElement(Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React2.createElement(Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      actions,
+      ...props
+    }
+  );
+};
 
 // src/components/variable-selection-popover.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { useRef as useRef5, useState as useState7 } from "react";
+import { Box as Box3 } from "@elementor/ui";
 
 // src/prop-types/color-variable-prop-type.ts
 import { createPropUtils } from "@elementor/editor-props";
@@ -362,9 +378,10 @@ import { z as z2 } from "@elementor/schema";
 var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.string());
 
 // src/components/color-variable-creation.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { useRef, useState } from "react";
-import { useBoundProp } from "@elementor/editor-controls";
+import { PopoverContent, useBoundProp } from "@elementor/editor-controls";
+import { PopoverScrollableContent } from "@elementor/editor-editing-panel";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { ArrowLeftIcon, BrushIcon } from "@elementor/icons";
 import {
@@ -373,18 +390,27 @@ import {
   Divider,
   FormLabel,
   Grid,
-  IconButton,
-  Stack,
+  IconButton as IconButton2,
   TextField,
   UnstableColorField
 } from "@elementor/ui";
-import { __ } from "@wordpress/i18n";
-var SIZE = "tiny";
+import { __ as __2 } from "@wordpress/i18n";
+
+// src/components/variable-selection-popover.context.ts
+import { createContext, useContext } from "react";
+var PopoverContentRefContext = createContext(null);
+var usePopoverContentRef = () => {
+  return useContext(PopoverContentRefContext);
+};
+
+// src/components/color-variable-creation.tsx
+var SIZE2 = "tiny";
 var ColorVariableCreation = ({ onGoBack, onClose }) => {
   const { setValue: setVariable } = useBoundProp(colorVariablePropTypeUtil);
   const [color, setColor] = useState("");
   const [label, setLabel] = useState("");
-  const anchorRef = useRef(null);
+  const defaultRef = useRef(null);
+  const anchorRef = usePopoverContentRef() ?? defaultRef;
   const resetFields = () => {
     setColor("");
     setLabel("");
@@ -406,14 +432,14 @@ 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(PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React3.createElement(
     PopoverHeader,
     {
-      icon: /* @__PURE__ */ React2.createElement(React2.Fragment, null, onGoBack && /* @__PURE__ */ React2.createElement(IconButton, { size: SIZE, "aria-label": __("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React2.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React2.createElement(BrushIcon, { fontSize: SIZE })),
-      title: __("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(IconButton2, { size: SIZE2, "aria-label": __2("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React3.createElement(BrushIcon, { fontSize: SIZE2 })),
+      title: __2("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { size: "small" }, __("Name", "elementor"))), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React3.createElement(Divider, null), /* @__PURE__ */ React3.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React3.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, __2("Name", "elementor"))), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
     TextField,
     {
       size: "tiny",
@@ -421,7 +447,7 @@ var ColorVariableCreation = ({ onGoBack, onClose }) => {
       value: label,
       onChange: (e) => setLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { size: "small" }, __("Value", "elementor"))), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+  ))), /* @__PURE__ */ React3.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, __2("Value", "elementor"))), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
     UnstableColorField,
     {
       size: "tiny",
@@ -436,33 +462,34 @@ var ColorVariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     }
-  )))), /* @__PURE__ */ React2.createElement(CardActions, null, /* @__PURE__ */ React2.createElement(Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __("Create", "elementor"))));
+  )))), /* @__PURE__ */ React3.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React3.createElement(Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __2("Create", "elementor"))));
 };
 
 // src/components/color-variable-edit.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { useRef as useRef2, useState as useState2 } from "react";
-import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
-import { ArrowLeftIcon as ArrowLeftIcon2, BrushIcon as BrushIcon2 } from "@elementor/icons";
+import { PopoverContent as PopoverContent2 } from "@elementor/editor-controls";
+import { PopoverHeader as PopoverHeader2, PopoverScrollableContent as PopoverScrollableContent2 } from "@elementor/editor-ui";
+import { ArrowLeftIcon as ArrowLeftIcon2, BrushIcon as BrushIcon2, TrashIcon } from "@elementor/icons";
 import {
   Button as Button2,
   CardActions as CardActions2,
   Divider as Divider2,
   FormLabel as FormLabel2,
   Grid as Grid2,
-  IconButton as IconButton2,
-  Stack as Stack2,
+  IconButton as IconButton3,
   TextField as TextField2,
   UnstableColorField as UnstableColorField2
 } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
-var SIZE2 = "tiny";
+import { __ as __3 } from "@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 = useRef2(null);
+  const defaultRef = useRef2(null);
+  const anchorRef = usePopoverContentRef() ?? defaultRef;
   const [color, setColor] = useState2(variable.value);
   const [label, setLabel] = useState2(variable.label);
   const handleUpdate = () => {
@@ -473,17 +500,27 @@ 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(IconButton3, { key: "delete", size: SIZE3, "aria-label": __3("Delete", "elementor"), onClick: handleDelete }, /* @__PURE__ */ React4.createElement(TrashIcon, { fontSize: SIZE3 }))
+  );
+  return /* @__PURE__ */ React4.createElement(PopoverScrollableContent2, { height: "auto" }, /* @__PURE__ */ React4.createElement(
     PopoverHeader2,
     {
-      title: __2("Edit variable", "elementor"),
+      title: __3("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(IconButton2, { size: SIZE2, "aria-label": __2("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })), /* @__PURE__ */ React3.createElement(BrushIcon2, { fontSize: SIZE2 }))
+      icon: /* @__PURE__ */ React4.createElement(React4.Fragment, null, onGoBack && /* @__PURE__ */ React4.createElement(IconButton3, { size: SIZE3, "aria-label": __3("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React4.createElement(ArrowLeftIcon2, { fontSize: SIZE3 })), /* @__PURE__ */ React4.createElement(BrushIcon2, { fontSize: SIZE3 })),
+      actions
     }
-  ), /* @__PURE__ */ React3.createElement(Divider2, null), /* @__PURE__ */ React3.createElement(Stack2, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React3.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel2, { size: "small" }, __2("Name", "elementor"))), /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+  ), /* @__PURE__ */ React4.createElement(Divider2, null), /* @__PURE__ */ React4.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React4.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React4.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(FormLabel2, { size: "tiny" }, __3("Name", "elementor"))), /* @__PURE__ */ React4.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(
     TextField2,
     {
       size: "tiny",
@@ -491,7 +528,7 @@ var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       value: label,
       onChange: (e) => setLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React3.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel2, { size: "small" }, __2("Value", "elementor"))), /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+  ))), /* @__PURE__ */ React4.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React4.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(FormLabel2, { size: "tiny" }, __3("Value", "elementor"))), /* @__PURE__ */ React4.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(
     UnstableColorField2,
     {
       size: "tiny",
@@ -506,92 +543,105 @@ var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     }
-  )))), /* @__PURE__ */ React3.createElement(CardActions2, null, /* @__PURE__ */ React3.createElement(Button2, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, __2("Save", "elementor"))));
+  )))), /* @__PURE__ */ React4.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React4.createElement(Button2, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, __3("Save", "elementor"))));
 };
 
 // src/components/color-variables-selection.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { useState as useState3 } from "react";
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { PopoverScrollableContent as PopoverScrollableContent3 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader3, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
-import { ColorFilterIcon as ColorFilterIcon2, PlusIcon, SettingsIcon } from "@elementor/icons";
-import { Divider as Divider3, IconButton as IconButton4 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { BrushIcon as BrushIcon3, ColorFilterIcon, PlusIcon, SettingsIcon } from "@elementor/icons";
+import { Divider as Divider3, IconButton as IconButton5 } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
 
 // src/components/ui/menu-item-content.tsx
-import * as React4 from "react";
+import * as React5 from "react";
+import { EllipsisWithTooltip } from "@elementor/editor-ui";
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
 import { EditIcon } from "@elementor/icons";
-import { IconButton as IconButton3, ListItemIcon, ListItemText } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
-var SIZE3 = "tiny";
+import { Box as Box2, IconButton as IconButton4, ListItemIcon, Typography as Typography2 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+var SIZE4 = "tiny";
+var isVersion330Active = isExperimentActive("e_v_3_30");
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React4.createElement(
-    ListItemText,
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React5.createElement(
+    Box2,
     {
-      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(
+      EllipsisWithTooltip,
+      {
+        title: item.label || item.value,
+        as: Typography2,
+        variant: isVersion330Active ? "caption" : "body2",
+        color: isVersion330Active ? "text.primary" : "text.secondary",
+        sx: { marginTop: "1px", lineHeight: "2" },
+        maxWidth: "50%"
+      }
+    ),
+    item.secondaryText && /* @__PURE__ */ React5.createElement(
+      EllipsisWithTooltip,
+      {
+        title: item.secondaryText,
+        as: Typography2,
         variant: "caption",
         color: "text.tertiary",
-        style: { marginTop: "1px", lineHeight: "1" }
-      },
-      sx: { display: "flex", alignItems: "center", gap: 1 }
-    }
-  ), !!onEdit && /* @__PURE__ */ React4.createElement(
-    IconButton3,
+        sx: { marginTop: "1px", lineHeight: "1" },
+        maxWidth: "50%"
+      }
+    )
+  ), !!onEdit && /* @__PURE__ */ React5.createElement(
+    IconButton4,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": __3("Edit", "elementor")
+      "aria-label": __4("Edit", "elementor")
     },
-    /* @__PURE__ */ React4.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React5.createElement(EditIcon, { color: "action", fontSize: SIZE4 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-import * as React5 from "react";
-import { ColorFilterIcon } from "@elementor/icons";
-import { Link, Stack as Stack3, Typography } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
-var NoSearchResults = ({ searchValue, onClear }) => {
-  return /* @__PURE__ */ React5.createElement(
-    Stack3,
+import * as React6 from "react";
+import { Link, Stack as Stack2, Typography as Typography3 } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
+  return /* @__PURE__ */ React6.createElement(
+    Stack2,
     {
       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(ColorFilterIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React5.createElement(Typography, { align: "center", variant: "subtitle2" }, __4("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React5.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React5.createElement(Typography, { align: "center", variant: "caption" }, __4("Try something else.", "elementor"), /* @__PURE__ */ React5.createElement("br", null), /* @__PURE__ */ React5.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __4("Clear & try again", "elementor")))
+    icon,
+    /* @__PURE__ */ React6.createElement(Typography3, { align: "center", variant: "subtitle2" }, __5("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React6.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React6.createElement(Typography3, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __5("Try something else.", "elementor"), /* @__PURE__ */ React6.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __5("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
-import * as React6 from "react";
-import { Button as Button3, Stack as Stack4, Typography as Typography2 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
-var NoVariables = ({ icon, onAdd }) => /* @__PURE__ */ React6.createElement(
-  Stack4,
+import * as React7 from "react";
+import { Button as Button3, Stack as Stack3, Typography as Typography4 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+var NoVariables = ({ icon, title, onAdd }) => /* @__PURE__ */ React7.createElement(
+  Stack3,
   {
     gap: 1,
     alignItems: "center",
@@ -601,9 +651,9 @@ var NoVariables = ({ icon, onAdd }) => /* @__PURE__ */ React6.createElement(
     sx: { p: 2.5, pb: 5.5 }
   },
   icon,
-  /* @__PURE__ */ React6.createElement(Typography2, { align: "center", variant: "subtitle2" }, __5("Create your first variable", "elementor")),
-  /* @__PURE__ */ React6.createElement(Typography2, { align: "center", variant: "caption", maxWidth: "180px" }, __5("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
-  onAdd && /* @__PURE__ */ React6.createElement(Button3, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __5("Create a variable", "elementor"))
+  /* @__PURE__ */ React7.createElement(Typography4, { align: "center", variant: "subtitle2" }, title),
+  /* @__PURE__ */ React7.createElement(Typography4, { align: "center", variant: "caption", maxWidth: "180px" }, __6("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
+  onAdd && /* @__PURE__ */ React7.createElement(Button3, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __6("Create a variable", "elementor"))
 );
 
 // src/components/ui/styled-menu-list.tsx
@@ -639,7 +689,7 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
 }));
 
 // src/components/color-variables-selection.tsx
-var SIZE4 = "tiny";
+var SIZE5 = "tiny";
 var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { value: variable, setValue: setVariable } = useBoundProp2(colorVariablePropTypeUtil);
   const [searchValue, setSearchValue] = useState3("");
@@ -655,19 +705,19 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React7.createElement(IconButton4, { key: "add", size: SIZE4, onClick: onAdd }, /* @__PURE__ */ React7.createElement(PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React8.createElement(IconButton5, { key: "add", size: SIZE5, onClick: onAdd }, /* @__PURE__ */ React8.createElement(PlusIcon, { fontSize: SIZE5 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React7.createElement(IconButton4, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React7.createElement(SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React8.createElement(IconButton5, { key: "settings", size: SIZE5, onClick: onSettings }, /* @__PURE__ */ React8.createElement(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)
   }));
@@ -677,22 +727,22 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
     PopoverHeader3,
     {
-      title: __6("Variables", "elementor"),
-      icon: /* @__PURE__ */ React7.createElement(ColorFilterIcon2, { fontSize: SIZE4 }),
+      title: __7("Variables", "elementor"),
+      icon: /* @__PURE__ */ React8.createElement(ColorFilterIcon, { fontSize: SIZE5 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React7.createElement(
+  ), hasVariables && /* @__PURE__ */ React8.createElement(
     PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __6("Search", "elementor")
+      placeholder: __7("Search", "elementor")
     }
-  ), /* @__PURE__ */ React7.createElement(Divider3, null), hasVariables && hasSearchResults && /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(Divider3, null), /* @__PURE__ */ React8.createElement(PopoverScrollableContent3, null, hasVariables && hasSearchResults && /* @__PURE__ */ React8.createElement(
     PopoverMenuList,
     {
       items,
@@ -702,16 +752,30 @@ 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__ */ React7.createElement(NoSearchResults, { searchValue, onClear: handleClearSearch }), !hasVariables && /* @__PURE__ */ React7.createElement(NoVariables, { icon: /* @__PURE__ */ React7.createElement(ColorFilterIcon2, { fontSize: "large" }), onAdd }));
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React8.createElement(
+    NoSearchResults,
+    {
+      searchValue,
+      onClear: handleClearSearch,
+      icon: /* @__PURE__ */ React8.createElement(BrushIcon3, { fontSize: "large" })
+    }
+  ), !hasVariables && /* @__PURE__ */ React8.createElement(
+    NoVariables,
+    {
+      title: __7("Create your first color variable", "elementor"),
+      icon: /* @__PURE__ */ React8.createElement(BrushIcon3, { fontSize: "large" }),
+      onAdd
+    }
+  )));
 };
 
 // src/components/font-variable-creation.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { useRef as useRef3, useState as useState4 } from "react";
-import { FontFamilySelector, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
-import { useFontFamilies } from "@elementor/editor-editing-panel";
+import { FontFamilySelector, PopoverContent as PopoverContent3, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { PopoverScrollableContent as PopoverScrollableContent4, useFontFamilies, useSectionWidth } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
 import { ArrowLeftIcon as ArrowLeftIcon3, ChevronDownIcon, TextIcon } from "@elementor/icons";
 import {
@@ -722,15 +786,14 @@ import {
   Divider as Divider4,
   FormLabel as FormLabel3,
   Grid as Grid3,
-  IconButton as IconButton5,
+  IconButton as IconButton6,
   Popover,
-  Stack as Stack5,
   TextField as TextField3,
   UnstableTag,
   usePopupState
 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
-var SIZE5 = "tiny";
+import { __ as __8 } from "@wordpress/i18n";
+var SIZE6 = "tiny";
 var FontVariableCreation = ({ onClose, onGoBack }) => {
   const fontFamilies = useFontFamilies();
   const { setValue: setVariable } = useBoundProp3(fontVariablePropTypeUtil);
@@ -759,14 +822,15 @@ var FontVariableCreation = ({ onClose, onGoBack }) => {
   const isFormInvalid = () => {
     return !fontFamily?.trim() || !label?.trim();
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+  const sectionWidth = useSectionWidth();
+  return /* @__PURE__ */ React9.createElement(PopoverScrollableContent4, { height: "auto" }, /* @__PURE__ */ React9.createElement(
     PopoverHeader4,
     {
-      icon: /* @__PURE__ */ React8.createElement(React8.Fragment, null, onGoBack && /* @__PURE__ */ React8.createElement(IconButton5, { size: SIZE5, "aria-label": __7("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React8.createElement(ArrowLeftIcon3, { fontSize: SIZE5 })), /* @__PURE__ */ React8.createElement(TextIcon, { fontSize: SIZE5 })),
-      title: __7("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(IconButton6, { size: SIZE6, "aria-label": __8("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React9.createElement(ArrowLeftIcon3, { fontSize: SIZE6 })), /* @__PURE__ */ React9.createElement(TextIcon, { fontSize: SIZE6 })),
+      title: __8("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React8.createElement(Divider4, null), /* @__PURE__ */ React8.createElement(Stack5, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React8.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(FormLabel3, { size: "small" }, __7("Name", "elementor"))), /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(Divider4, null), /* @__PURE__ */ React9.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React9.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(FormLabel3, { size: "tiny" }, __8("Name", "elementor"))), /* @__PURE__ */ React9.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(
     TextField3,
     {
       size: "tiny",
@@ -774,16 +838,16 @@ var FontVariableCreation = ({ onClose, onGoBack }) => {
       value: label,
       onChange: (e) => setLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React8.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(FormLabel3, { size: "small" }, __7("Value", "elementor"))), /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React9.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(FormLabel3, { size: "tiny" }, __8("Value", "elementor"))), /* @__PURE__ */ React9.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
     UnstableTag,
     {
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React8.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React9.createElement(ChevronDownIcon, { fontSize: "tiny" }),
       ...bindTrigger(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     Popover,
     {
       disablePortal: true,
@@ -793,25 +857,26 @@ var FontVariableCreation = ({ onClose, onGoBack }) => {
       transformOrigin: { vertical: "top", horizontal: -20 },
       ...bindPopover(fontPopoverState)
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       FontFamilySelector,
       {
         fontFamilies,
         fontFamily,
         onFontFamilyChange: setFontFamily,
-        onClose: fontPopoverState.close
+        onClose: fontPopoverState.close,
+        sectionWidth
       }
     )
-  ))))), /* @__PURE__ */ React8.createElement(CardActions3, null, /* @__PURE__ */ React8.createElement(Button4, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __7("Create", "elementor"))));
+  ))))), /* @__PURE__ */ React9.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React9.createElement(Button4, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __8("Create", "elementor"))));
 };
 
 // src/components/font-variable-edit.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { useId, useRef as useRef4, useState as useState5 } from "react";
-import { FontFamilySelector as FontFamilySelector2 } from "@elementor/editor-controls";
-import { useFontFamilies as useFontFamilies2 } from "@elementor/editor-editing-panel";
-import { PopoverHeader as PopoverHeader5 } from "@elementor/editor-ui";
-import { ArrowLeftIcon as ArrowLeftIcon4, ChevronDownIcon as ChevronDownIcon2, TextIcon as TextIcon2 } from "@elementor/icons";
+import { FontFamilySelector as FontFamilySelector2, PopoverContent as PopoverContent4 } from "@elementor/editor-controls";
+import { useFontFamilies as useFontFamilies2, useSectionWidth as useSectionWidth2 } from "@elementor/editor-editing-panel";
+import { PopoverHeader as PopoverHeader5, PopoverScrollableContent as PopoverScrollableContent5 } from "@elementor/editor-ui";
+import { ArrowLeftIcon as ArrowLeftIcon4, ChevronDownIcon as ChevronDownIcon2, TextIcon as TextIcon2, TrashIcon as TrashIcon2 } from "@elementor/icons";
 import {
   bindPopover as bindPopover2,
   bindTrigger as bindTrigger2,
@@ -820,15 +885,14 @@ import {
   Divider as Divider5,
   FormLabel as FormLabel4,
   Grid as Grid4,
-  IconButton as IconButton6,
+  IconButton as IconButton7,
   Popover as Popover2,
-  Stack as Stack6,
   TextField as TextField4,
   UnstableTag as UnstableTag2,
   usePopupState as usePopupState2
 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
-var SIZE6 = "tiny";
+import { __ as __9 } from "@wordpress/i18n";
+var SIZE7 = "tiny";
 var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const variable = useVariable(editId);
   if (!variable) {
@@ -849,17 +913,28 @@ 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(
+  const sectionWidth = useSectionWidth2();
+  const actions = [];
+  actions.push(
+    /* @__PURE__ */ React10.createElement(IconButton7, { key: "delete", size: SIZE7, "aria-label": __9("Delete", "elementor"), onClick: handleDelete }, /* @__PURE__ */ React10.createElement(TrashIcon2, { fontSize: SIZE7 }))
+  );
+  return /* @__PURE__ */ React10.createElement(PopoverScrollableContent5, { height: "auto" }, /* @__PURE__ */ React10.createElement(
     PopoverHeader5,
     {
-      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(IconButton6, { size: SIZE6, "aria-label": __8("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React9.createElement(ArrowLeftIcon4, { fontSize: SIZE6 })), /* @__PURE__ */ React9.createElement(TextIcon2, { fontSize: SIZE6 })),
-      title: __8("Edit variable", "elementor"),
-      onClose
+      icon: /* @__PURE__ */ React10.createElement(React10.Fragment, null, onGoBack && /* @__PURE__ */ React10.createElement(IconButton7, { size: SIZE7, "aria-label": __9("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon4, { fontSize: SIZE7 })), /* @__PURE__ */ React10.createElement(TextIcon2, { fontSize: SIZE7 })),
+      title: __9("Edit variable", "elementor"),
+      onClose,
+      actions
     }
-  ), /* @__PURE__ */ React9.createElement(Divider5, null), /* @__PURE__ */ React9.createElement(Stack6, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React9.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(FormLabel4, { htmlFor: variableNameId, size: "small" }, __8("Name", "elementor"))), /* @__PURE__ */ React9.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(Divider5, null), /* @__PURE__ */ React10.createElement(PopoverContent4, { p: 2 }, /* @__PURE__ */ React10.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(FormLabel4, { htmlFor: variableNameId, size: "tiny" }, __9("Name", "elementor"))), /* @__PURE__ */ React10.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(
     TextField4,
     {
       id: variableNameId,
@@ -868,17 +943,17 @@ var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       value: label,
       onChange: (e) => setLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React9.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(FormLabel4, { htmlFor: variableValueId, size: "small" }, __8("Value", "elementor"))), /* @__PURE__ */ React9.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+  ))), /* @__PURE__ */ React10.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(FormLabel4, { htmlFor: variableValueId, size: "tiny" }, __9("Value", "elementor"))), /* @__PURE__ */ React10.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
     UnstableTag2,
     {
       id: variableValueId,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React9.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React10.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
       ...bindTrigger2(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     Popover2,
     {
       disablePortal: true,
@@ -888,27 +963,29 @@ var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       transformOrigin: { vertical: "top", horizontal: -20 },
       ...bindPopover2(fontPopoverState)
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(
       FontFamilySelector2,
       {
         fontFamilies,
         fontFamily,
         onFontFamilyChange: setFontFamily,
-        onClose: fontPopoverState.close
+        onClose: fontPopoverState.close,
+        sectionWidth
       }
     )
-  ))))), /* @__PURE__ */ React9.createElement(CardActions4, null, /* @__PURE__ */ React9.createElement(Button5, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, __8("Save", "elementor"))));
+  ))))), /* @__PURE__ */ React10.createElement(CardActions4, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React10.createElement(Button5, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, __9("Save", "elementor"))));
 };
 
 // src/components/font-variables-selection.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { useState as useState6 } from "react";
 import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { PopoverScrollableContent as PopoverScrollableContent6 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader6, PopoverMenuList as PopoverMenuList2, PopoverSearch as PopoverSearch2 } from "@elementor/editor-ui";
-import { ColorFilterIcon as ColorFilterIcon3, PlusIcon as PlusIcon2, SettingsIcon as SettingsIcon2, TextIcon as TextIcon3 } from "@elementor/icons";
-import { Divider as Divider6, IconButton as IconButton7 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
-var SIZE7 = "tiny";
+import { ColorFilterIcon as ColorFilterIcon2, PlusIcon as PlusIcon2, SettingsIcon as SettingsIcon2, TextIcon as TextIcon3 } from "@elementor/icons";
+import { Divider as Divider6, IconButton as IconButton8 } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
+var SIZE8 = "tiny";
 var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { value: variable, setValue: setVariable } = useBoundProp4(fontVariablePropTypeUtil);
   const [searchValue, setSearchValue] = useState6("");
@@ -924,19 +1001,19 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React10.createElement(IconButton7, { key: "add", size: SIZE7, onClick: onAdd }, /* @__PURE__ */ React10.createElement(PlusIcon2, { fontSize: SIZE7 }))
+      /* @__PURE__ */ React11.createElement(IconButton8, { key: "add", size: SIZE8, onClick: onAdd }, /* @__PURE__ */ React11.createElement(PlusIcon2, { fontSize: SIZE8 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React10.createElement(IconButton7, { key: "settings", size: SIZE7, onClick: onSettings }, /* @__PURE__ */ React10.createElement(SettingsIcon2, { fontSize: SIZE7 }))
+      /* @__PURE__ */ React11.createElement(IconButton8, { key: "settings", size: SIZE8, onClick: onSettings }, /* @__PURE__ */ React11.createElement(SettingsIcon2, { fontSize: SIZE8 }))
     );
   }
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React10.createElement(TextIcon3, null),
+    icon: /* @__PURE__ */ React11.createElement(TextIcon3, { fontSize: SIZE8 }),
     secondaryText: value,
     onEdit: () => onEdit?.(key)
   }));
@@ -946,22 +1023,22 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
     PopoverHeader6,
     {
-      title: __9("Variables", "elementor"),
+      title: __10("Variables", "elementor"),
       onClose: closePopover,
-      icon: /* @__PURE__ */ React10.createElement(ColorFilterIcon3, { fontSize: SIZE7 }),
+      icon: /* @__PURE__ */ React11.createElement(ColorFilterIcon2, { fontSize: SIZE8 }),
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React10.createElement(
+  ), hasVariables && /* @__PURE__ */ React11.createElement(
     PopoverSearch2,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __9("Search", "elementor")
+      placeholder: __10("Search", "elementor")
     }
-  ), /* @__PURE__ */ React10.createElement(Divider6, null), hasVariables && hasSearchResults && /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(Divider6, null), /* @__PURE__ */ React11.createElement(PopoverScrollableContent6, null, hasVariables && hasSearchResults && /* @__PURE__ */ React11.createElement(
     PopoverMenuList2,
     {
       items,
@@ -971,9 +1048,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__ */ React11.createElement(
+    NoSearchResults,
+    {
+      searchValue,
+      onClear: handleClearSearch,
+      icon: /* @__PURE__ */ React11.createElement(TextIcon3, { fontSize: "large" })
+    }
+  ), !hasVariables && /* @__PURE__ */ React11.createElement(
+    NoVariables,
+    {
+      title: __10("Create your first font variable", "elementor"),
+      icon: /* @__PURE__ */ React11.createElement(TextIcon3, { fontSize: "large" }),
+      onAdd
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React10.createElement(NoSearchResults, { searchValue, onClear: handleClearSearch }), !hasVariables && /* @__PURE__ */ React10.createElement(NoVariables, { icon: /* @__PURE__ */ React10.createElement(TextIcon3, { fontSize: "large" }), onAdd }));
+  )));
 };
 
 // src/components/variable-selection-popover.tsx
@@ -983,14 +1074,15 @@ var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
   const [currentView, setCurrentView] = useState7(VIEW_LIST);
   const editIdRef = useRef5("");
-  return renderStage({
+  const anchorRef = useRef5(null);
+  return /* @__PURE__ */ React12.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React12.createElement(Box3, { ref: anchorRef }, renderStage({
     propTypeKey,
     currentView,
     selectedVariable,
     editIdRef,
     setCurrentView,
     closePopover
-  });
+  })));
 };
 function renderStage(props) {
   const handleSubmitOnEdit = () => {
@@ -1002,7 +1094,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,
@@ -1017,7 +1109,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_ADD === props.currentView) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         FontVariableCreation,
         {
           onGoBack: () => props.setCurrentView(VIEW_LIST),
@@ -1026,7 +1118,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_EDIT === props.currentView) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         FontVariableEdit,
         {
           editId: props.editIdRef.current ?? "",
@@ -1039,7 +1131,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,
@@ -1054,7 +1146,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_ADD === props.currentView) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         ColorVariableCreation,
         {
           onGoBack: () => props.setCurrentView(VIEW_LIST),
@@ -1063,7 +1155,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_EDIT === props.currentView) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         ColorVariableEdit,
         {
           editId: props.editIdRef.current ?? "",
@@ -1078,7 +1170,6 @@ function renderStage(props) {
 }
 
 // src/controls/color-variable-control.tsx
-var SIZE8 = "tiny";
 var ColorVariableControl = () => {
   const { setValue: setColor } = useBoundProp5();
   const { value: variableValue } = useBoundProp5(colorVariablePropTypeUtil);
@@ -1095,33 +1186,27 @@ var ColorVariableControl = () => {
   const unlinkVariable = () => {
     setColor(colorPropTypeUtil.create(selectedVariable.value));
   };
-  return /* @__PURE__ */ React12.createElement(Box, { ref: anchorRef }, /* @__PURE__ */ React12.createElement(
-    Tag,
+  return /* @__PURE__ */ React13.createElement(Box4, { ref: anchorRef }, /* @__PURE__ */ React13.createElement(
+    VariableTag,
     {
-      fullWidth: true,
-      showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React12.createElement(Stack7, { spacing: 0.75, direction: "row", alignItems: "center" }, /* @__PURE__ */ React12.createElement(ColorIndicator, { size: "inherit", value: selectedVariable.value, component: "span" }), /* @__PURE__ */ React12.createElement(ColorFilterIcon4, { fontSize: "inherit", sx: { mr: 1 } })),
-      label: /* @__PURE__ */ React12.createElement(Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React12.createElement(
-        Typography3,
-        {
-          sx: { textOverflow: "ellipsis", overflowX: "hidden", lineHeight: 1 },
-          variant: "caption"
-        },
-        selectedVariable.label
-      )),
-      actions: /* @__PURE__ */ React12.createElement(IconButton8, { size: SIZE8, onClick: unlinkVariable, "aria-label": __10("Unlink", "elementor") }, /* @__PURE__ */ React12.createElement(DetachIcon, { fontSize: SIZE8 })),
+      label: selectedVariable.label,
+      startIcon: /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(ColorFilterIcon3, { fontSize: SIZE }), /* @__PURE__ */ React13.createElement(ColorIndicator, { size: "inherit", value: selectedVariable.value, component: "span" })),
+      onUnlink: unlinkVariable,
       ...bindTrigger3(popupState)
     }
-  ), /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React13.createElement(
     Popover3,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },
+      PaperProps: {
+        sx: { my: 1 }
+      },
       ...bindPopover3(popupState)
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       VariableSelectionPopover,
       {
         selectedVariable,
@@ -1133,9 +1218,9 @@ var ColorVariableControl = () => {
 };
 
 // src/hooks/use-prop-color-variable-action.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-editing-panel";
-import { ColorFilterIcon as ColorFilterIcon5 } from "@elementor/icons";
+import { ColorFilterIcon as ColorFilterIcon4 } from "@elementor/icons";
 import { __ as __11 } from "@wordpress/i18n";
 
 // src/utils.ts
@@ -1158,10 +1243,10 @@ var usePropColorVariableAction = () => {
   const visible = !!propType && supportsColorVariables(propType);
   return {
     visible,
-    icon: ColorFilterIcon5,
+    icon: ColorFilterIcon4,
     title: __11("Variables", "elementor"),
     content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React13.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
+      return /* @__PURE__ */ React14.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
     }
   };
 };
@@ -1229,24 +1314,12 @@ import { styleTransformersRegistry as styleTransformersRegistry2 } from "@elemen
 import { controlActionsMenu as controlActionsMenu2, registerControlReplacement as registerControlReplacement2 } from "@elementor/editor-editing-panel";
 
 // src/controls/font-variable-control.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { useId as useId3, useRef as useRef7 } from "react";
 import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { stringPropTypeUtil } from "@elementor/editor-props";
-import { ColorFilterIcon as ColorFilterIcon6, DetachIcon as DetachIcon2 } from "@elementor/icons";
-import {
-  bindPopover as bindPopover4,
-  bindTrigger as bindTrigger4,
-  Box as Box2,
-  IconButton as IconButton9,
-  Popover as Popover4,
-  Stack as Stack8,
-  Typography as Typography4,
-  UnstableTag as Tag2,
-  usePopupState as usePopupState4
-} from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
-var SIZE9 = "tiny";
+import { ColorFilterIcon as ColorFilterIcon5 } from "@elementor/icons";
+import { bindPopover as bindPopover4, bindTrigger as bindTrigger4, Box as Box5, Popover as Popover4, usePopupState as usePopupState4 } from "@elementor/ui";
 var FontVariableControl = () => {
   const { setValue: setFontFamily } = useBoundProp7();
   const { value: variableValue } = useBoundProp7(fontVariablePropTypeUtil);
@@ -1263,33 +1336,27 @@ var FontVariableControl = () => {
   const unlinkVariable = () => {
     setFontFamily(stringPropTypeUtil.create(selectedVariable.value));
   };
-  return /* @__PURE__ */ React14.createElement(Box2, { ref: anchorRef }, /* @__PURE__ */ React14.createElement(
-    Tag2,
+  return /* @__PURE__ */ React15.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React15.createElement(
+    VariableTag,
     {
-      fullWidth: true,
-      showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React14.createElement(Stack8, { spacing: 0.75, direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(ColorFilterIcon6, { fontSize: "inherit", sx: { mr: 1 } })),
-      label: /* @__PURE__ */ React14.createElement(Box2, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React14.createElement(
-        Typography4,
-        {
-          sx: { textOverflow: "ellipsis", overflowX: "hidden", lineHeight: 1 },
-          variant: "caption"
-        },
-        selectedVariable.label
-      )),
-      actions: /* @__PURE__ */ React14.createElement(IconButton9, { size: SIZE9, onClick: unlinkVariable, "aria-label": __12("Unlink", "elementor") }, /* @__PURE__ */ React14.createElement(DetachIcon2, { fontSize: SIZE9 })),
+      label: selectedVariable.label,
+      startIcon: /* @__PURE__ */ React15.createElement(ColorFilterIcon5, { fontSize: SIZE }),
+      onUnlink: unlinkVariable,
       ...bindTrigger4(popupState)
     }
-  ), /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React15.createElement(
     Popover4,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },
+      PaperProps: {
+        sx: { my: 1 }
+      },
       ...bindPopover4(popupState)
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React15.createElement(
       VariableSelectionPopover,
       {
         selectedVariable,
@@ -1301,19 +1368,19 @@ var FontVariableControl = () => {
 };
 
 // src/hooks/use-prop-font-variable-action.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-editing-panel";
-import { ColorFilterIcon as ColorFilterIcon7 } from "@elementor/icons";
-import { __ as __13 } from "@wordpress/i18n";
+import { ColorFilterIcon as ColorFilterIcon6 } from "@elementor/icons";
+import { __ as __12 } from "@wordpress/i18n";
 var usePropFontVariableAction = () => {
   const { propType } = useBoundProp8();
   const visible = !!propType && supportsFontVariables(propType);
   return {
     visible,
-    icon: ColorFilterIcon7,
-    title: __13("Variables", "elementor"),
+    icon: ColorFilterIcon6,
+    title: __12("Variables", "elementor"),
     content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React15.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
+      return /* @__PURE__ */ React16.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
     }
   };
 };
@@ -1333,7 +1400,7 @@ function initFontVariables() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import { useEffect, useState as useState8 } from "react";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
@@ -1355,7 +1422,7 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React16.createElement(Portal, { container }, /* @__PURE__ */ React16.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React17.createElement(Portal, { container }, /* @__PURE__ */ React17.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);