@elementor/editor-variables 0.16.0 → 3.32.0-20

package/dist/index.mjs

@@ -1,14 +1,107 @@
 // src/init.ts
 import { injectIntoTop } from "@elementor/editor";
+import { controlActionsMenu, registerControlReplacement } from "@elementor/editor-editing-panel";
+import { __registerPanel as registerPanel } from "@elementor/editor-panels";
+
+// src/components/variables-manager/variables-manager-panel.tsx
+import * as React from "react";
+import { useEffect } from "react";
+import {
+  __createPanel as createPanel,
+  Panel,
+  PanelBody,
+  PanelFooter,
+  PanelHeader,
+  PanelHeaderTitle
+} from "@elementor/editor-panels";
+import { ThemeProvider } from "@elementor/editor-ui";
+import { changeEditMode } from "@elementor/editor-v1-adapters";
+import { FilterIcon, XIcon } from "@elementor/icons";
+import { Alert, Box, Button, Divider, ErrorBoundary, IconButton, Stack } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+var id = "variables-manager";
+var { panel, usePanelActions } = createPanel({
+  id,
+  component: VariablesManagerPanel,
+  allowedEditModes: ["edit", id],
+  onOpen: () => {
+    changeEditMode(id);
+  },
+  onClose: () => {
+    changeEditMode("edit");
+  }
+});
+function VariablesManagerPanel() {
+  const { close: closePanel } = usePanelActions();
+  const isDirty = false;
+  usePreventUnload(isDirty);
+  return /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React.createElement(Panel, null, /* @__PURE__ */ React.createElement(PanelHeader, null, /* @__PURE__ */ React.createElement(Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React.createElement(Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React.createElement(FilterIcon, { fontSize: "inherit" }), __("Variables Manager", "elementor"))), /* @__PURE__ */ React.createElement(
+    CloseButton,
+    {
+      sx: { marginLeft: "auto" },
+      onClose: () => {
+        closePanel();
+      }
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    PanelBody,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    /* @__PURE__ */ React.createElement(Divider, null),
+    /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        px: 2,
+        sx: {
+          flexGrow: 1,
+          overflowY: "auto"
+        }
+      },
+      "List"
+    )
+  ), /* @__PURE__ */ React.createElement(PanelFooter, null, /* @__PURE__ */ React.createElement(Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, __("Save changes", "elementor"))))));
+}
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React.createElement(IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React.createElement(XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React.createElement("strong", null, __("Something went wrong", "elementor"))));
+var usePreventUnload = (isDirty) => {
+  useEffect(() => {
+    const handleBeforeUnload = (event) => {
+      if (isDirty) {
+        event.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty]);
+};
+
+// src/controls/variable-control.tsx
+import * as React24 from "react";
+import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
+
+// src/components/ui/variable/assigned-variable.tsx
+import { useId as useId2, useRef } from "react";
+import * as React16 from "react";
+import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+import { ColorFilterIcon as ColorFilterIcon2 } from "@elementor/icons";
+import { bindPopover, bindTrigger, Box as Box5, Popover, usePopupState } from "@elementor/ui";
 
-// src/init-color-variables.ts
+// src/variables-registry/create-variable-type-registry.ts
 import { styleTransformersRegistry } from "@elementor/editor-canvas";
-import { controlActionsMenu, registerControlReplacement } from "@elementor/editor-editing-panel";
+import { stylesInheritanceTransformersRegistry } from "@elementor/editor-editing-panel";
 
-// src/controls/color-variable-control.tsx
-import * as React19 from "react";
-import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
-import { colorPropTypeUtil } from "@elementor/editor-props";
+// src/transformers/inheritance-transformer.tsx
+import * as React2 from "react";
+import { createTransformer } from "@elementor/editor-canvas";
+import { Stack as Stack2, Typography } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/components/ui/color-indicator.tsx
 import { styled, UnstableColorIndicator } from "@elementor/ui";
@@ -17,40 +110,13 @@ var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
   marginRight: theme.spacing(0.25)
 }));
 
-// src/components/ui/variable/assigned-variable.tsx
-import { useId as useId2, useRef as useRef4 } from "react";
-import * as React16 from "react";
-import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
-import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
-import { bindPopover as bindPopover2, bindTrigger as bindTrigger2, Box as Box4, Popover as Popover2, usePopupState as usePopupState2 } from "@elementor/ui";
-
-// src/components/variable-selection-popover.tsx
-import * as React14 from "react";
-import { useRef as useRef3, useState as useState10 } from "react";
-import { Box as Box2 } from "@elementor/ui";
-
 // 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";
-import { z as z2 } from "@elementor/schema";
-var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.string());
-
-// src/components/color-variable-creation.tsx
-import * as React3 from "react";
-import { useState as useState3 } from "react";
-import { PopoverContent, useBoundProp } from "@elementor/editor-controls";
-import { PopoverScrollableContent } from "@elementor/editor-editing-panel";
-import { PopoverHeader } from "@elementor/editor-ui";
-import { ArrowLeftIcon, BrushIcon } from "@elementor/icons";
-import { Button, CardActions, Divider, IconButton } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
-
-// src/hooks/use-prop-variables.ts
-import { useMemo } from "react";
+// src/service.ts
+import { __ as __2 } from "@wordpress/i18n";
 
 // src/api.ts
 import { httpService } from "@elementor/http-client";
@@ -66,18 +132,25 @@ var apiClient = {
       value
     });
   },
-  update: (id, label, value) => {
+  update: (id2, label, value) => {
     return httpService().put(BASE_PATH + "/update", {
-      id,
+      id: id2,
       label,
       value
     });
   },
-  delete: (id) => {
-    return httpService().post(BASE_PATH + "/delete", { id });
+  delete: (id2) => {
+    return httpService().post(BASE_PATH + "/delete", { id: id2 });
   },
-  restore: (id) => {
-    return httpService().post(BASE_PATH + "/restore", { id });
+  restore: (id2, label, value) => {
+    const payload = { id: id2 };
+    if (label) {
+      payload.label = label;
+    }
+    if (value) {
+      payload.value = value;
+    }
+    return httpService().post(BASE_PATH + "/restore", payload);
   }
 };
 
@@ -108,14 +181,14 @@ var Storage = class {
     localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
   }
-  add(id, variable) {
+  add(id2, variable) {
     this.load();
-    this.state.variables[id] = variable;
+    this.state.variables[id2] = variable;
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
   }
-  update(id, variable) {
+  update(id2, variable) {
     this.load();
-    this.state.variables[id] = variable;
+    this.state.variables[id2] = variable;
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
   }
   watermark(watermark) {
@@ -134,6 +207,17 @@ var Storage = class {
   }
 };
 
+// src/prop-types/font-variable-prop-type.ts
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+import { z as z2 } from "@elementor/schema";
+var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.string());
+
+// src/sync/enqueue-font.ts
+var enqueueFont = (fontFamily, context = "preview") => {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
+};
+
 // src/create-style-variables-repository.ts
 var createStyleVariablesRepository = () => {
   const variables = {};
@@ -150,19 +234,46 @@ var createStyleVariablesRepository = () => {
       subscription({ ...variables });
     }
   };
-  const shouldUpdate = (key, newValue) => {
-    return !(key in variables) || variables[key] !== newValue;
+  const shouldUpdate = (key, maybeUpdated) => {
+    if (!(key in variables)) {
+      return true;
+    }
+    if (variables[key].label !== maybeUpdated.label) {
+      return true;
+    }
+    if (variables[key].value !== maybeUpdated.value) {
+      return true;
+    }
+    if (!variables[key]?.deleted && maybeUpdated?.deleted) {
+      return true;
+    }
+    if (variables[key]?.deleted && !maybeUpdated?.deleted) {
+      return true;
+    }
+    return false;
   };
   const applyUpdates = (updatedVars) => {
     let hasChanges = false;
-    for (const [key, { value }] of Object.entries(updatedVars)) {
-      if (shouldUpdate(key, value)) {
-        variables[key] = value;
+    for (const [key, variable] of Object.entries(updatedVars)) {
+      if (shouldUpdate(key, variable)) {
+        variables[key] = variable;
+        if (variable.type === fontVariablePropTypeUtil.key) {
+          fontEnqueue(variable.value);
+        }
         hasChanges = true;
       }
     }
     return hasChanges;
   };
+  const fontEnqueue = (value) => {
+    if (!value) {
+      return;
+    }
+    try {
+      enqueueFont(value);
+    } catch {
+    }
+  };
   const update = (updatedVars) => {
     if (applyUpdates(updatedVars)) {
       notify();
@@ -204,7 +315,8 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        throw new Error("Unexpected response from server");
+        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
+        throw new Error(errorMessage);
       }
       return payload;
     }).then((data) => {
@@ -221,11 +333,12 @@ var service = {
       };
     });
   },
-  update: (id, { label, value }) => {
-    return apiClient.update(id, label, value).then((response) => {
+  update: (id2, { label, value }) => {
+    return apiClient.update(id2, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        throw new Error("Unexpected response from server");
+        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
+        throw new Error(errorMessage);
       }
       return payload;
     }).then((data) => {
@@ -242,8 +355,8 @@ var service = {
       };
     });
   },
-  delete: (id) => {
-    return apiClient.delete(id).then((response) => {
+  delete: (id2) => {
+    return apiClient.delete(id2).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
         throw new Error("Unexpected response from server");
@@ -263,8 +376,8 @@ var service = {
       };
     });
   },
-  restore: (id) => {
-    return apiClient.restore(id).then((response) => {
+  restore: (id2, label, value) => {
+    return apiClient.restore(id2, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
         throw new Error("Unexpected response from server");
@@ -292,7 +405,157 @@ var handleWatermark = (operation, newWatermark) => {
   storage.watermark(newWatermark);
 };
 
+// src/transformers/utils/resolve-css-variable.ts
+var resolveCssVariable = (id2, variable) => {
+  let name = id2;
+  let fallbackValue = "";
+  if (variable) {
+    fallbackValue = variable.value;
+  }
+  if (variable && !variable.deleted) {
+    name = variable.label;
+  }
+  if (!name.trim()) {
+    return null;
+  }
+  if (!fallbackValue.trim()) {
+    return `var(--${name})`;
+  }
+  return `var(--${name}, ${fallbackValue})`;
+};
+
+// src/transformers/inheritance-transformer.tsx
+var inheritanceTransformer = createTransformer((id2) => {
+  const variables = service.variables();
+  const variable = variables[id2];
+  if (!variable) {
+    return /* @__PURE__ */ React2.createElement("span", null, __3("Missing variable", "elementor"));
+  }
+  const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
+  const css = resolveCssVariable(id2, variable);
+  return /* @__PURE__ */ React2.createElement(Stack2, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React2.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React2.createElement(Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
+});
+
+// src/transformers/variable-transformer.ts
+import { createTransformer as createTransformer2 } from "@elementor/editor-canvas";
+var variableTransformer = createTransformer2((id2) => {
+  const variables = service.variables();
+  if (!variables[id2]) {
+    return null;
+  }
+  return resolveCssVariable(id2, variables[id2]);
+});
+
+// src/variables-registry/create-variable-type-registry.ts
+function createVariableTypeRegistry() {
+  const variableTypes = {};
+  const registerVariableType2 = ({
+    icon,
+    startIcon,
+    valueField,
+    propTypeUtil,
+    variableType,
+    fallbackPropTypeUtil
+  }) => {
+    if (variableTypes[propTypeUtil.key]) {
+      throw new Error(`Variable with key "${propTypeUtil.key}" is already registered.`);
+    }
+    variableTypes[propTypeUtil.key] = {
+      icon,
+      startIcon,
+      valueField,
+      propTypeUtil,
+      variableType,
+      fallbackPropTypeUtil
+    };
+    registerTransformer(propTypeUtil.key);
+    registerInheritanceTransformer(propTypeUtil.key);
+  };
+  const registerTransformer = (key) => {
+    styleTransformersRegistry.register(key, variableTransformer);
+  };
+  const registerInheritanceTransformer = (key) => {
+    stylesInheritanceTransformersRegistry.register(key, inheritanceTransformer);
+  };
+  const getVariableType2 = (key) => {
+    return variableTypes[key];
+  };
+  const hasVariableType2 = (key) => {
+    return key in variableTypes;
+  };
+  return {
+    registerVariableType: registerVariableType2,
+    getVariableType: getVariableType2,
+    hasVariableType: hasVariableType2
+  };
+}
+
+// src/variables-registry/variable-type-registry.ts
+var { registerVariableType, getVariableType, hasVariableType } = createVariableTypeRegistry();
+
+// src/components/variable-selection-popover.tsx
+import * as React14 from "react";
+import { useState as useState7 } from "react";
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
+
+// src/context/variable-selection-popover.context.tsx
+import * as React3 from "react";
+import { createContext, useContext, useState } from "react";
+import { Box as Box2 } from "@elementor/ui";
+var PopoverContentRefContext = createContext(null);
+var PopoverContentRefContextProvider = ({ children }) => {
+  const [anchorRef, setAnchorRef] = useState(null);
+  return /* @__PURE__ */ React3.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React3.createElement(Box2, { ref: setAnchorRef }, children));
+};
+var usePopoverContentRef = () => {
+  return useContext(PopoverContentRefContext);
+};
+
+// src/context/variable-type-context.tsx
+import * as React4 from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var VariableTypeContext = createContext2(null);
+function VariableTypeProvider({ children, propTypeKey }) {
+  return /* @__PURE__ */ React4.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
+}
+function useVariableType() {
+  const context = useContext2(VariableTypeContext);
+  if (context === null) {
+    throw new Error("useVariableType must be used within a VariableTypeProvider");
+  }
+  return getVariableType(context);
+}
+
+// src/hooks/use-permissions.ts
+import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
+var usePermissions = () => {
+  const { canUser } = useCurrentUserCapabilities();
+  return {
+    canAssign: () => canUser("edit_posts"),
+    canUnlink: () => canUser("edit_posts"),
+    canAdd: () => canUser("manage_options"),
+    canDelete: () => canUser("manage_options"),
+    canEdit: () => canUser("manage_options"),
+    canRestore: () => canUser("manage_options"),
+    canManageSettings: () => canUser("manage_options")
+  };
+};
+
+// src/components/variable-creation.tsx
+import * as React6 from "react";
+import { useState as useState3 } from "react";
+import { PopoverContent, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { PopoverBody } from "@elementor/editor-editing-panel";
+import { PopoverHeader } from "@elementor/editor-ui";
+import { ArrowLeftIcon } from "@elementor/icons";
+import { Button as Button2, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton2 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+
+// src/hooks/use-initial-value.ts
+import { useBoundProp } from "@elementor/editor-controls";
+
 // src/hooks/use-prop-variables.ts
+import { useMemo } from "react";
 var useVariable = (key) => {
   const variables = service.variables();
   if (!variables?.[key]) {
@@ -327,192 +590,259 @@ var normalizeVariables = (propKey) => {
   }));
 };
 var createVariable = (newVariable) => {
-  return service.create(newVariable).then(({ id }) => {
-    return id;
+  return service.create(newVariable).then(({ id: id2 }) => {
+    return id2;
   });
 };
 var updateVariable = (updateId, { value, label }) => {
-  return service.update(updateId, { value, label }).then(({ id }) => {
-    return id;
+  return service.update(updateId, { value, label }).then(({ id: id2 }) => {
+    return id2;
   });
 };
 var deleteVariable = (deleteId) => {
-  return service.delete(deleteId).then(({ id }) => {
-    return id;
+  return service.delete(deleteId).then(({ id: id2 }) => {
+    return id2;
+  });
+};
+var restoreVariable = (restoreId, label, value) => {
+  return service.restore(restoreId, label, value).then(({ id: id2 }) => {
+    return id2;
   });
 };
 
-// src/components/fields/color-field.tsx
-import * as React from "react";
-import { useRef, useState } from "react";
-import { FormHelperText, FormLabel, Grid, UnstableColorField } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+// src/hooks/use-initial-value.ts
+var useInitialValue = () => {
+  const { value: initial } = useBoundProp();
+  const hasAssignedVariable2 = hasVariableType(initial?.$$type) && Boolean(initial?.value);
+  const variable = useVariable(hasAssignedVariable2 ? initial.value : "");
+  if (hasAssignedVariable2) {
+    return variable ? variable.value : "";
+  }
+  return initial?.value ?? "";
+};
+
+// src/utils/tracking.ts
+var trackVariableEvent = ({ varType, controlPath, action }) => {
+  const extendedWindow = window;
+  const config = extendedWindow?.elementorCommon?.eventsManager?.config;
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  extendedWindow.elementorCommon?.eventsManager?.dispatchEvent(name, {
+    location: config.locations.variables,
+    secondaryLocation: config.secondaryLocations.variablesPopover,
+    trigger: config.triggers.click,
+    var_type: varType,
+    control_path: controlPath,
+    action_type: name
+  });
+};
 
 // src/utils/validations.ts
-import { __ } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: __4("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: __4("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: __4("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: __4("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: __4("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: __4("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: __4("There was a glitch. Try saving your variable again.", "elementor")
+};
 var VARIABLE_LABEL_MAX_LENGTH = 50;
+var mapServerError = (error) => {
+  if (error?.response?.data?.code === "duplicated_label") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.DUPLICATED_LABEL
+    };
+  }
+  return void 0;
+};
 var validateLabel = (name) => {
   if (!name.trim()) {
-    return __("Missing variable name.", "elementor");
+    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
   }
   const allowedChars = /^[a-zA-Z0-9_-]+$/;
   if (!allowedChars.test(name)) {
-    return __("Names can only use letters, numbers, dashes (-) and underscores (_).", "elementor");
+    return ERROR_MESSAGES.INVALID_CHARACTERS;
   }
   const hasAlphanumeric = /[a-zA-Z0-9]/;
   if (!hasAlphanumeric.test(name)) {
-    return __("Names have to include at least one non-special character.", "elementor");
+    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
   }
   if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
-    return __("Variable names can contain up to 50 characters.", "elementor");
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
   }
   return "";
 };
 var labelHint = (name) => {
   const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
   if (hintThreshold < name.length) {
-    return __("Variable names can contain up to 50 characters.", "elementor");
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
   }
   return "";
 };
 var validateValue = (value) => {
   if (!value.trim()) {
-    return __("Missing variable value.", "elementor");
+    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
   }
   return "";
 };
 
-// src/components/variable-selection-popover.context.ts
-import { createContext, useContext } from "react";
-var PopoverContentRefContext = createContext(null);
-var usePopoverContentRef = () => {
-  return useContext(PopoverContentRefContext);
-};
-
-// src/components/fields/color-field.tsx
-var ColorField = ({ value, onChange }) => {
-  const [color, setColor] = useState(value);
-  const [errorMessage, setErrorMessage] = useState("");
-  const defaultRef = useRef(null);
-  const anchorRef = usePopoverContentRef() ?? defaultRef;
-  const handleChange = (newValue) => {
-    setColor(newValue);
-    const errorMsg = validateValue(newValue);
-    setErrorMessage(errorMsg);
-    onChange(errorMsg ? "" : newValue);
-  };
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(FormLabel, { size: "tiny" }, __2("Value", "elementor"))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
-    UnstableColorField,
-    {
-      size: "tiny",
-      fullWidth: true,
-      value: color,
-      onChange: handleChange,
-      error: errorMessage ?? void 0,
-      slotProps: {
-        colorPicker: {
-          anchorEl: anchorRef.current,
-          anchorOrigin: { vertical: "top", horizontal: "right" },
-          transformOrigin: { vertical: "top", horizontal: -10 }
-        }
-      }
-    }
-  ), errorMessage && /* @__PURE__ */ React.createElement(FormHelperText, { error: true }, errorMessage)));
-};
-
 // src/components/fields/label-field.tsx
-import * as React2 from "react";
+import * as React5 from "react";
 import { useId, useState as useState2 } from "react";
-import { FormHelperText as FormHelperText2, FormLabel as FormLabel2, Grid as Grid2, TextField } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
-var LabelField = ({ value, onChange }) => {
+import { FormHelperText, FormLabel, Grid, TextField } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+function isLabelEqual(a, b) {
+  return a.trim().toLowerCase() === b.trim().toLowerCase();
+}
+var useLabelError = (initialError) => {
+  const [error, setError] = useState2(initialError ?? { value: "", message: "" });
+  return {
+    labelFieldError: error,
+    setLabelFieldError: setError
+  };
+};
+var LabelField = ({ value, error, onChange }) => {
   const [label, setLabel] = useState2(value);
   const [errorMessage, setErrorMessage] = useState2("");
   const [noticeMessage, setNoticeMessage] = useState2(() => labelHint(value));
   const handleChange = (newValue) => {
     setLabel(newValue);
-    const errorMsg = validateLabel(newValue);
+    const errorMsg2 = validateLabel(newValue);
     const hintMsg = labelHint(newValue);
-    setErrorMessage(errorMsg);
-    setNoticeMessage(errorMsg ? "" : hintMsg);
-    onChange(errorMsg ? "" : newValue);
+    setErrorMessage(errorMsg2);
+    setNoticeMessage(errorMsg2 ? "" : hintMsg);
+    onChange(isLabelEqual(newValue, error?.value ?? "") || errorMsg2 ? "" : newValue);
   };
-  const id = useId();
-  return /* @__PURE__ */ React2.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel2, { htmlFor: id, size: "tiny" }, __3("Name", "elementor"))), /* @__PURE__ */ React2.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+  const id2 = useId();
+  let errorMsg = errorMessage;
+  if (isLabelEqual(label, error?.value ?? "") && error?.message) {
+    errorMsg = error.message;
+  }
+  const noticeMsg = errorMsg ? "" : noticeMessage;
+  return /* @__PURE__ */ React5.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React5.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, __5("Name", "elementor"))), /* @__PURE__ */ React5.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(
     TextField,
     {
-      id,
+      id: id2,
       size: "tiny",
       fullWidth: true,
       value: label,
-      error: !!errorMessage,
+      error: !!errorMsg,
       onChange: (e) => handleChange(e.target.value),
       inputProps: { maxLength: VARIABLE_LABEL_MAX_LENGTH }
     }
-  ), errorMessage && /* @__PURE__ */ React2.createElement(FormHelperText2, { error: true }, errorMessage), noticeMessage && /* @__PURE__ */ React2.createElement(FormHelperText2, null, noticeMessage)));
+  ), errorMsg && /* @__PURE__ */ React5.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React5.createElement(FormHelperText, null, noticeMsg)));
 };
 
-// src/components/color-variable-creation.tsx
+// src/components/variable-creation.tsx
 var SIZE = "tiny";
-var ColorVariableCreation = ({ onGoBack, onClose }) => {
-  const { setValue: setVariable } = useBoundProp(colorVariablePropTypeUtil);
-  const [color, setColor] = useState3("");
+var VariableCreation = ({ onGoBack, onClose }) => {
+  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+  const { setValue: setVariable, path } = useBoundProp2(propTypeUtil);
+  const initialValue = useInitialValue();
+  const [value, setValue] = useState3(initialValue);
   const [label, setLabel] = useState3("");
+  const [errorMessage, setErrorMessage] = useState3("");
+  const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
-    setColor("");
+    setValue("");
     setLabel("");
+    setErrorMessage("");
   };
   const closePopover = () => {
     resetFields();
     onClose();
   };
-  const handleCreate = () => {
+  const handleCreateAndTrack = () => {
     createVariable({
-      value: color,
+      value,
       label,
-      type: colorVariablePropTypeUtil.key
+      type: propTypeUtil.key
     }).then((key) => {
       setVariable(key);
       closePopover();
+    }).catch((error) => {
+      const mappedError = mapServerError(error);
+      if (mappedError && "label" === mappedError.field) {
+        setLabel("");
+        setLabelFieldError({
+          value: label,
+          message: mappedError.message
+        });
+        return;
+      }
+      setErrorMessage(ERROR_MESSAGES.UNEXPECTED_ERROR);
+    });
+    trackVariableEvent({
+      varType: variableType,
+      controlPath: path.join("."),
+      action: "save"
     });
   };
   const hasEmptyValue = () => {
-    return "" === color.trim() || "" === label.trim();
+    return "" === value.trim() || "" === label.trim();
+  };
+  const hasErrors = () => {
+    return !!errorMessage;
   };
-  const isSubmitDisabled = hasEmptyValue();
-  return /* @__PURE__ */ React3.createElement(PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React3.createElement(
+  const isSubmitDisabled = hasEmptyValue() || hasErrors();
+  return /* @__PURE__ */ React6.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React6.createElement(
     PopoverHeader,
     {
-      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(IconButton, { size: SIZE, "aria-label": __4("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React3.createElement(BrushIcon, { fontSize: SIZE })),
-      title: __4("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React6.createElement(React6.Fragment, null, onGoBack && /* @__PURE__ */ React6.createElement(IconButton2, { size: SIZE, "aria-label": __6("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React6.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React6.createElement(VariableIcon, { fontSize: SIZE })),
+      title: __6("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React3.createElement(Divider, null), /* @__PURE__ */ React3.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React3.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React3.createElement(ColorField, { value: color, onChange: setColor })), /* @__PURE__ */ React3.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React3.createElement(Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreate }, __4("Create", "elementor"))));
+  ), /* @__PURE__ */ React6.createElement(Divider2, null), /* @__PURE__ */ React6.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React6.createElement(
+    LabelField,
+    {
+      value: label,
+      error: labelFieldError,
+      onChange: (newValue) => {
+        setLabel(newValue);
+        setErrorMessage("");
+      }
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    ValueField,
+    {
+      value,
+      onChange: (newValue) => {
+        setValue(newValue);
+        setErrorMessage("");
+      }
+    }
+  ), errorMessage && /* @__PURE__ */ React6.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React6.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React6.createElement(Button2, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, __6("Create", "elementor"))));
 };
 
-// src/components/color-variable-edit.tsx
-import * as React5 from "react";
-import { useState as useState4 } from "react";
-import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
-import { PopoverScrollableContent as PopoverScrollableContent2 } from "@elementor/editor-editing-panel";
+// src/components/variable-edit.tsx
+import * as React9 from "react";
+import { useEffect as useEffect2, useState as useState5 } from "react";
+import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { useSuppressedMessage } from "@elementor/editor-current-user";
+import { PopoverBody as PopoverBody2 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
-import { ArrowLeftIcon as ArrowLeftIcon2, BrushIcon as BrushIcon2, TrashIcon } from "@elementor/icons";
-import { Button as Button3, CardActions as CardActions2, Divider as Divider2, IconButton as IconButton2 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { ArrowLeftIcon as ArrowLeftIcon2, TrashIcon } from "@elementor/icons";
+import { Button as Button5, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton3 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/components/ui/delete-confirmation-dialog.tsx
-import * as React4 from "react";
+import * as React7 from "react";
 import { AlertOctagonFilledIcon } from "@elementor/icons";
 import {
-  Button as Button2,
+  Button as Button3,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
-  Typography
+  Typography as Typography2
 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 var TITLE_ID = "delete-variable-dialog";
 var DeleteConfirmationDialog = ({
   open,
@@ -520,30 +850,112 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  return /* @__PURE__ */ React4.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React4.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React4.createElement(AlertOctagonFilledIcon, { color: "error" }), __5("Delete Variable", "elementor")), /* @__PURE__ */ React4.createElement(DialogContent, null, /* @__PURE__ */ React4.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __5("You are about to delete", "elementor"), /* @__PURE__ */ React4.createElement(Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __5(
-    "Variable. Note that its value is still being used anywhere on your site where it was connected to the variable.",
+  return /* @__PURE__ */ React7.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React7.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React7.createElement(AlertOctagonFilledIcon, { color: "error" }), __7("Delete this variable?", "elementor")), /* @__PURE__ */ React7.createElement(DialogContent, null, /* @__PURE__ */ React7.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __7("All elements using", "elementor"), /* @__PURE__ */ React7.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __7("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React7.createElement(DialogActions, null, /* @__PURE__ */ React7.createElement(Button3, { color: "secondary", onClick: closeDialog }, __7("Not now", "elementor")), /* @__PURE__ */ React7.createElement(Button3, { variant: "contained", color: "error", onClick: onConfirm }, __7("Delete", "elementor"))));
+};
+
+// src/components/ui/edit-confirmation-dialog.tsx
+import * as React8 from "react";
+import { useState as useState4 } from "react";
+import { AlertTriangleFilledIcon } from "@elementor/icons";
+import {
+  Button as Button4,
+  Checkbox,
+  Dialog as Dialog2,
+  DialogActions as DialogActions2,
+  DialogContent as DialogContent2,
+  DialogContentText as DialogContentText2,
+  DialogTitle as DialogTitle2,
+  FormControlLabel,
+  Typography as Typography3
+} from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
+var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
+var EditConfirmationDialog = ({
+  closeDialog,
+  onConfirm,
+  onSuppressMessage
+}) => {
+  const [dontShowAgain, setDontShowAgain] = useState4(false);
+  const handleSave = () => {
+    if (dontShowAgain) {
+      onSuppressMessage?.();
+    }
+    onConfirm?.();
+  };
+  return /* @__PURE__ */ React8.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React8.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React8.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __8("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React8.createElement(DialogContent2, null, /* @__PURE__ */ React8.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __8(
+    "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React4.createElement(DialogActions, null, /* @__PURE__ */ React4.createElement(Button2, { color: "secondary", onClick: closeDialog }, __5("Cancel", "elementor")), /* @__PURE__ */ React4.createElement(Button2, { variant: "contained", color: "error", onClick: onConfirm }, __5("Delete", "elementor"))));
+  ))), /* @__PURE__ */ React8.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React8.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React8.createElement(
+        Checkbox,
+        {
+          checked: dontShowAgain,
+          onChange: (event) => setDontShowAgain(event.target.checked),
+          size: "small"
+        }
+      ),
+      label: /* @__PURE__ */ React8.createElement(Typography3, { variant: "body2" }, __8("Don't show me again", "elementor"))
+    }
+  ), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(Button4, { color: "secondary", onClick: closeDialog }, __8("Keep editing", "elementor")), /* @__PURE__ */ React8.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __8("Save", "elementor")))));
 };
 
-// src/components/color-variable-edit.tsx
+// src/components/variable-edit.tsx
 var SIZE2 = "tiny";
-var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
-  const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp2(colorVariablePropTypeUtil);
-  const [deleteConfirmation, setDeleteConfirmation] = useState4(false);
+var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
+  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+  const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp3(propTypeUtil);
+  const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(EDIT_CONFIRMATION_DIALOG_ID);
+  const [deleteConfirmation, setDeleteConfirmation] = useState5(false);
+  const [editConfirmation, setEditConfirmation] = useState5(false);
+  const [errorMessage, setErrorMessage] = useState5("");
+  const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
   if (!variable) {
-    throw new Error(`Global color variable not found`);
+    throw new Error(`Global ${variableType} variable not found`);
   }
-  const [color, setColor] = useState4(variable.value);
-  const [label, setLabel] = useState4(variable.label);
+  const userPermissions = usePermissions();
+  const [value, setValue] = useState5(variable.value);
+  const [label, setLabel] = useState5(variable.label);
+  useEffect2(() => {
+    styleVariablesRepository.update({
+      [editId]: {
+        ...variable,
+        value
+      }
+    });
+    return () => {
+      styleVariablesRepository.update({
+        [editId]: { ...variable }
+      });
+    };
+  }, [editId, value, variable]);
   const handleUpdate = () => {
+    if (isMessageSuppressed) {
+      handleSaveVariable();
+    } else {
+      setEditConfirmation(true);
+    }
+  };
+  const handleSaveVariable = () => {
     updateVariable(editId, {
-      value: color,
+      value,
       label
     }).then(() => {
       maybeTriggerBoundPropChange();
       onSubmit?.();
+    }).catch((error) => {
+      const mappedError = mapServerError(error);
+      if (mappedError && "label" === mappedError.field) {
+        setLabel("");
+        setLabelFieldError({
+          value: label,
+          message: mappedError.message
+        });
+        return;
+      }
+      setErrorMessage(ERROR_MESSAGES.UNEXPECTED_ERROR);
     });
   };
   const handleDelete = () => {
@@ -563,43 +975,70 @@ var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const closeDeleteDialog = () => () => {
     setDeleteConfirmation(false);
   };
-  const actions = [];
-  actions.push(
-    /* @__PURE__ */ React5.createElement(
-      IconButton2,
-      {
-        key: "delete",
-        size: SIZE2,
-        "aria-label": __6("Delete", "elementor"),
-        onClick: handleDeleteConfirmation
-      },
-      /* @__PURE__ */ React5.createElement(TrashIcon, { fontSize: SIZE2 })
-    )
-  );
-  const hasEmptyValues = () => {
-    return !color.trim() || !label.trim();
-  };
-  const noValueChanged = () => {
-    return color === variable.value && label === variable.label;
+  const closeEditDialog = () => () => {
+    setEditConfirmation(false);
   };
-  const isSubmitDisabled = noValueChanged() || hasEmptyValues();
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(PopoverScrollableContent2, { height: "auto" }, /* @__PURE__ */ React5.createElement(
+  const actions = [];
+  if (userPermissions.canDelete()) {
+    actions.push(
+      /* @__PURE__ */ React9.createElement(
+        IconButton3,
+        {
+          key: "delete",
+          size: SIZE2,
+          "aria-label": __9("Delete", "elementor"),
+          onClick: handleDeleteConfirmation
+        },
+        /* @__PURE__ */ React9.createElement(TrashIcon, { fontSize: SIZE2 })
+      )
+    );
+  }
+  const hasEmptyValues = () => {
+    return !value.trim() || !label.trim();
+  };
+  const noValueChanged = () => {
+    return value === variable.value && label === variable.label;
+  };
+  const hasErrors = () => {
+    return !!errorMessage;
+  };
+  const isSubmitDisabled = noValueChanged() || hasEmptyValues() || hasErrors();
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React9.createElement(
     PopoverHeader2,
     {
-      title: __6("Edit variable", "elementor"),
+      title: __9("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React5.createElement(React5.Fragment, null, onGoBack && /* @__PURE__ */ React5.createElement(
-        IconButton2,
+      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(
+        IconButton3,
         {
           size: SIZE2,
-          "aria-label": __6("Go Back", "elementor"),
+          "aria-label": __9("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React5.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })
-      ), /* @__PURE__ */ React5.createElement(BrushIcon2, { fontSize: SIZE2 })),
+        /* @__PURE__ */ React9.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })
+      ), /* @__PURE__ */ React9.createElement(VariableIcon, { fontSize: SIZE2 })),
       actions
     }
-  ), /* @__PURE__ */ React5.createElement(Divider2, null), /* @__PURE__ */ React5.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React5.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React5.createElement(ColorField, { value: color, onChange: setColor })), /* @__PURE__ */ React5.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React5.createElement(Button3, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __6("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React9.createElement(Divider3, null), /* @__PURE__ */ React9.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React9.createElement(
+    LabelField,
+    {
+      value: label,
+      error: labelFieldError,
+      onChange: (newValue) => {
+        setLabel(newValue);
+        setErrorMessage("");
+      }
+    }
+  ), /* @__PURE__ */ React9.createElement(
+    ValueField,
+    {
+      value,
+      onChange: (newValue) => {
+        setValue(newValue);
+        setErrorMessage("");
+      }
+    }
+  ), errorMessage && /* @__PURE__ */ React9.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React9.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React9.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __9("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React9.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -607,30 +1046,37 @@ var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React9.createElement(
+    EditConfirmationDialog,
+    {
+      closeDialog: closeEditDialog(),
+      onConfirm: handleSaveVariable,
+      onSuppressMessage: suppressMessage
+    }
   ));
 };
 
-// src/components/color-variables-selection.tsx
-import * as React9 from "react";
-import { useState as useState5 } from "react";
-import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
-import { PopoverScrollableContent as PopoverScrollableContent3 } from "@elementor/editor-editing-panel";
+// src/components/variables-selection.tsx
+import * as React13 from "react";
+import { useState as useState6 } from "react";
+import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { PopoverBody as PopoverBody3 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader3, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
-import { BrushIcon as BrushIcon3, ColorFilterIcon, PlusIcon, SettingsIcon } from "@elementor/icons";
-import { Divider as Divider3, IconButton as IconButton4 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { ColorFilterIcon, PlusIcon, SettingsIcon } from "@elementor/icons";
+import { Divider as Divider4, IconButton as IconButton5 } from "@elementor/ui";
+import { __ as __13, sprintf } from "@wordpress/i18n";
 
 // src/components/ui/menu-item-content.tsx
-import * as React6 from "react";
+import * as React10 from "react";
 import { EllipsisWithTooltip } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
-import { Box, IconButton as IconButton3, ListItemIcon, Typography as Typography2 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { Box as Box3, IconButton as IconButton4, ListItemIcon, Typography as Typography4 } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React6.createElement(
-    Box,
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React10.createElement(
+    Box3,
     {
       sx: {
         flex: 1,
@@ -640,49 +1086,49 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React10.createElement(
       EllipsisWithTooltip,
       {
         title: item.label || item.value,
-        as: Typography2,
+        as: Typography4,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React6.createElement(
+    item.secondaryText && /* @__PURE__ */ React10.createElement(
       EllipsisWithTooltip,
       {
         title: item.secondaryText,
-        as: Typography2,
+        as: Typography4,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React6.createElement(
-    IconButton3,
+  ), !!onEdit && /* @__PURE__ */ React10.createElement(
+    IconButton4,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": __7("Edit", "elementor")
+      "aria-label": __10("Edit", "elementor")
     },
-    /* @__PURE__ */ React6.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React10.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-import * as React7 from "react";
-import { Link, Stack, Typography as Typography3 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import * as React11 from "react";
+import { Link, Stack as Stack3, Typography as Typography5 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React7.createElement(
-    Stack,
+  return /* @__PURE__ */ React11.createElement(
+    Stack3,
     {
       gap: 1,
       alignItems: "center",
@@ -693,30 +1139,49 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React7.createElement(Typography3, { align: "center", variant: "subtitle2" }, __8("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React7.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React7.createElement(Typography3, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __8("Try something else.", "elementor"), /* @__PURE__ */ React7.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __8("Clear & try again", "elementor")))
+    /* @__PURE__ */ React11.createElement(Typography5, { align: "center", variant: "subtitle2" }, __11("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React11.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React11.createElement(Typography5, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __11("Try something else.", "elementor"), /* @__PURE__ */ React11.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __11("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
-import * as React8 from "react";
-import { Button as Button4, Stack as Stack2, Typography as Typography4 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
-var NoVariables = ({ icon, title, onAdd }) => /* @__PURE__ */ React8.createElement(
-  Stack2,
-  {
-    gap: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    height: "100%",
-    color: "text.secondary",
-    sx: { p: 2.5, pb: 5.5 }
-  },
-  icon,
-  /* @__PURE__ */ React8.createElement(Typography4, { align: "center", variant: "subtitle2" }, title),
-  /* @__PURE__ */ React8.createElement(Typography4, { align: "center", variant: "caption", maxWidth: "180px" }, __9("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
-  onAdd && /* @__PURE__ */ React8.createElement(Button4, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __9("Create a variable", "elementor"))
-);
+import * as React12 from "react";
+import { Button as Button6, Stack as Stack4, Typography as Typography6 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
+var NoVariables = ({ icon, title, onAdd }) => {
+  const canAdd = usePermissions().canAdd();
+  return /* @__PURE__ */ React12.createElement(
+    Stack4,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pb: 5.5 }
+    },
+    icon,
+    canAdd ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+      NoVariablesContent,
+      {
+        title: title || __12("Create your first variable", "elementor"),
+        message: __12(
+          "Variables are saved attributes that you can apply anywhere on your site.",
+          "elementor"
+        )
+      }
+    ), onAdd && /* @__PURE__ */ React12.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __12("Create a variable", "elementor"))) : /* @__PURE__ */ React12.createElement(
+      NoVariablesContent,
+      {
+        title: __12("There are no variables", "elementor"),
+        message: __12("With your current role, you can only connect and detach variables.", "elementor")
+      }
+    )
+  );
+};
+function NoVariablesContent({ title, message }) {
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Typography6, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React12.createElement(Typography6, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+}
 
 // src/components/ui/styled-menu-list.tsx
 import { MenuList, styled as styled2 } from "@elementor/ui";
@@ -750,38 +1215,53 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
   position: "relative"
 }));
 
-// src/components/color-variables-selection.tsx
+// src/components/variables-selection.tsx
 var SIZE4 = "tiny";
-var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
-  const { value: variable, setValue: setVariable } = useBoundProp3(colorVariablePropTypeUtil);
-  const [searchValue, setSearchValue] = useState5("");
+var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
+  const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
+  const { value: variable, setValue: setVariable, path } = useBoundProp4(propTypeUtil);
+  const [searchValue, setSearchValue] = useState6("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
     isSourceNotEmpty: hasVariables
-  } = useFilteredVariables(searchValue, colorVariablePropTypeUtil.key);
-  const handleSetColorVariable = (key) => {
+  } = useFilteredVariables(searchValue, propTypeUtil.key);
+  const handleSetVariable = (key) => {
     setVariable(key);
+    trackVariableEvent({
+      varType: variableType,
+      controlPath: path.join("."),
+      action: "connect"
+    });
     closePopover();
   };
+  const onAddAndTrack = () => {
+    onAdd?.();
+    trackVariableEvent({
+      varType: variableType,
+      controlPath: path.join("."),
+      action: "add"
+    });
+  };
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React9.createElement(IconButton4, { key: "add", size: SIZE4, onClick: onAdd }, /* @__PURE__ */ React9.createElement(PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React13.createElement(IconButton5, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React13.createElement(PlusIcon, { fontSize: SIZE4 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React9.createElement(IconButton4, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React9.createElement(SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React13.createElement(IconButton5, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React13.createElement(SettingsIcon, { fontSize: SIZE4 }))
     );
   }
+  const StartIcon = startIcon || (() => /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: SIZE4 }));
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React9.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
+    icon: /* @__PURE__ */ React13.createElement(StartIcon, { value }),
     secondaryText: value,
-    onEdit: () => onEdit?.(key)
+    onEdit: onEdit ? () => onEdit?.(key) : void 0
   }));
   const handleSearch = (search) => {
     setSearchValue(search);
@@ -789,506 +1269,417 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+  const noVariableTitle = sprintf(
+    /* translators: %s: Variable Type. */
+    __13("Create your first %s variable", "elementor"),
+    variableType
+  );
+  return /* @__PURE__ */ React13.createElement(PopoverBody3, null, /* @__PURE__ */ React13.createElement(
     PopoverHeader3,
     {
-      title: __10("Variables", "elementor"),
-      icon: /* @__PURE__ */ React9.createElement(ColorFilterIcon, { fontSize: SIZE4 }),
+      title: __13("Variables", "elementor"),
+      icon: /* @__PURE__ */ React13.createElement(ColorFilterIcon, { fontSize: SIZE4 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React9.createElement(
+  ), hasVariables && /* @__PURE__ */ React13.createElement(
     PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __10("Search", "elementor")
+      placeholder: __13("Search", "elementor")
     }
-  ), /* @__PURE__ */ React9.createElement(Divider3, null), /* @__PURE__ */ React9.createElement(PopoverScrollableContent3, null, hasVariables && hasSearchResults && /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React13.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React13.createElement(
     PopoverMenuList,
     {
       items,
-      onSelect: handleSetColorVariable,
+      onSelect: handleSetVariable,
       onClose: () => {
       },
       selectedValue: variable,
-      "data-testid": "color-variables-list",
+      "data-testid": `${variableType}-variables-list`,
       menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React9.createElement(MenuItemContent, { item })
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React13.createElement(MenuItemContent, { item })
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React9.createElement(
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React13.createElement(
     NoSearchResults,
     {
       searchValue,
       onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React9.createElement(BrushIcon3, { fontSize: "large" })
+      icon: /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: "large" })
+    }
+  ), !hasVariables && /* @__PURE__ */ React13.createElement(NoVariables, { title: noVariableTitle, icon: /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: "large" }), onAdd }));
+};
+
+// 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 [editId, setEditId] = useState7("");
+  const { open } = usePanelActions();
+  const onSettingsAvailable = isExperimentActive("e_variables_settings") ? () => {
+    open();
+  } : void 0;
+  return /* @__PURE__ */ React14.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React14.createElement(PopoverContentRefContextProvider, null, RenderView({
+    propTypeKey,
+    currentView,
+    selectedVariable,
+    editId,
+    setEditId,
+    setCurrentView,
+    closePopover,
+    onSettings: onSettingsAvailable
+  })));
+};
+function RenderView(props) {
+  const userPermissions = usePermissions();
+  const handlers = {
+    onClose: () => {
+      props.closePopover();
+    },
+    onGoBack: () => {
+      props.setCurrentView(VIEW_LIST);
     }
-  ), !hasVariables && /* @__PURE__ */ React9.createElement(
-    NoVariables,
+  };
+  if (userPermissions.canAdd()) {
+    handlers.onAdd = () => {
+      props.setCurrentView(VIEW_ADD);
+    };
+  }
+  if (userPermissions.canEdit()) {
+    handlers.onEdit = (key) => {
+      props.setEditId(key);
+      props.setCurrentView(VIEW_EDIT);
+    };
+  }
+  if (userPermissions.canManageSettings() && props.onSettings) {
+    handlers.onSettings = () => {
+      props.onSettings?.();
+      props.closePopover();
+    };
+  }
+  const handleSubmitOnEdit = () => {
+    if (props?.selectedVariable?.key === props.editId) {
+      handlers.onClose();
+    } else {
+      handlers.onGoBack?.();
+    }
+  };
+  if (VIEW_LIST === props.currentView) {
+    return /* @__PURE__ */ React14.createElement(
+      VariablesSelection,
+      {
+        closePopover: handlers.onClose,
+        onAdd: handlers.onAdd,
+        onEdit: handlers.onEdit,
+        onSettings: handlers.onSettings
+      }
+    );
+  }
+  if (VIEW_ADD === props.currentView) {
+    return /* @__PURE__ */ React14.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
+  }
+  if (VIEW_EDIT === props.currentView) {
+    return /* @__PURE__ */ React14.createElement(
+      VariableEdit,
+      {
+        editId: props.editId,
+        onGoBack: handlers.onGoBack,
+        onClose: handlers.onClose,
+        onSubmit: handleSubmitOnEdit
+      }
+    );
+  }
+  return null;
+}
+
+// src/components/ui/tags/assigned-tag.tsx
+import * as React15 from "react";
+import { DetachIcon } from "@elementor/icons";
+import { Box as Box4, IconButton as IconButton6, Stack as Stack5, Tooltip, Typography as Typography7, UnstableTag as Tag } from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
+var SIZE5 = "tiny";
+var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
+  const actions = [];
+  if (onUnlink) {
+    actions.push(
+      /* @__PURE__ */ React15.createElement(IconButton6, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": __14("Unlink", "elementor") }, /* @__PURE__ */ React15.createElement(DetachIcon, { fontSize: SIZE5 }))
+    );
+  }
+  return /* @__PURE__ */ React15.createElement(Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React15.createElement(
+    Tag,
     {
-      title: __10("Create your first color variable", "elementor"),
-      icon: /* @__PURE__ */ React9.createElement(BrushIcon3, { fontSize: "large" }),
-      onAdd
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React15.createElement(Stack5, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React15.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React15.createElement(Typography7, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      actions,
+      ...props
     }
-  )));
+  ));
 };
 
-// src/components/font-variable-creation.tsx
-import * as React11 from "react";
-import { useState as useState7 } from "react";
-import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
-import { PopoverScrollableContent as PopoverScrollableContent4 } from "@elementor/editor-editing-panel";
-import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
-import { ArrowLeftIcon as ArrowLeftIcon3, TextIcon } from "@elementor/icons";
-import { Button as Button5, CardActions as CardActions3, Divider as Divider4, IconButton as IconButton5 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
-
-// src/components/fields/font-field.tsx
-import * as React10 from "react";
-import { useRef as useRef2, useState as useState6 } from "react";
-import { FontFamilySelector } from "@elementor/editor-controls";
-import { useFontFamilies, useSectionWidth } from "@elementor/editor-editing-panel";
-import { ChevronDownIcon } from "@elementor/icons";
-import {
-  bindPopover,
-  bindTrigger,
-  FormHelperText as FormHelperText3,
-  FormLabel as FormLabel3,
-  Grid as Grid3,
-  Popover,
-  UnstableTag,
-  usePopupState
-} from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
-var FontField = ({ value, onChange }) => {
-  const [fontFamily, setFontFamily] = useState6(value);
-  const [errorMessage, setErrorMessage] = useState6("");
-  const defaultRef = useRef2(null);
-  const anchorRef = usePopoverContentRef() ?? defaultRef;
-  const fontPopoverState = usePopupState({ variant: "popover" });
-  const fontFamilies = useFontFamilies();
-  const sectionWidth = useSectionWidth();
-  const handleChange = (newValue) => {
-    setFontFamily(newValue);
-    const errorMsg = validateValue(newValue);
-    setErrorMessage(errorMsg);
-    onChange(errorMsg ? "" : newValue);
-  };
-  const handleFontFamilyChange = (newFontFamily) => {
-    handleChange(newFontFamily);
-    fontPopoverState.close();
+// src/components/ui/variable/assigned-variable.tsx
+var AssignedVariable = ({ variable, propTypeKey }) => {
+  const { fallbackPropTypeUtil, startIcon, propTypeUtil } = getVariableType(propTypeKey);
+  const { setValue } = useBoundProp5();
+  const anchorRef = useRef(null);
+  const popupId = useId2();
+  const popupState = usePopupState({
+    variant: "popover",
+    popupId: `elementor-variables-list-${popupId}`
+  });
+  const unlinkVariable = () => {
+    const fallbackValue = fallbackPropTypeUtil.create(variable.value);
+    setValue(fallbackValue);
   };
-  return /* @__PURE__ */ React10.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(FormLabel3, { size: "tiny" }, __11("Value", "elementor"))), /* @__PURE__ */ React10.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(
-    UnstableTag,
+  const StartIcon = startIcon || (() => null);
+  return /* @__PURE__ */ React16.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React16.createElement(
+    AssignedTag,
     {
-      variant: "outlined",
-      label: fontFamily,
-      endIcon: /* @__PURE__ */ React10.createElement(ChevronDownIcon, { fontSize: "tiny" }),
-      ...bindTrigger(fontPopoverState),
-      fullWidth: true
+      label: variable.label,
+      startIcon: /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(ColorFilterIcon2, { fontSize: SIZE5 }), /* @__PURE__ */ React16.createElement(StartIcon, { value: variable.value })),
+      onUnlink: unlinkVariable,
+      ...bindTrigger(popupState)
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React16.createElement(
     Popover,
     {
-      disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef.current,
-      anchorOrigin: { vertical: "top", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: -20 },
-      ...bindPopover(fontPopoverState)
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      PaperProps: {
+        sx: { my: 1 }
+      },
+      ...bindPopover(popupState)
     },
-    /* @__PURE__ */ React10.createElement(
-      FontFamilySelector,
+    /* @__PURE__ */ React16.createElement(
+      VariableSelectionPopover,
       {
-        fontFamilies,
-        fontFamily,
-        onFontFamilyChange: handleFontFamilyChange,
-        onClose: fontPopoverState.close,
-        sectionWidth
+        selectedVariable: variable,
+        closePopover: popupState.close,
+        propTypeKey: propTypeUtil.key
       }
     )
-  ), errorMessage && /* @__PURE__ */ React10.createElement(FormHelperText3, { error: true }, errorMessage)));
+  ));
 };
 
-// src/components/font-variable-creation.tsx
-var SIZE5 = "tiny";
-var FontVariableCreation = ({ onClose, onGoBack }) => {
-  const { setValue: setVariable } = useBoundProp4(fontVariablePropTypeUtil);
-  const [fontFamily, setFontFamily] = useState7("");
-  const [label, setLabel] = useState7("");
-  const resetFields = () => {
-    setFontFamily("");
-    setLabel("");
-  };
-  const closePopover = () => {
-    resetFields();
-    onClose();
-  };
-  const handleCreate = () => {
-    createVariable({
-      value: fontFamily,
-      label,
-      type: fontVariablePropTypeUtil.key
-    }).then((key) => {
-      setVariable(key);
-      closePopover();
-    });
-  };
-  const hasEmptyValue = () => {
-    return "" === fontFamily.trim() || "" === label.trim();
-  };
-  const isSubmitDisabled = hasEmptyValue();
-  return /* @__PURE__ */ React11.createElement(PopoverScrollableContent4, { height: "auto" }, /* @__PURE__ */ React11.createElement(
-    PopoverHeader4,
-    {
-      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(IconButton5, { size: SIZE5, "aria-label": __12("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(ArrowLeftIcon3, { fontSize: SIZE5 })), /* @__PURE__ */ React11.createElement(TextIcon, { fontSize: SIZE5 })),
-      title: __12("Create variable", "elementor"),
-      onClose: closePopover
-    }
-  ), /* @__PURE__ */ React11.createElement(Divider4, null), /* @__PURE__ */ React11.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React11.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React11.createElement(FontField, { value: fontFamily, onChange: setFontFamily })), /* @__PURE__ */ React11.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreate }, __12("Create", "elementor"))));
-};
+// src/components/ui/variable/deleted-variable.tsx
+import * as React20 from "react";
+import { useId as useId3, useRef as useRef2, useState as useState9 } from "react";
+import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
+import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip, Popover as Popover2, usePopupState as usePopupState2 } from "@elementor/ui";
 
-// src/components/font-variable-edit.tsx
-import * as React12 from "react";
+// src/components/variable-restore.tsx
+import * as React17 from "react";
 import { useState as useState8 } from "react";
-import { PopoverContent as PopoverContent4, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
-import { PopoverScrollableContent as PopoverScrollableContent5 } from "@elementor/editor-editing-panel";
-import { PopoverHeader as PopoverHeader5 } from "@elementor/editor-ui";
-import { ArrowLeftIcon as ArrowLeftIcon4, TextIcon as TextIcon2, TrashIcon as TrashIcon2 } from "@elementor/icons";
-import { Button as Button6, CardActions as CardActions4, Divider as Divider5, IconButton as IconButton6 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
+import { PopoverBody as PopoverBody4 } from "@elementor/editor-editing-panel";
+import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
+import { Button as Button7, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4 } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
 var SIZE6 = "tiny";
-var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
-  const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp5(fontVariablePropTypeUtil);
-  const [deleteConfirmation, setDeleteConfirmation] = useState8(false);
-  const variable = useVariable(editId);
+var VariableRestore = ({ variableId, onClose, onSubmit }) => {
+  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+  const { setValue: notifyBoundPropChange } = useBoundProp6(propTypeUtil);
+  const variable = useVariable(variableId);
   if (!variable) {
-    throw new Error(`Global font variable "${editId}" not found`);
+    throw new Error(`Global ${variableType} variable not found`);
   }
-  const [fontFamily, setFontFamily] = useState8(variable.value);
+  const [errorMessage, setErrorMessage] = useState8("");
   const [label, setLabel] = useState8(variable.label);
-  const handleUpdate = () => {
-    updateVariable(editId, {
-      value: fontFamily,
-      label
-    }).then(() => {
-      maybeTriggerBoundPropChange();
-      onSubmit?.();
-    });
-  };
-  const handleDelete = () => {
-    deleteVariable(editId).then(() => {
-      maybeTriggerBoundPropChange();
+  const [value, setValue] = useState8(variable.value);
+  const { labelFieldError, setLabelFieldError } = useLabelError({
+    value: variable.label,
+    message: ERROR_MESSAGES.DUPLICATED_LABEL
+  });
+  const handleRestore = () => {
+    restoreVariable(variableId, label, value).then(() => {
+      notifyBoundPropChange(variableId);
       onSubmit?.();
+    }).catch((error) => {
+      const mappedError = mapServerError(error);
+      if (mappedError && "label" === mappedError.field) {
+        setLabel("");
+        setLabelFieldError({
+          value: label,
+          message: mappedError.message
+        });
+        return;
+      }
+      setErrorMessage(ERROR_MESSAGES.UNEXPECTED_ERROR);
     });
   };
-  const maybeTriggerBoundPropChange = () => {
-    if (editId === assignedValue) {
-      notifyBoundPropChange(editId);
-    }
-  };
-  const handleDeleteConfirmation = () => {
-    setDeleteConfirmation(true);
-  };
-  const closeDeleteDialog = () => () => {
-    setDeleteConfirmation(false);
-  };
-  const hasEmptyValue = () => {
-    return !fontFamily.trim() || !label.trim();
+  const hasEmptyValues = () => {
+    return !value.trim() || !label.trim();
   };
   const noValueChanged = () => {
-    return fontFamily === variable.value && label === variable.label;
+    return value === variable.value && label === variable.label;
   };
-  const isSubmitDisabled = noValueChanged() || hasEmptyValue();
-  const actions = [];
-  actions.push(
-    /* @__PURE__ */ React12.createElement(
-      IconButton6,
-      {
-        key: "delete",
-        size: SIZE6,
-        "aria-label": __13("Delete", "elementor"),
-        onClick: handleDeleteConfirmation
-      },
-      /* @__PURE__ */ React12.createElement(TrashIcon2, { fontSize: SIZE6 })
-    )
-  );
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(PopoverScrollableContent5, { height: "auto" }, /* @__PURE__ */ React12.createElement(
-    PopoverHeader5,
+  const hasErrors = () => {
+    return !!errorMessage;
+  };
+  const isSubmitDisabled = noValueChanged() || hasEmptyValues() || hasErrors();
+  return /* @__PURE__ */ React17.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React17.createElement(PopoverBody4, { height: "auto" }, /* @__PURE__ */ React17.createElement(
+    PopoverHeader4,
     {
-      icon: /* @__PURE__ */ React12.createElement(React12.Fragment, null, onGoBack && /* @__PURE__ */ React12.createElement(
-        IconButton6,
-        {
-          size: SIZE6,
-          "aria-label": __13("Go Back", "elementor"),
-          onClick: onGoBack
-        },
-        /* @__PURE__ */ React12.createElement(ArrowLeftIcon4, { fontSize: SIZE6 })
-      ), /* @__PURE__ */ React12.createElement(TextIcon2, { fontSize: SIZE6 })),
-      title: __13("Edit variable", "elementor"),
-      onClose,
-      actions
+      icon: /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE6 }),
+      title: __15("Restore variable", "elementor"),
+      onClose
     }
-  ), /* @__PURE__ */ React12.createElement(Divider5, null), /* @__PURE__ */ React12.createElement(PopoverContent4, { p: 2 }, /* @__PURE__ */ React12.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React12.createElement(FontField, { value: fontFamily, onChange: setFontFamily })), /* @__PURE__ */ React12.createElement(CardActions4, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(Button6, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __13("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React12.createElement(
-    DeleteConfirmationDialog,
+  ), /* @__PURE__ */ React17.createElement(Divider5, null), /* @__PURE__ */ React17.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React17.createElement(
+    LabelField,
     {
-      open: true,
-      label,
-      onConfirm: handleDelete,
-      closeDialog: closeDeleteDialog()
+      value: label,
+      error: labelFieldError,
+      onChange: (newValue) => {
+        setLabel(newValue);
+        setErrorMessage("");
+      }
     }
-  ));
+  ), /* @__PURE__ */ React17.createElement(
+    ValueField,
+    {
+      value,
+      onChange: (newValue) => {
+        setValue(newValue);
+        setErrorMessage("");
+      }
+    }
+  ), errorMessage && /* @__PURE__ */ React17.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React17.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React17.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __15("Restore", "elementor")))));
 };
 
-// src/components/font-variables-selection.tsx
-import * as React13 from "react";
-import { useState as useState9 } from "react";
-import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
-import { PopoverScrollableContent as PopoverScrollableContent6 } from "@elementor/editor-editing-panel";
-import { PopoverHeader as PopoverHeader6, PopoverMenuList as PopoverMenuList2, PopoverSearch as PopoverSearch2 } from "@elementor/editor-ui";
-import { ColorFilterIcon as ColorFilterIcon2, PlusIcon as PlusIcon2, SettingsIcon as SettingsIcon2, TextIcon as TextIcon3 } from "@elementor/icons";
-import { Divider as Divider6, IconButton as IconButton7 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
-var SIZE7 = "tiny";
-var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
-  const { value: variable, setValue: setVariable } = useBoundProp6(fontVariablePropTypeUtil);
-  const [searchValue, setSearchValue] = useState9("");
-  const {
-    list: variables,
-    hasMatches: hasSearchResults,
-    isSourceNotEmpty: hasVariables
-  } = useFilteredVariables(searchValue, fontVariablePropTypeUtil.key);
-  const handleSetVariable = (key) => {
-    setVariable(key);
-    closePopover();
-  };
-  const actions = [];
-  if (onAdd) {
-    actions.push(
-      /* @__PURE__ */ React13.createElement(IconButton7, { key: "add", size: SIZE7, onClick: onAdd }, /* @__PURE__ */ React13.createElement(PlusIcon2, { fontSize: SIZE7 }))
-    );
-  }
-  if (onSettings) {
-    actions.push(
-      /* @__PURE__ */ React13.createElement(IconButton7, { key: "settings", size: SIZE7, onClick: onSettings }, /* @__PURE__ */ React13.createElement(SettingsIcon2, { fontSize: SIZE7 }))
-    );
-  }
-  const items = variables.map(({ value, label, key }) => ({
-    type: "item",
-    value: key,
-    label,
-    icon: /* @__PURE__ */ React13.createElement(TextIcon3, { fontSize: SIZE7 }),
-    secondaryText: value,
-    onEdit: () => onEdit?.(key)
-  }));
-  const handleSearch = (search) => {
-    setSearchValue(search);
-  };
-  const handleClearSearch = () => {
-    setSearchValue("");
-  };
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
-    PopoverHeader6,
-    {
-      title: __14("Variables", "elementor"),
-      onClose: closePopover,
-      icon: /* @__PURE__ */ React13.createElement(ColorFilterIcon2, { fontSize: SIZE7 }),
-      actions
-    }
-  ), hasVariables && /* @__PURE__ */ React13.createElement(
-    PopoverSearch2,
-    {
-      value: searchValue,
-      onSearch: handleSearch,
-      placeholder: __14("Search", "elementor")
-    }
-  ), /* @__PURE__ */ React13.createElement(Divider6, null), /* @__PURE__ */ React13.createElement(PopoverScrollableContent6, null, hasVariables && hasSearchResults && /* @__PURE__ */ React13.createElement(
-    PopoverMenuList2,
-    {
-      items,
-      onSelect: handleSetVariable,
-      onClose: () => {
-      },
-      selectedValue: variable,
-      "data-testid": "font-variables-list",
-      menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React13.createElement(MenuItemContent, { item })
-    }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React13.createElement(
-    NoSearchResults,
-    {
-      searchValue,
-      onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React13.createElement(TextIcon3, { fontSize: "large" })
-    }
-  ), !hasVariables && /* @__PURE__ */ React13.createElement(
-    NoVariables,
+// src/components/ui/deleted-variable-alert.tsx
+import * as React18 from "react";
+import { useSectionWidth } from "@elementor/editor-editing-panel";
+import { Alert as Alert2, AlertAction, AlertTitle, ClickAwayListener } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
+var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
+  const sectionWidth = useSectionWidth();
+  return /* @__PURE__ */ React18.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React18.createElement(
+    Alert2,
     {
-      title: __14("Create your first font variable", "elementor"),
-      icon: /* @__PURE__ */ React13.createElement(TextIcon3, { fontSize: "large" }),
-      onAdd
-    }
-  )));
-};
-
-// 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] = useState10(VIEW_LIST);
-  const editIdRef = useRef3("");
-  const anchorRef = useRef3(null);
-  return /* @__PURE__ */ React14.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React14.createElement(Box2, { ref: anchorRef }, renderStage({
-    propTypeKey,
-    currentView,
-    selectedVariable,
-    editIdRef,
-    setCurrentView,
-    closePopover
-  })));
+      variant: "standard",
+      severity: "warning",
+      onClose,
+      action: /* @__PURE__ */ React18.createElement(React18.Fragment, null, onUnlink && /* @__PURE__ */ React18.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __16("Unlink", "elementor")), onRestore && /* @__PURE__ */ React18.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __16("Restore", "elementor"))),
+      sx: { width: sectionWidth }
+    },
+    /* @__PURE__ */ React18.createElement(AlertTitle, null, __16("Deleted variable", "elementor")),
+    __16("The variable", "elementor"),
+    " '",
+    label,
+    "'",
+    " ",
+    __16(
+      "has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.",
+      "elementor"
+    )
+  ));
 };
-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__ */ React14.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__ */ React14.createElement(
-        FontVariableCreation,
-        {
-          onGoBack: () => props.setCurrentView(VIEW_LIST),
-          onClose: props.closePopover
-        }
-      );
-    }
-    if (VIEW_EDIT === props.currentView) {
-      return /* @__PURE__ */ React14.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__ */ React14.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__ */ React14.createElement(
-        ColorVariableCreation,
-        {
-          onGoBack: () => props.setCurrentView(VIEW_LIST),
-          onClose: props.closePopover
-        }
-      );
-    }
-    if (VIEW_EDIT === props.currentView) {
-      return /* @__PURE__ */ React14.createElement(
-        ColorVariableEdit,
-        {
-          editId: props.editIdRef.current ?? "",
-          onGoBack: () => props.setCurrentView(VIEW_LIST),
-          onClose: props.closePopover,
-          onSubmit: handleSubmitOnEdit
-        }
-      );
-    }
-  }
-  return null;
-}
 
-// src/components/ui/tags/assigned-tag.tsx
-import * as React15 from "react";
-import { DetachIcon } from "@elementor/icons";
-import { Box as Box3, IconButton as IconButton8, Stack as Stack3, Typography as Typography5, UnstableTag as Tag } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
-var SIZE8 = "tiny";
-var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
-  const actions = [];
-  if (onUnlink) {
-    actions.push(
-      /* @__PURE__ */ React15.createElement(IconButton8, { key: "unlink", size: SIZE8, onClick: onUnlink, "aria-label": __15("Unlink", "elementor") }, /* @__PURE__ */ React15.createElement(DetachIcon, { fontSize: SIZE8 }))
-    );
-  }
-  return /* @__PURE__ */ React15.createElement(
-    Tag,
+// src/components/ui/tags/deleted-tag.tsx
+import * as React19 from "react";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2 } from "@elementor/icons";
+import { Box as Box6, Chip, Tooltip as Tooltip2, Typography as Typography8 } from "@elementor/ui";
+import { __ as __17 } from "@wordpress/i18n";
+var DeletedTag = React19.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React19.createElement(
+    Chip,
     {
-      fullWidth: true,
-      showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React15.createElement(Stack3, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React15.createElement(Box3, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React15.createElement(Typography5, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
-      actions,
+      ref,
+      size: "tiny",
+      color: "warning",
+      shape: "rounded",
+      variant: "standard",
+      onClick,
+      icon: /* @__PURE__ */ React19.createElement(AlertTriangleFilledIcon2, null),
+      label: /* @__PURE__ */ React19.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React19.createElement(Box6, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React19.createElement(Typography8, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React19.createElement(Typography8, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __17("deleted", "elementor"), ")"))),
+      sx: {
+        height: (theme) => theme.spacing(3.5),
+        borderRadius: (theme) => theme.spacing(1),
+        justifyContent: "flex-start",
+        width: "100%"
+      },
       ...props
     }
   );
-};
+});
 
-// src/components/ui/variable/assigned-variable.tsx
-var AssignedVariable = ({
-  variable,
-  variablePropTypeUtil,
-  fallbackPropTypeUtil,
-  additionalStartIcon
-}) => {
+// src/components/ui/variable/deleted-variable.tsx
+var DeletedVariable = ({ variable, propTypeKey }) => {
+  const { fallbackPropTypeUtil, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = useBoundProp7();
-  const anchorRef = useRef4(null);
-  const popupId = useId2();
+  const userPermissions = usePermissions();
+  const [showInfotip, setShowInfotip] = useState9(false);
+  const toggleInfotip = () => setShowInfotip((prev) => !prev);
+  const closeInfotip = () => setShowInfotip(false);
+  const deletedChipAnchorRef = useRef2(null);
+  const popupId = useId3();
   const popupState = usePopupState2({
     variant: "popover",
-    popupId: `elementor-variables-list-${popupId}`
+    popupId: `elementor-variables-restore-${popupId}`
   });
-  const unlinkVariable = () => {
-    setValue(fallbackPropTypeUtil.create(variable.value));
+  const handlers = {};
+  if (userPermissions.canUnlink()) {
+    handlers.onUnlink = () => {
+      setValue(fallbackPropTypeUtil.create(variable.value));
+    };
+  }
+  if (userPermissions.canRestore()) {
+    handlers.onRestore = () => {
+      if (!variable.key) {
+        return;
+      }
+      restoreVariable(variable.key).then((key) => {
+        setValue(propTypeUtil.create(key));
+        closeInfotip();
+      }).catch(() => {
+        closeInfotip();
+        popupState.setAnchorEl(deletedChipAnchorRef.current);
+        popupState.open();
+      });
+    };
+  }
+  const handleRestoreWithOverrides = () => {
+    popupState.close();
   };
-  return /* @__PURE__ */ React16.createElement(Box4, { ref: anchorRef }, /* @__PURE__ */ React16.createElement(
-    AssignedTag,
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React20.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React20.createElement(
+    Infotip,
     {
-      label: variable.label,
-      startIcon: /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(ColorFilterIcon3, { fontSize: SIZE8 }), additionalStartIcon),
-      onUnlink: unlinkVariable,
-      ...bindTrigger2(popupState)
-    }
-  ), /* @__PURE__ */ React16.createElement(
+      color: "warning",
+      placement: "right-start",
+      open: showInfotip,
+      disableHoverListener: true,
+      onClose: closeInfotip,
+      content: /* @__PURE__ */ React20.createElement(
+        DeletedVariableAlert,
+        {
+          onClose: closeInfotip,
+          onUnlink: handlers.onUnlink,
+          onRestore: handlers.onRestore,
+          label: variable.label
+        }
+      ),
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [0, 24] }
+            }
+          ]
+        }
+      }
+    },
+    /* @__PURE__ */ React20.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
+  ), /* @__PURE__ */ React20.createElement(
     Popover2,
     {
       disableScrollLock: true,
-      anchorEl: anchorRef.current,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },
       PaperProps: {
@@ -1296,237 +1687,300 @@ var AssignedVariable = ({
       },
       ...bindPopover2(popupState)
     },
-    /* @__PURE__ */ React16.createElement(
-      VariableSelectionPopover,
+    /* @__PURE__ */ React20.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React20.createElement(
+      VariableRestore,
       {
-        selectedVariable: variable,
-        closePopover: popupState.close,
-        propTypeKey: variablePropTypeUtil.key
+        variableId: variable.key ?? "",
+        onClose: popupState.close,
+        onSubmit: handleRestoreWithOverrides
       }
+    ))
+  )));
+};
+
+// src/components/ui/variable/missing-variable.tsx
+import * as React23 from "react";
+import { useState as useState10 } from "react";
+import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
+import { Backdrop as Backdrop2, Infotip as Infotip2 } from "@elementor/ui";
+import { __ as __19 } from "@wordpress/i18n";
+
+// src/components/ui/missing-variable-alert.tsx
+import * as React21 from "react";
+import { useSectionWidth as useSectionWidth2 } from "@elementor/editor-editing-panel";
+import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener2 } from "@elementor/ui";
+import { __ as __18 } from "@wordpress/i18n";
+var MissingVariableAlert = ({ onClose, onClear }) => {
+  const sectionWidth = useSectionWidth2();
+  return /* @__PURE__ */ React21.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React21.createElement(
+    Alert3,
+    {
+      variant: "standard",
+      severity: "warning",
+      onClose,
+      action: /* @__PURE__ */ React21.createElement(React21.Fragment, null, onClear && /* @__PURE__ */ React21.createElement(AlertAction2, { variant: "contained", onClick: onClear }, __18("Clear", "elementor"))),
+      sx: { width: sectionWidth }
+    },
+    /* @__PURE__ */ React21.createElement(AlertTitle2, null, __18("This variable is missing", "elementor")),
+    __18(
+      "It may have been deleted. Try clearing this field and select a different value or variable.",
+      "elementor"
     )
   ));
 };
 
-// src/components/ui/variable/deleted-variable.tsx
-import * as React18 from "react";
-import { useRef as useRef5 } from "react";
-import { Box as Box6 } from "@elementor/ui";
-
-// src/components/ui/tags/deleted-tag.tsx
-import * as React17 from "react";
-import { ColorFilterIcon as ColorFilterIcon4 } from "@elementor/icons";
-import { Box as Box5, Typography as Typography6, UnstableTag as Tag2 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
-var DeletedTag = ({ label }) => {
-  return /* @__PURE__ */ React17.createElement(
-    Tag2,
+// src/components/ui/tags/missing-tag.tsx
+import * as React22 from "react";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
+import { Chip as Chip2 } from "@elementor/ui";
+var MissingTag = React22.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React22.createElement(
+    Chip2,
     {
-      showActionsOnHover: true,
-      fullWidth: true,
-      label: /* @__PURE__ */ React17.createElement(Box5, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React17.createElement(Typography6, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
-      startIcon: /* @__PURE__ */ React17.createElement(ColorFilterIcon4, { fontSize: "tiny" }),
-      endAdornment: /* @__PURE__ */ React17.createElement(Typography6, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, "(", __16("deleted", "elementor"), ")")
+      ref,
+      size: "tiny",
+      color: "warning",
+      shape: "rounded",
+      variant: "standard",
+      onClick,
+      icon: /* @__PURE__ */ React22.createElement(AlertTriangleFilledIcon3, null),
+      label,
+      sx: {
+        height: (theme) => theme.spacing(3.5),
+        borderRadius: (theme) => theme.spacing(1),
+        justifyContent: "flex-start",
+        width: "100%"
+      },
+      ...props
     }
   );
-};
+});
 
-// src/components/ui/variable/deleted-variable.tsx
-var DeletedVariable = ({ variable }) => {
-  const anchorRef = useRef5(null);
-  return /* @__PURE__ */ React18.createElement(Box6, { ref: anchorRef }, /* @__PURE__ */ React18.createElement(DeletedTag, { label: variable.label }));
+// src/components/ui/variable/missing-variable.tsx
+var MissingVariable = () => {
+  const { setValue } = useBoundProp8();
+  const [infotipVisible, setInfotipVisible] = useState10(false);
+  const toggleInfotip = () => setInfotipVisible((prev) => !prev);
+  const closeInfotip = () => setInfotipVisible(false);
+  const clearValue = () => setValue(null);
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, infotipVisible && /* @__PURE__ */ React23.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React23.createElement(
+    Infotip2,
+    {
+      color: "warning",
+      placement: "right-start",
+      open: infotipVisible,
+      disableHoverListener: true,
+      onClose: closeInfotip,
+      content: /* @__PURE__ */ React23.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [0, 24] }
+            }
+          ]
+        }
+      }
+    },
+    /* @__PURE__ */ React23.createElement(MissingTag, { label: __19("Missing variable", "elementor"), onClick: toggleInfotip })
+  ));
 };
 
-// src/controls/color-variable-control.tsx
-var ColorVariableControl = () => {
-  const { value: variableValue } = useBoundProp8(colorVariablePropTypeUtil);
-  const assignedVariable = useVariable(variableValue);
+// src/controls/variable-control.tsx
+var VariableControl = () => {
+  const boundProp = useBoundProp9().value;
+  const assignedVariable = useVariable(boundProp?.value);
   if (!assignedVariable) {
-    throw new Error(`Global color variable ${variableValue} not found`);
+    return /* @__PURE__ */ React24.createElement(MissingVariable, null);
   }
-  const isVariableDeleted = assignedVariable?.deleted;
-  if (isVariableDeleted) {
-    return /* @__PURE__ */ React19.createElement(DeletedVariable, { variable: assignedVariable });
+  const { $$type: propTypeKey } = boundProp;
+  if (assignedVariable?.deleted) {
+    return /* @__PURE__ */ React24.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
   }
-  return /* @__PURE__ */ React19.createElement(
-    AssignedVariable,
-    {
-      variable: assignedVariable,
-      variablePropTypeUtil: colorVariablePropTypeUtil,
-      fallbackPropTypeUtil: colorPropTypeUtil,
-      additionalStartIcon: /* @__PURE__ */ React19.createElement(ColorIndicator, { size: "inherit", value: assignedVariable.value, component: "span" })
-    }
-  );
+  return /* @__PURE__ */ React24.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
-// src/hooks/use-prop-color-variable-action.tsx
-import * as React20 from "react";
-import { useBoundProp as useBoundProp9 } from "@elementor/editor-editing-panel";
-import { ColorFilterIcon as ColorFilterIcon5 } from "@elementor/icons";
-import { __ as __17 } from "@wordpress/i18n";
-
-// src/utils.ts
-var hasAssignedColorVariable = (propValue) => {
-  return !!colorVariablePropTypeUtil.isValid(propValue);
-};
-var supportsColorVariables = (propType) => {
-  return propType.kind === "union" && colorVariablePropTypeUtil.key in propType.prop_types;
-};
-var hasAssignedFontVariable = (propValue) => {
-  return !!fontVariablePropTypeUtil.isValid(propValue);
-};
-var supportsFontVariables = (propType) => {
-  return propType.kind === "union" && fontVariablePropTypeUtil.key in propType.prop_types;
-};
-
-// src/hooks/use-prop-color-variable-action.tsx
-var usePropColorVariableAction = () => {
-  const { propType } = useBoundProp9();
-  const visible = !!propType && supportsColorVariables(propType);
+// src/hooks/use-prop-variable-action.tsx
+import * as React25 from "react";
+import { useBoundProp as useBoundProp10 } from "@elementor/editor-editing-panel";
+import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
+import { __ as __20 } from "@wordpress/i18n";
+var usePropVariableAction = () => {
+  const { propType, path } = useBoundProp10();
+  const variable = resolveVariableFromPropType(propType);
   return {
-    visible,
-    icon: ColorFilterIcon5,
-    title: __17("Variables", "elementor"),
+    visible: Boolean(variable),
+    icon: ColorFilterIcon3,
+    title: __20("Variables", "elementor"),
     content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React20.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
+      if (!variable) {
+        return null;
+      }
+      trackOpenVariablePopover(path, variable.variableType);
+      return /* @__PURE__ */ React25.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
-
-// src/repeater-injections.ts
-import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elementor/editor-controls";
-import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
-
-// src/components/variables-repeater-item-slot.tsx
-import * as React21 from "react";
-var useColorVariable = (value) => {
-  const variableId = value?.value?.color?.value;
-  return useVariable(variableId || "");
-};
-var BackgroundRepeaterColorIndicator = ({ value }) => {
-  const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React21.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
-};
-var BackgroundRepeaterLabel = ({ value }) => {
-  const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React21.createElement("span", null, colorVariable?.label);
-};
-var BoxShadowRepeaterColorIndicator = ({ value }) => {
-  const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React21.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
-};
-
-// src/repeater-injections.ts
-function registerRepeaterInjections() {
-  injectIntoRepeaterItemIcon({
-    id: "color-variables-background-icon",
-    component: BackgroundRepeaterColorIndicator,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
-    }
-  });
-  injectIntoRepeaterItemIcon({
-    id: "color-variables-icon",
-    component: BoxShadowRepeaterColorIndicator,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(shadowPropTypeUtil.extract(prop)?.color);
-    }
-  });
-  injectIntoRepeaterItemLabel({
-    id: "color-variables-label",
-    component: BackgroundRepeaterLabel,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+var resolveVariableFromPropType = (propType) => {
+  if (propType.kind !== "union") {
+    return void 0;
+  }
+  for (const key of Object.keys(propType.prop_types)) {
+    const variable = getVariableType(key);
+    if (variable) {
+      return variable;
     }
-  });
-}
-
-// src/transformers/variable-transformer.ts
-import { createTransformer } from "@elementor/editor-canvas";
-var variableTransformer = createTransformer((value) => {
-  if (!value.trim()) {
-    return null;
   }
-  return `var(--${value})`;
-});
-
-// src/init-color-variables.ts
-var { registerPopoverAction } = controlActionsMenu;
-function initColorVariables() {
-  registerControlReplacement({
-    component: ColorVariableControl,
-    condition: ({ value }) => hasAssignedColorVariable(value)
-  });
-  registerPopoverAction({
-    id: "color-variables",
-    useProps: usePropColorVariableAction
+  return void 0;
+};
+var trackOpenVariablePopover = (path, variableType) => {
+  trackVariableEvent({
+    varType: variableType,
+    controlPath: path.join("."),
+    action: "open"
   });
-  styleTransformersRegistry.register(colorVariablePropTypeUtil.key, variableTransformer);
-  registerRepeaterInjections();
-}
+};
 
-// 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/register-variable-types.tsx
+import * as React28 from "react";
+import { colorPropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
+import { BrushIcon, TextIcon as TextIcon2 } from "@elementor/icons";
 
-// src/controls/font-variable-control.tsx
-import * as React22 from "react";
-import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
-import { stringPropTypeUtil } from "@elementor/editor-props";
-var FontVariableControl = () => {
-  const { value: variableValue } = useBoundProp10(fontVariablePropTypeUtil);
-  const assignedVariable = useVariable(variableValue);
-  if (!assignedVariable) {
-    throw new Error(`Global font variable ${variableValue} not found`);
-  }
-  const isVariableDeleted = assignedVariable?.deleted;
-  if (isVariableDeleted) {
-    return /* @__PURE__ */ React22.createElement(DeletedVariable, { variable: assignedVariable });
-  }
-  return /* @__PURE__ */ React22.createElement(
-    AssignedVariable,
+// src/components/fields/color-field.tsx
+import * as React26 from "react";
+import { useRef as useRef3, useState as useState11 } from "react";
+import { FormHelperText as FormHelperText5, FormLabel as FormLabel2, Grid as Grid2, UnstableColorField } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
+var ColorField = ({ value, onChange }) => {
+  const [color, setColor] = useState11(value);
+  const [errorMessage, setErrorMessage] = useState11("");
+  const defaultRef = useRef3(null);
+  const anchorRef = usePopoverContentRef() ?? defaultRef.current;
+  const handleChange = (newValue) => {
+    setColor(newValue);
+    const errorMsg = validateValue(newValue);
+    setErrorMessage(errorMsg);
+    onChange(errorMsg ? "" : newValue);
+  };
+  return /* @__PURE__ */ React26.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(FormLabel2, { size: "tiny" }, __21("Value", "elementor"))), /* @__PURE__ */ React26.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
+    UnstableColorField,
     {
-      variable: assignedVariable,
-      variablePropTypeUtil: fontVariablePropTypeUtil,
-      fallbackPropTypeUtil: stringPropTypeUtil
+      size: "tiny",
+      fullWidth: true,
+      value: color,
+      onChange: handleChange,
+      error: errorMessage ?? void 0,
+      slotProps: {
+        colorPicker: {
+          anchorEl: anchorRef,
+          anchorOrigin: { vertical: "top", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: -10 }
+        }
+      }
     }
-  );
+  ), errorMessage && /* @__PURE__ */ React26.createElement(FormHelperText5, { error: true }, errorMessage)));
 };
 
-// src/hooks/use-prop-font-variable-action.tsx
-import * as React23 from "react";
-import { useBoundProp as useBoundProp11 } from "@elementor/editor-editing-panel";
-import { ColorFilterIcon as ColorFilterIcon6 } from "@elementor/icons";
-import { __ as __18 } from "@wordpress/i18n";
-var usePropFontVariableAction = () => {
-  const { propType } = useBoundProp11();
-  const visible = !!propType && supportsFontVariables(propType);
-  return {
-    visible,
-    icon: ColorFilterIcon6,
-    title: __18("Variables", "elementor"),
-    content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React23.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
-    }
+// src/components/fields/font-field.tsx
+import * as React27 from "react";
+import { useRef as useRef4, useState as useState12 } from "react";
+import { enqueueFont as enqueueFont2, ItemSelector } from "@elementor/editor-controls";
+import { useFontFamilies, useSectionWidth as useSectionWidth3 } from "@elementor/editor-editing-panel";
+import { ChevronDownIcon, TextIcon } from "@elementor/icons";
+import {
+  bindPopover as bindPopover3,
+  bindTrigger as bindTrigger2,
+  FormHelperText as FormHelperText6,
+  FormLabel as FormLabel3,
+  Grid as Grid3,
+  Popover as Popover3,
+  UnstableTag,
+  usePopupState as usePopupState3
+} from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
+var FontField = ({ value, onChange }) => {
+  const [fontFamily, setFontFamily] = useState12(value);
+  const [errorMessage, setErrorMessage] = useState12("");
+  const defaultRef = useRef4(null);
+  const anchorRef = usePopoverContentRef() ?? defaultRef.current;
+  const fontPopoverState = usePopupState3({ variant: "popover" });
+  const fontFamilies = useFontFamilies();
+  const sectionWidth = useSectionWidth3();
+  const mapFontSubs = React27.useMemo(() => {
+    return fontFamilies.map(({ label, fonts }) => ({
+      label,
+      items: fonts
+    }));
+  }, [fontFamilies]);
+  const handleChange = (newValue) => {
+    setFontFamily(newValue);
+    const errorMsg = validateValue(newValue);
+    setErrorMessage(errorMsg);
+    onChange(errorMsg ? "" : newValue);
+  };
+  const handleFontFamilyChange = (newFontFamily) => {
+    handleChange(newFontFamily);
+    fontPopoverState.close();
   };
+  return /* @__PURE__ */ React27.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(FormLabel3, { size: "tiny" }, __22("Value", "elementor"))), /* @__PURE__ */ React27.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    UnstableTag,
+    {
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React27.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      ...bindTrigger2(fontPopoverState),
+      fullWidth: true
+    }
+  ), /* @__PURE__ */ React27.createElement(
+    Popover3,
+    {
+      disablePortal: true,
+      disableScrollLock: true,
+      anchorEl: anchorRef,
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: -28 },
+      ...bindPopover3(fontPopoverState)
+    },
+    /* @__PURE__ */ React27.createElement(
+      ItemSelector,
+      {
+        itemsList: mapFontSubs,
+        selectedItem: fontFamily,
+        onItemChange: handleFontFamilyChange,
+        onClose: fontPopoverState.close,
+        sectionWidth,
+        title: __22("Font Family", "elementor"),
+        itemStyle: (item) => ({ fontFamily: item.value }),
+        onDebounce: enqueueFont2,
+        icon: TextIcon
+      }
+    )
+  ), errorMessage && /* @__PURE__ */ React27.createElement(FormHelperText6, { error: true }, errorMessage)));
 };
 
-// src/init-font-variables.ts
-var { registerPopoverAction: registerPopoverAction2 } = controlActionsMenu2;
-function initFontVariables() {
-  registerControlReplacement2({
-    component: FontVariableControl,
-    condition: ({ value }) => hasAssignedFontVariable(value)
+// src/register-variable-types.tsx
+function registerVariableTypes() {
+  registerVariableType({
+    valueField: ColorField,
+    icon: BrushIcon,
+    propTypeUtil: colorVariablePropTypeUtil,
+    fallbackPropTypeUtil: colorPropTypeUtil,
+    variableType: "color",
+    startIcon: ({ value }) => /* @__PURE__ */ React28.createElement(ColorIndicator, { size: "inherit", component: "span", value })
   });
-  registerPopoverAction2({
-    id: "font-variables",
-    useProps: usePropFontVariableAction
+  registerVariableType({
+    valueField: FontField,
+    icon: TextIcon2,
+    propTypeUtil: fontVariablePropTypeUtil,
+    fallbackPropTypeUtil: stringPropTypeUtil,
+    variableType: "font"
   });
-  styleTransformersRegistry2.register(fontVariablePropTypeUtil.key, variableTransformer);
 }
 
 // src/renderers/style-variables-renderer.tsx
-import * as React24 from "react";
-import { useEffect, useState as useState11 } from "react";
+import * as React29 from "react";
+import { useEffect as useEffect3, useState as useState13 } from "react";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
@@ -1547,14 +2001,14 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React24.createElement(Portal, { container }, /* @__PURE__ */ React24.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React29.createElement(Portal, { container }, /* @__PURE__ */ React29.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] = useState11({});
-  useEffect(() => {
+  const [variables, setVariables] = useState13({});
+  useEffect3(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -1562,21 +2016,95 @@ function useStyleVariables() {
   }, []);
   return variables;
 }
+function cssVariableDeclaration(key, variable) {
+  const variableName = variable?.deleted ? key : variable.label;
+  const value = variable.value;
+  return `--${variableName}:${value};`;
+}
 function convertToCssVariables(variables) {
-  return Object.entries(variables).map(([key, value]) => `--${key}:${value};`).join("");
+  const listOfVariables = Object.entries(variables);
+  return listOfVariables.map(([key, variable]) => cssVariableDeclaration(key, variable)).join("");
+}
+
+// src/repeater-injections.ts
+import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elementor/editor-controls";
+import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
+
+// src/components/variables-repeater-item-slot.tsx
+import * as React30 from "react";
+var useColorVariable = (value) => {
+  const variableId = value?.value?.color?.value;
+  return useVariable(variableId || "");
+};
+var BackgroundRepeaterColorIndicator = ({ value }) => {
+  const colorVariable = useColorVariable(value);
+  return /* @__PURE__ */ React30.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+};
+var BackgroundRepeaterLabel = ({ value }) => {
+  const colorVariable = useColorVariable(value);
+  return /* @__PURE__ */ React30.createElement("span", null, colorVariable?.label);
+};
+var BoxShadowRepeaterColorIndicator = ({ value }) => {
+  const colorVariable = useColorVariable(value);
+  return /* @__PURE__ */ React30.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+};
+
+// src/repeater-injections.ts
+function registerRepeaterInjections() {
+  injectIntoRepeaterItemIcon({
+    id: "color-variables-background-icon",
+    component: BackgroundRepeaterColorIndicator,
+    condition: ({ value: prop }) => {
+      return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+    }
+  });
+  injectIntoRepeaterItemIcon({
+    id: "color-variables-icon",
+    component: BoxShadowRepeaterColorIndicator,
+    condition: ({ value: prop }) => {
+      return hasAssignedColorVariable(shadowPropTypeUtil.extract(prop)?.color);
+    }
+  });
+  injectIntoRepeaterItemLabel({
+    id: "color-variables-label",
+    component: BackgroundRepeaterLabel,
+    condition: ({ value: prop }) => {
+      return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+    }
+  });
 }
+var hasAssignedColorVariable = (propValue) => {
+  return !!colorVariablePropTypeUtil.isValid(propValue);
+};
 
 // src/init.ts
+var { registerPopoverAction } = controlActionsMenu;
 function init() {
-  initColorVariables();
-  initFontVariables();
+  registerVariableTypes();
+  registerRepeaterInjections();
+  registerControlReplacement({
+    component: VariableControl,
+    condition: ({ value }) => hasAssignedVariable(value)
+  });
+  registerPopoverAction({
+    id: "variables",
+    useProps: usePropVariableAction
+  });
   service.init();
   injectIntoTop({
     id: "canvas-style-variables-render",
     component: StyleVariablesRenderer
   });
+  registerPanel(panel);
+}
+function hasAssignedVariable(propValue) {
+  if (propValue && typeof propValue === "object" && "$$type" in propValue) {
+    return hasVariableType(propValue.$$type);
+  }
+  return false;
 }
 export {
-  init
+  init,
+  registerVariableType
 };
 //# sourceMappingURL=index.mjs.map