@elementor/editor-variables 0.12.0 → 0.14.0

package/dist/index.js

@@ -39,25 +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");
-
-// 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");
-
-// src/components/color-indicator.tsx
-var import_ui = require("@elementor/ui");
-var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`
-}));
+var import_editor_controls7 = require("@elementor/editor-controls");
+var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
+var import_editor_props4 = require("@elementor/editor-props");
 
-// src/components/color-variables-selection.tsx
+// src/components/variables-repeater-item-slot.tsx
 var React = __toESM(require("react"));
-var import_react2 = require("react");
-var import_editor_controls = require("@elementor/editor-controls");
-var import_icons = require("@elementor/icons");
-var import_ui3 = require("@elementor/ui");
 
 // src/hooks/use-prop-variables.ts
 var import_react = require("react");
@@ -110,8 +97,11 @@ var Storage = class {
     return this.state.variables;
   }
   fill(variables, watermark) {
+    this.state.variables = {};
+    if (variables && Object.keys(variables).length) {
+      this.state.variables = variables;
+    }
     this.state.watermark = watermark;
-    this.state.variables = variables;
     localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
   }
@@ -141,6 +131,49 @@ var Storage = class {
   }
 };
 
+// src/create-style-variables-repository.ts
+var createStyleVariablesRepository = () => {
+  const variables = {};
+  let subscription;
+  const subscribe = (cb) => {
+    subscription = cb;
+    return () => {
+      subscription = () => {
+      };
+    };
+  };
+  const notify = () => {
+    if (typeof subscription === "function") {
+      subscription({ ...variables });
+    }
+  };
+  const shouldUpdate = (key, newValue) => {
+    return !(key in variables) || variables[key] !== newValue;
+  };
+  const applyUpdates = (updatedVars) => {
+    let hasChanges = false;
+    for (const [key, { value }] of Object.entries(updatedVars)) {
+      if (shouldUpdate(key, value)) {
+        variables[key] = value;
+        hasChanges = true;
+      }
+    }
+    return hasChanges;
+  };
+  const update = (updatedVars) => {
+    if (applyUpdates(updatedVars)) {
+      notify();
+    }
+  };
+  return {
+    subscribe,
+    update
+  };
+};
+
+// src/style-variables-repository.ts
+var styleVariablesRepository = createStyleVariablesRepository();
+
 // src/service.ts
 var storage = new Storage();
 var service = {
@@ -160,6 +193,7 @@ var service = {
     }).then((data) => {
       const { variables, watermark } = data;
       storage.fill(variables, watermark);
+      styleVariablesRepository.update(variables);
       return variables;
     });
   },
@@ -175,6 +209,9 @@ var service = {
       handleWatermark(OP_RW, watermark);
       const { id: variableId, ...createdVariable } = variable;
       storage.add(variableId, createdVariable);
+      styleVariablesRepository.update({
+        [variableId]: createdVariable
+      });
       return {
         id: variableId,
         variable: createdVariable
@@ -193,6 +230,9 @@ var service = {
       handleWatermark(OP_RW, watermark);
       const { id: variableId, ...updatedVariable } = variable;
       storage.update(variableId, updatedVariable);
+      styleVariablesRepository.update({
+        [variableId]: updatedVariable
+      });
       return {
         id: variableId,
         variable: updatedVariable
@@ -211,6 +251,9 @@ var service = {
       handleWatermark(OP_RW, watermark);
       const { id: variableId, ...deletedVariable } = variable;
       storage.update(variableId, deletedVariable);
+      styleVariablesRepository.update({
+        [variableId]: deletedVariable
+      });
       return {
         id: variableId,
         variable: deletedVariable
@@ -229,6 +272,9 @@ var service = {
       handleWatermark(OP_RW, watermark);
       const { id: variableId, ...restoredVariable } = variable;
       storage.update(variableId, restoredVariable);
+      styleVariablesRepository.update({
+        [variableId]: restoredVariable
+      });
       return {
         id: variableId,
         variable: restoredVariable
@@ -243,53 +289,7 @@ var handleWatermark = (operation, newWatermark) => {
   storage.watermark(newWatermark);
 };
 
-// src/create-style-variables-repository.ts
-var createStyleVariablesRepository = () => {
-  const variables = {};
-  let subscription;
-  const subscribe = (cb) => {
-    subscription = cb;
-    return () => {
-      subscription = () => {
-      };
-    };
-  };
-  const notify = () => {
-    if (typeof subscription === "function") {
-      subscription({ ...variables });
-    }
-  };
-  const shouldUpdate = (key, newValue) => {
-    return !(key in variables) || variables[key] !== newValue;
-  };
-  const applyUpdates = (updatedVars) => {
-    let hasChanges = false;
-    for (const [key, { value }] of Object.entries(updatedVars)) {
-      if (shouldUpdate(key, value)) {
-        variables[key] = value;
-        hasChanges = true;
-      }
-    }
-    return hasChanges;
-  };
-  const update = (updatedVars) => {
-    if (applyUpdates(updatedVars)) {
-      notify();
-    }
-  };
-  return {
-    subscribe,
-    update
-  };
-};
-
-// src/style-variables-repository.ts
-var styleVariablesRepository = createStyleVariablesRepository();
-
 // src/hooks/use-prop-variables.ts
-var usePropVariables = (propKey) => {
-  return (0, import_react.useMemo)(() => normalizeVariables(propKey), [propKey]);
-};
 var useVariable = (key) => {
   const variables = service.variables();
   if (!variables?.[key]) {
@@ -300,6 +300,20 @@ var useVariable = (key) => {
     key
   };
 };
+var useFilteredVariables = (searchValue, propTypeKey) => {
+  const variables = usePropVariables(propTypeKey);
+  const filteredVariables = variables.filter(({ label }) => {
+    return label.toLowerCase().includes(searchValue.toLowerCase());
+  });
+  return {
+    list: filteredVariables,
+    hasMatches: filteredVariables.length > 0,
+    isSourceNotEmpty: variables.length > 0
+  };
+};
+var usePropVariables = (propKey) => {
+  return (0, import_react.useMemo)(() => normalizeVariables(propKey), [propKey]);
+};
 var normalizeVariables = (propKey) => {
   const variables = service.variables();
   styleVariablesRepository.update(variables);
@@ -317,250 +331,790 @@ var createVariable = (newVariable) => {
     return id;
   });
 };
+var updateVariable = (updateId, { value, label }) => {
+  return service.update(updateId, { value, label }).then(({ id, variable }) => {
+    styleVariablesRepository.update({
+      [id]: variable
+    });
+    return id;
+  });
+};
+
+// src/components/ui/color-indicator.tsx
+var import_ui = require("@elementor/ui");
+var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`
+}));
+
+// src/components/variables-repeater-item-slot.tsx
+var useColorVariable = (value) => {
+  const variableId = value?.value?.color?.value;
+  return useVariable(variableId || "");
+};
+var BackgroundRepeaterColorIndicator = ({ value }) => {
+  const colorVariable = useColorVariable(value);
+  return /* @__PURE__ */ React.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+};
+var BackgroundRepeaterLabel = ({ value }) => {
+  const colorVariable = useColorVariable(value);
+  return /* @__PURE__ */ React.createElement("span", null, colorVariable?.label);
+};
+var BoxShadowRepeaterColorIndicator = ({ value }) => {
+  const colorVariable = useColorVariable(value);
+  return /* @__PURE__ */ React.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+};
+
+// src/controls/color-variable-control.tsx
+var React12 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_editor_controls6 = require("@elementor/editor-controls");
+var import_editor_props3 = require("@elementor/editor-props");
+var import_icons9 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
+
+// src/components/variable-selection-popover.tsx
+var React11 = __toESM(require("react"));
+var import_react8 = require("react");
 
 // src/prop-types/color-variable-prop-type.ts
 var import_editor_props = require("@elementor/editor-props");
 var import_schema = require("@elementor/schema");
 var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
 
