@elementor/editor-variables 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @elementor/editor-variables
 
+## 0.13.0
+
+### Minor Changes
+
+- 5799919: Add font variable creation ui
+
+### Patch Changes
+
+- Updated dependencies [ab6320c]
+- Updated dependencies [199c99a]
+- Updated dependencies [dac8026]
+- Updated dependencies [2c11540]
+  - @elementor/editor-editing-panel@1.45.0
+  - @elementor/editor-props@0.13.0
+  - @elementor/editor-controls@1.0.0
+  - @elementor/editor-canvas@0.23.0
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/index.js

@@ -39,12 +39,12 @@ var import_editor = require("@elementor/editor");
 
 // src/init-color-variables.ts
 var import_editor_canvas2 = require("@elementor/editor-canvas");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 
 // src/controls/color-variables-selection-control.tsx
-var React4 = __toESM(require("react"));
-var import_editor_controls3 = require("@elementor/editor-controls");
-var import_editor_props2 = require("@elementor/editor-props");
+var React5 = __toESM(require("react"));
+var import_editor_controls4 = require("@elementor/editor-controls");
+var import_editor_props3 = require("@elementor/editor-props");
 
 // src/components/color-indicator.tsx
 var import_ui = require("@elementor/ui");
@@ -380,12 +380,17 @@ var ColorVariablesSelection = ({ onSelect }) => {
 };
 
 // src/components/variables-selection-popover.tsx
-var React3 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_icons3 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var React4 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_icons4 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+
+// src/prop-types/font-variable-prop-type.ts
+var import_editor_props2 = require("@elementor/editor-props");
+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"));
@@ -396,7 +401,7 @@ var import_icons2 = require("@elementor/icons");
 var import_ui4 = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
 var SIZE = "tiny";
