@elementor/editor-variables 0.11.0 → 0.13.0

package/dist/index.mjs

@@ -6,8 +6,8 @@ import { styleTransformersRegistry } from "@elementor/editor-canvas";
 import { controlActionsMenu, registerControlReplacement } from "@elementor/editor-editing-panel";
 
 // src/controls/color-variables-selection-control.tsx
-import * as React4 from "react";
-import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import * as React5 from "react";
+import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { colorPropTypeUtil } from "@elementor/editor-props";
 
 // src/components/color-indicator.tsx
@@ -344,45 +344,38 @@ var ColorVariablesSelection = ({ onSelect }) => {
 };
 
 // src/components/variables-selection-popover.tsx
-import * as React3 from "react";
-import { useId, useRef as useRef2 } from "react";
+import * as React4 from "react";
+import { useId, useRef as useRef3 } from "react";
+import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
 import { ColorFilterIcon, DetachIcon, PlusIcon } from "@elementor/icons";
 import {
   bindPopover as bindPopover2,
-  bindTrigger,
-  Box as Box3,
-  CloseButton as CloseButton2,
+  bindTrigger as bindTrigger2,
+  Box as Box2,
   IconButton,
   Popover as Popover2,
-  Stack as Stack2,
-  Typography as Typography2,
+  Stack as Stack3,
+  Typography,
   UnstableTag as Tag,
-  usePopupState
+  usePopupState as usePopupState2
 } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
+
+// src/prop-types/font-variable-prop-type.ts
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+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 { useRef, useState } from "react";
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { PopoverHeader } from "@elementor/editor-ui";
 import { BrushIcon } from "@elementor/icons";