-// src/components/styled-menu-item.tsx
-var import_ui2 = require("@elementor/ui");
-var StyledMenuItem = (0, import_ui2.styled)(import_ui2.MenuItem)(() => ({
-  pl: 2,
-  pr: 1,
-  py: 0.5,
-  "&:hover .MuiSvgIcon-root": {
-    opacity: 1
-  }
-}));
+// 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-variables-selection.tsx
-var ColorVariablesSelection = ({ onSelect }) => {
-  const { value: variable, setValue: setVariable } = (0, import_editor_controls.useBoundProp)(colorVariablePropTypeUtil);
-  const variables = usePropVariables(colorVariablePropTypeUtil.key);
-  const handleSetColorVariable = (key) => {
-    setVariable(key);
-    onSelect?.();
+// src/components/color-variable-creation.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_ui = require("@elementor/editor-ui");
+var import_icons = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+var SIZE = "tiny";
+var ColorVariableCreation = ({ onGoBack, onClose }) => {
+  const { setValue: setVariable } = (0, import_editor_controls.useBoundProp)(colorVariablePropTypeUtil);
+  const [color, setColor] = (0, import_react2.useState)("");
+  const [label, setLabel] = (0, import_react2.useState)("");
+  const anchorRef = (0, import_react2.useRef)(null);
+  const resetFields = () => {
+    setColor("");
+    setLabel("");
   };
-  return /* @__PURE__ */ React.createElement(import_react2.Fragment, null, /* @__PURE__ */ React.createElement(import_ui3.Divider, null), /* @__PURE__ */ React.createElement(import_ui3.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React.createElement(import_ui3.MenuList, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React.createElement(
-    StyledMenuItem,
+  const closePopover = () => {
+    resetFields();
+    onClose();
+  };
+  const handleCreate = () => {
+    createVariable({
+      value: color,
+      label,
+      type: colorVariablePropTypeUtil.key
+    }).then((key) => {
+      setVariable(key);
+      closePopover();
+    });
+  };
+  const isFormInvalid = () => {
+    return !color?.trim() || !label?.trim();
+  };
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    import_editor_ui.PopoverHeader,
     {
-      key,
-      onClick: () => handleSetColorVariable(key),
-      selected: key === variable
-    },
-    /* @__PURE__ */ React.createElement(import_ui3.ListItemIcon, null, /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", component: "span", value })),
-    /* @__PURE__ */ React.createElement(
-      import_ui3.ListItemText,
-      {
-        primary: label,
-        secondary: value,
-        primaryTypographyProps: {
-          variant: "body2",
-          color: "text.secondary",
-          style: {
-            lineHeight: 2,
-            display: "inline-block",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            maxWidth: "81px"
-          }
-        },
-        secondaryTypographyProps: {
-          variant: "caption",
-          color: "text.tertiary",
-          style: { marginTop: "1px", lineHeight: "1" }
-        },
-        sx: { display: "flex", alignItems: "center", gap: 1 }
+      icon: /* @__PURE__ */ React2.createElement(React2.Fragment, null, onGoBack && /* @__PURE__ */ React2.createElement(import_ui2.IconButton, { size: SIZE, "aria-label": (0, import_i18n.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React2.createElement(import_icons.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React2.createElement(import_icons.BrushIcon, { fontSize: SIZE })),
+      title: (0, import_i18n.__)("Create variable", "elementor"),
+      onClose: closePopover
+    }
+  ), /* @__PURE__ */ React2.createElement(import_ui2.Divider, null), /* @__PURE__ */ React2.createElement(import_ui2.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui2.FormLabel, { size: "small" }, (0, import_i18n.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+    import_ui2.TextField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: label,
+      onChange: (e) => setLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui2.FormLabel, { size: "small" }, (0, import_i18n.__)("Value", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+    import_ui2.UnstableColorField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: color,
+      onChange: setColor,
+      slotProps: {
+        colorPicker: {
+          anchorEl: anchorRef.current,
+          anchorOrigin: { vertical: "top", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: -10 }
+        }
       }
-    ),
-    /* @__PURE__ */ React.createElement(import_icons.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
-  )))));
+    }
+  )))), /* @__PURE__ */ React2.createElement(import_ui2.CardActions, null, /* @__PURE__ */ React2.createElement(import_ui2.Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, (0, import_i18n.__)("Create", "elementor"))));
 };
 
-// src/components/variables-selection-popover.tsx
+// src/components/color-variable-edit.tsx
 var React3 = __toESM(require("react"));
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_icons3 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
+var import_icons2 = require("@elementor/icons");
+var import_ui3 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
+var SIZE2 = "tiny";
+var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
+  const variable = useVariable(editId);
+  if (!variable) {
+    throw new Error(`Global color variable not found`);
+  }
+  const anchorRef = (0, import_react3.useRef)(null);
+  const [color, setColor] = (0, import_react3.useState)(variable.value);
+  const [label, setLabel] = (0, import_react3.useState)(variable.label);
+  const handleUpdate = () => {
+    updateVariable(editId, {
+      value: color,
+      label
+    }).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(
+    import_editor_ui2.PopoverHeader,
+    {
+      title: (0, import_i18n2.__)("Edit variable", "elementor"),
+      onClose,
+      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(import_ui3.IconButton, { size: SIZE2, "aria-label": (0, import_i18n2.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(import_icons2.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React3.createElement(import_icons2.BrushIcon, { fontSize: SIZE2 }))
+    }
+  ), /* @__PURE__ */ React3.createElement(import_ui3.Divider, null), /* @__PURE__ */ React3.createElement(import_ui3.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { size: "small" }, (0, import_i18n2.__)("Name", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    import_ui3.TextField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: label,
+      onChange: (e) => setLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { size: "small" }, (0, import_i18n2.__)("Value", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    import_ui3.UnstableColorField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: color,
+      onChange: setColor,
+      slotProps: {
+        colorPicker: {
+          anchorEl: anchorRef.current,
+          anchorOrigin: { vertical: "top", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: -10 }
+        }
+      }
+    }
+  )))), /* @__PURE__ */ React3.createElement(import_ui3.CardActions, null, /* @__PURE__ */ React3.createElement(import_ui3.Button, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, (0, import_i18n2.__)("Save", "elementor"))));
+};
 
-// src/components/color-variable-creation.tsx
-var React2 = __toESM(require("react"));
-var import_react3 = require("react");
+// src/components/color-variables-selection.tsx
+var React7 = __toESM(require("react"));
+var import_react4 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_icons2 = require("@elementor/icons");
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_icons5 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
+
+// src/components/ui/menu-item-content.tsx
+var React4 = __toESM(require("react"));
+var import_icons3 = require("@elementor/icons");
 var import_ui4 = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
-var SIZE = "tiny";
-var ColorVariableCreation = ({ popupState }) => {
-  const { setValue: setVariable } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
-  const [color, setColor] = (0, import_react3.useState)("");
-  const [label, setLabel] = (0, import_react3.useState)("");
-  const anchorRef = (0, import_react3.useRef)(null);
+var import_i18n3 = require("@wordpress/i18n");
+var SIZE3 = "tiny";
+var MenuItemContent = ({ item }) => {
+  const onEdit = item.onEdit;
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(import_ui4.ListItemIcon, null, item.icon), /* @__PURE__ */ React4.createElement(
+    import_ui4.ListItemText,
+    {
+      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: {
+        variant: "caption",
+        color: "text.tertiary",
+        style: { marginTop: "1px", lineHeight: "1" }
+      },
+      sx: { display: "flex", alignItems: "center", gap: 1 }
+    }
+  ), !!onEdit && /* @__PURE__ */ React4.createElement(
+    import_ui4.IconButton,
+    {
+      sx: { mx: 1, opacity: "0" },
+      onClick: (e) => {
+        e.stopPropagation();
+        onEdit(item.value);
+      },
+      "aria-label": (0, import_i18n3.__)("Edit", "elementor")
+    },
+    /* @__PURE__ */ React4.createElement(import_icons3.EditIcon, { color: "action", fontSize: SIZE3 })
+  ));
+};
+
+// src/components/ui/no-search-results.tsx
+var React5 = __toESM(require("react"));
+var import_icons4 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+var NoSearchResults = ({ searchValue, onClear }) => {
+  return /* @__PURE__ */ React5.createElement(
+    import_ui5.Stack,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pb: 5.5 }
+    },
+    /* @__PURE__ */ React5.createElement(import_icons4.ColorFilterIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React5.createElement(import_ui5.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n4.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React5.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React5.createElement(import_ui5.Typography, { align: "center", variant: "caption" }, (0, import_i18n4.__)("Try something else.", "elementor"), /* @__PURE__ */ React5.createElement("br", null), /* @__PURE__ */ React5.createElement(import_ui5.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n4.__)("Clear & try again", "elementor")))
+  );
+};
+
+// src/components/ui/no-variables.tsx
+var React6 = __toESM(require("react"));
+var import_ui6 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+var NoVariables = ({ icon, onAdd }) => /* @__PURE__ */ React6.createElement(
+  import_ui6.Stack,
+  {
+    gap: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    color: "text.secondary",
+    sx: { p: 2.5, pb: 5.5 }
+  },
+  icon,
+  /* @__PURE__ */ React6.createElement(import_ui6.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n5.__)("Create your first variable", "elementor")),
+  /* @__PURE__ */ React6.createElement(import_ui6.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, (0, import_i18n5.__)("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
+  onAdd && /* @__PURE__ */ React6.createElement(import_ui6.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n5.__)("Create a variable", "elementor"))
+);
+
+// src/components/ui/styled-menu-list.tsx
+var import_ui7 = require("@elementor/ui");
+var VariablesStyledMenuList = (0, import_ui7.styled)(import_ui7.MenuList)(({ theme }) => ({
+  "& > li": {
+    height: 32,
+    width: "100%",
+    display: "flex",
+    alignItems: "center"
+  },
+  '& > [role="option"]': {
+    ...theme.typography.caption,
+    lineHeight: "inherit",
+    padding: theme.spacing(0.5, 1, 0.5, 2),
+    "&:hover, &:focus": {
+      backgroundColor: theme.palette.action.hover
+    },
+    '&[aria-selected="true"]': {
+      backgroundColor: theme.palette.action.selected
+    },
+    cursor: "pointer",
+    textOverflow: "ellipsis",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    "&:hover .MuiIconButton-root, .MuiIconButton-root:focus": {
+      opacity: 1
+    }
+  },
+  width: "100%",
+  position: "relative"
+}));
+
+// src/components/color-variables-selection.tsx
+var SIZE4 = "tiny";
+var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
+  const { value: variable, setValue: setVariable } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
+  const [searchValue, setSearchValue] = (0, import_react4.useState)("");
+  const {
+    list: variables,
+    hasMatches: hasSearchResults,
+    isSourceNotEmpty: hasVariables
+  } = useFilteredVariables(searchValue, colorVariablePropTypeUtil.key);
+  const handleSetColorVariable = (key) => {
+    setVariable(key);
+    closePopover();
+  };
+  const actions = [];
+  if (onAdd) {
+    actions.push(
+      /* @__PURE__ */ React7.createElement(import_ui8.IconButton, { key: "add", size: SIZE4, onClick: onAdd }, /* @__PURE__ */ React7.createElement(import_icons5.PlusIcon, { fontSize: SIZE4 }))
+    );
+  }
+  if (onSettings) {
+    actions.push(
+      /* @__PURE__ */ React7.createElement(import_ui8.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React7.createElement(import_icons5.SettingsIcon, { fontSize: SIZE4 }))
+    );
+  }
+  const items = variables.map(({ value, label, key }) => ({
+    type: "item",
+    value: key,
+    label,
+    icon: /* @__PURE__ */ React7.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
+    secondaryText: value,
+    onEdit: () => onEdit?.(key)
+  }));
+  const handleSearch = (search) => {
+    setSearchValue(search);
+  };
+  const handleClearSearch = () => {
+    setSearchValue("");
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+    import_editor_ui3.PopoverHeader,
+    {
+      title: (0, import_i18n6.__)("Variables", "elementor"),
+      icon: /* @__PURE__ */ React7.createElement(import_icons5.ColorFilterIcon, { fontSize: SIZE4 }),
+      onClose: closePopover,
+      actions
+    }
+  ), hasVariables && /* @__PURE__ */ React7.createElement(
+    import_editor_ui3.PopoverSearch,
+    {
+      value: searchValue,
+      onSearch: handleSearch,
+      placeholder: (0, import_i18n6.__)("Search", "elementor")
+    }
+  ), /* @__PURE__ */ React7.createElement(import_ui8.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React7.createElement(
+    import_editor_ui3.PopoverMenuList,
+    {
+      items,
+      onSelect: handleSetColorVariable,
+      onClose: () => {
+      },
+      selectedValue: variable,
+      "data-testid": "color-variables-list",
+      menuListTemplate: VariablesStyledMenuList,
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React7.createElement(MenuItemContent, { item })
+    }
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React7.createElement(NoSearchResults, { searchValue, onClear: handleClearSearch }), !hasVariables && /* @__PURE__ */ React7.createElement(NoVariables, { icon: /* @__PURE__ */ React7.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" }), onAdd }));
+};
+
+// src/components/font-variable-creation.tsx
+var React8 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_icons6 = require("@elementor/icons");
+var import_ui9 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
+var SIZE5 = "tiny";
+var FontVariableCreation = ({ onClose, onGoBack }) => {
+  const fontFamilies = (0, import_editor_editing_panel.useFontFamilies)();
+  const { setValue: setVariable } = (0, import_editor_controls3.useBoundProp)(fontVariablePropTypeUtil);
+  const [fontFamily, setFontFamily] = (0, import_react5.useState)("");
+  const [label, setLabel] = (0, import_react5.useState)("");
+  const anchorRef = (0, import_react5.useRef)(null);
+  const fontPopoverState = (0, import_ui9.usePopupState)({ variant: "popover" });
   const resetFields = () => {
-    setColor("");
+    setFontFamily("");
     setLabel("");
   };
   const closePopover = () => {
     resetFields();
-    popupState.close();
+    onClose();
   };
   const handleCreate = () => {
     createVariable({
-      value: color,
+      value: fontFamily,
       label,
-      type: colorVariablePropTypeUtil.key
+      type: fontVariablePropTypeUtil.key
     }).then((key) => {
       setVariable(key);
       closePopover();
     });
   };
-  const isInValidForm = () => {
-    return !color?.trim() || !label?.trim();
+  const isFormInvalid = () => {
+    return !fontFamily?.trim() || !label?.trim();
   };
-  return /* @__PURE__ */ React2.createElement(import_ui4.Box, { ref: anchorRef }, /* @__PURE__ */ React2.createElement(
-    import_ui4.Popover,
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+    import_editor_ui4.PopoverHeader,
+    {
+      icon: /* @__PURE__ */ React8.createElement(React8.Fragment, null, onGoBack && /* @__PURE__ */ React8.createElement(import_ui9.IconButton, { size: SIZE5, "aria-label": (0, import_i18n7.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React8.createElement(import_icons6.ArrowLeftIcon, { fontSize: SIZE5 })), /* @__PURE__ */ React8.createElement(import_icons6.TextIcon, { fontSize: SIZE5 })),
+      title: (0, import_i18n7.__)("Create variable", "elementor"),
+      onClose: closePopover
+    }
+  ), /* @__PURE__ */ React8.createElement(import_ui9.Divider, null), /* @__PURE__ */ React8.createElement(import_ui9.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React8.createElement(import_ui9.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui9.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_ui9.FormLabel, { size: "small" }, (0, import_i18n7.__)("Name", "elementor"))), /* @__PURE__ */ React8.createElement(import_ui9.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(
+    import_ui9.TextField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: label,
+      onChange: (e) => setLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React8.createElement(import_ui9.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui9.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_ui9.FormLabel, { size: "small" }, (0, import_i18n7.__)("Value", "elementor"))), /* @__PURE__ */ React8.createElement(import_ui9.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+    import_ui9.UnstableTag,
+    {
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React8.createElement(import_icons6.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui9.bindTrigger)(fontPopoverState),
+      fullWidth: true
+    }
+  ), /* @__PURE__ */ React8.createElement(
+    import_ui9.Popover,
     {
-      ...(0, import_ui4.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 },
+      ...(0, import_ui9.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,
+    /* @__PURE__ */ React8.createElement(
+      import_editor_controls3.FontFamilySelector,
       {
-        size: "tiny",
-        fullWidth: true,
-        value: label,
-        onChange: (e) => setLabel(e.target.value)
+        fontFamilies,
+        fontFamily,
+        onFontFamilyChange: setFontFamily,
+        onClose: fontPopoverState.close
       }
-    ))), /* @__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: isInValidForm(), onClick: handleCreate }, (0, import_i18n.__)("Create", "elementor")))
-  ));
+    )
+  ))))), /* @__PURE__ */ React8.createElement(import_ui9.CardActions, null, /* @__PURE__ */ React8.createElement(import_ui9.Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, (0, import_i18n7.__)("Create", "elementor"))));
 };
 
-// src/components/variables-selection-popover.tsx
-var SIZE2 = "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 closePopover = () => popupState.close();
-  const handleCreateButtonClick = (event) => {
-    closePopover();
-    (0, import_ui5.bindTrigger)(creationPopupState).onClick(event);
+// src/components/font-variable-edit.tsx
+var React9 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_editor_controls4 = require("@elementor/editor-controls");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_icons7 = require("@elementor/icons");
+var import_ui10 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
+var SIZE6 = "tiny";
+var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
+  const variable = useVariable(editId);
+  if (!variable) {
+    throw new Error(`Global font variable "${editId}" not found`);
+  }
+  const [fontFamily, setFontFamily] = (0, import_react6.useState)(variable.value);
+  const [label, setLabel] = (0, import_react6.useState)(variable.label);
+  const variableNameId = (0, import_react6.useId)();
+  const variableValueId = (0, import_react6.useId)();
+  const anchorRef = (0, import_react6.useRef)(null);
+  const fontPopoverState = (0, import_ui10.usePopupState)({ variant: "popover" });
+  const fontFamilies = (0, import_editor_editing_panel2.useFontFamilies)();
+  const handleUpdate = () => {
+    updateVariable(editId, {
+      value: fontFamily,
+      label
+    }).then(() => {
+      onSubmit?.();
+    });
   };
-  const anchorRef = (0, import_react4.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 noValueChanged = () => fontFamily === variable.value && label === variable.label;
+  const hasEmptyValue = () => "" === fontFamily.trim() || "" === label.trim();
+  const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+    import_editor_ui5.PopoverHeader,
     {
+      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(import_ui10.IconButton, { size: SIZE6, "aria-label": (0, import_i18n8.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React9.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE6 })), /* @__PURE__ */ React9.createElement(import_icons7.TextIcon, { fontSize: SIZE6 })),
+      title: (0, import_i18n8.__)("Edit variable", "elementor"),
+      onClose
+    }
+  ), /* @__PURE__ */ React9.createElement(import_ui10.Divider, null), /* @__PURE__ */ React9.createElement(import_ui10.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_ui10.FormLabel, { htmlFor: variableNameId, size: "small" }, (0, import_i18n8.__)("Name", "elementor"))), /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(
+    import_ui10.TextField,
+    {
+      id: variableNameId,
+      size: "tiny",
       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 }))
+      value: label,
+      onChange: (e) => setLabel(e.target.value)
     }
-  ), /* @__PURE__ */ React3.createElement(
-    import_ui5.Popover,
+  ))), /* @__PURE__ */ React9.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_ui10.FormLabel, { htmlFor: variableValueId, size: "small" }, (0, import_i18n8.__)("Value", "elementor"))), /* @__PURE__ */ React9.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+    import_ui10.UnstableTag,
     {
-      ...(0, import_ui5.bindPopover)(popupState),
+      id: variableValueId,
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React9.createElement(import_icons7.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui10.bindTrigger)(fontPopoverState),
+      fullWidth: true
+    }
+  ), /* @__PURE__ */ React9.createElement(
+    import_ui10.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_ui10.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React3.createElement(
-      import_editor_ui2.PopoverHeader,
+    /* @__PURE__ */ React9.createElement(
+      import_editor_controls4.FontFamilySelector,
       {
-        title: (0, import_i18n2.__)("Variables", "elementor"),
-        onClose: closePopover,
-        icon: /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: SIZE2 }),
-        actions: [
-          /* @__PURE__ */ React3.createElement(
-            import_ui5.IconButton,
-            {
-              key: "createVariable",
-              ...(0, import_ui5.bindTrigger)(creationPopupState),
-              size: SIZE2,
-              onClick: handleCreateButtonClick
-            },
-            /* @__PURE__ */ React3.createElement(import_icons3.PlusIcon, { fontSize: SIZE2 })
-          )
-        ]
+        fontFamilies,
+        fontFamily,
+        onFontFamilyChange: setFontFamily,
+        onClose: fontPopoverState.close
       }
-    ),
-    children?.({ closePopover })
-  ), colorCreationEnabled && /* @__PURE__ */ React3.createElement(ColorVariableCreation, { popupState: creationPopupState }));
+    )
+  ))))), /* @__PURE__ */ React9.createElement(import_ui10.CardActions, null, /* @__PURE__ */ React9.createElement(import_ui10.Button, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, (0, import_i18n8.__)("Save", "elementor"))));
+};
+
+// src/components/font-variables-selection.tsx
+var React10 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_icons8 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
+var SIZE7 = "tiny";
+var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
+  const { value: variable, setValue: setVariable } = (0, import_editor_controls5.useBoundProp)(fontVariablePropTypeUtil);
+  const [searchValue, setSearchValue] = (0, import_react7.useState)("");
+  const {
+    list: variables,
+    hasMatches: hasSearchResults,
+    isSourceNotEmpty: hasVariables
+  } = useFilteredVariables(searchValue, fontVariablePropTypeUtil.key);
+  const handleSetVariable = (key) => {
+    setVariable(key);
+    closePopover();
+  };
+  const actions = [];
+  if (onAdd) {
+    actions.push(
+      /* @__PURE__ */ React10.createElement(import_ui11.IconButton, { key: "add", size: SIZE7, onClick: onAdd }, /* @__PURE__ */ React10.createElement(import_icons8.PlusIcon, { fontSize: SIZE7 }))
+    );
+  }
+  if (onSettings) {
+    actions.push(
+      /* @__PURE__ */ React10.createElement(import_ui11.IconButton, { key: "settings", size: SIZE7, onClick: onSettings }, /* @__PURE__ */ React10.createElement(import_icons8.SettingsIcon, { fontSize: SIZE7 }))
+    );
+  }
+  const items = variables.map(({ value, label, key }) => ({
+    type: "item",
+    value: key,
+    label,
+    icon: /* @__PURE__ */ React10.createElement(import_icons8.TextIcon, null),
+    secondaryText: value,
+    onEdit: () => onEdit?.(key)
+  }));
+  const handleSearch = (search) => {
+    setSearchValue(search);
+  };
+  const handleClearSearch = () => {
+    setSearchValue("");
+  };
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+    import_editor_ui6.PopoverHeader,
+    {
+      title: (0, import_i18n9.__)("Variables", "elementor"),
+      onClose: closePopover,
+      icon: /* @__PURE__ */ React10.createElement(import_icons8.ColorFilterIcon, { fontSize: SIZE7 }),
+      actions
+    }
+  ), hasVariables && /* @__PURE__ */ React10.createElement(
+    import_editor_ui6.PopoverSearch,
+    {
+      value: searchValue,
+      onSearch: handleSearch,
+      placeholder: (0, import_i18n9.__)("Search", "elementor")
+    }
+  ), /* @__PURE__ */ React10.createElement(import_ui11.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React10.createElement(
+    import_editor_ui6.PopoverMenuList,
+    {
+      items,
+      onSelect: handleSetVariable,
+      onClose: () => {
+      },
+      selectedValue: variable,
+      "data-testid": "font-variables-list",
+      menuListTemplate: VariablesStyledMenuList,
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React10.createElement(MenuItemContent, { item })
+    }
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React10.createElement(NoSearchResults, { searchValue, onClear: handleClearSearch }), !hasVariables && /* @__PURE__ */ React10.createElement(NoVariables, { icon: /* @__PURE__ */ React10.createElement(import_icons8.TextIcon, { fontSize: "large" }), onAdd }));
 };
 
