@elementor/editor-variables 0.13.0 → 0.14.0

package/dist/index.mjs

@@ -3,25 +3,12 @@ import { injectIntoTop } from "@elementor/editor";
 
 // src/init-color-variables.ts
 import { styleTransformersRegistry } from "@elementor/editor-canvas";
+import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elementor/editor-controls";
 import { controlActionsMenu, registerControlReplacement } from "@elementor/editor-editing-panel";
+import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 
-// src/controls/color-variables-selection-control.tsx
-import * as React5 from "react";
-import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
-import { colorPropTypeUtil } from "@elementor/editor-props";
-
-// src/components/color-indicator.tsx
-import { styled, UnstableColorIndicator } from "@elementor/ui";
-var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`
-}));
-
-// src/components/color-variables-selection.tsx
+// src/components/variables-repeater-item-slot.tsx
 import * as React from "react";
-import { Fragment } from "react";
-import { useBoundProp } from "@elementor/editor-controls";
-import { EditIcon } from "@elementor/icons";
-import { Box, Divider, ListItemIcon, ListItemText, MenuList } from "@elementor/ui";
 
 // src/hooks/use-prop-variables.ts
 import { useMemo } from "react";
@@ -74,8 +61,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));
   }
@@ -105,6 +95,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 = {
@@ -124,6 +157,7 @@ var service = {
     }).then((data) => {
       const { variables, watermark } = data;
       storage.fill(variables, watermark);
+      styleVariablesRepository.update(variables);
       return variables;
     });
   },
@@ -139,6 +173,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
@@ -157,6 +194,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
@@ -175,6 +215,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
@@ -193,6 +236,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
@@ -207,53 +253,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 useMemo(() => normalizeVariables(propKey), [propKey]);
-};
 var useVariable = (key) => {
   const variables = service.variables();
   if (!variables?.[key]) {
@@ -264,6 +264,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 useMemo(() => normalizeVariables(propKey), [propKey]);
+};
 var normalizeVariables = (propKey) => {
   const variables = service.variables();
   styleVariablesRepository.update(variables);
@@ -281,85 +295,66 @@ 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/prop-types/color-variable-prop-type.ts
-import { createPropUtils } from "@elementor/editor-props";
-import { z } from "@elementor/schema";
-var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
-
-// src/components/styled-menu-item.tsx
-import { MenuItem, styled as styled2 } from "@elementor/ui";
-var StyledMenuItem = styled2(MenuItem)(() => ({
-  pl: 2,
-  pr: 1,
-  py: 0.5,
-  "&:hover .MuiSvgIcon-root": {
-    opacity: 1
-  }
+// src/components/ui/color-indicator.tsx
+import { styled, UnstableColorIndicator } from "@elementor/ui";
+var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`
 }));
 
