@elementor/editor-variables 0.15.0 → 0.18.0

package/dist/index.mjs

@@ -3,16 +3,58 @@ import { injectIntoTop } from "@elementor/editor";
 
 // src/init-color-variables.ts
 import { styleTransformersRegistry } from "@elementor/editor-canvas";
-import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elementor/editor-controls";
 import { controlActionsMenu, registerControlReplacement } from "@elementor/editor-editing-panel";
-import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 
-// src/components/variables-repeater-item-slot.tsx
-import * as React from "react";
+// src/controls/color-variable-control.tsx
+import * as React20 from "react";
+import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
+import { colorPropTypeUtil } from "@elementor/editor-props";
+
+// src/components/ui/color-indicator.tsx
+import { styled, UnstableColorIndicator } from "@elementor/ui";
+var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  marginRight: theme.spacing(0.25)
+}));
+
+// src/components/ui/variable/assigned-variable.tsx
+import { useId as useId2, useRef as useRef4 } from "react";
+import * as React16 from "react";
+import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
+import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
+import { bindPopover as bindPopover2, bindTrigger as bindTrigger2, Box as Box4, Popover as Popover2, usePopupState as usePopupState2 } from "@elementor/ui";
+
+// src/components/variable-selection-popover.tsx
+import * as React14 from "react";
+import { useRef as useRef3, useState as useState10 } from "react";
+import { Box as Box2 } from "@elementor/ui";
+
+// src/prop-types/color-variable-prop-type.ts
+import { createPropUtils } from "@elementor/editor-props";
+import { z } from "@elementor/schema";
+var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
+
+// src/prop-types/font-variable-prop-type.ts
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+import { z as z2 } from "@elementor/schema";
+var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.string());
+
+// src/components/color-variable-creation.tsx
+import * as React3 from "react";
+import { useState as useState3 } from "react";
+import { PopoverContent, useBoundProp } from "@elementor/editor-controls";
+import { PopoverBody } from "@elementor/editor-editing-panel";
+import { PopoverHeader } from "@elementor/editor-ui";
+import { ArrowLeftIcon, BrushIcon } from "@elementor/icons";
+import { Button, CardActions, Divider, FormHelperText as FormHelperText3, IconButton } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/hooks/use-prop-variables.ts
 import { useMemo } from "react";
 
+// src/service.ts
+import { __ } from "@wordpress/i18n";
+
 // src/api.ts
 import { httpService } from "@elementor/http-client";
 var BASE_PATH = "elementor/v1/variables";
@@ -95,6 +137,12 @@ var Storage = class {
   }
 };
 
+// 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 = {};
@@ -111,19 +159,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();
@@ -165,7 +240,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 || __("Unexpected response from server", "elementor");
+        throw new Error(errorMessage);
       }
       return payload;
     }).then((data) => {
@@ -180,13 +256,17 @@ var service = {
         id: variableId,
         variable: createdVariable
       };
+    }).catch((error) => {
+      const message = getErrorMessage(error.response);
+      throw message ? new Error(message) : error;
     });
   },
   update: (id, { label, value }) => {
     return apiClient.update(id, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        throw new Error("Unexpected response from server");
+        const errorMessage = payload?.message || __("Unexpected response from server", "elementor");
+        throw new Error(errorMessage);
       }
       return payload;
     }).then((data) => {
@@ -201,6 +281,9 @@ var service = {
         id: variableId,
         variable: updatedVariable
       };
+    }).catch((error) => {
+      const message = getErrorMessage(error.response);
+      throw message ? new Error(message) : error;
     });
   },
   delete: (id) => {
@@ -252,6 +335,12 @@ var handleWatermark = (operation, newWatermark) => {
   }
   storage.watermark(newWatermark);
 };
+var getErrorMessage = (response) => {
+  if (response?.data?.code === "duplicated_label") {
+    return __("This variable name already exists. Please choose a unique name.", "elementor");
+  }
+  return __("There was a glitch. Try saving your variable again.", "elementor");
+};
 
 // src/hooks/use-prop-variables.ts
 var useVariable = (key) => {
@@ -302,100 +391,52 @@ var deleteVariable = (deleteId) => {
     return id;
   });
 };
+var restoreVariable = (restoreId) => {
+  return service.restore(restoreId).then(({ id }) => {
+    return id;
+  });
+};
 
-// src/components/ui/color-indicator.tsx
-import { styled, UnstableColorIndicator } from "@elementor/ui";
-var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`,
-  marginRight: theme.spacing(0.25)
-}));
+// src/components/fields/color-field.tsx
+import * as React from "react";
+import { useRef, useState } from "react";
+import { FormHelperText, FormLabel, Grid, UnstableColorField } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
 
-// src/components/variables-repeater-item-slot.tsx
-var useColorVariable = (value) => {
-  const variableId = value?.value?.color?.value;
-  return useVariable(variableId || "");
-};
-var BackgroundRepeaterColorIndicator = ({ value }) => {
-  const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
-};
-var BackgroundRepeaterLabel = ({ value }) => {
-  const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React.createElement("span", null, colorVariable?.label);
+// src/utils/validations.ts
+import { __ as __2 } from "@wordpress/i18n";
+var VARIABLE_LABEL_MAX_LENGTH = 50;
+var validateLabel = (name) => {
+  if (!name.trim()) {
+    return __2("Give your variable a name.", "elementor");
+  }
+  const allowedChars = /^[a-zA-Z0-9_-]+$/;
+  if (!allowedChars.test(name)) {
+    return __2("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor");
+  }
+  const hasAlphanumeric = /[a-zA-Z0-9]/;
+  if (!hasAlphanumeric.test(name)) {
+    return __2("Names have to include at least one non-special character.", "elementor");
+  }
+  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
+    return __2("Keep names up to 50 characters.", "elementor");
+  }
+  return "";
 };
-var BoxShadowRepeaterColorIndicator = ({ value }) => {
-  const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+var labelHint = (name) => {
+  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+  if (hintThreshold < name.length) {
+    return __2("Keep names up to 50 characters.", "elementor");
+  }
+  return "";
 };
-
-// src/controls/color-variable-control.tsx
-import * as React13 from "react";
-import { useId as useId2, useRef as useRef6 } from "react";
-import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
-import { colorPropTypeUtil } from "@elementor/editor-props";
-import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
-import { bindPopover as bindPopover3, bindTrigger as bindTrigger3, Box as Box4, Popover as Popover3, usePopupState as usePopupState3 } from "@elementor/ui";
-
-// src/components/ui/variable-tag.tsx
-import * as React2 from "react";
-import { DetachIcon } from "@elementor/icons";
-import { Box, IconButton, Stack, Typography, UnstableTag as Tag } from "@elementor/ui";
-import { __ } from "@wordpress/i18n";
-var SIZE = "tiny";
-var VariableTag = ({ startIcon, label, onUnlink, ...props }) => {
-  const actions = [];
-  if (onUnlink) {
-    actions.push(
-      /* @__PURE__ */ React2.createElement(IconButton, { key: "unlink", size: SIZE, onClick: onUnlink, "aria-label": __("Unlink", "elementor") }, /* @__PURE__ */ React2.createElement(DetachIcon, { fontSize: SIZE }))
-    );
+var validateValue = (value) => {
+  if (!value.trim()) {
+    return __2("Add a value to complete your variable.", "elementor");
   }
-  return /* @__PURE__ */ React2.createElement(
-    Tag,
-    {
-      fullWidth: true,
-      showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React2.createElement(Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React2.createElement(Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React2.createElement(Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
-      actions,
-      ...props
-    }
-  );
+  return "";
 };
 
-// src/components/variable-selection-popover.tsx
-import * as React12 from "react";
-import { useRef as useRef5, useState as useState7 } from "react";
-import { Box as Box3 } from "@elementor/ui";
-
-// src/prop-types/color-variable-prop-type.ts
-import { createPropUtils } from "@elementor/editor-props";
-import { z } from "@elementor/schema";
-var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
-
-// src/prop-types/font-variable-prop-type.ts
-import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
-import { z as z2 } from "@elementor/schema";
-var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.string());
-
-// src/components/color-variable-creation.tsx
-import * as React3 from "react";
-import { useRef, useState } from "react";
-import { PopoverContent, useBoundProp } from "@elementor/editor-controls";
-import { PopoverScrollableContent } from "@elementor/editor-editing-panel";
-import { PopoverHeader } from "@elementor/editor-ui";
-import { ArrowLeftIcon, BrushIcon } from "@elementor/icons";
-import {
-  Button,
-  CardActions,
-  Divider,
-  FormLabel,
-  Grid,
-  IconButton as IconButton2,
-  TextField,
-  UnstableColorField
-} from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
-
 // src/components/variable-selection-popover.context.ts
 import { createContext, useContext } from "react";
 var PopoverContentRefContext = createContext(null);
@@ -403,17 +444,80 @@ var usePopoverContentRef = () => {
   return useContext(PopoverContentRefContext);
 };
 
+// src/components/fields/color-field.tsx
+var ColorField = ({ value, onChange }) => {
+  const [color, setColor] = useState(value);
+  const [errorMessage, setErrorMessage] = useState("");
+  const defaultRef = useRef(null);
+  const anchorRef = usePopoverContentRef() ?? defaultRef;
+  const handleChange = (newValue) => {
+    setColor(newValue);
+    const errorMsg = validateValue(newValue);
+    setErrorMessage(errorMsg);
+    onChange(errorMsg ? "" : newValue);
+  };
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(FormLabel, { size: "tiny" }, __3("Value", "elementor"))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+    UnstableColorField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: color,
+      onChange: handleChange,
+      error: errorMessage ?? void 0,
+      slotProps: {
+        colorPicker: {
+          anchorEl: anchorRef.current,
+          anchorOrigin: { vertical: "top", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: -10 }
+        }
+      }
+    }
+  ), errorMessage && /* @__PURE__ */ React.createElement(FormHelperText, { error: true }, errorMessage)));
+};
+
+// src/components/fields/label-field.tsx
+import * as React2 from "react";
+import { useId, useState as useState2 } from "react";
+import { FormHelperText as FormHelperText2, FormLabel as FormLabel2, Grid as Grid2, TextField } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+var LabelField = ({ value, onChange }) => {
+  const [label, setLabel] = useState2(value);
+  const [errorMessage, setErrorMessage] = useState2("");
+  const [noticeMessage, setNoticeMessage] = useState2(() => labelHint(value));
+  const handleChange = (newValue) => {
+    setLabel(newValue);
+    const errorMsg = validateLabel(newValue);
+    const hintMsg = labelHint(newValue);
+    setErrorMessage(errorMsg);
+    setNoticeMessage(errorMsg ? "" : hintMsg);
+    onChange(errorMsg ? "" : newValue);
+  };
+  const id = useId();
+  return /* @__PURE__ */ React2.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel2, { htmlFor: id, size: "tiny" }, __4("Name", "elementor"))), /* @__PURE__ */ React2.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+    TextField,
+    {
+      id,
+      size: "tiny",
+      fullWidth: true,
+      value: label,
+      error: !!errorMessage,
+      onChange: (e) => handleChange(e.target.value),
+      inputProps: { maxLength: VARIABLE_LABEL_MAX_LENGTH }
+    }
+  ), errorMessage && /* @__PURE__ */ React2.createElement(FormHelperText2, { error: true }, errorMessage), noticeMessage && /* @__PURE__ */ React2.createElement(FormHelperText2, null, noticeMessage)));
+};
+
 // src/components/color-variable-creation.tsx
-var SIZE2 = "tiny";
+var SIZE = "tiny";
 var ColorVariableCreation = ({ onGoBack, onClose }) => {
   const { setValue: setVariable } = useBoundProp(colorVariablePropTypeUtil);
-  const [color, setColor] = useState("");
-  const [label, setLabel] = useState("");
-  const defaultRef = useRef(null);
-  const anchorRef = usePopoverContentRef() ?? defaultRef;
+  const [color, setColor] = useState3("");
+  const [label, setLabel] = useState3("");
+  const [errorMessage, setErrorMessage] = useState3("");
   const resetFields = () => {
     setColor("");
     setLabel("");
+    setErrorMessage("");
   };
   const closePopover = () => {
     resetFields();
@@ -427,148 +531,201 @@ var ColorVariableCreation = ({ onGoBack, onClose }) => {
     }).then((key) => {
       setVariable(key);
       closePopover();
+    }).catch((error) => {
+      setErrorMessage(error.message);
     });
   };
-  const isFormInvalid = () => {
-    return !color?.trim() || !label?.trim();
+  const hasEmptyValue = () => {
+    return "" === color.trim() || "" === label.trim();
   };
-  return /* @__PURE__ */ React3.createElement(PopoverScrollableContent, { height: "auto" }, /* @__PURE__ */ React3.createElement(
+  const isSubmitDisabled = hasEmptyValue();
+  return /* @__PURE__ */ React3.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React3.createElement(
     PopoverHeader,
     {
-      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(IconButton2, { size: SIZE2, "aria-label": __2("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React3.createElement(BrushIcon, { fontSize: SIZE2 })),
-      title: __2("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React3.createElement(React3.Fragment, null, onGoBack && /* @__PURE__ */ React3.createElement(IconButton, { size: SIZE, "aria-label": __5("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React3.createElement(BrushIcon, { fontSize: SIZE })),
+      title: __5("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React3.createElement(Divider, null), /* @__PURE__ */ React3.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React3.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, __2("Name", "elementor"))), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
-    TextField,
+  ), /* @__PURE__ */ React3.createElement(Divider, null), /* @__PURE__ */ React3.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React3.createElement(
+    LabelField,
     {
-      size: "tiny",
-      fullWidth: true,
       value: label,
-      onChange: (e) => setLabel(e.target.value)
+      onChange: (value) => {
+        setLabel(value);
+        setErrorMessage("");
+      }
     }
-  ))), /* @__PURE__ */ React3.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, __2("Value", "elementor"))), /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
-    UnstableColorField,
+  ), /* @__PURE__ */ React3.createElement(
+    ColorField,
     {
-      size: "tiny",
-      fullWidth: true,
       value: color,
-      onChange: setColor,
-      slotProps: {
-        colorPicker: {
-          anchorEl: anchorRef.current,
-          anchorOrigin: { vertical: "top", horizontal: "right" },
-          transformOrigin: { vertical: "top", horizontal: -10 }
-        }
+      onChange: (value) => {
+        setColor(value);
+        setErrorMessage("");
       }
     }
-  )))), /* @__PURE__ */ React3.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React3.createElement(Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __2("Create", "elementor"))));
+  ), errorMessage && /* @__PURE__ */ React3.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React3.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React3.createElement(Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreate }, __5("Create", "elementor"))));
 };
 
 // src/components/color-variable-edit.tsx
-import * as React4 from "react";
-import { useRef as useRef2, useState as useState2 } from "react";
-import { PopoverContent as PopoverContent2 } from "@elementor/editor-controls";
-import { PopoverHeader as PopoverHeader2, PopoverScrollableContent as PopoverScrollableContent2 } from "@elementor/editor-ui";
+import * as React5 from "react";
+import { useState as useState4 } from "react";
+import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { PopoverBody as PopoverBody2 } from "@elementor/editor-editing-panel";
+import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
 import { ArrowLeftIcon as ArrowLeftIcon2, BrushIcon as BrushIcon2, TrashIcon } from "@elementor/icons";
+import { Button as Button3, CardActions as CardActions2, Divider as Divider2, FormHelperText as FormHelperText4, IconButton as IconButton2 } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
+
+// src/components/ui/delete-confirmation-dialog.tsx
+import * as React4 from "react";
+import { AlertOctagonFilledIcon } from "@elementor/icons";
 import {
   Button as Button2,
-  CardActions as CardActions2,
-  Divider as Divider2,
-  FormLabel as FormLabel2,
-  Grid as Grid2,
-  IconButton as IconButton3,
-  TextField as TextField2,
-  UnstableColorField as UnstableColorField2
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Typography
 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
-var SIZE3 = "tiny";
+import { __ as __6 } from "@wordpress/i18n";
+var TITLE_ID = "delete-variable-dialog";
+var DeleteConfirmationDialog = ({
+  open,
+  label,
+  closeDialog,
+  onConfirm
+}) => {
+  return /* @__PURE__ */ React4.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React4.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React4.createElement(AlertOctagonFilledIcon, { color: "error" }), __6("Delete this variable?", "elementor")), /* @__PURE__ */ React4.createElement(DialogContent, null, /* @__PURE__ */ React4.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __6("All elements using", "elementor"), /* @__PURE__ */ React4.createElement(Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __6("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React4.createElement(DialogActions, null, /* @__PURE__ */ React4.createElement(Button2, { color: "secondary", onClick: closeDialog }, __6("Not now", "elementor")), /* @__PURE__ */ React4.createElement(Button2, { variant: "contained", color: "error", onClick: onConfirm }, __6("Delete", "elementor"))));
+};
+
+// src/components/color-variable-edit.tsx
+var SIZE2 = "tiny";
 var ColorVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
+  const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp2(colorVariablePropTypeUtil);
+  const [deleteConfirmation, setDeleteConfirmation] = useState4(false);
+  const [errorMessage, setErrorMessage] = useState4("");
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global color variable not found`);
   }
-  const defaultRef = useRef2(null);
-  const anchorRef = usePopoverContentRef() ?? defaultRef;
-  const [color, setColor] = useState2(variable.value);
-  const [label, setLabel] = useState2(variable.label);
+  const [color, setColor] = useState4(variable.value);
+  const [label, setLabel] = useState4(variable.label);
   const handleUpdate = () => {
     updateVariable(editId, {
       value: color,
       label
     }).then(() => {
+      maybeTriggerBoundPropChange();
       onSubmit?.();
+    }).catch((error) => {
+      setErrorMessage(error.message);
     });
   };
   const handleDelete = () => {
     deleteVariable(editId).then(() => {
+      maybeTriggerBoundPropChange();
       onSubmit?.();
     });
   };
-  const noValueChanged = () => color === variable.value && label === variable.label;
-  const hasEmptyValue = () => "" === color.trim() || "" === label.trim();
-  const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
+  const maybeTriggerBoundPropChange = () => {
+    if (editId === assignedValue) {
+      notifyBoundPropChange(editId);
+    }
+  };
+  const handleDeleteConfirmation = () => {
+    setDeleteConfirmation(true);
+  };
+  const closeDeleteDialog = () => () => {
+    setDeleteConfirmation(false);
+  };
   const actions = [];
   actions.push(
-    /* @__PURE__ */ React4.createElement(IconButton3, { key: "delete", size: SIZE3, "aria-label": __3("Delete", "elementor"), onClick: handleDelete }, /* @__PURE__ */ React4.createElement(TrashIcon, { fontSize: SIZE3 }))
+    /* @__PURE__ */ React5.createElement(
+      IconButton2,
+      {
+        key: "delete",
+        size: SIZE2,
+        "aria-label": __7("Delete", "elementor"),
+        onClick: handleDeleteConfirmation
+      },
+      /* @__PURE__ */ React5.createElement(TrashIcon, { fontSize: SIZE2 })
+    )
   );
-  return /* @__PURE__ */ React4.createElement(PopoverScrollableContent2, { height: "auto" }, /* @__PURE__ */ React4.createElement(
+  const hasEmptyValues = () => {
+    return !color.trim() || !label.trim();
+  };
+  const noValueChanged = () => {
+    return color === variable.value && label === variable.label;
+  };
+  const isSubmitDisabled = noValueChanged() || hasEmptyValues();
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React5.createElement(
     PopoverHeader2,
     {
-      title: __3("Edit variable", "elementor"),
+      title: __7("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React4.createElement(React4.Fragment, null, onGoBack && /* @__PURE__ */ React4.createElement(IconButton3, { size: SIZE3, "aria-label": __3("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React4.createElement(ArrowLeftIcon2, { fontSize: SIZE3 })), /* @__PURE__ */ React4.createElement(BrushIcon2, { fontSize: SIZE3 })),
+      icon: /* @__PURE__ */ React5.createElement(React5.Fragment, null, onGoBack && /* @__PURE__ */ React5.createElement(
+        IconButton2,
+        {
+          size: SIZE2,
+          "aria-label": __7("Go Back", "elementor"),
+          onClick: onGoBack
+        },
+        /* @__PURE__ */ React5.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })
+      ), /* @__PURE__ */ React5.createElement(BrushIcon2, { fontSize: SIZE2 })),
       actions
     }
-  ), /* @__PURE__ */ React4.createElement(Divider2, null), /* @__PURE__ */ React4.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React4.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React4.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(FormLabel2, { size: "tiny" }, __3("Name", "elementor"))), /* @__PURE__ */ React4.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(
-    TextField2,
+  ), /* @__PURE__ */ React5.createElement(Divider2, null), /* @__PURE__ */ React5.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React5.createElement(
+    LabelField,
     {
-      size: "tiny",
-      fullWidth: true,
       value: label,
-      onChange: (e) => setLabel(e.target.value)
+      onChange: (value) => {
+        setLabel(value);
+        setErrorMessage("");
+      }
     }
-  ))), /* @__PURE__ */ React4.createElement(Grid2, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React4.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(FormLabel2, { size: "tiny" }, __3("Value", "elementor"))), /* @__PURE__ */ React4.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React4.createElement(
-    UnstableColorField2,
+  ), /* @__PURE__ */ React5.createElement(
+    ColorField,
     {
-      size: "tiny",
-      fullWidth: true,
       value: color,
-      onChange: setColor,
-      slotProps: {
-        colorPicker: {
-          anchorEl: anchorRef.current,
-          anchorOrigin: { vertical: "top", horizontal: "right" },
-          transformOrigin: { vertical: "top", horizontal: -10 }
-        }
+      onChange: (value) => {
+        setColor(value);
+        setErrorMessage("");
       }
     }
-  )))), /* @__PURE__ */ React4.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React4.createElement(Button2, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, __3("Save", "elementor"))));
+  ), errorMessage && /* @__PURE__ */ React5.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React5.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React5.createElement(Button3, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __7("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React5.createElement(
+    DeleteConfirmationDialog,
+    {
+      open: true,
+      label,
+      onConfirm: handleDelete,
+      closeDialog: closeDeleteDialog()
+    }
+  ));
 };
 
 // src/components/color-variables-selection.tsx
-import * as React8 from "react";
-import { useState as useState3 } from "react";
-import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
-import { PopoverScrollableContent as PopoverScrollableContent3 } from "@elementor/editor-editing-panel";
+import * as React9 from "react";
+import { useState as useState5 } from "react";
+import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { PopoverBody as PopoverBody3 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader3, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
 import { BrushIcon as BrushIcon3, ColorFilterIcon, PlusIcon, SettingsIcon } from "@elementor/icons";
-import { Divider as Divider3, IconButton as IconButton5 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { Divider as Divider3, IconButton as IconButton4 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 
 // src/components/ui/menu-item-content.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { EllipsisWithTooltip } from "@elementor/editor-ui";
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
 import { EditIcon } from "@elementor/icons";
-import { Box as Box2, IconButton as IconButton4, ListItemIcon, Typography as Typography2 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
-var SIZE4 = "tiny";
-var isVersion330Active = isExperimentActive("e_v_3_30");
+import { Box, IconButton as IconButton3, ListItemIcon, Typography as Typography2 } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
+var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React5.createElement(
-    Box2,
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React6.createElement(
+    Box,
     {
       sx: {
         flex: 1,
@@ -578,18 +735,18 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       EllipsisWithTooltip,
       {
         title: item.label || item.value,
         as: Typography2,
-        variant: isVersion330Active ? "caption" : "body2",
-        color: isVersion330Active ? "text.primary" : "text.secondary",
+        variant: "caption",
+        color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React5.createElement(
+    item.secondaryText && /* @__PURE__ */ React6.createElement(
       EllipsisWithTooltip,
       {
         title: item.secondaryText,
@@ -600,27 +757,27 @@ var MenuItemContent = ({ item }) => {
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React5.createElement(
-    IconButton4,
+  ), !!onEdit && /* @__PURE__ */ React6.createElement(
+    IconButton3,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": __4("Edit", "elementor")
+      "aria-label": __8("Edit", "elementor")
     },
-    /* @__PURE__ */ React5.createElement(EditIcon, { color: "action", fontSize: SIZE4 })
+    /* @__PURE__ */ React6.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-import * as React6 from "react";
-import { Link, Stack as Stack2, Typography as Typography3 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import * as React7 from "react";
+import { Link, Stack, Typography as Typography3 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React6.createElement(
-    Stack2,
+  return /* @__PURE__ */ React7.createElement(
+    Stack,
     {
       gap: 1,
       alignItems: "center",
@@ -631,17 +788,17 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React6.createElement(Typography3, { align: "center", variant: "subtitle2" }, __5("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React6.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React6.createElement(Typography3, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __5("Try something else.", "elementor"), /* @__PURE__ */ React6.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __5("Clear & try again", "elementor")))
+    /* @__PURE__ */ React7.createElement(Typography3, { align: "center", variant: "subtitle2" }, __9("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React7.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React7.createElement(Typography3, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __9("Try something else.", "elementor"), /* @__PURE__ */ React7.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __9("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
-import * as React7 from "react";
-import { Button as Button3, Stack as Stack3, Typography as Typography4 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
-var NoVariables = ({ icon, title, onAdd }) => /* @__PURE__ */ React7.createElement(
-  Stack3,
+import * as React8 from "react";
+import { Button as Button4, Stack as Stack2, Typography as Typography4 } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
+var NoVariables = ({ icon, title, onAdd }) => /* @__PURE__ */ React8.createElement(
+  Stack2,
   {
     gap: 1,
     alignItems: "center",
@@ -651,9 +808,9 @@ var NoVariables = ({ icon, title, onAdd }) => /* @__PURE__ */ React7.createEleme
     sx: { p: 2.5, pb: 5.5 }
   },
   icon,
-  /* @__PURE__ */ React7.createElement(Typography4, { align: "center", variant: "subtitle2" }, title),
-  /* @__PURE__ */ React7.createElement(Typography4, { align: "center", variant: "caption", maxWidth: "180px" }, __6("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
-  onAdd && /* @__PURE__ */ React7.createElement(Button3, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __6("Create a variable", "elementor"))
+  /* @__PURE__ */ React8.createElement(Typography4, { align: "center", variant: "subtitle2" }, title),
+  /* @__PURE__ */ React8.createElement(Typography4, { align: "center", variant: "caption", maxWidth: "180px" }, __10("Variables are saved attributes that you can apply anywhere on your site.", "elementor")),
+  onAdd && /* @__PURE__ */ React8.createElement(Button4, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __10("Create a variable", "elementor"))
 );
 
 // src/components/ui/styled-menu-list.tsx
@@ -689,10 +846,10 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
 }));
 
 // src/components/color-variables-selection.tsx
-var SIZE5 = "tiny";
+var SIZE4 = "tiny";
 var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
-  const { value: variable, setValue: setVariable } = useBoundProp2(colorVariablePropTypeUtil);
-  const [searchValue, setSearchValue] = useState3("");
+  const { value: variable, setValue: setVariable } = useBoundProp3(colorVariablePropTypeUtil);
+  const [searchValue, setSearchValue] = useState5("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -705,19 +862,19 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React8.createElement(IconButton5, { key: "add", size: SIZE5, onClick: onAdd }, /* @__PURE__ */ React8.createElement(PlusIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React9.createElement(IconButton4, { key: "add", size: SIZE4, onClick: onAdd }, /* @__PURE__ */ React9.createElement(PlusIcon, { fontSize: SIZE4 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React8.createElement(IconButton5, { key: "settings", size: SIZE5, onClick: onSettings }, /* @__PURE__ */ React8.createElement(SettingsIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React9.createElement(IconButton4, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React9.createElement(SettingsIcon, { fontSize: SIZE4 }))
     );
   }
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React8.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
+    icon: /* @__PURE__ */ React9.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
     secondaryText: value,
     onEdit: () => onEdit?.(key)
   }));
@@ -727,22 +884,22 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(PopoverBody3, null, /* @__PURE__ */ React9.createElement(
     PopoverHeader3,
     {
-      title: __7("Variables", "elementor"),
-      icon: /* @__PURE__ */ React8.createElement(ColorFilterIcon, { fontSize: SIZE5 }),
+      title: __11("Variables", "elementor"),
+      icon: /* @__PURE__ */ React9.createElement(ColorFilterIcon, { fontSize: SIZE4 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React8.createElement(
+  ), hasVariables && /* @__PURE__ */ React9.createElement(
     PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __7("Search", "elementor")
+      placeholder: __11("Search", "elementor")
     }
-  ), /* @__PURE__ */ React8.createElement(Divider3, null), /* @__PURE__ */ React8.createElement(PopoverScrollableContent3, null, hasVariables && hasSearchResults && /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(Divider3, null), hasVariables && hasSearchResults && /* @__PURE__ */ React9.createElement(
     PopoverMenuList,
     {
       items,
@@ -752,58 +909,113 @@ var ColorVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       selectedValue: variable,
       "data-testid": "color-variables-list",
       menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React8.createElement(MenuItemContent, { item })
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React9.createElement(MenuItemContent, { item })
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React8.createElement(
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React9.createElement(
     NoSearchResults,
     {
       searchValue,
       onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React8.createElement(BrushIcon3, { fontSize: "large" })
+      icon: /* @__PURE__ */ React9.createElement(BrushIcon3, { fontSize: "large" })
     }
-  ), !hasVariables && /* @__PURE__ */ React8.createElement(
+  ), !hasVariables && /* @__PURE__ */ React9.createElement(
     NoVariables,
     {
-      title: __7("Create your first color variable", "elementor"),
-      icon: /* @__PURE__ */ React8.createElement(BrushIcon3, { fontSize: "large" }),
+      title: __11("Create your first color variable", "elementor"),
+      icon: /* @__PURE__ */ React9.createElement(BrushIcon3, { fontSize: "large" }),
       onAdd
     }
-  )));
+  ));
 };
 
 // src/components/font-variable-creation.tsx
-import * as React9 from "react";
-import { useRef as useRef3, useState as useState4 } from "react";
-import { FontFamilySelector, PopoverContent as PopoverContent3, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
-import { PopoverScrollableContent as PopoverScrollableContent4, useFontFamilies, useSectionWidth } from "@elementor/editor-editing-panel";
+import * as React11 from "react";
+import { useState as useState7 } from "react";
+import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { PopoverBody as PopoverBody4 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
-import { ArrowLeftIcon as ArrowLeftIcon3, ChevronDownIcon, TextIcon } from "@elementor/icons";
+import { ArrowLeftIcon as ArrowLeftIcon3, TextIcon } from "@elementor/icons";
+import { Button as Button5, CardActions as CardActions3, Divider as Divider4, FormHelperText as FormHelperText6, IconButton as IconButton5 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
+
+// src/components/fields/font-field.tsx
+import * as React10 from "react";
+import { useRef as useRef2, useState as useState6 } from "react";
+import { FontFamilySelector } from "@elementor/editor-controls";
+import { useFontFamilies, useSectionWidth } from "@elementor/editor-editing-panel";
+import { ChevronDownIcon } from "@elementor/icons";
 import {
   bindPopover,
   bindTrigger,
-  Button as Button4,
-  CardActions as CardActions3,
-  Divider as Divider4,
+  FormHelperText as FormHelperText5,
   FormLabel as FormLabel3,
   Grid as Grid3,
-  IconButton as IconButton6,
   Popover,
-  TextField as TextField3,
   UnstableTag,
   usePopupState
 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
-var SIZE6 = "tiny";
-var FontVariableCreation = ({ onClose, onGoBack }) => {
-  const fontFamilies = useFontFamilies();
-  const { setValue: setVariable } = useBoundProp3(fontVariablePropTypeUtil);
-  const [fontFamily, setFontFamily] = useState4("");
-  const [label, setLabel] = useState4("");
-  const anchorRef = useRef3(null);
-  const fontPopoverState = usePopupState({ variant: "popover" });
+import { __ as __12 } from "@wordpress/i18n";
+var FontField = ({ value, onChange }) => {
+  const [fontFamily, setFontFamily] = useState6(value);
+  const [errorMessage, setErrorMessage] = useState6("");
+  const defaultRef = useRef2(null);
+  const anchorRef = usePopoverContentRef() ?? defaultRef;
+  const fontPopoverState = usePopupState({ variant: "popover" });
+  const fontFamilies = useFontFamilies();
+  const sectionWidth = useSectionWidth();
+  const handleChange = (newValue) => {
+    setFontFamily(newValue);
+    const errorMsg = validateValue(newValue);
+    setErrorMessage(errorMsg);
+    onChange(errorMsg ? "" : newValue);
+  };
+  const handleFontFamilyChange = (newFontFamily) => {
+    handleChange(newFontFamily);
+    fontPopoverState.close();
+  };
+  return /* @__PURE__ */ React10.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(FormLabel3, { size: "tiny" }, __12("Value", "elementor"))), /* @__PURE__ */ React10.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(
+    UnstableTag,
+    {
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React10.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      ...bindTrigger(fontPopoverState),
+      fullWidth: true
+    }
+  ), /* @__PURE__ */ React10.createElement(
+    Popover,
+    {
+      disablePortal: true,
+      disableScrollLock: true,
+      anchorEl: anchorRef.current,
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: -20 },
+      ...bindPopover(fontPopoverState)
+    },
+    /* @__PURE__ */ React10.createElement(
+      FontFamilySelector,
+      {
+        fontFamilies,
+        fontFamily,
+        onFontFamilyChange: handleFontFamilyChange,
+        onClose: fontPopoverState.close,
+        sectionWidth
+      }
+    )
+  ), errorMessage && /* @__PURE__ */ React10.createElement(FormHelperText5, { error: true }, errorMessage)));
+};
+
+// src/components/font-variable-creation.tsx
+var SIZE5 = "tiny";
+var FontVariableCreation = ({ onClose, onGoBack }) => {
+  const { setValue: setVariable } = useBoundProp4(fontVariablePropTypeUtil);
+  const [fontFamily, setFontFamily] = useState7("");
+  const [label, setLabel] = useState7("");
+  const [errorMessage, setErrorMessage] = useState7("");
   const resetFields = () => {
     setFontFamily("");
     setLabel("");
+    setErrorMessage("");
   };
   const closePopover = () => {
     resetFields();
@@ -817,178 +1029,168 @@ var FontVariableCreation = ({ onClose, onGoBack }) => {
     }).then((key) => {
       setVariable(key);
       closePopover();
+    }).catch((error) => {
+      setErrorMessage(error.message);
     });
   };
-  const isFormInvalid = () => {
-    return !fontFamily?.trim() || !label?.trim();
+  const hasEmptyValue = () => {
+    return "" === fontFamily.trim() || "" === label.trim();
   };
-  const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React9.createElement(PopoverScrollableContent4, { height: "auto" }, /* @__PURE__ */ React9.createElement(
+  const isSubmitDisabled = hasEmptyValue();
+  return /* @__PURE__ */ React11.createElement(PopoverBody4, { height: "auto" }, /* @__PURE__ */ React11.createElement(
     PopoverHeader4,
     {
-      icon: /* @__PURE__ */ React9.createElement(React9.Fragment, null, onGoBack && /* @__PURE__ */ React9.createElement(IconButton6, { size: SIZE6, "aria-label": __8("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React9.createElement(ArrowLeftIcon3, { fontSize: SIZE6 })), /* @__PURE__ */ React9.createElement(TextIcon, { fontSize: SIZE6 })),
-      title: __8("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(IconButton5, { size: SIZE5, "aria-label": __13("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(ArrowLeftIcon3, { fontSize: SIZE5 })), /* @__PURE__ */ React11.createElement(TextIcon, { fontSize: SIZE5 })),
+      title: __13("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React9.createElement(Divider4, null), /* @__PURE__ */ React9.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React9.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(FormLabel3, { size: "tiny" }, __8("Name", "elementor"))), /* @__PURE__ */ React9.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(
-    TextField3,
+  ), /* @__PURE__ */ React11.createElement(Divider4, null), /* @__PURE__ */ React11.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React11.createElement(
+    LabelField,
     {
-      size: "tiny",
-      fullWidth: true,
       value: label,
-      onChange: (e) => setLabel(e.target.value)
-    }
-  ))), /* @__PURE__ */ React9.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(FormLabel3, { size: "tiny" }, __8("Value", "elementor"))), /* @__PURE__ */ React9.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
-    UnstableTag,
-    {
-      variant: "outlined",
-      label: fontFamily,
-      endIcon: /* @__PURE__ */ React9.createElement(ChevronDownIcon, { fontSize: "tiny" }),
-      ...bindTrigger(fontPopoverState),
-      fullWidth: true
+      onChange: (value) => {
+        setLabel(value);
+        setErrorMessage("");
+      }
     }
-  ), /* @__PURE__ */ React9.createElement(
-    Popover,
+  ), /* @__PURE__ */ React11.createElement(
+    FontField,
     {
-      disablePortal: true,
-      disableScrollLock: true,
-      anchorEl: anchorRef.current,
-      anchorOrigin: { vertical: "top", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: -20 },
-      ...bindPopover(fontPopoverState)
-    },
-    /* @__PURE__ */ React9.createElement(
-      FontFamilySelector,
-      {
-        fontFamilies,
-        fontFamily,
-        onFontFamilyChange: setFontFamily,
-        onClose: fontPopoverState.close,
-        sectionWidth
+      value: fontFamily,
+      onChange: (value) => {
+        setFontFamily(value);
+        setErrorMessage("");
       }
-    )
-  ))))), /* @__PURE__ */ React9.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React9.createElement(Button4, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, __8("Create", "elementor"))));
+    }
+  ), errorMessage && /* @__PURE__ */ React11.createElement(FormHelperText6, { error: true }, errorMessage)), /* @__PURE__ */ React11.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreate }, __13("Create", "elementor"))));
 };
 
 // src/components/font-variable-edit.tsx
-import * as React10 from "react";
-import { useId, useRef as useRef4, useState as useState5 } from "react";
-import { FontFamilySelector as FontFamilySelector2, PopoverContent as PopoverContent4 } from "@elementor/editor-controls";
-import { useFontFamilies as useFontFamilies2, useSectionWidth as useSectionWidth2 } from "@elementor/editor-editing-panel";
-import { PopoverHeader as PopoverHeader5, PopoverScrollableContent as PopoverScrollableContent5 } from "@elementor/editor-ui";
-import { ArrowLeftIcon as ArrowLeftIcon4, ChevronDownIcon as ChevronDownIcon2, TextIcon as TextIcon2, TrashIcon as TrashIcon2 } from "@elementor/icons";
-import {
-  bindPopover as bindPopover2,
-  bindTrigger as bindTrigger2,
-  Button as Button5,
-  CardActions as CardActions4,
-  Divider as Divider5,
-  FormLabel as FormLabel4,
-  Grid as Grid4,
-  IconButton as IconButton7,
-  Popover as Popover2,
-  TextField as TextField4,
-  UnstableTag as UnstableTag2,
-  usePopupState as usePopupState2
-} from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
-var SIZE7 = "tiny";
+import * as React12 from "react";
+import { useState as useState8 } from "react";
+import { PopoverContent as PopoverContent4, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+import { PopoverBody as PopoverBody5 } from "@elementor/editor-editing-panel";
+import { PopoverHeader as PopoverHeader5 } from "@elementor/editor-ui";
+import { ArrowLeftIcon as ArrowLeftIcon4, TextIcon as TextIcon2, TrashIcon as TrashIcon2 } from "@elementor/icons";
+import { Button as Button6, CardActions as CardActions4, Divider as Divider5, FormHelperText as FormHelperText7, IconButton as IconButton6 } from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
+var SIZE6 = "tiny";
 var FontVariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
+  const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp5(fontVariablePropTypeUtil);
+  const [deleteConfirmation, setDeleteConfirmation] = useState8(false);
+  const [errorMessage, setErrorMessage] = useState8("");
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global font variable "${editId}" not found`);
   }
-  const [fontFamily, setFontFamily] = useState5(variable.value);
-  const [label, setLabel] = useState5(variable.label);
-  const variableNameId = useId();
-  const variableValueId = useId();
-  const anchorRef = useRef4(null);
-  const fontPopoverState = usePopupState2({ variant: "popover" });
-  const fontFamilies = useFontFamilies2();
+  const [fontFamily, setFontFamily] = useState8(variable.value);
+  const [label, setLabel] = useState8(variable.label);
   const handleUpdate = () => {
     updateVariable(editId, {
       value: fontFamily,
       label
     }).then(() => {
+      maybeTriggerBoundPropChange();
       onSubmit?.();
+    }).catch((error) => {
+      setErrorMessage(error.message);
     });
   };
   const handleDelete = () => {
     deleteVariable(editId).then(() => {
+      maybeTriggerBoundPropChange();
       onSubmit?.();
     });
   };
-  const noValueChanged = () => fontFamily === variable.value && label === variable.label;
-  const hasEmptyValue = () => "" === fontFamily.trim() || "" === label.trim();
-  const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
-  const sectionWidth = useSectionWidth2();
+  const maybeTriggerBoundPropChange = () => {
+    if (editId === assignedValue) {
+      notifyBoundPropChange(editId);
+    }
+  };
+  const handleDeleteConfirmation = () => {
+    setDeleteConfirmation(true);
+  };
+  const closeDeleteDialog = () => () => {
+    setDeleteConfirmation(false);
+  };
+  const hasEmptyValue = () => {
+    return !fontFamily.trim() || !label.trim();
+  };
+  const noValueChanged = () => {
+    return fontFamily === variable.value && label === variable.label;
+  };
+  const isSubmitDisabled = noValueChanged() || hasEmptyValue();
   const actions = [];
   actions.push(
-    /* @__PURE__ */ React10.createElement(IconButton7, { key: "delete", size: SIZE7, "aria-label": __9("Delete", "elementor"), onClick: handleDelete }, /* @__PURE__ */ React10.createElement(TrashIcon2, { fontSize: SIZE7 }))
+    /* @__PURE__ */ React12.createElement(
+      IconButton6,
+      {
+        key: "delete",
+        size: SIZE6,
+        "aria-label": __14("Delete", "elementor"),
+        onClick: handleDeleteConfirmation
+      },
+      /* @__PURE__ */ React12.createElement(TrashIcon2, { fontSize: SIZE6 })
+    )
   );
-  return /* @__PURE__ */ React10.createElement(PopoverScrollableContent5, { height: "auto" }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(PopoverBody5, { height: "auto" }, /* @__PURE__ */ React12.createElement(
     PopoverHeader5,
     {
-      icon: /* @__PURE__ */ React10.createElement(React10.Fragment, null, onGoBack && /* @__PURE__ */ React10.createElement(IconButton7, { size: SIZE7, "aria-label": __9("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon4, { fontSize: SIZE7 })), /* @__PURE__ */ React10.createElement(TextIcon2, { fontSize: SIZE7 })),
-      title: __9("Edit variable", "elementor"),
+      icon: /* @__PURE__ */ React12.createElement(React12.Fragment, null, onGoBack && /* @__PURE__ */ React12.createElement(
+        IconButton6,
+        {
+          size: SIZE6,
+          "aria-label": __14("Go Back", "elementor"),
+          onClick: onGoBack
+        },
+        /* @__PURE__ */ React12.createElement(ArrowLeftIcon4, { fontSize: SIZE6 })
+      ), /* @__PURE__ */ React12.createElement(TextIcon2, { fontSize: SIZE6 })),
+      title: __14("Edit variable", "elementor"),
       onClose,
       actions
     }
-  ), /* @__PURE__ */ React10.createElement(Divider5, null), /* @__PURE__ */ React10.createElement(PopoverContent4, { p: 2 }, /* @__PURE__ */ React10.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(FormLabel4, { htmlFor: variableNameId, size: "tiny" }, __9("Name", "elementor"))), /* @__PURE__ */ React10.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(
-    TextField4,
+  ), /* @__PURE__ */ React12.createElement(Divider5, null), /* @__PURE__ */ React12.createElement(PopoverContent4, { p: 2 }, /* @__PURE__ */ React12.createElement(
+    LabelField,
     {
-      id: variableNameId,
-      size: "tiny",
-      fullWidth: true,
       value: label,
-      onChange: (e) => setLabel(e.target.value)
+      onChange: (value) => {
+        setLabel(value);
+        setErrorMessage("");
+      }
     }
-  ))), /* @__PURE__ */ React10.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(FormLabel4, { htmlFor: variableValueId, size: "tiny" }, __9("Value", "elementor"))), /* @__PURE__ */ React10.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
-    UnstableTag2,
+  ), /* @__PURE__ */ React12.createElement(
+    FontField,
     {
-      id: variableValueId,
-      variant: "outlined",
-      label: fontFamily,
-      endIcon: /* @__PURE__ */ React10.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
-      ...bindTrigger2(fontPopoverState),
-      fullWidth: true
+      value: fontFamily,
+      onChange: (value) => {
+        setFontFamily(value);
+        setErrorMessage("");
+      }
     }
-  ), /* @__PURE__ */ React10.createElement(
-    Popover2,
+  ), errorMessage && /* @__PURE__ */ React12.createElement(FormHelperText7, { error: true }, errorMessage)), /* @__PURE__ */ React12.createElement(CardActions4, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(Button6, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __14("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React12.createElement(
+    DeleteConfirmationDialog,
     {
-      disablePortal: true,
-      disableScrollLock: true,
-      anchorEl: anchorRef.current,
-      anchorOrigin: { vertical: "top", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: -20 },
-      ...bindPopover2(fontPopoverState)
-    },
-    /* @__PURE__ */ React10.createElement(
-      FontFamilySelector2,
-      {
-        fontFamilies,
-        fontFamily,
-        onFontFamilyChange: setFontFamily,
-        onClose: fontPopoverState.close,
-        sectionWidth
-      }
-    )
-  ))))), /* @__PURE__ */ React10.createElement(CardActions4, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React10.createElement(Button5, { size: "small", variant: "contained", disabled: isSaveDisabled(), onClick: handleUpdate }, __9("Save", "elementor"))));
+      open: true,
+      label,
+      onConfirm: handleDelete,
+      closeDialog: closeDeleteDialog()
+    }
+  ));
 };
 
 // src/components/font-variables-selection.tsx
-import * as React11 from "react";
-import { useState as useState6 } from "react";
-import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
-import { PopoverScrollableContent as PopoverScrollableContent6 } from "@elementor/editor-editing-panel";
+import * as React13 from "react";
+import { useState as useState9 } from "react";
+import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
+import { PopoverBody as PopoverBody6 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader6, PopoverMenuList as PopoverMenuList2, PopoverSearch as PopoverSearch2 } from "@elementor/editor-ui";
 import { ColorFilterIcon as ColorFilterIcon2, PlusIcon as PlusIcon2, SettingsIcon as SettingsIcon2, TextIcon as TextIcon3 } from "@elementor/icons";
-import { Divider as Divider6, IconButton as IconButton8 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
-var SIZE8 = "tiny";
+import { Divider as Divider6, IconButton as IconButton7 } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
+var SIZE7 = "tiny";
 var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
-  const { value: variable, setValue: setVariable } = useBoundProp4(fontVariablePropTypeUtil);
-  const [searchValue, setSearchValue] = useState6("");
+  const { value: variable, setValue: setVariable } = useBoundProp6(fontVariablePropTypeUtil);
+  const [searchValue, setSearchValue] = useState9("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -1001,19 +1203,19 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React11.createElement(IconButton8, { key: "add", size: SIZE8, onClick: onAdd }, /* @__PURE__ */ React11.createElement(PlusIcon2, { fontSize: SIZE8 }))
+      /* @__PURE__ */ React13.createElement(IconButton7, { key: "add", size: SIZE7, onClick: onAdd }, /* @__PURE__ */ React13.createElement(PlusIcon2, { fontSize: SIZE7 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React11.createElement(IconButton8, { key: "settings", size: SIZE8, onClick: onSettings }, /* @__PURE__ */ React11.createElement(SettingsIcon2, { fontSize: SIZE8 }))
+      /* @__PURE__ */ React13.createElement(IconButton7, { key: "settings", size: SIZE7, onClick: onSettings }, /* @__PURE__ */ React13.createElement(SettingsIcon2, { fontSize: SIZE7 }))
     );
   }
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React11.createElement(TextIcon3, { fontSize: SIZE8 }),
+    icon: /* @__PURE__ */ React13.createElement(TextIcon3, { fontSize: SIZE7 }),
     secondaryText: value,
     onEdit: () => onEdit?.(key)
   }));
@@ -1023,22 +1225,22 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(PopoverBody6, null, /* @__PURE__ */ React13.createElement(
     PopoverHeader6,
     {
-      title: __10("Variables", "elementor"),
+      title: __15("Variables", "elementor"),
       onClose: closePopover,
-      icon: /* @__PURE__ */ React11.createElement(ColorFilterIcon2, { fontSize: SIZE8 }),
+      icon: /* @__PURE__ */ React13.createElement(ColorFilterIcon2, { fontSize: SIZE7 }),
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React11.createElement(
+  ), hasVariables && /* @__PURE__ */ React13.createElement(
     PopoverSearch2,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __10("Search", "elementor")
+      placeholder: __15("Search", "elementor")
     }
-  ), /* @__PURE__ */ React11.createElement(Divider6, null), /* @__PURE__ */ React11.createElement(PopoverScrollableContent6, null, hasVariables && hasSearchResults && /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React13.createElement(Divider6, null), hasVariables && hasSearchResults && /* @__PURE__ */ React13.createElement(
     PopoverMenuList2,
     {
       items,
@@ -1048,23 +1250,23 @@ var FontVariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       selectedValue: variable,
       "data-testid": "font-variables-list",
       menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React11.createElement(MenuItemContent, { item })
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React13.createElement(MenuItemContent, { item })
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React11.createElement(
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React13.createElement(
     NoSearchResults,
     {
       searchValue,
       onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React11.createElement(TextIcon3, { fontSize: "large" })
+      icon: /* @__PURE__ */ React13.createElement(TextIcon3, { fontSize: "large" })
     }
-  ), !hasVariables && /* @__PURE__ */ React11.createElement(
+  ), !hasVariables && /* @__PURE__ */ React13.createElement(
     NoVariables,
     {
-      title: __10("Create your first font variable", "elementor"),
-      icon: /* @__PURE__ */ React11.createElement(TextIcon3, { fontSize: "large" }),
+      title: __15("Create your first font variable", "elementor"),
+      icon: /* @__PURE__ */ React13.createElement(TextIcon3, { fontSize: "large" }),
       onAdd
     }
-  )));
+  ));
 };
 
 // src/components/variable-selection-popover.tsx
@@ -1072,10 +1274,10 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = useState7(VIEW_LIST);
-  const editIdRef = useRef5("");
-  const anchorRef = useRef5(null);
-  return /* @__PURE__ */ React12.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React12.createElement(Box3, { ref: anchorRef }, renderStage({
+  const [currentView, setCurrentView] = useState10(VIEW_LIST);
+  const editIdRef = useRef3("");
+  const anchorRef = useRef3(null);
+  return /* @__PURE__ */ React14.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React14.createElement(Box2, { ref: anchorRef }, renderStage({
     propTypeKey,
     currentView,
     selectedVariable,
@@ -1094,7 +1296,7 @@ function renderStage(props) {
   };
   if (fontVariablePropTypeUtil.key === props.propTypeKey) {
     if (VIEW_LIST === props.currentView) {
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React14.createElement(
         FontVariablesSelection,
         {
           closePopover: props.closePopover,
@@ -1109,7 +1311,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_ADD === props.currentView) {
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React14.createElement(
         FontVariableCreation,
         {
           onGoBack: () => props.setCurrentView(VIEW_LIST),
@@ -1118,7 +1320,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_EDIT === props.currentView) {
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React14.createElement(
         FontVariableEdit,
         {
           editId: props.editIdRef.current ?? "",
@@ -1131,7 +1333,7 @@ function renderStage(props) {
   }
   if (colorVariablePropTypeUtil.key === props.propTypeKey) {
     if (VIEW_LIST === props.currentView) {
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React14.createElement(
         ColorVariablesSelection,
         {
           closePopover: props.closePopover,
@@ -1146,7 +1348,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_ADD === props.currentView) {
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React14.createElement(
         ColorVariableCreation,
         {
           onGoBack: () => props.setCurrentView(VIEW_LIST),
@@ -1155,7 +1357,7 @@ function renderStage(props) {
       );
     }
     if (VIEW_EDIT === props.currentView) {
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React14.createElement(
         ColorVariableEdit,
         {
           editId: props.editIdRef.current ?? "",
@@ -1169,33 +1371,59 @@ function renderStage(props) {
   return null;
 }
 
-// src/controls/color-variable-control.tsx
-var ColorVariableControl = () => {
-  const { setValue: setColor } = useBoundProp5();
-  const { value: variableValue } = useBoundProp5(colorVariablePropTypeUtil);
-  const anchorRef = useRef6(null);
+// src/components/ui/tags/assigned-tag.tsx
+import * as React15 from "react";
+import { DetachIcon } from "@elementor/icons";
+import { Box as Box3, IconButton as IconButton8, Stack as Stack3, Tooltip, Typography as Typography5, UnstableTag as Tag } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
+var SIZE8 = "tiny";
+var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
+  const actions = [];
+  if (onUnlink) {
+    actions.push(
+      /* @__PURE__ */ React15.createElement(IconButton8, { key: "unlink", size: SIZE8, onClick: onUnlink, "aria-label": __16("Unlink", "elementor") }, /* @__PURE__ */ React15.createElement(DetachIcon, { fontSize: SIZE8 }))
+    );
+  }
+  return /* @__PURE__ */ React15.createElement(Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React15.createElement(
+    Tag,
+    {
+      fullWidth: true,
+      showActionsOnHover: true,
+      startIcon: /* @__PURE__ */ React15.createElement(Stack3, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React15.createElement(Box3, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React15.createElement(Typography5, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      actions,
+      ...props
+    }
+  ));
+};
+
+// src/components/ui/variable/assigned-variable.tsx
+var AssignedVariable = ({
+  variable,
+  variablePropTypeUtil,
+  fallbackPropTypeUtil,
+  additionalStartIcon
+}) => {
+  const { setValue } = useBoundProp7();
+  const anchorRef = useRef4(null);
   const popupId = useId2();
-  const popupState = usePopupState3({
+  const popupState = usePopupState2({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const selectedVariable = useVariable(variableValue);
-  if (!selectedVariable) {
-    throw new Error(`Global color variable ${variableValue} not found`);
-  }
   const unlinkVariable = () => {
-    setColor(colorPropTypeUtil.create(selectedVariable.value));
+    setValue(fallbackPropTypeUtil.create(variable.value));
   };
-  return /* @__PURE__ */ React13.createElement(Box4, { ref: anchorRef }, /* @__PURE__ */ React13.createElement(
-    VariableTag,
+  return /* @__PURE__ */ React16.createElement(Box4, { ref: anchorRef }, /* @__PURE__ */ React16.createElement(
+    AssignedTag,
     {
-      label: selectedVariable.label,
-      startIcon: /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(ColorFilterIcon3, { fontSize: SIZE }), /* @__PURE__ */ React13.createElement(ColorIndicator, { size: "inherit", value: selectedVariable.value, component: "span" })),
+      label: variable.label,
+      startIcon: /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(ColorFilterIcon3, { fontSize: SIZE8 }), additionalStartIcon),
       onUnlink: unlinkVariable,
-      ...bindTrigger3(popupState)
+      ...bindTrigger2(popupState)
     }
-  ), /* @__PURE__ */ React13.createElement(
-    Popover3,
+  ), /* @__PURE__ */ React16.createElement(
+    Popover2,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
@@ -1204,24 +1432,168 @@ var ColorVariableControl = () => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...bindPopover3(popupState)
+      ...bindPopover2(popupState)
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React16.createElement(
       VariableSelectionPopover,
       {
-        selectedVariable,
+        selectedVariable: variable,
         closePopover: popupState.close,
-        propTypeKey: colorVariablePropTypeUtil.key
+        propTypeKey: variablePropTypeUtil.key
       }
     )
   ));
 };
 
+// src/components/ui/variable/deleted-variable.tsx
+import * as React19 from "react";
+import { useState as useState11 } from "react";
+import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
+import { Backdrop, Infotip } from "@elementor/ui";
+
+// src/components/ui/deleted-variable-alert.tsx
+import * as React17 from "react";
+import { useSectionWidth as useSectionWidth2 } from "@elementor/editor-editing-panel";
+import { Alert, AlertAction, AlertTitle, ClickAwayListener } from "@elementor/ui";
+import { __ as __17 } from "@wordpress/i18n";
+var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
+  const sectionWidth = useSectionWidth2();
+  return /* @__PURE__ */ React17.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React17.createElement(
+    Alert,
+    {
+      variant: "standard",
+      severity: "warning",
+      onClose,
+      action: /* @__PURE__ */ React17.createElement(React17.Fragment, null, onUnlink && /* @__PURE__ */ React17.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __17("Unlink", "elementor")), onRestore && /* @__PURE__ */ React17.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __17("Restore", "elementor"))),
+      sx: { width: sectionWidth }
+    },
+    /* @__PURE__ */ React17.createElement(AlertTitle, null, __17("Deleted variable", "elementor")),
+    __17("The variable", "elementor"),
+    " '",
+    label,
+    "'",
+    " ",
+    __17(
+      "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"
+    )
+  ));
+};
+
+// src/components/ui/tags/deleted-tag.tsx
+import * as React18 from "react";
+import { AlertTriangleFilledIcon } from "@elementor/icons";
+import { Box as Box5, Chip, Tooltip as Tooltip2, Typography as Typography6 } from "@elementor/ui";
+import { __ as __18 } from "@wordpress/i18n";
+var DeletedTag = React18.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React18.createElement(
+    Chip,
+    {
+      ref,
+      size: "tiny",
+      color: "warning",
+      shape: "rounded",
+      variant: "standard",
+      onClick,
+      icon: /* @__PURE__ */ React18.createElement(AlertTriangleFilledIcon, null),
+      label: /* @__PURE__ */ React18.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React18.createElement(Box5, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React18.createElement(Typography6, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React18.createElement(Typography6, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __18("deleted", "elementor"), ")"))),
+      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 isV331Active = isExperimentActive("e_v_3_31");
+var DeletedVariable = ({ variable, variablePropTypeUtil, fallbackPropTypeUtil }) => {
+  const { setValue } = useBoundProp8();
+  const [showInfotip, setShowInfotip] = useState11(false);
+  const toggleInfotip = () => setShowInfotip((prev) => !prev);
+  const closeInfotip = () => setShowInfotip(false);
+  const unlinkVariable = () => {
+    setValue(fallbackPropTypeUtil.create(variable.value));
+  };
+  const handleRestore = () => {
+    if (!variable.key) {
+      return;
+    }
+    restoreVariable(variable.key).then((key) => {
+      setValue(variablePropTypeUtil.create(key));
+      closeInfotip();
+    });
+  };
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, showInfotip && /* @__PURE__ */ React19.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React19.createElement(
+    Infotip,
+    {
+      color: "warning",
+      placement: "right-start",
+      open: showInfotip,
+      disableHoverListener: true,
+      onClose: closeInfotip,
+      content: /* @__PURE__ */ React19.createElement(
+        DeletedVariableAlert,
+        {
+          onClose: closeInfotip,
+          onUnlink: unlinkVariable,
+          onRestore: isV331Active ? handleRestore : void 0,
+          label: variable.label
+        }
+      ),
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [0, 24] }
+            }
+          ]
+        }
+      }
+    },
+    /* @__PURE__ */ React19.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
+  ));
+};
+
+// src/controls/color-variable-control.tsx
+var ColorVariableControl = () => {
+  const { value: variableValue } = useBoundProp9(colorVariablePropTypeUtil);
+  const assignedVariable = useVariable(variableValue);
+  if (!assignedVariable) {
+    throw new Error(`Global color variable ${variableValue} not found`);
+  }
+  const isVariableDeleted = assignedVariable?.deleted;
+  if (isVariableDeleted) {
+    return /* @__PURE__ */ React20.createElement(
+      DeletedVariable,
+      {
+        variable: assignedVariable,
+        variablePropTypeUtil: colorVariablePropTypeUtil,
+        fallbackPropTypeUtil: colorPropTypeUtil
+      }
+    );
+  }
+  return /* @__PURE__ */ React20.createElement(
+    AssignedVariable,
+    {
+      variable: assignedVariable,
+      variablePropTypeUtil: colorVariablePropTypeUtil,
+      fallbackPropTypeUtil: colorPropTypeUtil,
+      additionalStartIcon: /* @__PURE__ */ React20.createElement(ColorIndicator, { size: "inherit", value: assignedVariable.value, component: "span" })
+    }
+  );
+};
+
 // src/hooks/use-prop-color-variable-action.tsx
-import * as React14 from "react";
-import { useBoundProp as useBoundProp6 } from "@elementor/editor-editing-panel";
+import * as React21 from "react";
+import { useBoundProp as useBoundProp10 } from "@elementor/editor-editing-panel";
 import { ColorFilterIcon as ColorFilterIcon4 } from "@elementor/icons";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __19 } from "@wordpress/i18n";
 
 // src/utils.ts
 var hasAssignedColorVariable = (propValue) => {
@@ -1239,38 +1611,90 @@ var supportsFontVariables = (propType) => {
 
 // src/hooks/use-prop-color-variable-action.tsx
 var usePropColorVariableAction = () => {
-  const { propType } = useBoundProp6();
+  const { propType } = useBoundProp10();
   const visible = !!propType && supportsColorVariables(propType);
   return {
     visible,
     icon: ColorFilterIcon4,
-    title: __11("Variables", "elementor"),
+    title: __19("Variables", "elementor"),
     content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React14.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
+      return /* @__PURE__ */ React21.createElement(VariableSelectionPopover, { closePopover, propTypeKey: colorVariablePropTypeUtil.key });
     }
   };
 };
 
+// src/repeater-injections.ts
+import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elementor/editor-controls";
+import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
+
+// src/components/variables-repeater-item-slot.tsx
+import * as React22 from "react";
+var useColorVariable = (value) => {
+  const variableId = value?.value?.color?.value;
+  return useVariable(variableId || "");
+};
+var BackgroundRepeaterColorIndicator = ({ value }) => {
+  const colorVariable = useColorVariable(value);
+  return /* @__PURE__ */ React22.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+};
+var BackgroundRepeaterLabel = ({ value }) => {
+  const colorVariable = useColorVariable(value);
+  return /* @__PURE__ */ React22.createElement("span", null, colorVariable?.label);
+};
+var BoxShadowRepeaterColorIndicator = ({ value }) => {
+  const colorVariable = useColorVariable(value);
+  return /* @__PURE__ */ React22.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+};
+
+// src/repeater-injections.ts
+function registerRepeaterInjections() {
+  injectIntoRepeaterItemIcon({
+    id: "color-variables-background-icon",
+    component: BackgroundRepeaterColorIndicator,
+    condition: ({ value: prop }) => {
+      return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+    }
+  });
+  injectIntoRepeaterItemIcon({
+    id: "color-variables-icon",
+    component: BoxShadowRepeaterColorIndicator,
+    condition: ({ value: prop }) => {
+      return hasAssignedColorVariable(shadowPropTypeUtil.extract(prop)?.color);
+    }
+  });
+  injectIntoRepeaterItemLabel({
+    id: "color-variables-label",
+    component: BackgroundRepeaterLabel,
+    condition: ({ value: prop }) => {
+      return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+    }
+  });
+}
+
 // src/transformers/variable-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
-var variableTransformer = createTransformer((value) => {
-  if (!value.trim()) {
+var variableTransformer = createTransformer((id) => {
+  const variables = service.variables();
+  let name = id;
+  let fallbackValue = "";
+  if (variables[id]) {
+    fallbackValue = variables[id].value;
+    if (!variables[id]?.deleted) {
+      name = variables[id].label;
+    }
+  }
+  if (!name.trim()) {
     return null;
   }
-  return `var(--${value})`;
+  if (!fallbackValue.trim()) {
+    return `var(--${name})`;
+  }
+  return `var(--${name}, ${fallbackValue})`;
 });
 
 // src/init-color-variables.ts
 var { registerPopoverAction } = controlActionsMenu;
-var conditions = {
-  backgroundOverlay: ({ value: prop }) => {
-    return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
-  },
-  boxShadow: ({ value: prop }) => {
-    return hasAssignedColorVariable(shadowPropTypeUtil.extract(prop)?.color);
-  }
-};
-function registerControlsAndActions() {
+function initColorVariables() {
   registerControlReplacement({
     component: ColorVariableControl,
     condition: ({ value }) => hasAssignedColorVariable(value)
@@ -1279,34 +1703,8 @@ function registerControlsAndActions() {
     id: "color-variables",
     useProps: usePropColorVariableAction
   });
-}
-function registerRepeaterItemIcons() {
-  injectIntoRepeaterItemIcon({
-    id: "color-variables-background-icon",
-    component: BackgroundRepeaterColorIndicator,
-    condition: conditions.backgroundOverlay
-  });
-  injectIntoRepeaterItemIcon({
-    id: "color-variables-icon",
-    component: BoxShadowRepeaterColorIndicator,
-    condition: conditions.boxShadow
-  });
-}
-function registerRepeaterItemLabels() {
-  injectIntoRepeaterItemLabel({
-    id: "color-variables-label",
-    component: BackgroundRepeaterLabel,
-    condition: conditions.backgroundOverlay
-  });
-}
-function registerStyleTransformers() {
   styleTransformersRegistry.register(colorVariablePropTypeUtil.key, variableTransformer);
-}
-function initColorVariables() {
-  registerControlsAndActions();
-  registerRepeaterItemIcons();
-  registerRepeaterItemLabels();
-  registerStyleTransformers();
+  registerRepeaterInjections();
 }
 
 // src/init-font-variables.ts
@@ -1314,73 +1712,50 @@ import { styleTransformersRegistry as styleTransformersRegistry2 } from "@elemen
 import { controlActionsMenu as controlActionsMenu2, registerControlReplacement as registerControlReplacement2 } from "@elementor/editor-editing-panel";
 
 // src/controls/font-variable-control.tsx
-import * as React15 from "react";
-import { useId as useId3, useRef as useRef7 } from "react";
-import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
+import * as React23 from "react";
+import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 import { stringPropTypeUtil } from "@elementor/editor-props";
-import { ColorFilterIcon as ColorFilterIcon5 } from "@elementor/icons";
-import { bindPopover as bindPopover4, bindTrigger as bindTrigger4, Box as Box5, Popover as Popover4, usePopupState as usePopupState4 } from "@elementor/ui";
 var FontVariableControl = () => {
-  const { setValue: setFontFamily } = useBoundProp7();
-  const { value: variableValue } = useBoundProp7(fontVariablePropTypeUtil);
-  const anchorRef = useRef7(null);
-  const popupId = useId3();
-  const popupState = usePopupState4({
-    variant: "popover",
-    popupId: `elementor-variables-list-${popupId}`
-  });
-  const selectedVariable = useVariable(variableValue);
-  if (!selectedVariable) {
+  const { value: variableValue } = useBoundProp11(fontVariablePropTypeUtil);
+  const assignedVariable = useVariable(variableValue);
+  if (!assignedVariable) {
     throw new Error(`Global font variable ${variableValue} not found`);
   }
-  const unlinkVariable = () => {
-    setFontFamily(stringPropTypeUtil.create(selectedVariable.value));
-  };
-  return /* @__PURE__ */ React15.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React15.createElement(
-    VariableTag,
-    {
-      label: selectedVariable.label,
-      startIcon: /* @__PURE__ */ React15.createElement(ColorFilterIcon5, { fontSize: SIZE }),
-      onUnlink: unlinkVariable,
-      ...bindTrigger4(popupState)
-    }
-  ), /* @__PURE__ */ React15.createElement(
-    Popover4,
-    {
-      disableScrollLock: true,
-      anchorEl: anchorRef.current,
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      PaperProps: {
-        sx: { my: 1 }
-      },
-      ...bindPopover4(popupState)
-    },
-    /* @__PURE__ */ React15.createElement(
-      VariableSelectionPopover,
+  const isVariableDeleted = assignedVariable?.deleted;
+  if (isVariableDeleted) {
+    return /* @__PURE__ */ React23.createElement(
+      DeletedVariable,
       {
-        selectedVariable,
-        closePopover: popupState.close,
-        propTypeKey: fontVariablePropTypeUtil.key
+        variable: assignedVariable,
+        variablePropTypeUtil: fontVariablePropTypeUtil,
+        fallbackPropTypeUtil: stringPropTypeUtil
       }
-    )
-  ));
+    );
+  }
+  return /* @__PURE__ */ React23.createElement(
+    AssignedVariable,
+    {
+      variable: assignedVariable,
+      variablePropTypeUtil: fontVariablePropTypeUtil,
+      fallbackPropTypeUtil: stringPropTypeUtil
+    }
+  );
 };
 
 // src/hooks/use-prop-font-variable-action.tsx
-import * as React16 from "react";
-import { useBoundProp as useBoundProp8 } from "@elementor/editor-editing-panel";
-import { ColorFilterIcon as ColorFilterIcon6 } from "@elementor/icons";
-import { __ as __12 } from "@wordpress/i18n";
+import * as React24 from "react";
+import { useBoundProp as useBoundProp12 } from "@elementor/editor-editing-panel";
+import { ColorFilterIcon as ColorFilterIcon5 } from "@elementor/icons";
+import { __ as __20 } from "@wordpress/i18n";
 var usePropFontVariableAction = () => {
-  const { propType } = useBoundProp8();
+  const { propType } = useBoundProp12();
   const visible = !!propType && supportsFontVariables(propType);
   return {
     visible,
-    icon: ColorFilterIcon6,
-    title: __12("Variables", "elementor"),
+    icon: ColorFilterIcon5,
+    title: __20("Variables", "elementor"),
     content: ({ close: closePopover }) => {
-      return /* @__PURE__ */ React16.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
+      return /* @__PURE__ */ React24.createElement(VariableSelectionPopover, { closePopover, propTypeKey: fontVariablePropTypeUtil.key });
     }
   };
 };
@@ -1400,8 +1775,8 @@ function initFontVariables() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-import * as React17 from "react";
-import { useEffect, useState as useState8 } from "react";
+import * as React25 from "react";
+import { useEffect, useState as useState12 } from "react";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
@@ -1422,13 +1797,13 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React17.createElement(Portal, { container }, /* @__PURE__ */ React17.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React25.createElement(Portal, { container }, /* @__PURE__ */ React25.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = useState8({});
+  const [variables, setVariables] = useState12({});
   useEffect(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
@@ -1437,8 +1812,14 @@ 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/init.ts