-// 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);
+// src/components/variable-selection-popover.tsx
+var VIEW_LIST = "list";
+var VIEW_ADD = "add";
+var VIEW_EDIT = "edit";
+var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
+  const [currentView, setCurrentView] = (0, import_react8.useState)(VIEW_LIST);
+  const editIdRef = (0, import_react8.useRef)("");
+  return renderStage({
+    propTypeKey,
+    currentView,
+    selectedVariable,
+    editIdRef,
+    setCurrentView,
+    closePopover
+  });
+};
+function renderStage(props) {
+  const handleSubmitOnEdit = () => {
+    if (props?.selectedVariable?.key === props.editIdRef.current) {
+      props.closePopover();
+    } else {
+      props.setCurrentView(VIEW_LIST);
+    }
+  };
+  if (fontVariablePropTypeUtil.key === props.propTypeKey) {
+    if (VIEW_LIST === props.currentView) {
+      return /* @__PURE__ */ React11.createElement(
+        FontVariablesSelection,
+        {
+          closePopover: props.closePopover,
+          onAdd: () => {
+            props.setCurrentView(VIEW_ADD);
+          },
+          onEdit: (key) => {
+            props.editIdRef.current = key;
+            props.setCurrentView(VIEW_EDIT);
+          }
+        }
+      );
+    }
+    if (VIEW_ADD === props.currentView) {
+      return /* @__PURE__ */ React11.createElement(
+        FontVariableCreation,
+        {
+          onGoBack: () => props.setCurrentView(VIEW_LIST),
+          onClose: props.closePopover
+        }
+      );
+    }
+    if (VIEW_EDIT === props.currentView) {
+      return /* @__PURE__ */ React11.createElement(
+        FontVariableEdit,
+        {
+          editId: props.editIdRef.current ?? "",
+          onGoBack: () => props.setCurrentView(VIEW_LIST),
+          onClose: props.closePopover,
+          onSubmit: handleSubmitOnEdit
+        }
+      );
+    }
+  }
+  if (colorVariablePropTypeUtil.key === props.propTypeKey) {
+    if (VIEW_LIST === props.currentView) {
+      return /* @__PURE__ */ React11.createElement(
+        ColorVariablesSelection,
+        {
+          closePopover: props.closePopover,
+          onAdd: () => {
+            props.setCurrentView(VIEW_ADD);
+          },
+          onEdit: (key) => {
+            props.editIdRef.current = key;
+            props.setCurrentView(VIEW_EDIT);
+          }
+        }
+      );
+    }
+    if (VIEW_ADD === props.currentView) {
+      return /* @__PURE__ */ React11.createElement(
+        ColorVariableCreation,
+        {
+          onGoBack: () => props.setCurrentView(VIEW_LIST),
+          onClose: props.closePopover
+        }
+      );
+    }
+    if (VIEW_EDIT === props.currentView) {
+      return /* @__PURE__ */ React11.createElement(
+        ColorVariableEdit,
+        {
+          editId: props.editIdRef.current ?? "",
+          onGoBack: () => props.setCurrentView(VIEW_LIST),
+          onClose: props.closePopover,
+          onSubmit: handleSubmitOnEdit
+        }
+      );
+    }
+  }
+  return null;
+}
+
+// src/controls/color-variable-control.tsx
+var SIZE8 = "tiny";
+var ColorVariableControl = () => {
+  const { setValue: setColor } = (0, import_editor_controls6.useBoundProp)();
+  const { value: variableValue } = (0, import_editor_controls6.useBoundProp)(colorVariablePropTypeUtil);
+  const anchorRef = (0, import_react9.useRef)(null);
+  const popupId = (0, import_react9.useId)();
+  const popupState = (0, import_ui12.usePopupState)({
+    variant: "popover",
+    popupId: `elementor-variables-list-${popupId}`
+  });
   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));
+    setColor(import_editor_props3.colorPropTypeUtil.create(selectedVariable.value));
   };
-  return /* @__PURE__ */ React4.createElement(
-    VariablesSelectionPopover,
+  return /* @__PURE__ */ React12.createElement(import_ui12.Box, { ref: anchorRef }, /* @__PURE__ */ React12.createElement(
+    import_ui12.UnstableTag,
     {
-      selectedVariable,
-      unlinkVariable,
-      startTagAdornment: /* @__PURE__ */ React4.createElement(ColorIndicator, { size: "inherit", component: "span", value: selectedVariable.value })
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React12.createElement(import_ui12.Stack, { spacing: 0.75, direction: "row", alignItems: "center" }, /* @__PURE__ */ React12.createElement(ColorIndicator, { size: "inherit", value: selectedVariable.value, component: "span" }), /* @__PURE__ */ React12.createElement(import_icons9.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
+      label: /* @__PURE__ */ React12.createElement(import_ui12.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React12.createElement(
+        import_ui12.Typography,
+        {
+          sx: { textOverflow: "ellipsis", overflowX: "hidden", lineHeight: 1 },
+          variant: "caption"
+        },
+        selectedVariable.label
+      )),
+      actions: /* @__PURE__ */ React12.createElement(import_ui12.IconButton, { size: SIZE8, onClick: unlinkVariable, "aria-label": (0, import_i18n10.__)("Unlink", "elementor") }, /* @__PURE__ */ React12.createElement(import_icons9.DetachIcon, { fontSize: SIZE8 })),
+      ...(0, import_ui12.bindTrigger)(popupState)
+    }
+  ), /* @__PURE__ */ React12.createElement(
+    import_ui12.Popover,
+    {
+      disableScrollLock: true,
+      anchorEl: anchorRef.current,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      ...(0, import_ui12.bindPopover)(popupState)
     },
-    ({ closePopover }) => /* @__PURE__ */ React4.createElement(ColorVariablesSelection, { onSelect: closePopover })
-  );
+    /* @__PURE__ */ React12.createElement(
+      VariableSelectionPopover,
+      {
+        selectedVariable,
+        closePopover: popupState.close,
+        propTypeKey: colorVariablePropTypeUtil.key
+      }
+    )
+  ));
 };
 
 // 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 React13 = __toESM(require("react"));
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_icons10 = require("@elementor/icons");
+var import_i18n11 = require("@wordpress/i18n");
 
 // src/utils.ts
 var hasAssignedColorVariable = (propValue) => {
@@ -578,13 +1132,15 @@ 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_panel3.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_icons10.ColorFilterIcon,
+    title: (0, import_i18n11.__)("Variables", "elementor"),
+    content: ({ close: closePopover }) => {
+      return /* @__PURE__ */ React13.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
+    }
   };
 };
 
@@ -598,113 +1154,143 @@ var variableTransformer = (0, import_editor_canvas.createTransformer)((value) =>
 });
 
 // src/init-color-variables.ts
-var { registerPopoverAction } = import_editor_editing_panel2.controlActionsMenu;
-function initColorVariables() {
-  (0, import_editor_editing_panel2.registerControlReplacement)({
-    component: ColorVariablesSelectionControl,
+var { registerPopoverAction } = import_editor_editing_panel4.controlActionsMenu;
+var conditions = {
+  backgroundOverlay: ({ value: prop }) => {
+    return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+  },
+  boxShadow: ({ value: prop }) => {
+    return hasAssignedColorVariable(import_editor_props4.shadowPropTypeUtil.extract(prop)?.color);
+  }
+};
+function registerControlsAndActions() {
+  (0, import_editor_editing_panel4.registerControlReplacement)({
+    component: ColorVariableControl,
     condition: ({ value }) => hasAssignedColorVariable(value)
   });
   registerPopoverAction({
     id: "color-variables",
     useProps: usePropColorVariableAction
   });
+}
+function registerRepeaterItemIcons() {
+  (0, import_editor_controls7.injectIntoRepeaterItemIcon)({
+    id: "color-variables-background-icon",
+    component: BackgroundRepeaterColorIndicator,
+    condition: conditions.backgroundOverlay
+  });
+  (0, import_editor_controls7.injectIntoRepeaterItemIcon)({
+    id: "color-variables-icon",
+    component: BoxShadowRepeaterColorIndicator,
+    condition: conditions.boxShadow
+  });
+}
+function registerRepeaterItemLabels() {
+  (0, import_editor_controls7.injectIntoRepeaterItemLabel)({
+    id: "color-variables-label",
+    component: BackgroundRepeaterLabel,
+    condition: conditions.backgroundOverlay
+  });
+}
+function registerStyleTransformers() {
   import_editor_canvas2.styleTransformersRegistry.register(colorVariablePropTypeUtil.key, variableTransformer);
 }
+function initColorVariables() {
+  registerControlsAndActions();
+  registerRepeaterItemIcons();
+  registerRepeaterItemLabels();
+  registerStyleTransformers();
+}
 
 // src/init-font-variables.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
-var import_editor_editing_panel4 = 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 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 FontVariablesSelection = ({ onSelect }) => {
-  const { value: variable, setValue: setVariable } = (0, import_editor_controls4.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(
-    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,
-      {
-        primary: label,
-        secondary: value,
-        primaryTypographyProps: {
-          variant: "body2",
-          color: "text.secondary",
-          style: {
-            lineHeight: 2,
-            display: "inline-block",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            maxWidth: "81px"
-          }
-        },
-        secondaryTypographyProps: {
-          variant: "caption",
-          color: "text.tertiary",
-          style: { marginTop: "1px", lineHeight: "1" }
-        },
-        sx: { display: "flex", alignItems: "center", gap: 1 }
-      }
-    ),
-    /* @__PURE__ */ React6.createElement(import_icons5.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
-  )))));
-};
+var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 
-// 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);
+// src/controls/font-variable-control.tsx
+var React14 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_editor_controls8 = require("@elementor/editor-controls");
+var import_editor_props5 = require("@elementor/editor-props");
+var import_icons11 = require("@elementor/icons");
+var import_ui13 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
+var SIZE9 = "tiny";
+var FontVariableControl = () => {
+  const { setValue: setFontFamily } = (0, import_editor_controls8.useBoundProp)();
+  const { value: variableValue } = (0, import_editor_controls8.useBoundProp)(fontVariablePropTypeUtil);
+  const anchorRef = (0, import_react10.useRef)(null);
+  const popupId = (0, import_react10.useId)();
+  const popupState = (0, import_ui13.usePopupState)({
+    variant: "popover",
+    popupId: `elementor-variables-list-${popupId}`
+  });
   const selectedVariable = useVariable(variableValue);
   if (!selectedVariable) {
     throw new Error(`Global font variable ${variableValue} not found`);
   }
   const unlinkVariable = () => {
-    setFontFamily(import_editor_props4.stringPropTypeUtil.create(selectedVariable.value));
+    setFontFamily(import_editor_props5.stringPropTypeUtil.create(selectedVariable.value));
   };
-  return /* @__PURE__ */ React7.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React7.createElement(FontVariablesSelection, { onSelect: closePopover }));
+  return /* @__PURE__ */ React14.createElement(import_ui13.Box, { ref: anchorRef }, /* @__PURE__ */ React14.createElement(
+    import_ui13.UnstableTag,
+    {
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React14.createElement(import_ui13.Stack, { spacing: 0.75, direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(import_icons11.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
+      label: /* @__PURE__ */ React14.createElement(import_ui13.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React14.createElement(
+        import_ui13.Typography,
+        {
+          sx: { textOverflow: "ellipsis", overflowX: "hidden", lineHeight: 1 },
+          variant: "caption"
+        },
+        selectedVariable.label
+      )),
+      actions: /* @__PURE__ */ React14.createElement(import_ui13.IconButton, { size: SIZE9, onClick: unlinkVariable, "aria-label": (0, import_i18n12.__)("Unlink", "elementor") }, /* @__PURE__ */ React14.createElement(import_icons11.DetachIcon, { fontSize: SIZE9 })),
+      ...(0, import_ui13.bindTrigger)(popupState)
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    import_ui13.Popover,
+    {
+      disableScrollLock: true,
+      anchorEl: anchorRef.current,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      ...(0, import_ui13.bindPopover)(popupState)
+    },
+    /* @__PURE__ */ React14.createElement(
+      VariableSelectionPopover,
+      {
+        selectedVariable,
+        closePopover: popupState.close,
+        propTypeKey: fontVariablePropTypeUtil.key
+      }
+    )
+  ));
 };
 
 // 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 React15 = __toESM(require("react"));
+var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
+var import_icons12 = require("@elementor/icons");
+var import_i18n13 = require("@wordpress/i18n");
 var usePropFontVariableAction = () => {
-  const { propType } = (0, import_editor_editing_panel3.useBoundProp)();
+  const { propType } = (0, import_editor_editing_panel5.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_icons12.ColorFilterIcon,
+    title: (0, import_i18n13.__)("Variables", "elementor"),
+    content: ({ close: closePopover }) => {
+      return /* @__PURE__ */ React15.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
+    }
   };
 };
 
 // src/init-font-variables.ts
-var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel4.controlActionsMenu;
+var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel6.controlActionsMenu;
 function initFontVariables() {
-  (0, import_editor_editing_panel4.registerControlReplacement)({
-    component: FontVariablesSelectionControl,
+  (0, import_editor_editing_panel6.registerControlReplacement)({
+    component: FontVariableControl,
     condition: ({ value }) => hasAssignedFontVariable(value)
   });
   registerPopoverAction2({
@@ -715,10 +1301,10 @@ function initFontVariables() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React9 = __toESM(require("react"));
-var import_react6 = require("react");
+var React16 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_ui7 = require("@elementor/ui");
+var import_ui14 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -737,14 +1323,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__ */ React16.createElement(import_ui14.Portal, { container }, /* @__PURE__ */ React16.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_react11.useState)({});
+  (0, import_react11.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();