-// src/components/color-variables-selection.tsx
-var ColorVariablesSelection = ({ onSelect }) => {
-  const { value: variable, setValue: setVariable } = useBoundProp(colorVariablePropTypeUtil);
-  const variables = usePropVariables(colorVariablePropTypeUtil.key);
-  const handleSetColorVariable = (key) => {
-    setVariable(key);
-    onSelect?.();
-  };
-  return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React.createElement(MenuList, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React.createElement(
-    StyledMenuItem,
-    {
-      key,
-      onClick: () => handleSetColorVariable(key),
-      selected: key === variable
-    },
-    /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", component: "span", value })),
-    /* @__PURE__ */ React.createElement(
-      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__ */ React.createElement(EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
-  )))));
+// 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/components/variables-selection-popover.tsx
-import * as React4 from "react";
-import { useId, useRef as useRef3 } from "react";
-import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
-import { ColorFilterIcon, DetachIcon, PlusIcon } from "@elementor/icons";
+// src/controls/color-variable-control.tsx
+import * as React12 from "react";
+import { useId as useId2, useRef as useRef6 } from "react";
+import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+import { colorPropTypeUtil } from "@elementor/editor-props";
+import { ColorFilterIcon as ColorFilterIcon4, DetachIcon } from "@elementor/icons";
 import {
-  bindPopover as bindPopover2,
-  bindTrigger as bindTrigger2,
-  Box as Box2,
-  IconButton,
-  Popover as Popover2,
-  Stack as Stack3,
-  Typography,
+  bindPopover as bindPopover3,
+  bindTrigger as bindTrigger3,
+  Box,
+  IconButton as IconButton8,
+  Popover as Popover3,
+  Stack as Stack7,
+  Typography as Typography3,
   UnstableTag as Tag,
-  usePopupState as usePopupState2
+  usePopupState as usePopupState3
 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
+
+// src/components/variable-selection-popover.tsx
+import * as React11 from "react";
+import { useRef as useRef5, useState as useState7 } from "react";
+
+// src/prop-types/color-variable-prop-type.ts
+import { createPropUtils } from "@elementor/editor-props";
+import { z } from "@elementor/schema";
+var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
 
 // src/prop-types/font-variable-prop-type.ts
 import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
@@ -369,14 +364,24 @@ var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.strin
 // src/components/color-variable-creation.tsx
 import * as React2 from "react";
 import { useRef, useState } from "react";
-import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { useBoundProp } from "@elementor/editor-controls";
 import { PopoverHeader } from "@elementor/editor-ui";
-import { BrushIcon } from "@elementor/icons";
-import { Button, CardActions, Divider as Divider2, FormLabel, Grid, Stack, TextField, UnstableColorField } from "@elementor/ui";
+import { ArrowLeftIcon, BrushIcon } from "@elementor/icons";
+import {
+  Button,
+  CardActions,
+  Divider,
+  FormLabel,
+  Grid,
+  IconButton,
+  Stack,
+  TextField,
+  UnstableColorField
+} from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
 var SIZE = "tiny";
-var ColorVariableCreation = ({ onClose }) => {
-  const { setValue: setVariable } = useBoundProp2(colorVariablePropTypeUtil);
+var ColorVariableCreation = ({ onGoBack, onClose }) => {
+  const { setValue: setVariable } = useBoundProp(colorVariablePropTypeUtil);
   const [color, setColor] = useState("");
   const [label, setLabel] = useState("");
   const anchorRef = useRef(null);
@@ -404,11 +409,11 @@ var ColorVariableCreation = ({ onClose }) => {
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
     PopoverHeader,
     {
+      icon: /* @__PURE__ */ React2.createElement(React2.Fragment, null, onGoBack && /* @__PURE__ */ React2.createElement(IconButton, { size: SIZE, "aria-label": __("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React2.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React2.createElement(BrushIcon, { fontSize: SIZE })),
       title: __("Create variable", "elementor"),
-      onClose: closePopover,
-      icon: /* @__PURE__ */ React2.createElement(BrushIcon, { fontSize: SIZE })
+      onClose: closePopover
     }
-  ), /* @__PURE__ */ React2.createElement(Divider2, null), /* @__PURE__ */ React2.createElement(Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { size: "small" }, __("Name", "elementor"))), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { size: "small" }, __("Name", "elementor"))), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
     TextField,
     {
       size: "tiny",
@@ -431,38 +436,307 @@ var ColorVariableCreation = ({ onClose }) => {
         }
       }
     }
-  )))), /* @__PURE__ */ React2.createElement(CardActions, null, /* @__PURE__ */ React2.createElement(Button, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, __("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __("Create", "elementor"))));
+  )))), /* @__PURE__ */ React2.createElement(CardActions, null, /* @__PURE__ */ React2.createElement(Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __("Create", "elementor"))));
 };
 
-// src/components/font-variable-creation.tsx
+// src/components/color-variable-edit.tsx
 import * as React3 from "react";
 import { useRef as useRef2, useState as useState2 } from "react";