-import {
-  bindPopover,
-  Box as Box2,
-  Button,
-  CardActions,
-  CloseButton,
-  Divider as Divider2,
-  FormLabel,
-  Grid,
-  Popover,
-  Stack,
-  TextField,
-  Typography,
-  UnstableColorField
-} from "@elementor/ui";
+import { Button, CardActions, Divider as Divider2, FormLabel, Grid, Stack, TextField, UnstableColorField } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
-var ColorVariableCreation = ({ popupState }) => {
+var SIZE = "tiny";
+var ColorVariableCreation = ({ onClose }) => {
   const { setValue: setVariable } = useBoundProp2(colorVariablePropTypeUtil);
   const [color, setColor] = useState("");
   const [label, setLabel] = useState("");
@@ -393,7 +386,7 @@ var ColorVariableCreation = ({ popupState }) => {
   };
   const closePopover = () => {
     resetFields();
-    popupState.close();
+    onClose();
   };
   const handleCreate = () => {
     createVariable({
@@ -405,55 +398,141 @@ var ColorVariableCreation = ({ popupState }) => {
       closePopover();
     });
   };
-  const isInValidForm = () => {
+  const isFormInvalid = () => {
     return !color?.trim() || !label?.trim();
   };
-  return /* @__PURE__ */ React2.createElement(Box2, { ref: anchorRef }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    PopoverHeader,
+    {
+      title: __("Create variable", "elementor"),
+      onClose: closePopover,
+      icon: /* @__PURE__ */ React2.createElement(BrushIcon, { fontSize: SIZE })
+    }
+  ), /* @__PURE__ */ React2.createElement(Divider2, 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(
+    TextField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      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(
+    UnstableColorField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: color,
+      onChange: setColor,
+      slotProps: {
+        colorPicker: {
+          anchorEl: anchorRef.current,
+          anchorOrigin: { vertical: "top", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: -10 }
+        }
+      }
+    }
+  )))), /* @__PURE__ */ React2.createElement(CardActions, null, /* @__PURE__ */ React2.createElement(Button, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, __("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __("Create", "elementor"))));
+};
+
+// src/components/font-variable-creation.tsx
+import * as React3 from "react";
+import { useRef as useRef2, useState as useState2 } from "react";
+import { FontFamilySelector, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { useFontFamilies } from "@elementor/editor-editing-panel";
+import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
+import { ChevronDownIcon, TextIcon } from "@elementor/icons";
+import {
+  bindPopover,
+  bindTrigger,
+  Button as Button2,
+  CardActions as CardActions2,
+  Divider as Divider3,
+  FormLabel as FormLabel2,
+  Grid as Grid2,
+  Popover,
+  Stack as Stack2,
+  TextField as TextField2,
+  UnstableTag,
+  usePopupState
+} from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+var SIZE2 = "tiny";
+var FontVariableCreation = ({ onClose }) => {
+  const fontFamilies = useFontFamilies();
+  const { setValue: setVariable } = useBoundProp3(fontVariablePropTypeUtil);
+  const [fontFamily, setFontFamily] = useState2("");
+  const [label, setLabel] = useState2("");
+  const anchorRef = useRef2(null);
+  const fontPopoverState = usePopupState({ variant: "popover" });
+  const resetFields = () => {
+    setFontFamily("");
+    setLabel("");
+  };
+  const closePopover = () => {
+    resetFields();
+    onClose();
+  };
+  const handleCreate = () => {
+    createVariable({
+      value: fontFamily,
+      label,
+      type: fontVariablePropTypeUtil.key
+    }).then((key) => {
+      setVariable(key);
+      closePopover();
+    });
+  };
+  const isFormInvalid = () => {
+    return !fontFamily?.trim() || !label?.trim();
+  };
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    PopoverHeader2,
+    {
+      title: __2("Create variable", "elementor"),
+      onClose: closePopover,
+      icon: /* @__PURE__ */ React3.createElement(TextIcon, { fontSize: SIZE2 })
+    }
+  ), /* @__PURE__ */ React3.createElement(Divider3, 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(
+    TextField2,
+    {
+      size: "tiny",
+      fullWidth: true,
+      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(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    UnstableTag,
+    {
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React3.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      ...bindTrigger(fontPopoverState),
+      fullWidth: true
+    }
+  ), /* @__PURE__ */ React3.createElement(
     Popover,
     {
-      ...bindPopover(popupState),
+      disablePortal: true,
+      disableScrollLock: true,
       anchorEl: anchorRef.current,
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" }
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: -20 },
+      ...bindPopover(fontPopoverState)
     },
-    /* @__PURE__ */ React2.createElement(Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(BrushIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(Typography, { variant: "subtitle2" }, __("Create variable", "elementor")), /* @__PURE__ */ React2.createElement(
-      CloseButton,
+    /* @__PURE__ */ React3.createElement(
+      FontFamilySelector,
       {
-        slotProps: { icon: { fontSize: "small" } },
-        sx: { ml: "auto" },
-        onClick: closePopover
+        fontFamilies,
+        fontFamily,
+        onFontFamilyChange: setFontFamily,
+        onClose: fontPopoverState.close
       }
-    )),
-    /* @__PURE__ */ React2.createElement(Divider2, 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(
-      TextField,
-      {
-        size: "tiny",
-        fullWidth: true,
-        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(
-      UnstableColorField,
-      {
-        size: "tiny",
-        fullWidth: true,
-        value: color,
-        onChange: setColor,
-        slotProps: {
-          colorPicker: {
-            anchorEl: anchorRef.current,
-            anchorOrigin: { vertical: "top", horizontal: "right" },
-            transformOrigin: { vertical: "top", horizontal: -10 }
-          }
-        }
-      }
-    )))),
-    /* @__PURE__ */ React2.createElement(CardActions, null, /* @__PURE__ */ React2.createElement(Button, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, __("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(Button, { size: "small", variant: "contained", disabled: isInValidForm(), onClick: handleCreate }, __("Create", "elementor")))
-  ));
+    )
+  ))))), /* @__PURE__ */ React3.createElement(CardActions2, null, /* @__PURE__ */ React3.createElement(Button2, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, __2("Cancel", "elementor")), /* @__PURE__ */ React3.createElement(Button2, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __2("Create", "elementor"))));
 };
 
 // src/components/variables-selection-popover.tsx
+var SIZE3 = "tiny";
 var VariablesSelectionPopover = ({
   selectedVariable,
   unlinkVariable,
@@ -461,27 +540,28 @@ var VariablesSelectionPopover = ({
   children
 }) => {
   const id = useId();
-  const popupState = usePopupState({ variant: "popover", popupId: `elementor-variables-action-${id}` });
-  const creationPopupState = usePopupState({ variant: "popover", popupId: `elementor-variables-creation-${id}` });
+  const popupState = usePopupState2({ variant: "popover", popupId: `elementor-variables-action-${id}` });
+  const creationPopupState = usePopupState2({ variant: "popover", popupId: `elementor-variables-creation-${id}` });
   const closePopover = () => popupState.close();
   const handleCreateButtonClick = (event) => {
     closePopover();
-    bindTrigger(creationPopupState).onClick(event);
+    bindTrigger2(creationPopupState).onClick(event);
   };
-  const anchorRef = useRef2(null);
+  const anchorRef = useRef3(null);
   const { label } = selectedVariable;
   const colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;
-  return /* @__PURE__ */ React3.createElement(Box3, { ref: anchorRef }, /* @__PURE__ */ React3.createElement(
+  const fontCreationEnabled = fontVariablePropTypeUtil.key === selectedVariable.type;
+  return /* @__PURE__ */ React4.createElement(Box2, { ref: anchorRef }, /* @__PURE__ */ React4.createElement(
     Tag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      ...bindTrigger(popupState),
-      startIcon: /* @__PURE__ */ React3.createElement(Stack2, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React3.createElement(ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
-      label: /* @__PURE__ */ React3.createElement(Box3, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React3.createElement(Typography2, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
-      actions: /* @__PURE__ */ React3.createElement(IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": __2("Unlink", "elementor") }, /* @__PURE__ */ React3.createElement(DetachIcon, { fontSize: "tiny" }))
+      ...bindTrigger2(popupState),
+      startIcon: /* @__PURE__ */ React4.createElement(Stack3, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React4.createElement(ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
+      label: /* @__PURE__ */ React4.createElement(Box2, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React4.createElement(Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
+      actions: /* @__PURE__ */ React4.createElement(IconButton, { size: SIZE3, onClick: unlinkVariable, "aria-label": __3("Unlink", "elementor") }, /* @__PURE__ */ React4.createElement(DetachIcon, { fontSize: SIZE3 }))
     }
-  ), /* @__PURE__ */ React3.createElement(
+  ), /* @__PURE__ */ React4.createElement(
     Popover2,
     {
       ...bindPopover2(popupState),
@@ -490,23 +570,44 @@ var VariablesSelectionPopover = ({
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__PURE__ */ React3.createElement(Stack2, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React3.createElement(ColorFilterIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React3.createElement(Typography2, { variant: "subtitle2" }, __2("Variables", "elementor")), /* @__PURE__ */ React3.createElement(Stack2, { direction: "row", sx: { ml: "auto" } }, colorCreationEnabled && /* @__PURE__ */ React3.createElement(
-      IconButton,
+    /* @__PURE__ */ React4.createElement(
+      PopoverHeader3,
       {
-        ...bindTrigger(creationPopupState),
-        size: "tiny",
-        onClick: handleCreateButtonClick
-      },
-      /* @__PURE__ */ React3.createElement(PlusIcon, { fontSize: "tiny" })
-    ), /* @__PURE__ */ React3.createElement(CloseButton2, { slotProps: { icon: { fontSize: "tiny" } }, onClick: closePopover }))),
+        title: __3("Variables", "elementor"),
+        onClose: closePopover,
+        icon: /* @__PURE__ */ React4.createElement(ColorFilterIcon, { fontSize: SIZE3 }),
+        actions: [
+          /* @__PURE__ */ React4.createElement(
+            IconButton,
+            {
+              key: "createVariable",
+              ...bindTrigger2(creationPopupState),
+              size: SIZE3,
+              onClick: handleCreateButtonClick
+            },
+            /* @__PURE__ */ React4.createElement(PlusIcon, { fontSize: SIZE3 })
+          )
+        ]
+      }
+    ),
     children?.({ closePopover })
-  ), colorCreationEnabled && /* @__PURE__ */ React3.createElement(ColorVariableCreation, { popupState: creationPopupState }));
+  ), /* @__PURE__ */ React4.createElement(Box2, { ref: anchorRef }, /* @__PURE__ */ React4.createElement(
+    Popover2,
+    {
+      ...bindPopover2(creationPopupState),
+      anchorEl: anchorRef.current,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    colorCreationEnabled && /* @__PURE__ */ React4.createElement(ColorVariableCreation, { onClose: creationPopupState.close }),
+    fontCreationEnabled && /* @__PURE__ */ React4.createElement(FontVariableCreation, { onClose: creationPopupState.close })
+  )));
 };
 
 // src/controls/color-variables-selection-control.tsx
 var ColorVariablesSelectionControl = () => {
-  const { setValue } = useBoundProp3();
-  const { value: variableValue } = useBoundProp3(colorVariablePropTypeUtil);
+  const { setValue } = useBoundProp4();
+  const { value: variableValue } = useBoundProp4(colorVariablePropTypeUtil);
   const selectedVariable = useVariable(variableValue);
   if (!selectedVariable) {
     throw new Error(`Global color variable ${variableValue} not found`);
@@ -514,27 +615,22 @@ var ColorVariablesSelectionControl = () => {
   const unlinkVariable = () => {
     setValue(colorPropTypeUtil.create(selectedVariable.value));
   };
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     VariablesSelectionPopover,
     {
       selectedVariable,
       unlinkVariable,
-      startTagAdornment: /* @__PURE__ */ React4.createElement(ColorIndicator, { size: "inherit", component: "span", value: selectedVariable.value })
+      startTagAdornment: /* @__PURE__ */ React5.createElement(ColorIndicator, { size: "inherit", component: "span", value: selectedVariable.value })
     },
-    ({ closePopover }) => /* @__PURE__ */ React4.createElement(ColorVariablesSelection, { onSelect: closePopover })
+    ({ closePopover }) => /* @__PURE__ */ React5.createElement(ColorVariablesSelection, { onSelect: closePopover })
   );
 };
 
 // src/hooks/use-prop-color-variable-action.tsx
-import * as React5 from "react";
-import { useBoundProp as useBoundProp4 } from "@elementor/editor-editing-panel";
+import * as React6 from "react";
+import { useBoundProp as useBoundProp5 } from "@elementor/editor-editing-panel";
 import { ColorFilterIcon as ColorFilterIcon2 } from "@elementor/icons";
-import { __ as __3 } from "@wordpress/i18n";
-
-// src/prop-types/font-variable-prop-type.ts
-import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
-import { z as z2 } from "@elementor/schema";
-var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.string());
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/utils.ts
 var hasAssignedColorVariable = (propValue) => {
@@ -552,13 +648,13 @@ var supportsFontVariables = (propType) => {
 
 // src/hooks/use-prop-color-variable-action.tsx
 var usePropColorVariableAction = () => {
-  const { propType } = useBoundProp4();
+  const { propType } = useBoundProp5();
   const visible = !!propType && supportsColorVariables(propType);
   return {
     visible,
     icon: ColorFilterIcon2,
-    title: __3("Variables", "elementor"),
-    popoverContent: ({ closePopover }) => /* @__PURE__ */ React5.createElement(ColorVariablesSelection, { onSelect: closePopover })
+    title: __4("Variables", "elementor"),
+    popoverContent: ({ closePopover }) => /* @__PURE__ */ React6.createElement(ColorVariablesSelection, { onSelect: closePopover })
   };
 };
 
@@ -590,32 +686,32 @@ import { styleTransformersRegistry as styleTransformersRegistry2 } from "@elemen
 import { controlActionsMenu as controlActionsMenu2, registerControlReplacement as registerControlReplacement2 } from "@elementor/editor-editing-panel";
 
 // src/controls/font-variables-selection-control.tsx
-import * as React7 from "react";
-import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
+import * as React8 from "react";
+import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { stringPropTypeUtil } from "@elementor/editor-props";
 
 // src/components/font-variables-selection.tsx
-import * as React6 from "react";
-import { Fragment as Fragment2 } from "react";
-import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
-import { EditIcon as EditIcon2, TextIcon } from "@elementor/icons";
-import { Box as Box4, Divider as Divider3, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, MenuList as MenuList2 } from "@elementor/ui";
+import * as React7 from "react";
+import { Fragment as Fragment4 } from "react";
+import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
+import { EditIcon as EditIcon2, TextIcon as TextIcon2 } from "@elementor/icons";
+import { Box as Box3, Divider as Divider4, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, MenuList as MenuList2 } from "@elementor/ui";
 var FontVariablesSelection = ({ onSelect }) => {
-  const { value: variable, setValue: setVariable } = useBoundProp5(fontVariablePropTypeUtil);
+  const { value: variable, setValue: setVariable } = useBoundProp6(fontVariablePropTypeUtil);
   const variables = usePropVariables(fontVariablePropTypeUtil.key);
   const handleSetVariable = (key) => {
     setVariable(key);
     onSelect?.();
   };
-  return /* @__PURE__ */ React6.createElement(Fragment2, null, /* @__PURE__ */ React6.createElement(Divider3, null), /* @__PURE__ */ React6.createElement(Box4, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React6.createElement(MenuList2, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(Fragment4, null, /* @__PURE__ */ React7.createElement(Divider4, null), /* @__PURE__ */ React7.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React7.createElement(MenuList2, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React7.createElement(
     StyledMenuItem,
     {
       key,
       onClick: () => handleSetVariable(key),
       selected: key === variable
     },
-    /* @__PURE__ */ React6.createElement(ListItemIcon2, null, /* @__PURE__ */ React6.createElement(TextIcon, null)),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(TextIcon2, null)),
+    /* @__PURE__ */ React7.createElement(
       ListItemText2,
       {
         primary: label,
@@ -640,14 +736,14 @@ var FontVariablesSelection = ({ onSelect }) => {
         sx: { display: "flex", alignItems: "center", gap: 1 }
       }
     ),
-    /* @__PURE__ */ React6.createElement(EditIcon2, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
+    /* @__PURE__ */ React7.createElement(EditIcon2, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
   )))));
 };
 
 // src/controls/font-variables-selection-control.tsx
 var FontVariablesSelectionControl = () => {
-  const { setValue: setFontFamily } = useBoundProp6();
-  const { value: variableValue } = useBoundProp6(fontVariablePropTypeUtil);
+  const { setValue: setFontFamily } = useBoundProp7();
+  const { value: variableValue } = useBoundProp7(fontVariablePropTypeUtil);
   const selectedVariable = useVariable(variableValue);
   if (!selectedVariable) {
     throw new Error(`Global font variable ${variableValue} not found`);
@@ -655,22 +751,22 @@ var FontVariablesSelectionControl = () => {
   const unlinkVariable = () => {
     setFontFamily(stringPropTypeUtil.create(selectedVariable.value));
   };
-  return /* @__PURE__ */ React7.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React7.createElement(FontVariablesSelection, { onSelect: closePopover }));
+  return /* @__PURE__ */ React8.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React8.createElement(FontVariablesSelection, { onSelect: closePopover }));
 };
 
 // src/hooks/use-prop-font-variable-action.tsx
-import * as React8 from "react";
-import { useBoundProp as useBoundProp7 } from "@elementor/editor-editing-panel";
+import * as React9 from "react";
+import { useBoundProp as useBoundProp8 } from "@elementor/editor-editing-panel";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 var usePropFontVariableAction = () => {
-  const { propType } = useBoundProp7();
+  const { propType } = useBoundProp8();
   const visible = !!propType && supportsFontVariables(propType);
   return {
     visible,
     icon: ColorFilterIcon3,
-    title: __4("Variables", "elementor"),
-    popoverContent: ({ closePopover }) => /* @__PURE__ */ React8.createElement(FontVariablesSelection, { onSelect: closePopover })
+    title: __5("Variables", "elementor"),
+    popoverContent: ({ closePopover }) => /* @__PURE__ */ React9.createElement(FontVariablesSelection, { onSelect: closePopover })
   };
 };
 
@@ -689,8 +785,8 @@ function initFontVariables() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-import * as React9 from "react";
-import { useEffect, useState as useState2 } from "react";
+import * as React10 from "react";
+import { useEffect, useState as useState3 } from "react";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
@@ -711,13 +807,13 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React9.createElement(Portal, { container }, /* @__PURE__ */ React9.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React10.createElement(Portal, { container }, /* @__PURE__ */ React10.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = useState2({});
+  const [variables, setVariables] = useState3({});
   useEffect(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {