@elementor/editor-variables 0.16.0 → 3.32.0-20

package/dist/index.js

@@ -30,63 +30,123 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  init: () => init
+  init: () => init,
+  registerVariableType: () => registerVariableType
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
+var import_editor_editing_panel10 = require("@elementor/editor-editing-panel");
+var import_editor_panels2 = require("@elementor/editor-panels");
 
-// src/init-color-variables.ts
-var import_editor_canvas2 = require("@elementor/editor-canvas");
-var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
+// src/components/variables-manager/variables-manager-panel.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_editor_ui = require("@elementor/editor-ui");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_icons = require("@elementor/icons");
+var import_ui = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+var id = "variables-manager";
+var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
+  id,
+  component: VariablesManagerPanel,
+  allowedEditModes: ["edit", id],
+  onOpen: () => {
+    (0, import_editor_v1_adapters.changeEditMode)(id);
+  },
+  onClose: () => {
+    (0, import_editor_v1_adapters.changeEditMode)("edit");
+  }
+});
+function VariablesManagerPanel() {
+  const { close: closePanel } = usePanelActions();
+  const isDirty = false;
+  usePreventUnload(isDirty);
+  return /* @__PURE__ */ React.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React.createElement(import_ui.ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React.createElement(import_ui.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React.createElement(import_ui.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React.createElement(import_icons.FilterIcon, { fontSize: "inherit" }), (0, import_i18n.__)("Variables Manager", "elementor"))), /* @__PURE__ */ React.createElement(
+    CloseButton,
+    {
+      sx: { marginLeft: "auto" },
+      onClose: () => {
+        closePanel();
+      }
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    import_editor_panels.PanelBody,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    /* @__PURE__ */ React.createElement(import_ui.Divider, null),
+    /* @__PURE__ */ React.createElement(
+      import_ui.Box,
+      {
+        px: 2,
+        sx: {
+          flexGrow: 1,
+          overflowY: "auto"
+        }
+      },
+      "List"
+    )
+  ), /* @__PURE__ */ React.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React.createElement(import_ui.Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, (0, import_i18n.__)("Save changes", "elementor"))))));
+}
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React.createElement(import_ui.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React.createElement(import_icons.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React.createElement(import_ui.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React.createElement(import_ui.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React.createElement("strong", null, (0, import_i18n.__)("Something went wrong", "elementor"))));
+var usePreventUnload = (isDirty) => {
+  (0, import_react.useEffect)(() => {
+    const handleBeforeUnload = (event) => {
+      if (isDirty) {
+        event.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty]);
+};
 
-// src/controls/color-variable-control.tsx
-var React19 = __toESM(require("react"));
+// src/controls/variable-control.tsx
+var React24 = __toESM(require("react"));
 var import_editor_controls9 = require("@elementor/editor-controls");
-var import_editor_props3 = require("@elementor/editor-props");
+
+// src/components/ui/variable/assigned-variable.tsx
+var import_react11 = require("react");
+var React16 = __toESM(require("react"));
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_icons9 = require("@elementor/icons");
+var import_ui16 = require("@elementor/ui");
+
+// src/variables-registry/create-variable-type-registry.ts
+var import_editor_canvas3 = require("@elementor/editor-canvas");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+
+// src/transformers/inheritance-transformer.tsx
+var React2 = __toESM(require("react"));
+var import_editor_canvas = require("@elementor/editor-canvas");
+var import_ui3 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
 
 // src/components/ui/color-indicator.tsx
-var import_ui = require("@elementor/ui");
-var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
+var import_ui2 = require("@elementor/ui");
+var ColorIndicator = (0, import_ui2.styled)(import_ui2.UnstableColorIndicator)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`,
   marginRight: theme.spacing(0.25)
 }));
 
-// src/components/ui/variable/assigned-variable.tsx
-var import_react13 = require("react");
-var React16 = __toESM(require("react"));
-var import_editor_controls8 = require("@elementor/editor-controls");
-var import_icons11 = require("@elementor/icons");
-var import_ui18 = require("@elementor/ui");
-
-// src/components/variable-selection-popover.tsx
-var React14 = __toESM(require("react"));
-var import_react12 = require("react");
-var import_ui16 = require("@elementor/ui");
-
 // src/prop-types/color-variable-prop-type.ts
 var import_editor_props = require("@elementor/editor-props");
 var import_schema = require("@elementor/schema");
 var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
 
-// src/prop-types/font-variable-prop-type.ts
-var import_editor_props2 = require("@elementor/editor-props");
-var import_schema2 = require("@elementor/schema");
-var fontVariablePropTypeUtil = (0, import_editor_props2.createPropUtils)("global-font-variable", import_schema2.z.string());
-
-// src/components/color-variable-creation.tsx
-var React3 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_editor_controls = require("@elementor/editor-controls");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_icons = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
-
-// src/hooks/use-prop-variables.ts
-var import_react = require("react");
+// src/service.ts
+var import_i18n2 = require("@wordpress/i18n");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
@@ -102,18 +162,25 @@ var apiClient = {
       value
     });
   },
-  update: (id, label, value) => {
+  update: (id2, label, value) => {
     return (0, import_http_client.httpService)().put(BASE_PATH + "/update", {
-      id,
+      id: id2,
       label,
       value
     });
   },
-  delete: (id) => {
-    return (0, import_http_client.httpService)().post(BASE_PATH + "/delete", { id });
+  delete: (id2) => {
+    return (0, import_http_client.httpService)().post(BASE_PATH + "/delete", { id: id2 });
   },
-  restore: (id) => {
-    return (0, import_http_client.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 (0, import_http_client.httpService)().post(BASE_PATH + "/restore", payload);
   }
 };
 
@@ -144,14 +211,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) {
@@ -170,6 +237,17 @@ var Storage = class {
   }
 };
 
+// src/prop-types/font-variable-prop-type.ts
+var import_editor_props2 = require("@elementor/editor-props");
+var import_schema2 = require("@elementor/schema");
+var fontVariablePropTypeUtil = (0, import_editor_props2.createPropUtils)("global-font-variable", import_schema2.z.string());
+
+// src/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 = {};
@@ -186,19 +264,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();
@@ -240,7 +345,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 || (0, import_i18n2.__)("Unexpected response from server", "elementor");
+        throw new Error(errorMessage);
       }
       return payload;
     }).then((data) => {
@@ -257,11 +363,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 || (0, import_i18n2.__)("Unexpected response from server", "elementor");
+        throw new Error(errorMessage);
       }
       return payload;
     }).then((data) => {
@@ -278,8 +385,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");
@@ -299,8 +406,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");
@@ -328,7 +435,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 = (0, import_editor_canvas.createTransformer)((id2) => {
+  const variables = service.variables();
+  const variable = variables[id2];
+  if (!variable) {
+    return /* @__PURE__ */ React2.createElement("span", null, (0, import_i18n3.__)("Missing variable", "elementor"));
+  }
+  const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
+  const css = resolveCssVariable(id2, variable);
+  return /* @__PURE__ */ React2.createElement(import_ui3.Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React2.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React2.createElement(import_ui3.Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
+});
+
+// src/transformers/variable-transformer.ts
+var import_editor_canvas2 = require("@elementor/editor-canvas");
+var variableTransformer = (0, import_editor_canvas2.createTransformer)((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) => {
+    import_editor_canvas3.styleTransformersRegistry.register(key, variableTransformer);
+  };
+  const registerInheritanceTransformer = (key) => {
+    import_editor_editing_panel.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
+var React14 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+
+// src/context/variable-selection-popover.context.tsx
+var React3 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_ui4 = require("@elementor/ui");
+var PopoverContentRefContext = (0, import_react2.createContext)(null);
+var PopoverContentRefContextProvider = ({ children }) => {
+  const [anchorRef, setAnchorRef] = (0, import_react2.useState)(null);
+  return /* @__PURE__ */ React3.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React3.createElement(import_ui4.Box, { ref: setAnchorRef }, children));
+};
+var usePopoverContentRef = () => {
+  return (0, import_react2.useContext)(PopoverContentRefContext);
+};
+
+// src/context/variable-type-context.tsx
+var React4 = __toESM(require("react"));
+var import_react3 = require("react");
+var VariableTypeContext = (0, import_react3.createContext)(null);
+function VariableTypeProvider({ children, propTypeKey }) {
+  return /* @__PURE__ */ React4.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
+}
+function useVariableType() {
+  const context = (0, import_react3.useContext)(VariableTypeContext);
+  if (context === null) {
+    throw new Error("useVariableType must be used within a VariableTypeProvider");
+  }
+  return getVariableType(context);
+}
+
+// src/hooks/use-permissions.ts
+var import_editor_current_user = require("@elementor/editor-current-user");
+var usePermissions = () => {
+  const { canUser } = (0, import_editor_current_user.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
+var React6 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_icons2 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
+
+// src/hooks/use-initial-value.ts
+var import_editor_controls = require("@elementor/editor-controls");
+
 // src/hooks/use-prop-variables.ts
+var import_react4 = require("react");
 var useVariable = (key) => {
   const variables = service.variables();
   if (!variables?.[key]) {
@@ -351,7 +608,7 @@ var useFilteredVariables = (searchValue, propTypeKey) => {
   };
 };
 var usePropVariables = (propKey) => {
-  return (0, import_react.useMemo)(() => normalizeVariables(propKey), [propKey]);
+  return (0, import_react4.useMemo)(() => normalizeVariables(propKey), [propKey]);
 };
 var isNotDeleted = ({ deleted }) => !deleted;
 var normalizeVariables = (propKey) => {
@@ -363,184 +620,251 @@ 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
-var React = __toESM(require("react"));
-var import_react3 = require("react");
-var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+// src/hooks/use-initial-value.ts
+var useInitialValue = () => {
+  const { value: initial } = (0, import_editor_controls.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
-var import_i18n = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: (0, import_i18n4.__)("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: (0, import_i18n4.__)("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: (0, import_i18n4.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: (0, import_i18n4.__)("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n4.__)("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: (0, import_i18n4.__)("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: (0, import_i18n4.__)("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 (0, import_i18n.__)("Missing variable name.", "elementor");
+    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
   }
   const allowedChars = /^[a-zA-Z0-9_-]+$/;
   if (!allowedChars.test(name)) {
-    return (0, import_i18n.__)("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 (0, import_i18n.__)("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 (0, import_i18n.__)("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 (0, import_i18n.__)("Variable names can contain up to 50 characters.", "elementor");
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
   }
   return "";
 };
 var validateValue = (value) => {
   if (!value.trim()) {
-    return (0, import_i18n.__)("Missing variable value.", "elementor");
+    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
   }
   return "";
 };
 
-// src/components/variable-selection-popover.context.ts
-var import_react2 = require("react");
-var PopoverContentRefContext = (0, import_react2.createContext)(null);
-var usePopoverContentRef = () => {
-  return (0, import_react2.useContext)(PopoverContentRefContext);
-};
-
-// src/components/fields/color-field.tsx
-var ColorField = ({ value, onChange }) => {
-  const [color, setColor] = (0, import_react3.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react3.useState)("");
-  const defaultRef = (0, import_react3.useRef)(null);
-  const anchorRef = usePopoverContentRef() ?? defaultRef;
-  const handleChange = (newValue) => {
-    setColor(newValue);
-    const errorMsg = validateValue(newValue);
-    setErrorMessage(errorMsg);
-    onChange(errorMsg ? "" : newValue);
+// src/components/fields/label-field.tsx
+var React5 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_ui5 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+function isLabelEqual(a, b) {
+  return a.trim().toLowerCase() === b.trim().toLowerCase();
+}
+var useLabelError = (initialError) => {
+  const [error, setError] = (0, import_react5.useState)(initialError ?? { value: "", message: "" });
+  return {
+    labelFieldError: error,
+    setLabelFieldError: setError
   };
-  return /* @__PURE__ */ React.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(import_ui2.FormLabel, { size: "tiny" }, (0, import_i18n2.__)("Value", "elementor"))), /* @__PURE__ */ React.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
-    import_ui2.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(import_ui2.FormHelperText, { error: true }, errorMessage)));
 };
-
-// src/components/fields/label-field.tsx
-var React2 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_ui3 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
-var LabelField = ({ value, onChange }) => {
-  const [label, setLabel] = (0, import_react4.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react4.useState)("");
-  const [noticeMessage, setNoticeMessage] = (0, import_react4.useState)(() => labelHint(value));
+var LabelField = ({ value, error, onChange }) => {
+  const [label, setLabel] = (0, import_react5.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react5.useState)("");
+  const [noticeMessage, setNoticeMessage] = (0, import_react5.useState)(() => 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 = (0, import_react4.useId)();
-  return /* @__PURE__ */ React2.createElement(import_ui3.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui3.FormLabel, { htmlFor: id, size: "tiny" }, (0, import_i18n3.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
-    import_ui3.TextField,
+  const id2 = (0, import_react5.useId)();
+  let errorMsg = errorMessage;
+  if (isLabelEqual(label, error?.value ?? "") && error?.message) {
+    errorMsg = error.message;
+  }
+  const noticeMsg = errorMsg ? "" : noticeMessage;
+  return /* @__PURE__ */ React5.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React5.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(import_ui5.FormLabel, { htmlFor: id2, size: "tiny" }, (0, import_i18n5.__)("Name", "elementor"))), /* @__PURE__ */ React5.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(
+    import_ui5.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(import_ui3.FormHelperText, { error: true }, errorMessage), noticeMessage && /* @__PURE__ */ React2.createElement(import_ui3.FormHelperText, null, noticeMessage)));
+  ), errorMsg && /* @__PURE__ */ React5.createElement(import_ui5.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React5.createElement(import_ui5.FormHelperText, null, noticeMsg)));
 };
 
-// src/components/color-variable-creation.tsx
+// src/components/variable-creation.tsx
 var SIZE = "tiny";
-var ColorVariableCreation = ({ onGoBack, onClose }) => {
-  const { setValue: setVariable } = (0, import_editor_controls.useBoundProp)(colorVariablePropTypeUtil);
-  const [color, setColor] = (0, import_react5.useState)("");
-  const [label, setLabel] = (0, import_react5.useState)("");
+var VariableCreation = ({ onGoBack, onClose }) => {
+  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+  const { setValue: setVariable, path } = (0, import_editor_controls2.useBoundProp)(propTypeUtil);
+  const initialValue = useInitialValue();
+  const [value, setValue] = (0, import_react6.useState)(initialValue);
+  const [label, setLabel] = (0, import_react6.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react6.useState)("");
+  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(import_editor_editing_panel.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React3.createElement(
-    import_editor_ui.PopoverHeader,
+  const isSubmitDisabled = hasEmptyValue() || hasErrors();
+  return /* @__PURE__ */ React6.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React6.createElement(
+    import_editor_ui2.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(import_ui4.IconButton, { size: SIZE, "aria-label": (0, import_i18n4.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(import_icons.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React3.createElement(import_icons.BrushIcon, { fontSize: SIZE })),
-      title: (0, import_i18n4.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React6.createElement(React6.Fragment, null, onGoBack && /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { size: SIZE, "aria-label": (0, import_i18n6.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React6.createElement(import_icons2.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React6.createElement(VariableIcon, { fontSize: SIZE })),
+      title: (0, import_i18n6.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React3.createElement(import_ui4.Divider, null), /* @__PURE__ */ React3.createElement(import_editor_controls.PopoverContent, { p: 2 }, /* @__PURE__ */ React3.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React3.createElement(ColorField, { value: color, onChange: setColor })), /* @__PURE__ */ React3.createElement(import_ui4.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React3.createElement(import_ui4.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreate }, (0, import_i18n4.__)("Create", "elementor"))));
+  ), /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_editor_controls2.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(import_ui6.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React6.createElement(import_ui6.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React6.createElement(import_ui6.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n6.__)("Create", "elementor"))));
 };
 
-// src/components/color-variable-edit.tsx
-var React5 = __toESM(require("react"));
-var import_react6 = require("react");
-var import_editor_controls2 = require("@elementor/editor-controls");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_icons3 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
-
-// src/components/ui/delete-confirmation-dialog.tsx
-var React4 = __toESM(require("react"));
-var import_icons2 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+// src/components/variable-edit.tsx
+var React9 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_current_user2 = require("@elementor/editor-current-user");
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_icons5 = require("@elementor/icons");
+var import_ui9 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
+
+// src/components/ui/delete-confirmation-dialog.tsx
+var React7 = __toESM(require("react"));
+var import_icons3 = require("@elementor/icons");
+var import_ui7 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
 var TITLE_ID = "delete-variable-dialog";
 var DeleteConfirmationDialog = ({
   open,
@@ -548,30 +872,102 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  return /* @__PURE__ */ React4.createElement(import_ui5.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React4.createElement(import_ui5.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React4.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n5.__)("Delete Variable", "elementor")), /* @__PURE__ */ React4.createElement(import_ui5.DialogContent, null, /* @__PURE__ */ React4.createElement(import_ui5.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n5.__)("You are about to delete", "elementor"), /* @__PURE__ */ React4.createElement(import_ui5.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n5.__)(
-    "Variable. Note that its value is still being used anywhere on your site where it was connected to the variable.",
+  return /* @__PURE__ */ React7.createElement(import_ui7.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React7.createElement(import_ui7.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React7.createElement(import_icons3.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n7.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React7.createElement(import_ui7.DialogContent, null, /* @__PURE__ */ React7.createElement(import_ui7.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n7.__)("All elements using", "elementor"), /* @__PURE__ */ React7.createElement(import_ui7.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n7.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React7.createElement(import_ui7.DialogActions, null, /* @__PURE__ */ React7.createElement(import_ui7.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n7.__)("Not now", "elementor")), /* @__PURE__ */ React7.createElement(import_ui7.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n7.__)("Delete", "elementor"))));
+};
+
+// src/components/ui/edit-confirmation-dialog.tsx
+var React8 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_icons4 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
+var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
+var EditConfirmationDialog = ({
+  closeDialog,
+  onConfirm,
+  onSuppressMessage
+}) => {
+  const [dontShowAgain, setDontShowAgain] = (0, import_react7.useState)(false);
+  const handleSave = () => {
+    if (dontShowAgain) {
+      onSuppressMessage?.();
+    }
+    onConfirm?.();
+  };
+  return /* @__PURE__ */ React8.createElement(import_ui8.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React8.createElement(import_ui8.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React8.createElement(import_icons4.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n8.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React8.createElement(import_ui8.DialogContent, null, /* @__PURE__ */ React8.createElement(import_ui8.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n8.__)(
+    "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React4.createElement(import_ui5.DialogActions, null, /* @__PURE__ */ React4.createElement(import_ui5.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n5.__)("Cancel", "elementor")), /* @__PURE__ */ React4.createElement(import_ui5.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n5.__)("Delete", "elementor"))));
+  ))), /* @__PURE__ */ React8.createElement(import_ui8.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React8.createElement(
+    import_ui8.FormControlLabel,
+    {
+      control: /* @__PURE__ */ React8.createElement(
+        import_ui8.Checkbox,
+        {
+          checked: dontShowAgain,
+          onChange: (event) => setDontShowAgain(event.target.checked),
+          size: "small"
+        }
+      ),
+      label: /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "body2" }, (0, import_i18n8.__)("Don't show me again", "elementor"))
+    }
+  ), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(import_ui8.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n8.__)("Keep editing", "elementor")), /* @__PURE__ */ React8.createElement(import_ui8.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n8.__)("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 } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react6.useState)(false);
+var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
+  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+  const { setValue: notifyBoundPropChange, value: assignedValue } = (0, import_editor_controls3.useBoundProp)(propTypeUtil);
+  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user2.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react8.useState)(false);
+  const [editConfirmation, setEditConfirmation] = (0, import_react8.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
+  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] = (0, import_react6.useState)(variable.value);
-  const [label, setLabel] = (0, import_react6.useState)(variable.label);
+  const userPermissions = usePermissions();
+  const [value, setValue] = (0, import_react8.useState)(variable.value);
+  const [label, setLabel] = (0, import_react8.useState)(variable.label);
+  (0, import_react8.useEffect)(() => {
+    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 = () => {
@@ -591,43 +987,70 @@ var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const closeDeleteDialog = () => () => {
     setDeleteConfirmation(false);
   };
+  const closeEditDialog = () => () => {
+    setEditConfirmation(false);
+  };
   const actions = [];
-  actions.push(
-    /* @__PURE__ */ React5.createElement(
-      import_ui6.IconButton,
-      {
-        key: "delete",
-        size: SIZE2,
-        "aria-label": (0, import_i18n6.__)("Delete", "elementor"),
-        onClick: handleDeleteConfirmation
-      },
-      /* @__PURE__ */ React5.createElement(import_icons3.TrashIcon, { fontSize: SIZE2 })
-    )
-  );
+  if (userPermissions.canDelete()) {
+    actions.push(
+      /* @__PURE__ */ React9.createElement(
+        import_ui9.IconButton,
+        {
+          key: "delete",
+          size: SIZE2,
+          "aria-label": (0, import_i18n9.__)("Delete", "elementor"),
+          onClick: handleDeleteConfirmation
+        },
+        /* @__PURE__ */ React9.createElement(import_icons5.TrashIcon, { fontSize: SIZE2 })
+      )
+    );
+  }
   const hasEmptyValues = () => {
-    return !color.trim() || !label.trim();
+    return !value.trim() || !label.trim();
   };
   const noValueChanged = () => {
-    return color === variable.value && label === variable.label;
+    return value === variable.value && label === variable.label;
   };
-  const isSubmitDisabled = noValueChanged() || hasEmptyValues();
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_editor_editing_panel2.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React5.createElement(
-    import_editor_ui2.PopoverHeader,
+  const hasErrors = () => {
+    return !!errorMessage;
+  };
+  const isSubmitDisabled = noValueChanged() || hasEmptyValues() || hasErrors();
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React9.createElement(
+    import_editor_ui3.PopoverHeader,
     {
-      title: (0, import_i18n6.__)("Edit variable", "elementor"),
+      title: (0, import_i18n9.__)("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React5.createElement(React5.Fragment, null, onGoBack && /* @__PURE__ */ React5.createElement(
-        import_ui6.IconButton,
+      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(
+        import_ui9.IconButton,
         {
           size: SIZE2,
-          "aria-label": (0, import_i18n6.__)("Go Back", "elementor"),
+          "aria-label": (0, import_i18n9.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React5.createElement(import_icons3.ArrowLeftIcon, { fontSize: SIZE2 })
-      ), /* @__PURE__ */ React5.createElement(import_icons3.BrushIcon, { fontSize: SIZE2 })),
+        /* @__PURE__ */ React9.createElement(import_icons5.ArrowLeftIcon, { fontSize: SIZE2 })
+      ), /* @__PURE__ */ React9.createElement(VariableIcon, { fontSize: SIZE2 })),
       actions
     }
-  ), /* @__PURE__ */ React5.createElement(import_ui6.Divider, null), /* @__PURE__ */ React5.createElement(import_editor_controls2.PopoverContent, { p: 2 }, /* @__PURE__ */ React5.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React5.createElement(ColorField, { value: color, onChange: setColor })), /* @__PURE__ */ React5.createElement(import_ui6.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React5.createElement(import_ui6.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n6.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React9.createElement(import_ui9.Divider, null), /* @__PURE__ */ React9.createElement(import_editor_controls3.PopoverContent, { 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(import_ui9.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React9.createElement(import_ui9.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React9.createElement(import_ui9.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n9.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React9.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -635,30 +1058,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
-var React9 = __toESM(require("react"));
-var import_react7 = require("react");
-var import_editor_controls3 = require("@elementor/editor-controls");
-var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_editor_ui4 = require("@elementor/editor-ui");
-var import_icons5 = require("@elementor/icons");
-var import_ui11 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+// src/components/variables-selection.tsx
+var React13 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_editor_controls4 = require("@elementor/editor-controls");
+var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_icons7 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
-var React6 = __toESM(require("react"));
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_icons4 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var React10 = __toESM(require("react"));
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_icons6 = require("@elementor/icons");
+var import_ui10 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui7.ListItemIcon, null, item.icon), /* @__PURE__ */ React6.createElement(
-    import_ui7.Box,
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui10.ListItemIcon, null, item.icon), /* @__PURE__ */ React10.createElement(
+    import_ui10.Box,
     {
       sx: {
         flex: 1,
@@ -668,49 +1098,49 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React6.createElement(
-      import_editor_ui3.EllipsisWithTooltip,
+    /* @__PURE__ */ React10.createElement(
+      import_editor_ui4.EllipsisWithTooltip,
       {
         title: item.label || item.value,
-        as: import_ui7.Typography,
+        as: import_ui10.Typography,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React6.createElement(
-      import_editor_ui3.EllipsisWithTooltip,
+    item.secondaryText && /* @__PURE__ */ React10.createElement(
+      import_editor_ui4.EllipsisWithTooltip,
       {
         title: item.secondaryText,
-        as: import_ui7.Typography,
+        as: import_ui10.Typography,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React6.createElement(
-    import_ui7.IconButton,
+  ), !!onEdit && /* @__PURE__ */ React10.createElement(
+    import_ui10.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": (0, import_i18n7.__)("Edit", "elementor")
+      "aria-label": (0, import_i18n10.__)("Edit", "elementor")
     },
-    /* @__PURE__ */ React6.createElement(import_icons4.EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React10.createElement(import_icons6.EditIcon, { color: "action", fontSize: SIZE3 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-var React7 = __toESM(require("react"));
-var import_ui8 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var React11 = __toESM(require("react"));
+var import_ui11 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React7.createElement(
-    import_ui8.Stack,
+  return /* @__PURE__ */ React11.createElement(
+    import_ui11.Stack,
     {
       gap: 1,
       alignItems: "center",
@@ -721,34 +1151,53 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React7.createElement(import_ui8.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React7.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React7.createElement(import_ui8.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React7.createElement(import_ui8.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n8.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React11.createElement(import_ui11.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React11.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React11.createElement(import_ui11.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n11.__)("Try something else.", "elementor"), /* @__PURE__ */ React11.createElement(import_ui11.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
-var React8 = __toESM(require("react"));
-var import_ui9 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
-var NoVariables = ({ icon, title, onAdd }) => /* @__PURE__ */ React8.createElement(
-  import_ui9.Stack,
-  {
-    gap: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    height: "100%",
-    color: "text.secondary",
-    sx: { p: 2.5, pb: 5.5 }
-  },
-  icon,
-  /* @__PURE__ */ React8.createElement(import_ui9.Typography, { align: "center", variant: "subtitle2" }, title),
-  /* @__PURE__ */ React8.createElement(import_ui9.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, (0, import_i18n9.__)("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
-  onAdd && /* @__PURE__ */ React8.createElement(import_ui9.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n9.__)("Create a variable", "elementor"))
-);
+var React12 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
+var NoVariables = ({ icon, title, onAdd }) => {
+  const canAdd = usePermissions().canAdd();
+  return /* @__PURE__ */ React12.createElement(
+    import_ui12.Stack,
+    {
+      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 || (0, import_i18n12.__)("Create your first variable", "elementor"),
+        message: (0, import_i18n12.__)(
+          "Variables are saved attributes that you can apply anywhere on your site.",
+          "elementor"
+        )
+      }
+    ), onAdd && /* @__PURE__ */ React12.createElement(import_ui12.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n12.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React12.createElement(
+      NoVariablesContent,
+      {
+        title: (0, import_i18n12.__)("There are no variables", "elementor"),
+        message: (0, import_i18n12.__)("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(import_ui12.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React12.createElement(import_ui12.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+}
 
 // src/components/ui/styled-menu-list.tsx
-var import_ui10 = require("@elementor/ui");
-var VariablesStyledMenuList = (0, import_ui10.styled)(import_ui10.MenuList)(({ theme }) => ({
+var import_ui13 = require("@elementor/ui");
+var VariablesStyledMenuList = (0, import_ui13.styled)(import_ui13.MenuList)(({ theme }) => ({
   "& > li": {
     height: 32,
     width: "100%",
@@ -778,38 +1227,53 @@ var VariablesStyledMenuList = (0, import_ui10.styled)(import_ui10.MenuList)(({ t
   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 } = (0, import_editor_controls3.useBoundProp)(colorVariablePropTypeUtil);
-  const [searchValue, setSearchValue] = (0, import_react7.useState)("");
+var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
+  const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
+  const { value: variable, setValue: setVariable, path } = (0, import_editor_controls4.useBoundProp)(propTypeUtil);
+  const [searchValue, setSearchValue] = (0, import_react9.useState)("");
   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(import_ui11.IconButton, { key: "add", size: SIZE4, onClick: onAdd }, /* @__PURE__ */ React9.createElement(import_icons5.PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React13.createElement(import_ui14.IconButton, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React13.createElement(import_icons7.PlusIcon, { fontSize: SIZE4 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React9.createElement(import_ui11.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React9.createElement(import_icons5.SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React13.createElement(import_ui14.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React13.createElement(import_icons7.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);
@@ -817,737 +1281,711 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
-    import_editor_ui4.PopoverHeader,
+  const noVariableTitle = (0, import_i18n13.sprintf)(
+    /* translators: %s: Variable Type. */
+    (0, import_i18n13.__)("Create your first %s variable", "elementor"),
+    variableType
+  );
+  return /* @__PURE__ */ React13.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React13.createElement(
+    import_editor_ui5.PopoverHeader,
     {
-      title: (0, import_i18n10.__)("Variables", "elementor"),
-      icon: /* @__PURE__ */ React9.createElement(import_icons5.ColorFilterIcon, { fontSize: SIZE4 }),
+      title: (0, import_i18n13.__)("Variables", "elementor"),
+      icon: /* @__PURE__ */ React13.createElement(import_icons7.ColorFilterIcon, { fontSize: SIZE4 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React9.createElement(
-    import_editor_ui4.PopoverSearch,
+  ), hasVariables && /* @__PURE__ */ React13.createElement(
+    import_editor_ui5.PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n10.__)("Search", "elementor")
+      placeholder: (0, import_i18n13.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React9.createElement(import_ui11.Divider, null), /* @__PURE__ */ React9.createElement(import_editor_editing_panel3.PopoverScrollableContent, null, hasVariables && hasSearchResults && /* @__PURE__ */ React9.createElement(
-    import_editor_ui4.PopoverMenuList,
+  ), /* @__PURE__ */ React13.createElement(import_ui14.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React13.createElement(
+    import_editor_ui5.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(import_icons5.BrushIcon, { 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] = (0, import_react10.useState)(VIEW_LIST);
+  const [editId, setEditId] = (0, import_react10.useState)("");
+  const { open } = usePanelActions();
+  const onSettingsAvailable = (0, import_editor_v1_adapters2.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);
+    }
+  };
+  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?.();
     }
-  ), !hasVariables && /* @__PURE__ */ React9.createElement(
-    NoVariables,
+  };
+  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
+var React15 = __toESM(require("react"));
+var import_icons8 = require("@elementor/icons");
+var import_ui15 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
+var SIZE5 = "tiny";
+var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
+  const actions = [];
+  if (onUnlink) {
+    actions.push(
+      /* @__PURE__ */ React15.createElement(import_ui15.IconButton, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": (0, import_i18n14.__)("Unlink", "elementor") }, /* @__PURE__ */ React15.createElement(import_icons8.DetachIcon, { fontSize: SIZE5 }))
+    );
+  }
+  return /* @__PURE__ */ React15.createElement(import_ui15.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React15.createElement(
+    import_ui15.UnstableTag,
     {
-      title: (0, import_i18n10.__)("Create your first color variable", "elementor"),
-      icon: /* @__PURE__ */ React9.createElement(import_icons5.BrushIcon, { fontSize: "large" }),
-      onAdd
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React15.createElement(import_ui15.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React15.createElement(import_ui15.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      actions,
+      ...props
     }
-  )));
+  ));
 };
 
-// src/components/font-variable-creation.tsx
-var React11 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
-var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_icons7 = require("@elementor/icons");
-var import_ui13 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
-
-// src/components/fields/font-field.tsx
-var React10 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_editor_controls4 = require("@elementor/editor-controls");
-var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
-var import_icons6 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
-var FontField = ({ value, onChange }) => {
-  const [fontFamily, setFontFamily] = (0, import_react8.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
-  const defaultRef = (0, import_react8.useRef)(null);
-  const anchorRef = usePopoverContentRef() ?? defaultRef;
-  const fontPopoverState = (0, import_ui12.usePopupState)({ variant: "popover" });
-  const fontFamilies = (0, import_editor_editing_panel4.useFontFamilies)();
-  const sectionWidth = (0, import_editor_editing_panel4.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 } = (0, import_editor_controls5.useBoundProp)();
+  const anchorRef = (0, import_react11.useRef)(null);
+  const popupId = (0, import_react11.useId)();
+  const popupState = (0, import_ui16.usePopupState)({
+    variant: "popover",
+    popupId: `elementor-variables-list-${popupId}`
+  });
+  const unlinkVariable = () => {
+    const fallbackValue = fallbackPropTypeUtil.create(variable.value);
+    setValue(fallbackValue);
   };
-  return /* @__PURE__ */ React10.createElement(import_ui12.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui12.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui12.FormLabel, { size: "tiny" }, (0, import_i18n11.__)("Value", "elementor"))), /* @__PURE__ */ React10.createElement(import_ui12.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(
-    import_ui12.UnstableTag,
+  const StartIcon = startIcon || (() => null);
+  return /* @__PURE__ */ React16.createElement(import_ui16.Box, { ref: anchorRef }, /* @__PURE__ */ React16.createElement(
+    AssignedTag,
     {
-      variant: "outlined",
-      label: fontFamily,
-      endIcon: /* @__PURE__ */ React10.createElement(import_icons6.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui12.bindTrigger)(fontPopoverState),
-      fullWidth: true
+      label: variable.label,
+      startIcon: /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE5 }), /* @__PURE__ */ React16.createElement(StartIcon, { value: variable.value })),
+      onUnlink: unlinkVariable,
+      ...(0, import_ui16.bindTrigger)(popupState)
     }
-  ), /* @__PURE__ */ React10.createElement(
-    import_ui12.Popover,
+  ), /* @__PURE__ */ React16.createElement(
+    import_ui16.Popover,
     {
-      disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef.current,
-      anchorOrigin: { vertical: "top", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: -20 },
-      ...(0, import_ui12.bindPopover)(fontPopoverState)
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      PaperProps: {
+        sx: { my: 1 }
+      },
+      ...(0, import_ui16.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React10.createElement(
-      import_editor_controls4.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(import_ui12.FormHelperText, { error: true }, errorMessage)));
+  ));
 };
 
-// src/components/font-variable-creation.tsx
-var SIZE5 = "tiny";
-var FontVariableCreation = ({ onClose, onGoBack }) => {
-  const { setValue: setVariable } = (0, import_editor_controls5.useBoundProp)(fontVariablePropTypeUtil);
-  const [fontFamily, setFontFamily] = (0, import_react9.useState)("");
-  const [label, setLabel] = (0, import_react9.useState)("");
-  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(import_editor_editing_panel5.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React11.createElement(
-    import_editor_ui5.PopoverHeader,
-    {
-      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(import_ui13.IconButton, { size: SIZE5, "aria-label": (0, import_i18n12.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE5 })), /* @__PURE__ */ React11.createElement(import_icons7.TextIcon, { fontSize: SIZE5 })),
-      title: (0, import_i18n12.__)("Create variable", "elementor"),
-      onClose: closePopover
-    }
-  ), /* @__PURE__ */ React11.createElement(import_ui13.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React11.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React11.createElement(FontField, { value: fontFamily, onChange: setFontFamily })), /* @__PURE__ */ React11.createElement(import_ui13.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(import_ui13.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreate }, (0, import_i18n12.__)("Create", "elementor"))));
-};
+// src/components/ui/variable/deleted-variable.tsx
+var React20 = __toESM(require("react"));
+var import_react13 = require("react");
+var import_editor_controls7 = require("@elementor/editor-controls");
+var import_ui20 = require("@elementor/ui");
 
-// src/components/font-variable-edit.tsx
-var React12 = __toESM(require("react"));
-var import_react10 = require("react");
+// src/components/variable-restore.tsx
+var React17 = __toESM(require("react"));
+var import_react12 = require("react");
 var import_editor_controls6 = require("@elementor/editor-controls");
-var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
-var import_icons8 = require("@elementor/icons");
-var import_ui14 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_ui17 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
-var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
-  const { setValue: notifyBoundPropChange, value: assignedValue } = (0, import_editor_controls6.useBoundProp)(fontVariablePropTypeUtil);
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react10.useState)(false);
-  const variable = useVariable(editId);
+var VariableRestore = ({ variableId, onClose, onSubmit }) => {
+  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+  const { setValue: notifyBoundPropChange } = (0, import_editor_controls6.useBoundProp)(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] = (0, import_react10.useState)(variable.value);
-  const [label, setLabel] = (0, import_react10.useState)(variable.label);
-  const handleUpdate = () => {
-    updateVariable(editId, {
-      value: fontFamily,
-      label
-    }).then(() => {
-      maybeTriggerBoundPropChange();
-      onSubmit?.();
-    });
-  };
-  const handleDelete = () => {
-    deleteVariable(editId).then(() => {
-      maybeTriggerBoundPropChange();
+  const [errorMessage, setErrorMessage] = (0, import_react12.useState)("");
+  const [label, setLabel] = (0, import_react12.useState)(variable.label);
+  const [value, setValue] = (0, import_react12.useState)(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(
-      import_ui14.IconButton,
-      {
-        key: "delete",
-        size: SIZE6,
-        "aria-label": (0, import_i18n13.__)("Delete", "elementor"),
-        onClick: handleDeleteConfirmation
-      },
-      /* @__PURE__ */ React12.createElement(import_icons8.TrashIcon, { fontSize: SIZE6 })
-    )
-  );
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(import_editor_editing_panel6.PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React12.createElement(
-    import_editor_ui6.PopoverHeader,
-    {
-      icon: /* @__PURE__ */ React12.createElement(React12.Fragment, null, onGoBack && /* @__PURE__ */ React12.createElement(
-        import_ui14.IconButton,
-        {
-          size: SIZE6,
-          "aria-label": (0, import_i18n13.__)("Go Back", "elementor"),
-          onClick: onGoBack
-        },
-        /* @__PURE__ */ React12.createElement(import_icons8.ArrowLeftIcon, { fontSize: SIZE6 })
-      ), /* @__PURE__ */ React12.createElement(import_icons8.TextIcon, { fontSize: SIZE6 })),
-      title: (0, import_i18n13.__)("Edit variable", "elementor"),
-      onClose,
-      actions
-    }
-  ), /* @__PURE__ */ React12.createElement(import_ui14.Divider, null), /* @__PURE__ */ React12.createElement(import_editor_controls6.PopoverContent, { p: 2 }, /* @__PURE__ */ React12.createElement(LabelField, { value: label, onChange: setLabel }), /* @__PURE__ */ React12.createElement(FontField, { value: fontFamily, onChange: setFontFamily })), /* @__PURE__ */ React12.createElement(import_ui14.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(import_ui14.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n13.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React12.createElement(
-    DeleteConfirmationDialog,
-    {
-      open: true,
-      label,
-      onConfirm: handleDelete,
-      closeDialog: closeDeleteDialog()
-    }
-  ));
-};
-
-// src/components/font-variables-selection.tsx
-var React13 = __toESM(require("react"));
-var import_react11 = require("react");
-var import_editor_controls7 = require("@elementor/editor-controls");
-var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
-var import_editor_ui7 = require("@elementor/editor-ui");
-var import_icons9 = require("@elementor/icons");
-var import_ui15 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
-var SIZE7 = "tiny";
-var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
-  const { value: variable, setValue: setVariable } = (0, import_editor_controls7.useBoundProp)(fontVariablePropTypeUtil);
-  const [searchValue, setSearchValue] = (0, import_react11.useState)("");
-  const {
-    list: variables,
-    hasMatches: hasSearchResults,
-    isSourceNotEmpty: hasVariables
-  } = useFilteredVariables(searchValue, fontVariablePropTypeUtil.key);
-  const handleSetVariable = (key) => {
-    setVariable(key);
-    closePopover();
+  const hasErrors = () => {
+    return !!errorMessage;
   };
-  const actions = [];
-  if (onAdd) {
-    actions.push(
-      /* @__PURE__ */ React13.createElement(import_ui15.IconButton, { key: "add", size: SIZE7, onClick: onAdd }, /* @__PURE__ */ React13.createElement(import_icons9.PlusIcon, { fontSize: SIZE7 }))
-    );
-  }
-  if (onSettings) {
-    actions.push(
-      /* @__PURE__ */ React13.createElement(import_ui15.IconButton, { key: "settings", size: SIZE7, onClick: onSettings }, /* @__PURE__ */ React13.createElement(import_icons9.SettingsIcon, { fontSize: SIZE7 }))
-    );
-  }
-  const items = variables.map(({ value, label, key }) => ({
-    type: "item",
-    value: key,
-    label,
-    icon: /* @__PURE__ */ React13.createElement(import_icons9.TextIcon, { 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(
-    import_editor_ui7.PopoverHeader,
-    {
-      title: (0, import_i18n14.__)("Variables", "elementor"),
-      onClose: closePopover,
-      icon: /* @__PURE__ */ React13.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE7 }),
-      actions
-    }
-  ), hasVariables && /* @__PURE__ */ React13.createElement(
-    import_editor_ui7.PopoverSearch,
+  const isSubmitDisabled = noValueChanged() || hasEmptyValues() || hasErrors();
+  return /* @__PURE__ */ React17.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React17.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React17.createElement(
+    import_editor_ui6.PopoverHeader,
     {
-      value: searchValue,
-      onSearch: handleSearch,
-      placeholder: (0, import_i18n14.__)("Search", "elementor")
+      icon: /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE6 }),
+      title: (0, import_i18n15.__)("Restore variable", "elementor"),
+      onClose
     }
-  ), /* @__PURE__ */ React13.createElement(import_ui15.Divider, null), /* @__PURE__ */ React13.createElement(import_editor_editing_panel7.PopoverScrollableContent, null, hasVariables && hasSearchResults && /* @__PURE__ */ React13.createElement(
-    import_editor_ui7.PopoverMenuList,
-    {
-      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,
+  ), /* @__PURE__ */ React17.createElement(import_ui17.Divider, null), /* @__PURE__ */ React17.createElement(import_editor_controls6.PopoverContent, { p: 2 }, /* @__PURE__ */ React17.createElement(
+    LabelField,
     {
-      searchValue,
-      onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React13.createElement(import_icons9.TextIcon, { fontSize: "large" })
+      value: label,
+      error: labelFieldError,
+      onChange: (newValue) => {
+        setLabel(newValue);
+        setErrorMessage("");
+      }
     }
-  ), !hasVariables && /* @__PURE__ */ React13.createElement(
-    NoVariables,
+  ), /* @__PURE__ */ React17.createElement(
+    ValueField,
     {
-      title: (0, import_i18n14.__)("Create your first font variable", "elementor"),
-      icon: /* @__PURE__ */ React13.createElement(import_icons9.TextIcon, { fontSize: "large" }),
-      onAdd
+      value,
+      onChange: (newValue) => {
+        setValue(newValue);
+        setErrorMessage("");
+      }
     }
-  )));
+  ), errorMessage && /* @__PURE__ */ React17.createElement(import_ui17.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React17.createElement(import_ui17.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React17.createElement(import_ui17.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n15.__)("Restore", "elementor")))));
 };
 
-// src/components/variable-selection-popover.tsx
-var VIEW_LIST = "list";
-var VIEW_ADD = "add";
-var VIEW_EDIT = "edit";
-var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = (0, import_react12.useState)(VIEW_LIST);
-  const editIdRef = (0, import_react12.useRef)("");
-  const anchorRef = (0, import_react12.useRef)(null);
-  return /* @__PURE__ */ React14.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React14.createElement(import_ui16.Box, { ref: anchorRef }, renderStage({
-    propTypeKey,
-    currentView,
-    selectedVariable,
-    editIdRef,
-    setCurrentView,
-    closePopover
-  })));
+// src/components/ui/deleted-variable-alert.tsx
+var React18 = __toESM(require("react"));
+var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
+var import_ui18 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
+var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
+  const sectionWidth = (0, import_editor_editing_panel6.useSectionWidth)();
+  return /* @__PURE__ */ React18.createElement(import_ui18.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React18.createElement(
+    import_ui18.Alert,
+    {
+      variant: "standard",
+      severity: "warning",
+      onClose,
+      action: /* @__PURE__ */ React18.createElement(React18.Fragment, null, onUnlink && /* @__PURE__ */ React18.createElement(import_ui18.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n16.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React18.createElement(import_ui18.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n16.__)("Restore", "elementor"))),
+      sx: { width: sectionWidth }
+    },
+    /* @__PURE__ */ React18.createElement(import_ui18.AlertTitle, null, (0, import_i18n16.__)("Deleted variable", "elementor")),
+    (0, import_i18n16.__)("The variable", "elementor"),
+    " '",
+    label,
+    "'",
+    " ",
+    (0, import_i18n16.__)(
+      "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
-var React15 = __toESM(require("react"));
+// src/components/ui/tags/deleted-tag.tsx
+var React19 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
-var import_ui17 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
-var SIZE8 = "tiny";
-var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
-  const actions = [];
-  if (onUnlink) {
-    actions.push(
-      /* @__PURE__ */ React15.createElement(import_ui17.IconButton, { key: "unlink", size: SIZE8, onClick: onUnlink, "aria-label": (0, import_i18n15.__)("Unlink", "elementor") }, /* @__PURE__ */ React15.createElement(import_icons10.DetachIcon, { fontSize: SIZE8 }))
-    );
-  }
-  return /* @__PURE__ */ React15.createElement(
-    import_ui17.UnstableTag,
+var import_ui19 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
+var DeletedTag = React19.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React19.createElement(
+    import_ui19.Chip,
     {
-      fullWidth: true,
-      showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React15.createElement(import_ui17.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React15.createElement(import_ui17.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React15.createElement(import_ui17.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
-      actions,
+      ref,
+      size: "tiny",
+      color: "warning",
+      shape: "rounded",
+      variant: "standard",
+      onClick,
+      icon: /* @__PURE__ */ React19.createElement(import_icons10.AlertTriangleFilledIcon, null),
+      label: /* @__PURE__ */ React19.createElement(import_ui19.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React19.createElement(import_ui19.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React19.createElement(import_ui19.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React19.createElement(import_ui19.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n17.__)("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
-}) => {
-  const { setValue } = (0, import_editor_controls8.useBoundProp)();
-  const anchorRef = (0, import_react13.useRef)(null);
+// src/components/ui/variable/deleted-variable.tsx
+var DeletedVariable = ({ variable, propTypeKey }) => {
+  const { fallbackPropTypeUtil, propTypeUtil } = getVariableType(propTypeKey);
+  const { setValue } = (0, import_editor_controls7.useBoundProp)();
+  const userPermissions = usePermissions();
+  const [showInfotip, setShowInfotip] = (0, import_react13.useState)(false);
+  const toggleInfotip = () => setShowInfotip((prev) => !prev);
+  const closeInfotip = () => setShowInfotip(false);
+  const deletedChipAnchorRef = (0, import_react13.useRef)(null);
   const popupId = (0, import_react13.useId)();
-  const popupState = (0, import_ui18.usePopupState)({
+  const popupState = (0, import_ui20.usePopupState)({
     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(import_ui18.Box, { ref: anchorRef }, /* @__PURE__ */ React16.createElement(
-    AssignedTag,
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui20.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React20.createElement(import_ui20.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React20.createElement(
+    import_ui20.Infotip,
     {
-      label: variable.label,
-      startIcon: /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE8 }), additionalStartIcon),
-      onUnlink: unlinkVariable,
-      ...(0, import_ui18.bindTrigger)(popupState)
-    }
-  ), /* @__PURE__ */ React16.createElement(
-    import_ui18.Popover,
+      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(
+    import_ui20.Popover,
     {
       disableScrollLock: true,
-      anchorEl: anchorRef.current,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui18.bindPopover)(popupState)
+      ...(0, import_ui20.bindPopover)(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/deleted-variable.tsx
-var React18 = __toESM(require("react"));
+// src/components/ui/variable/missing-variable.tsx
+var React23 = __toESM(require("react"));
 var import_react14 = require("react");
-var import_ui20 = require("@elementor/ui");
+var import_editor_controls8 = require("@elementor/editor-controls");
+var import_ui23 = require("@elementor/ui");
+var import_i18n19 = require("@wordpress/i18n");
 
-// src/components/ui/tags/deleted-tag.tsx
-var React17 = __toESM(require("react"));
-var import_icons12 = require("@elementor/icons");
-var import_ui19 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
-var DeletedTag = ({ label }) => {
-  return /* @__PURE__ */ React17.createElement(
-    import_ui19.UnstableTag,
+// src/components/ui/missing-variable-alert.tsx
+var React21 = __toESM(require("react"));
+var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
+var import_ui21 = require("@elementor/ui");
+var import_i18n18 = require("@wordpress/i18n");
+var MissingVariableAlert = ({ onClose, onClear }) => {
+  const sectionWidth = (0, import_editor_editing_panel7.useSectionWidth)();
+  return /* @__PURE__ */ React21.createElement(import_ui21.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React21.createElement(
+    import_ui21.Alert,
     {
-      showActionsOnHover: true,
-      fullWidth: true,
-      label: /* @__PURE__ */ React17.createElement(import_ui19.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React17.createElement(import_ui19.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
-      startIcon: /* @__PURE__ */ React17.createElement(import_icons12.ColorFilterIcon, { fontSize: "tiny" }),
-      endAdornment: /* @__PURE__ */ React17.createElement(import_ui19.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, "(", (0, import_i18n16.__)("deleted", "elementor"), ")")
+      variant: "standard",
+      severity: "warning",
+      onClose,
+      action: /* @__PURE__ */ React21.createElement(React21.Fragment, null, onClear && /* @__PURE__ */ React21.createElement(import_ui21.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n18.__)("Clear", "elementor"))),
+      sx: { width: sectionWidth }
+    },
+    /* @__PURE__ */ React21.createElement(import_ui21.AlertTitle, null, (0, import_i18n18.__)("This variable is missing", "elementor")),
+    (0, import_i18n18.__)(
+      "It may have been deleted. Try clearing this field and select a different value or variable.",
+      "elementor"
+    )
+  ));
+};
+
+// src/components/ui/tags/missing-tag.tsx
+var React22 = __toESM(require("react"));
+var import_icons11 = require("@elementor/icons");
+var import_ui22 = require("@elementor/ui");
+var MissingTag = React22.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React22.createElement(
+    import_ui22.Chip,
+    {
+      ref,
+      size: "tiny",
+      color: "warning",
+      shape: "rounded",
+      variant: "standard",
+      onClick,
+      icon: /* @__PURE__ */ React22.createElement(import_icons11.AlertTriangleFilledIcon, 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 = (0, import_react14.useRef)(null);
-  return /* @__PURE__ */ React18.createElement(import_ui20.Box, { ref: anchorRef }, /* @__PURE__ */ React18.createElement(DeletedTag, { label: variable.label }));
+// src/components/ui/variable/missing-variable.tsx
+var MissingVariable = () => {
+  const { setValue } = (0, import_editor_controls8.useBoundProp)();
+  const [infotipVisible, setInfotipVisible] = (0, import_react14.useState)(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(import_ui23.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React23.createElement(
+    import_ui23.Infotip,
+    {
+      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: (0, import_i18n19.__)("Missing variable", "elementor"), onClick: toggleInfotip })
+  ));
 };
 
-// src/controls/color-variable-control.tsx
-var ColorVariableControl = () => {
-  const { value: variableValue } = (0, import_editor_controls9.useBoundProp)(colorVariablePropTypeUtil);
-  const assignedVariable = useVariable(variableValue);
+// src/controls/variable-control.tsx
+var VariableControl = () => {
+  const boundProp = (0, import_editor_controls9.useBoundProp)().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: import_editor_props3.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
-var React20 = __toESM(require("react"));
+// src/hooks/use-prop-variable-action.tsx
+var React25 = __toESM(require("react"));
 var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
-var import_icons13 = require("@elementor/icons");
-var import_i18n17 = require("@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 } = (0, import_editor_editing_panel8.useBoundProp)();
-  const visible = !!propType && supportsColorVariables(propType);
+var import_icons12 = require("@elementor/icons");
+var import_i18n20 = require("@wordpress/i18n");
+var usePropVariableAction = () => {
+  const { propType, path } = (0, import_editor_editing_panel8.useBoundProp)();
+  const variable = resolveVariableFromPropType(propType);
   return {
-    visible,
-    icon: import_icons13.ColorFilterIcon,
-    title: (0, import_i18n17.__)("Variables", "elementor"),
+    visible: Boolean(variable),
+    icon: import_icons12.ColorFilterIcon,
+    title: (0, import_i18n20.__)("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
-var import_editor_controls10 = require("@elementor/editor-controls");
-var import_editor_props4 = require("@elementor/editor-props");
-
-// src/components/variables-repeater-item-slot.tsx
-var React21 = __toESM(require("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() {
-  (0, import_editor_controls10.injectIntoRepeaterItemIcon)({
-    id: "color-variables-background-icon",
-    component: BackgroundRepeaterColorIndicator,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
-    }
-  });
-  (0, import_editor_controls10.injectIntoRepeaterItemIcon)({
-    id: "color-variables-icon",
-    component: BoxShadowRepeaterColorIndicator,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props4.shadowPropTypeUtil.extract(prop)?.color);
-    }
-  });
-  (0, import_editor_controls10.injectIntoRepeaterItemLabel)({
-    id: "color-variables-label",
-    component: BackgroundRepeaterLabel,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props4.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
-var import_editor_canvas = require("@elementor/editor-canvas");
-var variableTransformer = (0, import_editor_canvas.createTransformer)((value) => {
-  if (!value.trim()) {
-    return null;
   }
-  return `var(--${value})`;
-});
-
-// src/init-color-variables.ts
-var { registerPopoverAction } = import_editor_editing_panel9.controlActionsMenu;
-function initColorVariables() {
-  (0, import_editor_editing_panel9.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"
   });
-  import_editor_canvas2.styleTransformersRegistry.register(colorVariablePropTypeUtil.key, variableTransformer);
-  registerRepeaterInjections();
-}
+};
 
-// src/init-font-variables.ts
-var import_editor_canvas3 = require("@elementor/editor-canvas");
-var import_editor_editing_panel11 = require("@elementor/editor-editing-panel");
+// src/register-variable-types.tsx
+var React28 = __toESM(require("react"));
+var import_editor_props3 = require("@elementor/editor-props");
+var import_icons14 = require("@elementor/icons");
 
-// src/controls/font-variable-control.tsx
-var React22 = __toESM(require("react"));
-var import_editor_controls11 = require("@elementor/editor-controls");
-var import_editor_props5 = require("@elementor/editor-props");
-var FontVariableControl = () => {
-  const { value: variableValue } = (0, import_editor_controls11.useBoundProp)(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
+var React26 = __toESM(require("react"));
+var import_react15 = require("react");
+var import_ui24 = require("@elementor/ui");
+var import_i18n21 = require("@wordpress/i18n");
+var ColorField = ({ value, onChange }) => {
+  const [color, setColor] = (0, import_react15.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react15.useState)("");
+  const defaultRef = (0, import_react15.useRef)(null);
+  const anchorRef = usePopoverContentRef() ?? defaultRef.current;
+  const handleChange = (newValue) => {
+    setColor(newValue);
+    const errorMsg = validateValue(newValue);
+    setErrorMessage(errorMsg);
+    onChange(errorMsg ? "" : newValue);
+  };
+  return /* @__PURE__ */ React26.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(import_ui24.FormLabel, { size: "tiny" }, (0, import_i18n21.__)("Value", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
+    import_ui24.UnstableColorField,
     {
-      variable: assignedVariable,
-      variablePropTypeUtil: fontVariablePropTypeUtil,
-      fallbackPropTypeUtil: import_editor_props5.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(import_ui24.FormHelperText, { error: true }, errorMessage)));
 };
 
-// src/hooks/use-prop-font-variable-action.tsx
-var React23 = __toESM(require("react"));
-var import_editor_editing_panel10 = require("@elementor/editor-editing-panel");
-var import_icons14 = require("@elementor/icons");
-var import_i18n18 = require("@wordpress/i18n");
-var usePropFontVariableAction = () => {
-  const { propType } = (0, import_editor_editing_panel10.useBoundProp)();
-  const visible = !!propType && supportsFontVariables(propType);
-  return {
-    visible,
-    icon: import_icons14.ColorFilterIcon,
-    title: (0, import_i18n18.__)("Variables", "elementor"),
-    content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React23.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
-    }
+// src/components/fields/font-field.tsx
+var React27 = __toESM(require("react"));
+var import_react16 = require("react");
+var import_editor_controls10 = require("@elementor/editor-controls");
+var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
+var import_icons13 = require("@elementor/icons");
+var import_ui25 = require("@elementor/ui");
+var import_i18n22 = require("@wordpress/i18n");
+var FontField = ({ value, onChange }) => {
+  const [fontFamily, setFontFamily] = (0, import_react16.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react16.useState)("");
+  const defaultRef = (0, import_react16.useRef)(null);
+  const anchorRef = usePopoverContentRef() ?? defaultRef.current;
+  const fontPopoverState = (0, import_ui25.usePopupState)({ variant: "popover" });
+  const fontFamilies = (0, import_editor_editing_panel9.useFontFamilies)();
+  const sectionWidth = (0, import_editor_editing_panel9.useSectionWidth)();
+  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(import_ui25.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui25.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(import_ui25.FormLabel, { size: "tiny" }, (0, import_i18n22.__)("Value", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui25.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    import_ui25.UnstableTag,
+    {
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React27.createElement(import_icons13.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui25.bindTrigger)(fontPopoverState),
+      fullWidth: true
+    }
+  ), /* @__PURE__ */ React27.createElement(
+    import_ui25.Popover,
+    {
+      disablePortal: true,
+      disableScrollLock: true,
+      anchorEl: anchorRef,
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: -28 },
+      ...(0, import_ui25.bindPopover)(fontPopoverState)
+    },
+    /* @__PURE__ */ React27.createElement(
+      import_editor_controls10.ItemSelector,
+      {
+        itemsList: mapFontSubs,
+        selectedItem: fontFamily,
+        onItemChange: handleFontFamilyChange,
+        onClose: fontPopoverState.close,
+        sectionWidth,
+        title: (0, import_i18n22.__)("Font Family", "elementor"),
+        itemStyle: (item) => ({ fontFamily: item.value }),
+        onDebounce: import_editor_controls10.enqueueFont,
+        icon: import_icons13.TextIcon
+      }
+    )
+  ), errorMessage && /* @__PURE__ */ React27.createElement(import_ui25.FormHelperText, { error: true }, errorMessage)));
 };
 
-// src/init-font-variables.ts
-var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel11.controlActionsMenu;
-function initFontVariables() {
-  (0, import_editor_editing_panel11.registerControlReplacement)({
-    component: FontVariableControl,
-    condition: ({ value }) => hasAssignedFontVariable(value)
+// src/register-variable-types.tsx
+function registerVariableTypes() {
+  registerVariableType({
+    valueField: ColorField,
+    icon: import_icons14.BrushIcon,
+    propTypeUtil: colorVariablePropTypeUtil,
+    fallbackPropTypeUtil: import_editor_props3.colorPropTypeUtil,
+    variableType: "color",
+    startIcon: ({ value }) => /* @__PURE__ */ React28.createElement(ColorIndicator, { size: "inherit", component: "span", value })
   });
-  registerPopoverAction2({
-    id: "font-variables",
-    useProps: usePropFontVariableAction
+  registerVariableType({
+    valueField: FontField,
+    icon: import_icons14.TextIcon,
+    propTypeUtil: fontVariablePropTypeUtil,
+    fallbackPropTypeUtil: import_editor_props3.stringPropTypeUtil,
+    variableType: "font"
   });
-  import_editor_canvas3.styleTransformersRegistry.register(fontVariablePropTypeUtil.key, variableTransformer);
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React24 = __toESM(require("react"));
-var import_react15 = require("react");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_ui21 = require("@elementor/ui");
+var React29 = __toESM(require("react"));
+var import_react17 = require("react");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_ui26 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -1566,14 +2004,14 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React24.createElement(import_ui21.Portal, { container }, /* @__PURE__ */ React24.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React29.createElement(import_ui26.Portal, { container }, /* @__PURE__ */ React29.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
-  return (0, import_editor_v1_adapters.__privateUseListenTo)((0, import_editor_v1_adapters.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+  return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react15.useState)({});
-  (0, import_react15.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react17.useState)({});
+  (0, import_react17.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -1581,22 +2019,96 @@ 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
+var import_editor_controls11 = require("@elementor/editor-controls");
+var import_editor_props4 = require("@elementor/editor-props");
+
+// src/components/variables-repeater-item-slot.tsx
+var React30 = __toESM(require("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() {
+  (0, import_editor_controls11.injectIntoRepeaterItemIcon)({
+    id: "color-variables-background-icon",
+    component: BackgroundRepeaterColorIndicator,
+    condition: ({ value: prop }) => {
+      return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+    }
+  });
+  (0, import_editor_controls11.injectIntoRepeaterItemIcon)({
+    id: "color-variables-icon",
+    component: BoxShadowRepeaterColorIndicator,
+    condition: ({ value: prop }) => {
+      return hasAssignedColorVariable(import_editor_props4.shadowPropTypeUtil.extract(prop)?.color);
+    }
+  });
+  (0, import_editor_controls11.injectIntoRepeaterItemLabel)({
+    id: "color-variables-label",
+    component: BackgroundRepeaterLabel,
+    condition: ({ value: prop }) => {
+      return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+    }
+  });
+}
+var hasAssignedColorVariable = (propValue) => {
+  return !!colorVariablePropTypeUtil.isValid(propValue);
+};
+
 // src/init.ts
+var { registerPopoverAction } = import_editor_editing_panel10.controlActionsMenu;
 function init() {
-  initColorVariables();
-  initFontVariables();
+  registerVariableTypes();
+  registerRepeaterInjections();
+  (0, import_editor_editing_panel10.registerControlReplacement)({
+    component: VariableControl,
+    condition: ({ value }) => hasAssignedVariable(value)
+  });
+  registerPopoverAction({
+    id: "variables",
+    useProps: usePropVariableAction
+  });
   service.init();
   (0, import_editor.injectIntoTop)({
     id: "canvas-style-variables-render",
     component: StyleVariablesRenderer
   });
+  (0, import_editor_panels2.__registerPanel)(panel);
+}
+function hasAssignedVariable(propValue) {
+  if (propValue && typeof propValue === "object" && "$$type" in propValue) {
+    return hasVariableType(propValue.$$type);
+  }
+  return false;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  init
+  init,
+  registerVariableType
 });
 //# sourceMappingURL=index.js.map