-import { FontFamilySelector, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
-import { useFontFamilies } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
-import { ChevronDownIcon, TextIcon } from "@elementor/icons";
+import { ArrowLeftIcon as ArrowLeftIcon2, BrushIcon as BrushIcon2 } from "@elementor/icons";
 import {
-  bindPopover,
-  bindTrigger,
   Button as Button2,
   CardActions as CardActions2,
-  Divider as Divider3,
+  Divider as Divider2,
   FormLabel as FormLabel2,
   Grid as Grid2,
-  Popover,
+  IconButton as IconButton2,
   Stack as Stack2,
   TextField as TextField2,
-  UnstableTag,
-  usePopupState
+  UnstableColorField as UnstableColorField2
 } from "@elementor/ui";
 import { __ as __2 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
-var FontVariableCreation = ({ onClose }) => {
+var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
+  const variable = useVariable(editId);
+  if (!variable) {
+    throw new Error(`Global color variable not found`);
+  }
+  const anchorRef = useRef2(null);
+  const [color, setColor] = useState2(variable.value);
+  const [label, setLabel] = useState2(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(
+    PopoverHeader2,
+    {
+      title: __2("Edit variable", "elementor"),
+      onClose,
+      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(IconButton2, { size: SIZE2, "aria-label": __2("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })), /* @__PURE__ */ React3.createElement(BrushIcon2, { fontSize: SIZE2 }))
+    }
+  ), /* @__PURE__ */ React3.createElement(Divider2, null), /* @__PURE__ */ React3.createElement(Stack2, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React3.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel2, { size: "small" }, __2("Name", "elementor"))), /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    TextField2,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: label,
+      onChange: (e) => setLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React3.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel2, { size: "small" }, __2("Value", "elementor"))), /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
+    UnstableColorField2,
+    {
+      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(CardActions2, null, /* @__PURE__ */ React3.createElement(Button2, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, __2("Save", "elementor"))));
+};
+
+// src/components/color-variables-selection.tsx
+import * as React7 from "react";
+import { useState as useState3 } from "react";
+import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { PopoverHeader as PopoverHeader3, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
+import { ColorFilterIcon as ColorFilterIcon2, PlusIcon, SettingsIcon } from "@elementor/icons";
+import { Divider as Divider3, IconButton as IconButton4 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+
+// src/components/ui/menu-item-content.tsx
+import * as React4 from "react";
+import { EditIcon } from "@elementor/icons";
+import { IconButton as IconButton3, ListItemIcon, ListItemText } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+var SIZE3 = "tiny";
+var MenuItemContent = ({ item }) => {
+  const onEdit = item.onEdit;
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React4.createElement(
+    ListItemText,
+    {
+      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(
+    IconButton3,
+    {
+      sx: { mx: 1, opacity: "0" },
+      onClick: (e) => {
+        e.stopPropagation();
+        onEdit(item.value);
+      },
+      "aria-label": __3("Edit", "elementor")
+    },
+    /* @__PURE__ */ React4.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
+  ));
+};
+
+// src/components/ui/no-search-results.tsx
+import * as React5 from "react";
+import { ColorFilterIcon } from "@elementor/icons";
+import { Link, Stack as Stack3, Typography } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+var NoSearchResults = ({ searchValue, onClear }) => {
+  return /* @__PURE__ */ React5.createElement(
+    Stack3,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pb: 5.5 }
+    },
+    /* @__PURE__ */ React5.createElement(ColorFilterIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React5.createElement(Typography, { align: "center", variant: "subtitle2" }, __4("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React5.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React5.createElement(Typography, { align: "center", variant: "caption" }, __4("Try something else.", "elementor"), /* @__PURE__ */ React5.createElement("br", null), /* @__PURE__ */ React5.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __4("Clear & try again", "elementor")))
+  );
+};
+
+// src/components/ui/no-variables.tsx
+import * as React6 from "react";
+import { Button as Button3, Stack as Stack4, Typography as Typography2 } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+var NoVariables = ({ icon, onAdd }) => /* @__PURE__ */ React6.createElement(
+  Stack4,
+  {
+    gap: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    color: "text.secondary",
+    sx: { p: 2.5, pb: 5.5 }
+  },
+  icon,
+  /* @__PURE__ */ React6.createElement(Typography2, { align: "center", variant: "subtitle2" }, __5("Create your first variable", "elementor")),
+  /* @__PURE__ */ React6.createElement(Typography2, { align: "center", variant: "caption", maxWidth: "180px" }, __5("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
+  onAdd && /* @__PURE__ */ React6.createElement(Button3, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __5("Create a variable", "elementor"))
+);
+
+// src/components/ui/styled-menu-list.tsx
+import { MenuList, styled as styled2 } from "@elementor/ui";
+var VariablesStyledMenuList = styled2(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 } = useBoundProp2(colorVariablePropTypeUtil);
+  const [searchValue, setSearchValue] = useState3("");
+  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(IconButton4, { key: "add", size: SIZE4, onClick: onAdd }, /* @__PURE__ */ React7.createElement(PlusIcon, { fontSize: SIZE4 }))
+    );
+  }
+  if (onSettings) {
+    actions.push(
+      /* @__PURE__ */ React7.createElement(IconButton4, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React7.createElement(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(
+    PopoverHeader3,
+    {
+      title: __6("Variables", "elementor"),
+      icon: /* @__PURE__ */ React7.createElement(ColorFilterIcon2, { fontSize: SIZE4 }),
+      onClose: closePopover,
+      actions
+    }
+  ), hasVariables && /* @__PURE__ */ React7.createElement(
+    PopoverSearch,
+    {
+      value: searchValue,
+      onSearch: handleSearch,
+      placeholder: __6("Search", "elementor")
+    }
+  ), /* @__PURE__ */ React7.createElement(Divider3, null), hasVariables && hasSearchResults && /* @__PURE__ */ React7.createElement(
+    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(ColorFilterIcon2, { fontSize: "large" }), onAdd }));
+};
+
+// src/components/font-variable-creation.tsx
+import * as React8 from "react";
+import { useRef as useRef3, useState as useState4 } from "react";
+import { FontFamilySelector, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { useFontFamilies } from "@elementor/editor-editing-panel";
+import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
+import { ArrowLeftIcon as ArrowLeftIcon3, ChevronDownIcon, TextIcon } from "@elementor/icons";
+import {
+  bindPopover,
+  bindTrigger,
+  Button as Button4,
+  CardActions as CardActions3,
+  Divider as Divider4,
+  FormLabel as FormLabel3,
+  Grid as Grid3,
+  IconButton as IconButton5,
+  Popover,
+  Stack as Stack5,
+  TextField as TextField3,
+  UnstableTag,
+  usePopupState
+} from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
+var SIZE5 = "tiny";
+var FontVariableCreation = ({ onClose, onGoBack }) => {
   const fontFamilies = useFontFamilies();
   const { setValue: setVariable } = useBoundProp3(fontVariablePropTypeUtil);
-  const [fontFamily, setFontFamily] = useState2("");
-  const [label, setLabel] = useState2("");
-  const anchorRef = useRef2(null);
+  const [fontFamily, setFontFamily] = useState4("");
+  const [label, setLabel] = useState4("");
+  const anchorRef = useRef3(null);
   const fontPopoverState = usePopupState({ variant: "popover" });
   const resetFields = () => {
     setFontFamily("");
@@ -485,31 +759,31 @@ var FontVariableCreation = ({ onClose }) => {
   const isFormInvalid = () => {
     return !fontFamily?.trim() || !label?.trim();
   };
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    PopoverHeader2,
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+    PopoverHeader4,
     {
-      title: __2("Create variable", "elementor"),
-      onClose: closePopover,
-      icon: /* @__PURE__ */ React3.createElement(TextIcon, { fontSize: SIZE2 })
+      icon: /* @__PURE__ */ React8.createElement(React8.Fragment, null, onGoBack && /* @__PURE__ */ React8.createElement(IconButton5, { size: SIZE5, "aria-label": __7("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React8.createElement(ArrowLeftIcon3, { fontSize: SIZE5 })), /* @__PURE__ */ React8.createElement(TextIcon, { fontSize: SIZE5 })),
+      title: __7("Create variable", "elementor"),
+      onClose: closePopover
     }
-  ), /* @__PURE__ */ React3.createElement(Divider3, null), /* @__PURE__ */ React3.createElement(Stack2, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React3.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel2, { size: "small" }, __2("Name", "elementor"))), /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
-    TextField2,
+  ), /* @__PURE__ */ React8.createElement(Divider4, null), /* @__PURE__ */ React8.createElement(Stack5, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React8.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(FormLabel3, { size: "small" }, __7("Name", "elementor"))), /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(
+    TextField3,
     {
       size: "tiny",
       fullWidth: true,
       value: label,
       onChange: (e) => setLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React3.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel2, { size: "small" }, __2("Value", "elementor"))), /* @__PURE__ */ React3.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+  ))), /* @__PURE__ */ React8.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(FormLabel3, { size: "small" }, __7("Value", "elementor"))), /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
     UnstableTag,
     {
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React3.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React8.createElement(ChevronDownIcon, { fontSize: "tiny" }),
       ...bindTrigger(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React3.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     Popover,
     {
       disablePortal: true,
@@ -519,7 +793,7 @@ var FontVariableCreation = ({ onClose }) => {
       transformOrigin: { vertical: "top", horizontal: -20 },
       ...bindPopover(fontPopoverState)
     },
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React8.createElement(
       FontFamilySelector,
       {
         fontFamilies,
@@ -528,109 +802,341 @@ var FontVariableCreation = ({ onClose }) => {
         onClose: fontPopoverState.close
       }
     )
-  ))))), /* @__PURE__ */ React3.createElement(CardActions2, null, /* @__PURE__ */ React3.createElement(Button2, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, __2("Cancel", "elementor")), /* @__PURE__ */ React3.createElement(Button2, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __2("Create", "elementor"))));
+  ))))), /* @__PURE__ */ React8.createElement(CardActions3, null, /* @__PURE__ */ React8.createElement(Button4, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __7("Create", "elementor"))));
 };
 