-var ColorVariableCreation = ({ popupState }) => {
+var ColorVariableCreation = ({ onClose }) => {
   const { setValue: setVariable } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
   const [color, setColor] = (0, import_react3.useState)("");
   const [label, setLabel] = (0, import_react3.useState)("");
@@ -407,7 +412,7 @@ var ColorVariableCreation = ({ popupState }) => {
   };
   const closePopover = () => {
     resetFields();
-    popupState.close();
+    onClose();
   };
   const handleCreate = () => {
     createVariable({
@@ -419,148 +424,226 @@ var ColorVariableCreation = ({ popupState }) => {
       closePopover();
     });
   };
-  const isInValidForm = () => {
+  const isFormInvalid = () => {
     return !color?.trim() || !label?.trim();
   };
-  return /* @__PURE__ */ React2.createElement(import_ui4.Box, { ref: anchorRef }, /* @__PURE__ */ React2.createElement(
-    import_ui4.Popover,
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    import_editor_ui.PopoverHeader,
+    {
+      title: (0, import_i18n.__)("Create variable", "elementor"),
+      onClose: closePopover,
+      icon: /* @__PURE__ */ React2.createElement(import_icons2.BrushIcon, { fontSize: SIZE })
+    }
+  ), /* @__PURE__ */ React2.createElement(import_ui4.Divider, null), /* @__PURE__ */ React2.createElement(import_ui4.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+    import_ui4.TextField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: label,
+      onChange: (e) => setLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Value", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+    import_ui4.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(import_ui4.CardActions, null, /* @__PURE__ */ React2.createElement(import_ui4.Button, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, (0, import_i18n.__)("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(import_ui4.Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, (0, import_i18n.__)("Create", "elementor"))));
+};
+
+// src/components/font-variable-creation.tsx
+var React3 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_icons3 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+var SIZE2 = "tiny";
+var FontVariableCreation = ({ onClose }) => {
+  const fontFamilies = (0, import_editor_editing_panel.useFontFamilies)();
+  const { setValue: setVariable } = (0, import_editor_controls3.useBoundProp)(fontVariablePropTypeUtil);
+  const [fontFamily, setFontFamily] = (0, import_react4.useState)("");
+  const [label, setLabel] = (0, import_react4.useState)("");
+  const anchorRef = (0, import_react4.useRef)(null);
+  const fontPopoverState = (0, import_ui5.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(
+    import_editor_ui2.PopoverHeader,
+    {
+      title: (0, import_i18n2.__)("Create variable", "elementor"),
+      onClose: closePopover,
+      icon: /* @__PURE__ */ React3.createElement(import_icons3.TextIcon, { fontSize: SIZE2 })
+    }
+  ), /* @__PURE__ */ React3.createElement(import_ui5.Divider, null), /* @__PURE__ */ React3.createElement(import_ui5.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React3.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui5.FormLabel, { size: "small" }, (0, import_i18n2.__)("Name", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    import_ui5.TextField,
     {
-      ...(0, import_ui4.bindPopover)(popupState),
+      size: "tiny",
+      fullWidth: true,
+      value: label,
+      onChange: (e) => setLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React3.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui5.FormLabel, { size: "small" }, (0, import_i18n2.__)("Value", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    import_ui5.UnstableTag,
+    {
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React3.createElement(import_icons3.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui5.bindTrigger)(fontPopoverState),
+      fullWidth: true
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    import_ui5.Popover,
+    {
+      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 },
+      ...(0, import_ui5.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React2.createElement(
-      import_editor_ui.PopoverHeader,
-      {
-        title: (0, import_i18n.__)("Create variable", "elementor"),
-        onClose: closePopover,
-        icon: /* @__PURE__ */ React2.createElement(import_icons2.BrushIcon, { fontSize: SIZE })
-      }
-    ),
-    /* @__PURE__ */ React2.createElement(import_ui4.Divider, null),
-    /* @__PURE__ */ React2.createElement(import_ui4.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
-      import_ui4.TextField,
-      {
-        size: "tiny",
-        fullWidth: true,
-        value: label,
-        onChange: (e) => setLabel(e.target.value)
-      }
-    ))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Value", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
-      import_ui4.UnstableColorField,
+    /* @__PURE__ */ React3.createElement(
+      import_editor_controls3.FontFamilySelector,
       {
-        size: "tiny",
-        fullWidth: true,
-        value: color,
-        onChange: setColor,
-        slotProps: {
-          colorPicker: {
-            anchorEl: anchorRef.current,
-            anchorOrigin: { vertical: "top", horizontal: "right" },
-            transformOrigin: { vertical: "top", horizontal: -10 }
-          }
-        }
+        fontFamilies,
+        fontFamily,
+        onFontFamilyChange: setFontFamily,
+        onClose: fontPopoverState.close
       }
-    )))),
-    /* @__PURE__ */ React2.createElement(import_ui4.CardActions, null, /* @__PURE__ */ React2.createElement(import_ui4.Button, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, (0, import_i18n.__)("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(import_ui4.Button, { size: "small", variant: "contained", disabled: isInValidForm(), onClick: handleCreate }, (0, import_i18n.__)("Create", "elementor")))
-  ));
+    )
+  ))))), /* @__PURE__ */ React3.createElement(import_ui5.CardActions, null, /* @__PURE__ */ React3.createElement(import_ui5.Button, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, (0, import_i18n2.__)("Cancel", "elementor")), /* @__PURE__ */ React3.createElement(import_ui5.Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, (0, import_i18n2.__)("Create", "elementor"))));
 };
 
 // src/components/variables-selection-popover.tsx
-var SIZE2 = "tiny";
+var SIZE3 = "tiny";
 var VariablesSelectionPopover = ({
   selectedVariable,
   unlinkVariable,
   startTagAdornment,
   children
 }) => {
-  const id = (0, import_react4.useId)();
-  const popupState = (0, import_ui5.usePopupState)({ variant: "popover", popupId: `elementor-variables-action-${id}` });
-  const creationPopupState = (0, import_ui5.usePopupState)({ variant: "popover", popupId: `elementor-variables-creation-${id}` });
+  const id = (0, import_react5.useId)();
+  const popupState = (0, import_ui6.usePopupState)({ variant: "popover", popupId: `elementor-variables-action-${id}` });
+  const creationPopupState = (0, import_ui6.usePopupState)({ variant: "popover", popupId: `elementor-variables-creation-${id}` });
   const closePopover = () => popupState.close();
   const handleCreateButtonClick = (event) => {
     closePopover();
-    (0, import_ui5.bindTrigger)(creationPopupState).onClick(event);
+    (0, import_ui6.bindTrigger)(creationPopupState).onClick(event);
   };
-  const anchorRef = (0, import_react4.useRef)(null);
+  const anchorRef = (0, import_react5.useRef)(null);
   const { label } = selectedVariable;
   const colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;
-  return /* @__PURE__ */ React3.createElement(import_ui5.Box, { ref: anchorRef }, /* @__PURE__ */ React3.createElement(
-    import_ui5.UnstableTag,
+  const fontCreationEnabled = fontVariablePropTypeUtil.key === selectedVariable.type;
+  return /* @__PURE__ */ React4.createElement(import_ui6.Box, { ref: anchorRef }, /* @__PURE__ */ React4.createElement(
+    import_ui6.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      ...(0, import_ui5.bindTrigger)(popupState),
-      startIcon: /* @__PURE__ */ React3.createElement(import_ui5.Stack, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
-      label: /* @__PURE__ */ React3.createElement(import_ui5.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React3.createElement(import_ui5.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
-      actions: /* @__PURE__ */ React3.createElement(import_ui5.IconButton, { size: SIZE2, onClick: unlinkVariable, "aria-label": (0, import_i18n2.__)("Unlink", "elementor") }, /* @__PURE__ */ React3.createElement(import_icons3.DetachIcon, { fontSize: SIZE2 }))
+      ...(0, import_ui6.bindTrigger)(popupState),
+      startIcon: /* @__PURE__ */ React4.createElement(import_ui6.Stack, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React4.createElement(import_icons4.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
+      label: /* @__PURE__ */ React4.createElement(import_ui6.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React4.createElement(import_ui6.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
+      actions: /* @__PURE__ */ React4.createElement(import_ui6.IconButton, { size: SIZE3, onClick: unlinkVariable, "aria-label": (0, import_i18n3.__)("Unlink", "elementor") }, /* @__PURE__ */ React4.createElement(import_icons4.DetachIcon, { fontSize: SIZE3 }))
     }
-  ), /* @__PURE__ */ React3.createElement(
-    import_ui5.Popover,
+  ), /* @__PURE__ */ React4.createElement(
+    import_ui6.Popover,
     {
-      ...(0, import_ui5.bindPopover)(popupState),
+      ...(0, import_ui6.bindPopover)(popupState),
       disableScrollLock: true,
       anchorEl: anchorRef.current,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__PURE__ */ React3.createElement(
-      import_editor_ui2.PopoverHeader,
+    /* @__PURE__ */ React4.createElement(
+      import_editor_ui3.PopoverHeader,
       {
-        title: (0, import_i18n2.__)("Variables", "elementor"),
+        title: (0, import_i18n3.__)("Variables", "elementor"),
         onClose: closePopover,
-        icon: /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: SIZE2 }),
+        icon: /* @__PURE__ */ React4.createElement(import_icons4.ColorFilterIcon, { fontSize: SIZE3 }),
         actions: [
-          /* @__PURE__ */ React3.createElement(
-            import_ui5.IconButton,
+          /* @__PURE__ */ React4.createElement(
+            import_ui6.IconButton,
             {
               key: "createVariable",
-              ...(0, import_ui5.bindTrigger)(creationPopupState),
-              size: SIZE2,
+              ...(0, import_ui6.bindTrigger)(creationPopupState),
+              size: SIZE3,
               onClick: handleCreateButtonClick
             },
-            /* @__PURE__ */ React3.createElement(import_icons3.PlusIcon, { fontSize: SIZE2 })
+            /* @__PURE__ */ React4.createElement(import_icons4.PlusIcon, { fontSize: SIZE3 })
           )
         ]
       }
     ),
     children?.({ closePopover })
-  ), colorCreationEnabled && /* @__PURE__ */ React3.createElement(ColorVariableCreation, { popupState: creationPopupState }));
+  ), /* @__PURE__ */ React4.createElement(import_ui6.Box, { ref: anchorRef }, /* @__PURE__ */ React4.createElement(
+    import_ui6.Popover,
+    {
+      ...(0, import_ui6.bindPopover)(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 } = (0, import_editor_controls3.useBoundProp)();
-  const { value: variableValue } = (0, import_editor_controls3.useBoundProp)(colorVariablePropTypeUtil);
+  const { setValue } = (0, import_editor_controls4.useBoundProp)();
+  const { value: variableValue } = (0, import_editor_controls4.useBoundProp)(colorVariablePropTypeUtil);
   const selectedVariable = useVariable(variableValue);
   if (!selectedVariable) {
     throw new Error(`Global color variable ${variableValue} not found`);
   }
   const unlinkVariable = () => {
-    setValue(import_editor_props2.colorPropTypeUtil.create(selectedVariable.value));
+    setValue(import_editor_props3.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
-var React5 = __toESM(require("react"));
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_icons4 = require("@elementor/icons");
-var import_i18n3 = require("@wordpress/i18n");
-
-// src/prop-types/font-variable-prop-type.ts
-var import_editor_props3 = require("@elementor/editor-props");
-var import_schema2 = require("@elementor/schema");
-var fontVariablePropTypeUtil = (0, import_editor_props3.createPropUtils)("global-font-variable", import_schema2.z.string());
+var React6 = __toESM(require("react"));
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_icons5 = require("@elementor/icons");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/utils.ts
 var hasAssignedColorVariable = (propValue) => {
@@ -578,13 +661,13 @@ var supportsFontVariables = (propType) => {
 
 // src/hooks/use-prop-color-variable-action.tsx
 var usePropColorVariableAction = () => {
-  const { propType } = (0, import_editor_editing_panel.useBoundProp)();
+  const { propType } = (0, import_editor_editing_panel2.useBoundProp)();
   const visible = !!propType && supportsColorVariables(propType);
   return {
     visible,
-    icon: import_icons4.ColorFilterIcon,
-    title: (0, import_i18n3.__)("Variables", "elementor"),
-    popoverContent: ({ closePopover }) => /* @__PURE__ */ React5.createElement(ColorVariablesSelection, { onSelect: closePopover })
+    icon: import_icons5.ColorFilterIcon,
+    title: (0, import_i18n4.__)("Variables", "elementor"),
+    popoverContent: ({ closePopover }) => /* @__PURE__ */ React6.createElement(ColorVariablesSelection, { onSelect: closePopover })
   };
 };
 
@@ -598,9 +681,9 @@ var variableTransformer = (0, import_editor_canvas.createTransformer)((value) =>
 });
 
 // src/init-color-variables.ts
-var { registerPopoverAction } = import_editor_editing_panel2.controlActionsMenu;
+var { registerPopoverAction } = import_editor_editing_panel3.controlActionsMenu;
 function initColorVariables() {
-  (0, import_editor_editing_panel2.registerControlReplacement)({
+  (0, import_editor_editing_panel3.registerControlReplacement)({
     component: ColorVariablesSelectionControl,
     condition: ({ value }) => hasAssignedColorVariable(value)
   });
@@ -613,36 +696,36 @@ function initColorVariables() {
 
 // src/init-font-variables.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
-var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 
 // src/controls/font-variables-selection-control.tsx
-var React7 = __toESM(require("react"));
-var import_editor_controls5 = require("@elementor/editor-controls");
+var React8 = __toESM(require("react"));
+var import_editor_controls6 = require("@elementor/editor-controls");
 var import_editor_props4 = require("@elementor/editor-props");
 
 // src/components/font-variables-selection.tsx
-var React6 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_editor_controls4 = require("@elementor/editor-controls");
-var import_icons5 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
+var React7 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_icons6 = require("@elementor/icons");
+var import_ui7 = require("@elementor/ui");
 var FontVariablesSelection = ({ onSelect }) => {
-  const { value: variable, setValue: setVariable } = (0, import_editor_controls4.useBoundProp)(fontVariablePropTypeUtil);
+  const { value: variable, setValue: setVariable } = (0, import_editor_controls5.useBoundProp)(fontVariablePropTypeUtil);
   const variables = usePropVariables(fontVariablePropTypeUtil.key);
   const handleSetVariable = (key) => {
     setVariable(key);
     onSelect?.();
   };
-  return /* @__PURE__ */ React6.createElement(import_react5.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_ui6.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React6.createElement(import_ui6.MenuList, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(import_react6.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui7.Divider, null), /* @__PURE__ */ React7.createElement(import_ui7.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React7.createElement(import_ui7.MenuList, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React7.createElement(
     StyledMenuItem,
     {
       key,
       onClick: () => handleSetVariable(key),
       selected: key === variable
     },
-    /* @__PURE__ */ React6.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React6.createElement(import_icons5.TextIcon, null)),
-    /* @__PURE__ */ React6.createElement(
-      import_ui6.ListItemText,
+    /* @__PURE__ */ React7.createElement(import_ui7.ListItemIcon, null, /* @__PURE__ */ React7.createElement(import_icons6.TextIcon, null)),
+    /* @__PURE__ */ React7.createElement(
+      import_ui7.ListItemText,
       {
         primary: label,
         secondary: value,
@@ -666,14 +749,14 @@ var FontVariablesSelection = ({ onSelect }) => {
         sx: { display: "flex", alignItems: "center", gap: 1 }
       }
     ),
-    /* @__PURE__ */ React6.createElement(import_icons5.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
+    /* @__PURE__ */ React7.createElement(import_icons6.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
   )))));
 };
 
 // src/controls/font-variables-selection-control.tsx
 var FontVariablesSelectionControl = () => {
-  const { setValue: setFontFamily } = (0, import_editor_controls5.useBoundProp)();
-  const { value: variableValue } = (0, import_editor_controls5.useBoundProp)(fontVariablePropTypeUtil);
+  const { setValue: setFontFamily } = (0, import_editor_controls6.useBoundProp)();
+  const { value: variableValue } = (0, import_editor_controls6.useBoundProp)(fontVariablePropTypeUtil);
   const selectedVariable = useVariable(variableValue);
   if (!selectedVariable) {
     throw new Error(`Global font variable ${variableValue} not found`);
@@ -681,29 +764,29 @@ var FontVariablesSelectionControl = () => {
   const unlinkVariable = () => {
     setFontFamily(import_editor_props4.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
-var React8 = __toESM(require("react"));
-var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_icons6 = require("@elementor/icons");
-var import_i18n4 = require("@wordpress/i18n");
+var React9 = __toESM(require("react"));
+var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
+var import_icons7 = require("@elementor/icons");
+var import_i18n5 = require("@wordpress/i18n");
 var usePropFontVariableAction = () => {
-  const { propType } = (0, import_editor_editing_panel3.useBoundProp)();
+  const { propType } = (0, import_editor_editing_panel4.useBoundProp)();
   const visible = !!propType && supportsFontVariables(propType);
   return {
     visible,
-    icon: import_icons6.ColorFilterIcon,
-    title: (0, import_i18n4.__)("Variables", "elementor"),
-    popoverContent: ({ closePopover }) => /* @__PURE__ */ React8.createElement(FontVariablesSelection, { onSelect: closePopover })
+    icon: import_icons7.ColorFilterIcon,
+    title: (0, import_i18n5.__)("Variables", "elementor"),
+    popoverContent: ({ closePopover }) => /* @__PURE__ */ React9.createElement(FontVariablesSelection, { onSelect: closePopover })
   };
 };
 
 // src/init-font-variables.ts
-var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel4.controlActionsMenu;
+var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel5.controlActionsMenu;
 function initFontVariables() {
-  (0, import_editor_editing_panel4.registerControlReplacement)({
+  (0, import_editor_editing_panel5.registerControlReplacement)({
     component: FontVariablesSelectionControl,
     condition: ({ value }) => hasAssignedFontVariable(value)
   });
@@ -715,10 +798,10 @@ function initFontVariables() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React9 = __toESM(require("react"));
-var import_react6 = require("react");
+var React10 = __toESM(require("react"));
+var import_react7 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_ui7 = require("@elementor/ui");
+var import_ui8 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -737,14 +820,14 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React9.createElement(import_ui7.Portal, { container }, /* @__PURE__ */ React9.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React10.createElement(import_ui8.Portal, { container }, /* @__PURE__ */ React10.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);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react6.useState)({});
-  (0, import_react6.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react7.useState)({});
+  (0, import_react7.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();