-// src/components/variables-selection-popover.tsx
-var SIZE3 = "tiny";
-var VariablesSelectionPopover = ({
-  selectedVariable,
-  unlinkVariable,
-  startTagAdornment,
-  children
-}) => {
-  const id = useId();
-  const popupState = usePopupState2({ variant: "popover", popupId: `elementor-variables-action-${id}` });
-  const creationPopupState = usePopupState2({ variant: "popover", popupId: `elementor-variables-creation-${id}` });
-  const closePopover = () => popupState.close();
-  const handleCreateButtonClick = (event) => {
-    closePopover();
-    bindTrigger2(creationPopupState).onClick(event);
+// src/components/font-variable-edit.tsx
+import * as React9 from "react";
+import { useId, useRef as useRef4, useState as useState5 } from "react";
+import { FontFamilySelector as FontFamilySelector2 } from "@elementor/editor-controls";
+import { useFontFamilies as useFontFamilies2 } from "@elementor/editor-editing-panel";
+import { PopoverHeader as PopoverHeader5 } from "@elementor/editor-ui";
+import { ArrowLeftIcon as ArrowLeftIcon4, ChevronDownIcon as ChevronDownIcon2, TextIcon as TextIcon2 } from "@elementor/icons";
+import {
+  bindPopover as bindPopover2,
+  bindTrigger as bindTrigger2,
+  Button as Button5,
+  CardActions as CardActions4,
+  Divider as Divider5,
+  FormLabel as FormLabel4,
+  Grid as Grid4,
+  IconButton as IconButton6,
+  Popover as Popover2,
+  Stack as Stack6,
+  TextField as TextField4,
+  UnstableTag as UnstableTag2,
+  usePopupState as usePopupState2
+} from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
+var SIZE6 = "tiny";
+var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
+  const variable = useVariable(editId);
+  if (!variable) {
+    throw new Error(`Global font variable "${editId}" not found`);
+  }
+  const [fontFamily, setFontFamily] = useState5(variable.value);
+  const [label, setLabel] = useState5(variable.label);
+  const variableNameId = useId();
+  const variableValueId = useId();
+  const anchorRef = useRef4(null);
+  const fontPopoverState = usePopupState2({ variant: "popover" });
+  const fontFamilies = useFontFamilies2();
+  const handleUpdate = () => {
+    updateVariable(editId, {
+      value: fontFamily,
+      label
+    }).then(() => {
+      onSubmit?.();
+    });
   };
-  const anchorRef = useRef3(null);
-  const { label } = selectedVariable;
-  const colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;
-  const fontCreationEnabled = fontVariablePropTypeUtil.key === selectedVariable.type;
-  return /* @__PURE__ */ React4.createElement(Box2, { ref: anchorRef }, /* @__PURE__ */ React4.createElement(
-    Tag,
+  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(
+    PopoverHeader5,
+    {
+      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(IconButton6, { size: SIZE6, "aria-label": __8("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React9.createElement(ArrowLeftIcon4, { fontSize: SIZE6 })), /* @__PURE__ */ React9.createElement(TextIcon2, { fontSize: SIZE6 })),
+      title: __8("Edit variable", "elementor"),
+      onClose
+    }
+  ), /* @__PURE__ */ React9.createElement(Divider5, null), /* @__PURE__ */ React9.createElement(Stack6, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React9.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(FormLabel4, { htmlFor: variableNameId, size: "small" }, __8("Name", "elementor"))), /* @__PURE__ */ React9.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(
+    TextField4,
     {
+      id: variableNameId,
+      size: "tiny",
       fullWidth: true,
-      showActionsOnHover: true,
-      ...bindTrigger2(popupState),
-      startIcon: /* @__PURE__ */ React4.createElement(Stack3, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React4.createElement(ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
-      label: /* @__PURE__ */ React4.createElement(Box2, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React4.createElement(Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
-      actions: /* @__PURE__ */ React4.createElement(IconButton, { size: SIZE3, onClick: unlinkVariable, "aria-label": __3("Unlink", "elementor") }, /* @__PURE__ */ React4.createElement(DetachIcon, { fontSize: SIZE3 }))
+      value: label,
+      onChange: (e) => setLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React9.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(FormLabel4, { htmlFor: variableValueId, size: "small" }, __8("Value", "elementor"))), /* @__PURE__ */ React9.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+    UnstableTag2,
+    {
+      id: variableValueId,
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React9.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
+      ...bindTrigger2(fontPopoverState),
+      fullWidth: true
     }
-  ), /* @__PURE__ */ React4.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     Popover2,
     {
-      ...bindPopover2(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 },
+      ...bindPopover2(fontPopoverState)
     },
-    /* @__PURE__ */ React4.createElement(
-      PopoverHeader3,
+    /* @__PURE__ */ React9.createElement(
+      FontFamilySelector2,
       {
-        title: __3("Variables", "elementor"),
-        onClose: closePopover,
-        icon: /* @__PURE__ */ React4.createElement(ColorFilterIcon, { fontSize: SIZE3 }),
-        actions: [
-          /* @__PURE__ */ React4.createElement(
-            IconButton,
-            {
-              key: "createVariable",
-              ...bindTrigger2(creationPopupState),
-              size: SIZE3,
-              onClick: handleCreateButtonClick
-            },
-            /* @__PURE__ */ React4.createElement(PlusIcon, { fontSize: SIZE3 })
-          )
-        ]
+        fontFamilies,
+        fontFamily,
+        onFontFamilyChange: setFontFamily,
+        onClose: fontPopoverState.close
       }
-    ),
-    children?.({ closePopover })
-  ), /* @__PURE__ */ React4.createElement(Box2, { ref: anchorRef }, /* @__PURE__ */ React4.createElement(
-    Popover2,
+    )
+  ))))), /* @__PURE__ */ React9.createElement(CardActions4, null, /* @__PURE__ */ React9.createElement(Button5, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, __8("Save", "elementor"))));
+};
+
+// src/components/font-variables-selection.tsx
+import * as React10 from "react";
+import { useState as useState6 } from "react";
+import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { PopoverHeader as PopoverHeader6, PopoverMenuList as PopoverMenuList2, PopoverSearch as PopoverSearch2 } from "@elementor/editor-ui";
+import { ColorFilterIcon as ColorFilterIcon3, PlusIcon as PlusIcon2, SettingsIcon as SettingsIcon2, TextIcon as TextIcon3 } from "@elementor/icons";
+import { Divider as Divider6, IconButton as IconButton7 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
+var SIZE7 = "tiny";
+var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
+  const { value: variable, setValue: setVariable } = useBoundProp4(fontVariablePropTypeUtil);
+  const [searchValue, setSearchValue] = useState6("");
+  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(IconButton7, { key: "add", size: SIZE7, onClick: onAdd }, /* @__PURE__ */ React10.createElement(PlusIcon2, { fontSize: SIZE7 }))
+    );
+  }
+  if (onSettings) {
+    actions.push(
+      /* @__PURE__ */ React10.createElement(IconButton7, { key: "settings", size: SIZE7, onClick: onSettings }, /* @__PURE__ */ React10.createElement(SettingsIcon2, { fontSize: SIZE7 }))
+    );
+  }
+  const items = variables.map(({ value, label, key }) => ({
+    type: "item",
+    value: key,
+    label,
+    icon: /* @__PURE__ */ React10.createElement(TextIcon3, null),
+    secondaryText: value,
+    onEdit: () => onEdit?.(key)
+  }));
+  const handleSearch = (search) => {
+    setSearchValue(search);
+  };
+  const handleClearSearch = () => {
+    setSearchValue("");
+  };
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+    PopoverHeader6,
     {
-      ...bindPopover2(creationPopupState),
-      anchorEl: anchorRef.current,
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" }
-    },
-    colorCreationEnabled && /* @__PURE__ */ React4.createElement(ColorVariableCreation, { onClose: creationPopupState.close }),
-    fontCreationEnabled && /* @__PURE__ */ React4.createElement(FontVariableCreation, { onClose: creationPopupState.close })
-  )));
+      title: __9("Variables", "elementor"),
+      onClose: closePopover,
+      icon: /* @__PURE__ */ React10.createElement(ColorFilterIcon3, { fontSize: SIZE7 }),
+      actions
+    }
+  ), hasVariables && /* @__PURE__ */ React10.createElement(
+    PopoverSearch2,
+    {
+      value: searchValue,
+      onSearch: handleSearch,
+      placeholder: __9("Search", "elementor")
+    }
+  ), /* @__PURE__ */ React10.createElement(Divider6, null), hasVariables && hasSearchResults && /* @__PURE__ */ React10.createElement(
+    PopoverMenuList2,
+    {
+      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(TextIcon3, { fontSize: "large" }), onAdd }));
 };
 
-// src/controls/color-variables-selection-control.tsx
-var ColorVariablesSelectionControl = () => {
-  const { setValue } = useBoundProp4();
-  const { value: variableValue } = useBoundProp4(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] = useState7(VIEW_LIST);
+  const editIdRef = useRef5("");
+  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 } = useBoundProp5();
+  const { value: variableValue } = useBoundProp5(colorVariablePropTypeUtil);
+  const anchorRef = useRef6(null);
+  const popupId = useId2();
+  const popupState = usePopupState3({
+    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(colorPropTypeUtil.create(selectedVariable.value));
+    setColor(colorPropTypeUtil.create(selectedVariable.value));
   };
-  return /* @__PURE__ */ React5.createElement(
-    VariablesSelectionPopover,
+  return /* @__PURE__ */ React12.createElement(Box, { ref: anchorRef }, /* @__PURE__ */ React12.createElement(
+    Tag,
     {
-      selectedVariable,
-      unlinkVariable,
-      startTagAdornment: /* @__PURE__ */ React5.createElement(ColorIndicator, { size: "inherit", component: "span", value: selectedVariable.value })
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React12.createElement(Stack7, { spacing: 0.75, direction: "row", alignItems: "center" }, /* @__PURE__ */ React12.createElement(ColorIndicator, { size: "inherit", value: selectedVariable.value, component: "span" }), /* @__PURE__ */ React12.createElement(ColorFilterIcon4, { fontSize: "inherit", sx: { mr: 1 } })),
+      label: /* @__PURE__ */ React12.createElement(Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React12.createElement(
+        Typography3,
+        {
+          sx: { textOverflow: "ellipsis", overflowX: "hidden", lineHeight: 1 },
+          variant: "caption"
+        },
+        selectedVariable.label
+      )),
+      actions: /* @__PURE__ */ React12.createElement(IconButton8, { size: SIZE8, onClick: unlinkVariable, "aria-label": __10("Unlink", "elementor") }, /* @__PURE__ */ React12.createElement(DetachIcon, { fontSize: SIZE8 })),
+      ...bindTrigger3(popupState)
+    }
+  ), /* @__PURE__ */ React12.createElement(
+    Popover3,
+    {
+      disableScrollLock: true,
+      anchorEl: anchorRef.current,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      ...bindPopover3(popupState)
     },
-    ({ closePopover }) => /* @__PURE__ */ React5.createElement(ColorVariablesSelection, { onSelect: closePopover })
-  );
+    /* @__PURE__ */ React12.createElement(
+      VariableSelectionPopover,
+      {
+        selectedVariable,
+        closePopover: popupState.close,
+        propTypeKey: colorVariablePropTypeUtil.key
+      }
+    )
+  ));
 };
 
 // src/hooks/use-prop-color-variable-action.tsx
-import * as React6 from "react";
-import { useBoundProp as useBoundProp5 } from "@elementor/editor-editing-panel";
-import { ColorFilterIcon as ColorFilterIcon2 } from "@elementor/icons";
-import { __ as __4 } from "@wordpress/i18n";
+import * as React13 from "react";
+import { useBoundProp as useBoundProp6 } from "@elementor/editor-editing-panel";
+import { ColorFilterIcon as ColorFilterIcon5 } from "@elementor/icons";
+import { __ as __11 } from "@wordpress/i18n";
 
 // src/utils.ts
 var hasAssignedColorVariable = (propValue) => {
@@ -648,13 +1154,15 @@ var supportsFontVariables = (propType) => {
 
 // src/hooks/use-prop-color-variable-action.tsx
 var usePropColorVariableAction = () => {
-  const { propType } = useBoundProp5();
+  const { propType } = useBoundProp6();
   const visible = !!propType && supportsColorVariables(propType);
   return {
     visible,
-    icon: ColorFilterIcon2,
-    title: __4("Variables", "elementor"),
-    popoverContent: ({ closePopover }) => /* @__PURE__ */ React6.createElement(ColorVariablesSelection, { onSelect: closePopover })
+    icon: ColorFilterIcon5,
+    title: __11("Variables", "elementor"),
+    content: ({ close: closePopover }) => {
+      return /* @__PURE__ */ React13.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
+    }
   };
 };
 
@@ -669,81 +1177,85 @@ var variableTransformer = createTransformer((value) => {
 
 // src/init-color-variables.ts
 var { registerPopoverAction } = controlActionsMenu;
-function initColorVariables() {
+var conditions = {
+  backgroundOverlay: ({ value: prop }) => {
+    return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+  },
+  boxShadow: ({ value: prop }) => {
+    return hasAssignedColorVariable(shadowPropTypeUtil.extract(prop)?.color);
+  }
+};
+function registerControlsAndActions() {
   registerControlReplacement({
-    component: ColorVariablesSelectionControl,
+    component: ColorVariableControl,
     condition: ({ value }) => hasAssignedColorVariable(value)
   });
   registerPopoverAction({
     id: "color-variables",
     useProps: usePropColorVariableAction
   });
+}
+function registerRepeaterItemIcons() {
+  injectIntoRepeaterItemIcon({
+    id: "color-variables-background-icon",
+    component: BackgroundRepeaterColorIndicator,
+    condition: conditions.backgroundOverlay
+  });
+  injectIntoRepeaterItemIcon({
+    id: "color-variables-icon",
+    component: BoxShadowRepeaterColorIndicator,
+    condition: conditions.boxShadow
+  });
+}
+function registerRepeaterItemLabels() {
+  injectIntoRepeaterItemLabel({
+    id: "color-variables-label",
+    component: BackgroundRepeaterLabel,
+    condition: conditions.backgroundOverlay
+  });
+}
+function registerStyleTransformers() {
   styleTransformersRegistry.register(colorVariablePropTypeUtil.key, variableTransformer);
 }
+function initColorVariables() {
+  registerControlsAndActions();
+  registerRepeaterItemIcons();
+  registerRepeaterItemLabels();
+  registerStyleTransformers();
+}
 
 // src/init-font-variables.ts
 import { styleTransformersRegistry as styleTransformersRegistry2 } from "@elementor/editor-canvas";
 import { controlActionsMenu as controlActionsMenu2, registerControlReplacement as registerControlReplacement2 } from "@elementor/editor-editing-panel";
 
-// src/controls/font-variables-selection-control.tsx
-import * as React8 from "react";
+// src/controls/font-variable-control.tsx
+import * as React14 from "react";
+import { useId as useId3, useRef as useRef7 } from "react";
 import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { stringPropTypeUtil } from "@elementor/editor-props";
-
-// src/components/font-variables-selection.tsx
-import * as React7 from "react";
-import { Fragment as Fragment4 } from "react";
-import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
-import { EditIcon as EditIcon2, TextIcon as TextIcon2 } from "@elementor/icons";
-import { Box as Box3, Divider as Divider4, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, MenuList as MenuList2 } from "@elementor/ui";
-var FontVariablesSelection = ({ onSelect }) => {
-  const { value: variable, setValue: setVariable } = useBoundProp6(fontVariablePropTypeUtil);
-  const variables = usePropVariables(fontVariablePropTypeUtil.key);
-  const handleSetVariable = (key) => {
-    setVariable(key);
-    onSelect?.();
-  };
-  return /* @__PURE__ */ React7.createElement(Fragment4, null, /* @__PURE__ */ React7.createElement(Divider4, null), /* @__PURE__ */ React7.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React7.createElement(MenuList2, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React7.createElement(
-    StyledMenuItem,
-    {
-      key,
-      onClick: () => handleSetVariable(key),
-      selected: key === variable
-    },
-    /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(TextIcon2, null)),
-    /* @__PURE__ */ React7.createElement(
-      ListItemText2,
-      {
-        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__ */ React7.createElement(EditIcon2, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
-  )))));
-};
-
-// src/controls/font-variables-selection-control.tsx
-var FontVariablesSelectionControl = () => {
+import { ColorFilterIcon as ColorFilterIcon6, DetachIcon as DetachIcon2 } from "@elementor/icons";
+import {
+  bindPopover as bindPopover4,
+  bindTrigger as bindTrigger4,
+  Box as Box2,
+  IconButton as IconButton9,
+  Popover as Popover4,
+  Stack as Stack8,
+  Typography as Typography4,
+  UnstableTag as Tag2,
+  usePopupState as usePopupState4
+} from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
+var SIZE9 = "tiny";
+var FontVariableControl = () => {
   const { setValue: setFontFamily } = useBoundProp7();
   const { value: variableValue } = useBoundProp7(fontVariablePropTypeUtil);
+  const anchorRef = useRef7(null);
+  const popupId = useId3();
+  const popupState = usePopupState4({
+    variant: "popover",
+    popupId: `elementor-variables-list-${popupId}`
+  });
   const selectedVariable = useVariable(variableValue);
   if (!selectedVariable) {
     throw new Error(`Global font variable ${variableValue} not found`);
@@ -751,22 +1263,58 @@ var FontVariablesSelectionControl = () => {
   const unlinkVariable = () => {
     setFontFamily(stringPropTypeUtil.create(selectedVariable.value));
   };
-  return /* @__PURE__ */ React8.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React8.createElement(FontVariablesSelection, { onSelect: closePopover }));
+  return /* @__PURE__ */ React14.createElement(Box2, { ref: anchorRef }, /* @__PURE__ */ React14.createElement(
+    Tag2,
+    {
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React14.createElement(Stack8, { spacing: 0.75, direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(ColorFilterIcon6, { fontSize: "inherit", sx: { mr: 1 } })),
+      label: /* @__PURE__ */ React14.createElement(Box2, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React14.createElement(
+        Typography4,
+        {
+          sx: { textOverflow: "ellipsis", overflowX: "hidden", lineHeight: 1 },
+          variant: "caption"
+        },
+        selectedVariable.label
+      )),
+      actions: /* @__PURE__ */ React14.createElement(IconButton9, { size: SIZE9, onClick: unlinkVariable, "aria-label": __12("Unlink", "elementor") }, /* @__PURE__ */ React14.createElement(DetachIcon2, { fontSize: SIZE9 })),
+      ...bindTrigger4(popupState)
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    Popover4,
+    {
+      disableScrollLock: true,
+      anchorEl: anchorRef.current,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      ...bindPopover4(popupState)
+    },
+    /* @__PURE__ */ React14.createElement(
+      VariableSelectionPopover,
+      {
+        selectedVariable,
+        closePopover: popupState.close,
+        propTypeKey: fontVariablePropTypeUtil.key
+      }
+    )
+  ));
 };
 
 // src/hooks/use-prop-font-variable-action.tsx
-import * as React9 from "react";
+import * as React15 from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-editing-panel";
-import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
-import { __ as __5 } from "@wordpress/i18n";
+import { ColorFilterIcon as ColorFilterIcon7 } from "@elementor/icons";
+import { __ as __13 } from "@wordpress/i18n";
 var usePropFontVariableAction = () => {
   const { propType } = useBoundProp8();
   const visible = !!propType && supportsFontVariables(propType);
   return {
     visible,
-    icon: ColorFilterIcon3,
-    title: __5("Variables", "elementor"),
-    popoverContent: ({ closePopover }) => /* @__PURE__ */ React9.createElement(FontVariablesSelection, { onSelect: closePopover })
+    icon: ColorFilterIcon7,
+    title: __13("Variables", "elementor"),
+    content: ({ close: closePopover }) => {
+      return /* @__PURE__ */ React15.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
+    }
   };
 };
 
@@ -774,7 +1322,7 @@ var usePropFontVariableAction = () => {
 var { registerPopoverAction: registerPopoverAction2 } = controlActionsMenu2;
 function initFontVariables() {
   registerControlReplacement2({
-    component: FontVariablesSelectionControl,
+    component: FontVariableControl,
     condition: ({ value }) => hasAssignedFontVariable(value)
   });
   registerPopoverAction2({
@@ -785,8 +1333,8 @@ function initFontVariables() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-import * as React10 from "react";
-import { useEffect, useState as useState3 } from "react";
+import * as React16 from "react";
+import { useEffect, useState as useState8 } from "react";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
@@ -807,13 +1355,13 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React10.createElement(Portal, { container }, /* @__PURE__ */ React10.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React16.createElement(Portal, { container }, /* @__PURE__ */ React16.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = useState3({});
+  const [variables, setVariables] = useState8({});
   useEffect(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {