@elementor/editor-variables 3.32.0-49 → 3.32.0-50

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { controlActionsMenu, registerControlReplacement } from "@elementor/edito
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 
 // src/components/variables-manager/variables-manager-panel.tsx
-import * as React from "react";
+import * as React6 from "react";
 import { useEffect } from "react";
 import {
   __createPanel as createPanel,
@@ -16,92 +16,45 @@ import {
 } from "@elementor/editor-panels";
 import { ThemeProvider } from "@elementor/editor-ui";
 import { changeEditMode } from "@elementor/editor-v1-adapters";
-import { FilterIcon, XIcon } from "@elementor/icons";
-import { Alert, Box, Button, Divider, ErrorBoundary, IconButton, Stack } from "@elementor/ui";
-import { __ } from "@wordpress/i18n";
-var id = "variables-manager";
-var { panel, usePanelActions } = createPanel({
-  id,
-  component: VariablesManagerPanel,
-  allowedEditModes: ["edit", id],
-  onOpen: () => {
-    changeEditMode(id);
-  },
-  onClose: () => {
-    changeEditMode("edit");
-  }
-});
-function VariablesManagerPanel() {
-  const { close: closePanel } = usePanelActions();
-  const isDirty = false;
-  usePreventUnload(isDirty);
-  return /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React.createElement(Panel, null, /* @__PURE__ */ React.createElement(PanelHeader, null, /* @__PURE__ */ React.createElement(Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React.createElement(Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React.createElement(FilterIcon, { fontSize: "inherit" }), __("Variables Manager", "elementor"))), /* @__PURE__ */ React.createElement(
-    CloseButton,
-    {
-      sx: { marginLeft: "auto" },
-      onClose: () => {
-        closePanel();
-      }
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    PanelBody,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
-      }
-    },
-    /* @__PURE__ */ React.createElement(Divider, null),
-    /* @__PURE__ */ React.createElement(
-      Box,
-      {
-        px: 2,
-        sx: {
-          flexGrow: 1,
-          overflowY: "auto"
-        }
-      },
-      "List"
-    )
-  ), /* @__PURE__ */ React.createElement(PanelFooter, null, /* @__PURE__ */ React.createElement(Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, __("Save changes", "elementor"))))));
-}
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React.createElement(IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React.createElement(XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React.createElement("strong", null, __("Something went wrong", "elementor"))));
-var usePreventUnload = (isDirty) => {
-  useEffect(() => {
-    const handleBeforeUnload = (event) => {
-      if (isDirty) {
-        event.preventDefault();
-      }
-    };
-    window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-    };
-  }, [isDirty]);
-};
+import { ColorFilterIcon, TrashIcon, XIcon } from "@elementor/icons";
+import { Alert, Box, Button, Divider, ErrorBoundary, IconButton as IconButton3, Stack as Stack3 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
 
-// src/controls/variable-control.tsx
-import * as React25 from "react";
-import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
+// src/components/variables-manager/variables-manager-table.tsx
+import * as React5 from "react";
+import { createElement as createElement7, useState } from "react";
+import { EllipsisWithTooltip } from "@elementor/editor-ui";
+import { GripVerticalIcon } from "@elementor/icons";
+import {
+  IconButton as IconButton2,
+  Stack as Stack2,
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableRow,
+  UnstableSortableItem,
+  UnstableSortableProvider
+} from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
 
-// src/components/ui/variable/assigned-variable.tsx
-import { useId as useId2, useRef } from "react";
-import * as React17 from "react";
-import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
-import { ColorFilterIcon as ColorFilterIcon2 } from "@elementor/icons";
-import { bindPopover, bindTrigger, Box as Box5, Popover, usePopupState } from "@elementor/ui";
+// src/hooks/use-prop-variables.ts
+import { useMemo } from "react";
+import { useBoundProp } from "@elementor/editor-controls";
+
+// src/context/variable-type-context.tsx
+import * as React2 from "react";
+import { createContext, useContext } from "react";
 
 // src/variables-registry/create-variable-type-registry.ts
 import { styleTransformersRegistry } from "@elementor/editor-canvas";
 import { stylesInheritanceTransformersRegistry } from "@elementor/editor-editing-panel";
 
 // src/transformers/inheritance-transformer.tsx
-import * as React2 from "react";
+import * as React from "react";
 import { createTransformer } from "@elementor/editor-canvas";
-import { Stack as Stack2, Typography } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { Stack, Typography } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
 
 // src/components/ui/color-indicator.tsx
 import { styled, UnstableColorIndicator } from "@elementor/ui";
@@ -116,7 +69,7 @@ import { z } from "@elementor/schema";
 var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
 
 // src/service.ts
-import { __ as __2 } from "@wordpress/i18n";
+import { __ } from "@wordpress/i18n";
 
 // src/api.ts
 import { httpService } from "@elementor/http-client";
@@ -315,7 +268,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -337,7 +290,7 @@ var service = {
     return apiClient.update(id2, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -429,11 +382,11 @@ var inheritanceTransformer = createTransformer((id2) => {
   const variables = service.variables();
   const variable = variables[id2];
   if (!variable) {
-    return /* @__PURE__ */ React2.createElement("span", null, __3("Missing variable", "elementor"));
+    return /* @__PURE__ */ React.createElement("span", null, __2("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
   const css = resolveCssVariable(id2, variable);
-  return /* @__PURE__ */ React2.createElement(Stack2, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React2.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React2.createElement(Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
+  return /* @__PURE__ */ React.createElement(Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React.createElement(Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
 });
 
 // src/transformers/variable-transformer.ts
@@ -497,88 +450,29 @@ function createVariableTypeRegistry() {
 // src/variables-registry/variable-type-registry.ts
 var { registerVariableType, getVariableType, hasVariableType } = createVariableTypeRegistry();
 
-// src/utils/unlink-variable.ts
-function transformValueBeforeUnlink(variable, propTypeKey) {
-  const { valueTransformer } = getVariableType(propTypeKey);
-  if (valueTransformer) {
-    return valueTransformer(variable.value);
-  }
-  return variable.value;
-}
-function createUnlinkHandler(variable, propTypeKey, setValue) {
-  return () => {
-    const { fallbackPropTypeUtil } = getVariableType(propTypeKey);
-    const transformedValue = transformValueBeforeUnlink(variable, propTypeKey);
-    setValue(fallbackPropTypeUtil.create(transformedValue));
-  };
-}
-
-// src/components/variable-selection-popover.tsx
-import * as React15 from "react";
-import { useState as useState7 } from "react";
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
-
-// src/context/variable-selection-popover.context.tsx
-import * as React3 from "react";
-import { createContext, useContext, useState } from "react";
-import { Box as Box2 } from "@elementor/ui";
-var PopoverContentRefContext = createContext(null);
-var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = useState(null);
-  return /* @__PURE__ */ React3.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React3.createElement(Box2, { ref: setAnchorRef }, children));
-};
-var usePopoverContentRef = () => {
-  return useContext(PopoverContentRefContext);
-};
-
 // src/context/variable-type-context.tsx
-import * as React4 from "react";
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var VariableTypeContext = createContext2(null);
+var VariableTypeContext = createContext(null);
 function VariableTypeProvider({ children, propTypeKey }) {
-  return /* @__PURE__ */ React4.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
+  return /* @__PURE__ */ React2.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
 }
 function useVariableType() {
-  const context = useContext2(VariableTypeContext);
+  const context = useContext(VariableTypeContext);
   if (context === null) {
     throw new Error("useVariableType must be used within a VariableTypeProvider");
   }
   return getVariableType(context);
 }
 
-// src/hooks/use-permissions.ts
-import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
-var usePermissions = () => {
-  const { canUser } = useCurrentUserCapabilities();
-  return {
-    canAssign: () => canUser("edit_posts"),
-    canUnlink: () => canUser("edit_posts"),
-    canAdd: () => canUser("manage_options"),
-    canDelete: () => canUser("manage_options"),
-    canEdit: () => canUser("manage_options"),
-    canRestore: () => canUser("manage_options"),
-    canManageSettings: () => canUser("manage_options")
-  };
-};
-
-// src/components/variable-creation.tsx
-import * as React7 from "react";
-import { useState as useState3 } from "react";
-import { PopoverContent, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
-import { PopoverBody } from "@elementor/editor-editing-panel";
-import { PopoverHeader } from "@elementor/editor-ui";
-import { ArrowLeftIcon } from "@elementor/icons";
-import { Button as Button2, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton2 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
-
-// src/hooks/use-initial-value.ts
-import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
-
 // src/hooks/use-prop-variables.ts
-import { useMemo } from "react";
-import { useBoundProp } from "@elementor/editor-controls";
-var useVariable = (key) => {
+var getVariables = (includeDeleted = true) => {
   const variables = service.variables();
+  if (includeDeleted) {
+    return variables;
+  }
+  return Object.fromEntries(Object.entries(variables).filter(([, variable]) => !variable.deleted));
+};
+var useVariable = (key) => {
+  const variables = getVariables();
   if (!variables?.[key]) {
     return null;
   }
@@ -609,10 +503,9 @@ var filterVariablesBySearchValue = (variables, searchValue) => {
 var usePropVariables = (propKey) => {
   return useMemo(() => normalizeVariables(propKey), [propKey]);
 };
-var isNotDeleted = ({ deleted }) => !deleted;
 var normalizeVariables = (propKey) => {
-  const variables = service.variables();
-  return Object.entries(variables).filter(([, variable]) => variable.type === propKey && isNotDeleted(variable)).map(([key, { label, value }]) => ({
+  const variables = getVariables(false);
+  return Object.entries(variables).filter(([, variable]) => variable.type === propKey).map(([key, { label, value }]) => ({
     key,
     label,
     value
@@ -632,7 +525,331 @@ var restoreVariable = (restoreId, label, value) => {
   return service.restore(restoreId, label, value).then(extractId);
 };
 
+// src/components/variables-manager/variable-edit-menu.tsx
+import * as React3 from "react";
+import { createElement as createElement4 } from "react";
+import { DotsVerticalIcon } from "@elementor/icons";
+import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, usePopupState } from "@elementor/ui";
+var VariableEditMenu = ({ menuActions, disabled }) => {
+  const menuState = usePopupState({
+    variant: "popover"
+  });
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(IconButton, { ...bindTrigger(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React3.createElement(DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React3.createElement(
+    Menu,
+    {
+      disablePortal: true,
+      MenuListProps: {
+        dense: true
+      },
+      PaperProps: {
+        elevation: 6
+      },
+      ...bindMenu(menuState),
+      anchorEl: menuState.anchorEl,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      open: menuState.isOpen,
+      onClose: menuState.close
+    },
+    menuActions.map((action) => /* @__PURE__ */ React3.createElement(
+      MenuItem,
+      {
+        key: action.name,
+        onClick: () => {
+          action.onClick?.();
+          menuState.close();
+        },
+        sx: {
+          color: action.color,
+          gap: 1
+        }
+      },
+      action.icon && createElement4(action.icon, {
+        fontSize: "inherit"
+      }),
+      " ",
+      action.name
+    ))
+  ));
+};
+
+// src/components/variables-manager/variable-table-cell.tsx
+import * as React4 from "react";
+import { TableCell } from "@elementor/ui";
+var VariableTableCell = ({
+  children,
+  isHeader,
+  width,
+  maxWidth,
+  align,
+  noPadding,
+  sx
+}) => {
+  const baseSx = {
+    maxWidth: maxWidth ?? 150,
+    cursor: "initial",
+    typography: "caption",
+    ...isHeader && { color: "text.primary", fontWeight: "bold" },
+    ...width && { width },
+    ...sx
+  };
+  return /* @__PURE__ */ React4.createElement(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+};
+
+// src/components/variables-manager/variables-manager-table.tsx
+var VariablesManagerTable = ({ menuActions }) => {
+  const variables = getVariables(false);
+  const [ids, setIds] = useState(Object.keys(variables));
+  const rows = ids.map((id2) => ({
+    id: id2,
+    name: variables[id2].label,
+    value: variables[id2].value,
+    type: variables[id2].type,
+    icon: getVariableType(variables[id2].type).icon,
+    startIcon: getVariableType(variables[id2].type).startIcon
+  }));
+  const tableSX = {
+    minWidth: 250,
+    tableLayout: "fixed"
+  };
+  return /* @__PURE__ */ React5.createElement(TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React5.createElement(Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering" }, /* @__PURE__ */ React5.createElement(TableHead, null, /* @__PURE__ */ React5.createElement(TableRow, null, /* @__PURE__ */ React5.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React5.createElement(VariableTableCell, { isHeader: true }, __3("Name", "elementor")), /* @__PURE__ */ React5.createElement(VariableTableCell, { isHeader: true }, __3("Value", "elementor")), /* @__PURE__ */ React5.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React5.createElement(TableBody, null, /* @__PURE__ */ React5.createElement(
+    UnstableSortableProvider,
+    {
+      value: ids,
+      onChange: setIds,
+      variant: "static",
+      restrictAxis: true,
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React5.createElement(Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React5.createElement(TableBody, null, dragOverlayChildren))
+    },
+    rows.map((row) => /* @__PURE__ */ React5.createElement(
+      UnstableSortableItem,
+      {
+        key: row.id,
+        id: row.id,
+        render: ({
+          itemProps,
+          showDropIndication,
+          triggerProps,
+          itemStyle,
+          triggerStyle,
+          isDragged,
+          dropPosition,
+          setTriggerRef,
+          isDragOverlay,
+          isSorting,
+          index
+        }) => {
+          const showIndicationBefore = showDropIndication && dropPosition === "before";
+          const showIndicationAfter = showDropIndication && dropPosition === "after";
+          return /* @__PURE__ */ React5.createElement(
+            TableRow,
+            {
+              ...itemProps,
+              selected: isDragged,
+              sx: {
+                ...showIndicationBefore && {
+                  "& td, & th": {
+                    borderTop: "2px solid",
+                    borderTopColor: "primary.main"
+                  }
+                },
+                ...showIndicationAfter && {
+                  "& td, & th": {
+                    borderBottom: "2px solid",
+                    borderBottomColor: "primary.main"
+                  }
+                },
+                '& [role="toolbar"], & [draggable]': {
+                  opacity: 0
+                },
+                "&:hover, &:focus-within": {
+                  backgroundColor: "action.hover",
+                  '& [role="toolbar"], & [draggable]': {
+                    opacity: 1
+                  }
+                }
+              },
+              style: { ...itemStyle, ...triggerStyle },
+              disableDivider: isDragOverlay || index === rows.length - 1
+            },
+            /* @__PURE__ */ React5.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React5.createElement(
+              IconButton2,
+              {
+                size: "small",
+                ref: setTriggerRef,
+                ...triggerProps,
+                disabled: isSorting,
+                draggable: true
+              },
+              /* @__PURE__ */ React5.createElement(GripVerticalIcon, { fontSize: "inherit" })
+            )),
+            /* @__PURE__ */ React5.createElement(VariableTableCell, null, /* @__PURE__ */ React5.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, createElement7(row.icon, { fontSize: "inherit" }), /* @__PURE__ */ React5.createElement(EllipsisWithTooltip, { title: row.name }, row.name))),
+            /* @__PURE__ */ React5.createElement(VariableTableCell, null, /* @__PURE__ */ React5.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, row.startIcon && row.startIcon({ value: row.value }), /* @__PURE__ */ React5.createElement(EllipsisWithTooltip, { title: row.value }, row.value))),
+            /* @__PURE__ */ React5.createElement(
+              VariableTableCell,
+              {
+                align: "right",
+                noPadding: true,
+                width: 16,
+                maxWidth: 16,
+                sx: { paddingInlineEnd: 1 }
+              },
+              /* @__PURE__ */ React5.createElement(Stack2, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React5.createElement(
+                VariableEditMenu,
+                {
+                  menuActions,
+                  disabled: isSorting
+                }
+              ))
+            )
+          );
+        }
+      }
+    ))
+  ))));
+};
+
+// src/components/variables-manager/variables-manager-panel.tsx
+var id = "variables-manager";
+var { panel, usePanelActions } = createPanel({
+  id,
+  component: VariablesManagerPanel,
+  allowedEditModes: ["edit", id],
+  onOpen: () => {
+    changeEditMode(id);
+  },
+  onClose: () => {
+    changeEditMode("edit");
+  }
+});
+function VariablesManagerPanel() {
+  const { close: closePanel } = usePanelActions();
+  const isDirty = false;
+  usePreventUnload(isDirty);
+  const menuActions = [
+    {
+      name: __4("Delete", "elementor"),
+      icon: TrashIcon,
+      color: "error.main",
+      onClick: () => {
+      }
+    }
+  ];
+  return /* @__PURE__ */ React6.createElement(ThemeProvider, null, /* @__PURE__ */ React6.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React6.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React6.createElement(Panel, null, /* @__PURE__ */ React6.createElement(PanelHeader, null, /* @__PURE__ */ React6.createElement(Stack3, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React6.createElement(Stack3, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React6.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React6.createElement(ColorFilterIcon, { fontSize: "inherit" }), __4("Variable Manager", "elementor"))), /* @__PURE__ */ React6.createElement(
+    CloseButton,
+    {
+      sx: { marginLeft: "auto" },
+      onClose: () => {
+        closePanel();
+      }
+    }
+  ))), /* @__PURE__ */ React6.createElement(
+    PanelBody,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    /* @__PURE__ */ React6.createElement(Divider, null),
+    /* @__PURE__ */ React6.createElement(VariablesManagerTable, { menuActions })
+  ), /* @__PURE__ */ React6.createElement(PanelFooter, null, /* @__PURE__ */ React6.createElement(Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, __4("Save changes", "elementor"))))));
+}
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React6.createElement(IconButton3, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React6.createElement(XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React6.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React6.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React6.createElement("strong", null, __4("Something went wrong", "elementor"))));
+var usePreventUnload = (isDirty) => {
+  useEffect(() => {
+    const handleBeforeUnload = (event) => {
+      if (isDirty) {
+        event.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty]);
+};
+
+// src/controls/variable-control.tsx
+import * as React28 from "react";
+import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
+
+// src/components/ui/variable/assigned-variable.tsx
+import { useId as useId2, useRef } from "react";
+import * as React20 from "react";
+import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
+import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
+import { bindPopover, bindTrigger as bindTrigger2, Box as Box5, Popover, usePopupState as usePopupState2 } from "@elementor/ui";
+
+// src/utils/unlink-variable.ts
+function transformValueBeforeUnlink(variable, propTypeKey) {
+  const { valueTransformer } = getVariableType(propTypeKey);
+  if (valueTransformer) {
+    return valueTransformer(variable.value);
+  }
+  return variable.value;
+}
+function createUnlinkHandler(variable, propTypeKey, setValue) {
+  return () => {
+    const { fallbackPropTypeUtil } = getVariableType(propTypeKey);
+    const transformedValue = transformValueBeforeUnlink(variable, propTypeKey);
+    setValue(fallbackPropTypeUtil.create(transformedValue));
+  };
+}
+
+// src/components/variable-selection-popover.tsx
+import * as React18 from "react";
+import { useState as useState8 } from "react";
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
+
+// src/context/variable-selection-popover.context.tsx
+import * as React7 from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState2 } from "react";
+import { Box as Box2 } from "@elementor/ui";
+var PopoverContentRefContext = createContext2(null);
+var PopoverContentRefContextProvider = ({ children }) => {
+  const [anchorRef, setAnchorRef] = useState2(null);
+  return /* @__PURE__ */ React7.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React7.createElement(Box2, { ref: setAnchorRef }, children));
+};
+var usePopoverContentRef = () => {
+  return useContext2(PopoverContentRefContext);
+};
+
+// src/hooks/use-permissions.ts
+import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
+var usePermissions = () => {
+  const { canUser } = useCurrentUserCapabilities();
+  return {
+    canAssign: () => canUser("edit_posts"),
+    canUnlink: () => canUser("edit_posts"),
+    canAdd: () => canUser("manage_options"),
+    canDelete: () => canUser("manage_options"),
+    canEdit: () => canUser("manage_options"),
+    canRestore: () => canUser("manage_options"),
+    canManageSettings: () => canUser("manage_options")
+  };
+};
+
+// src/components/variable-creation.tsx
+import * as React10 from "react";
+import { useState as useState4 } from "react";
+import { PopoverContent, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { PopoverBody } from "@elementor/editor-editing-panel";
+import { PopoverHeader } from "@elementor/editor-ui";
+import { ArrowLeftIcon } from "@elementor/icons";
+import { Button as Button2, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton4 } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
+
 // src/hooks/use-initial-value.ts
+import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 var useInitialValue = () => {
   const { value: initial } = useBoundProp2();
   const hasAssignedVariable2 = hasVariableType(initial?.$$type) && Boolean(initial?.value);
@@ -662,15 +879,15 @@ var trackVariableEvent = ({ varType, controlPath, action }) => {
 };
 
 // src/utils/validations.ts
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: __4("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: __4("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: __4("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: __4("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: __4("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: __4("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: __4("There was a glitch. Try saving your variable again.", "elementor")
+  MISSING_VARIABLE_NAME: __5("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: __5("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: __5("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: __5("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: __5("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: __5("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: __5("There was a glitch. Try saving your variable again.", "elementor")
 };
 var VARIABLE_LABEL_MAX_LENGTH = 50;
 var mapServerError = (error) => {
@@ -714,16 +931,16 @@ var validateValue = (value) => {
 };
 
 // src/components/fields/label-field.tsx
-import * as React6 from "react";
-import { useId, useState as useState2 } from "react";
+import * as React9 from "react";
+import { useId, useState as useState3 } from "react";
 import { TextField } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/components/ui/form-field.tsx
-import * as React5 from "react";
+import * as React8 from "react";
 import { FormHelperText, FormLabel, Grid } from "@elementor/ui";
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React5.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React5.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React5.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React5.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React5.createElement(FormHelperText, null, noticeMsg)));
+  return /* @__PURE__ */ React8.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React8.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React8.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React8.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React8.createElement(FormHelperText, null, noticeMsg)));
 };
 
 // src/components/fields/label-field.tsx
@@ -731,16 +948,16 @@ function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
 var useLabelError = (initialError) => {
-  const [error, setError] = useState2(initialError ?? { value: "", message: "" });
+  const [error, setError] = useState3(initialError ?? { value: "", message: "" });
   return {
     labelFieldError: error,
     setLabelFieldError: setError
   };
 };
 var LabelField = ({ value, error, onChange }) => {
-  const [label, setLabel] = useState2(value);
-  const [errorMessage, setErrorMessage] = useState2("");
-  const [noticeMessage, setNoticeMessage] = useState2(() => labelHint(value));
+  const [label, setLabel] = useState3(value);
+  const [errorMessage, setErrorMessage] = useState3("");
+  const [noticeMessage, setNoticeMessage] = useState3(() => labelHint(value));
   const handleChange = (newValue) => {
     setLabel(newValue);
     const errorMsg2 = validateLabel(newValue);
@@ -755,7 +972,7 @@ var LabelField = ({ value, error, onChange }) => {
     errorMsg = error.message;
   }
   const noticeMsg = errorMsg ? "" : noticeMessage;
-  return /* @__PURE__ */ React6.createElement(FormField, { id: id2, label: __5("Name", "elementor"), errorMsg, noticeMsg }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React9.createElement(FormField, { id: id2, label: __6("Name", "elementor"), errorMsg, noticeMsg }, /* @__PURE__ */ React9.createElement(
     TextField,
     {
       id: id2,
@@ -775,10 +992,10 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
   const { setValue: setVariable, path } = useBoundProp3(propTypeUtil);
   const initialValue = useInitialValue();
-  const [value, setValue] = useState3(initialValue);
-  const [label, setLabel] = useState3("");
-  const [errorMessage, setErrorMessage] = useState3("");
-  const [valueFieldError, setValueFieldError] = useState3("");
+  const [value, setValue] = useState4(initialValue);
+  const [label, setLabel] = useState4("");
+  const [errorMessage, setErrorMessage] = useState4("");
+  const [valueFieldError, setValueFieldError] = useState4("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -829,14 +1046,14 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React7.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React10.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React10.createElement(
     PopoverHeader,
     {
-      icon: /* @__PURE__ */ React7.createElement(React7.Fragment, null, onGoBack && /* @__PURE__ */ React7.createElement(IconButton2, { size: SIZE, "aria-label": __6("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React7.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React7.createElement(VariableIcon, { fontSize: SIZE })),
-      title: __6("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React10.createElement(React10.Fragment, null, onGoBack && /* @__PURE__ */ React10.createElement(IconButton4, { size: SIZE, "aria-label": __7("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React10.createElement(VariableIcon, { fontSize: SIZE })),
+      title: __7("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React7.createElement(Divider2, null), /* @__PURE__ */ React7.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React10.createElement(Divider2, null), /* @__PURE__ */ React10.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React10.createElement(
     LabelField,
     {
       value: label,
@@ -846,7 +1063,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React7.createElement(FormField, { errorMsg: valueFieldError, label: __6("Value", "elementor") }, /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React10.createElement(FormField, { errorMsg: valueFieldError, label: __7("Value", "elementor") }, /* @__PURE__ */ React10.createElement(
     ValueField,
     {
       value,
@@ -857,22 +1074,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       },
       onValidationChange: setValueFieldError
     }
-  )), errorMessage && /* @__PURE__ */ React7.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React7.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React7.createElement(Button2, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, __6("Create", "elementor"))));
+  )), errorMessage && /* @__PURE__ */ React10.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React10.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React10.createElement(Button2, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, __7("Create", "elementor"))));
 };
 
 // src/components/variable-edit.tsx
-import * as React10 from "react";
-import { useEffect as useEffect2, useState as useState5 } from "react";
+import * as React13 from "react";
+import { useEffect as useEffect2, useState as useState6 } from "react";
 import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { PopoverBody as PopoverBody2 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
-import { ArrowLeftIcon as ArrowLeftIcon2, TrashIcon } from "@elementor/icons";
-import { Button as Button5, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton3 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { ArrowLeftIcon as ArrowLeftIcon2, TrashIcon as TrashIcon2 } from "@elementor/icons";
+import { Button as Button5, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5 } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/components/ui/delete-confirmation-dialog.tsx
-import * as React8 from "react";
+import * as React11 from "react";
 import { AlertOctagonFilledIcon } from "@elementor/icons";
 import {
   Button as Button3,
@@ -883,7 +1100,7 @@ import {
   DialogTitle,
   Typography as Typography2
 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 var TITLE_ID = "delete-variable-dialog";
 var DeleteConfirmationDialog = ({
   open,
@@ -891,12 +1108,12 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  return /* @__PURE__ */ React8.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React8.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React8.createElement(AlertOctagonFilledIcon, { color: "error" }), __7("Delete this variable?", "elementor")), /* @__PURE__ */ React8.createElement(DialogContent, null, /* @__PURE__ */ React8.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __7("All elements using", "elementor"), /* @__PURE__ */ React8.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __7("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React8.createElement(DialogActions, null, /* @__PURE__ */ React8.createElement(Button3, { color: "secondary", onClick: closeDialog }, __7("Not now", "elementor")), /* @__PURE__ */ React8.createElement(Button3, { variant: "contained", color: "error", onClick: onConfirm }, __7("Delete", "elementor"))));
+  return /* @__PURE__ */ React11.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React11.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React11.createElement(AlertOctagonFilledIcon, { color: "error" }), __8("Delete this variable?", "elementor")), /* @__PURE__ */ React11.createElement(DialogContent, null, /* @__PURE__ */ React11.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __8("All elements using", "elementor"), /* @__PURE__ */ React11.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __8("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React11.createElement(DialogActions, null, /* @__PURE__ */ React11.createElement(Button3, { color: "secondary", onClick: closeDialog }, __8("Not now", "elementor")), /* @__PURE__ */ React11.createElement(Button3, { variant: "contained", color: "error", onClick: onConfirm }, __8("Delete", "elementor"))));
 };
 
 // src/components/ui/edit-confirmation-dialog.tsx
-import * as React9 from "react";
-import { useState as useState4 } from "react";
+import * as React12 from "react";
+import { useState as useState5 } from "react";
 import { AlertTriangleFilledIcon } from "@elementor/icons";
 import {
   Button as Button4,
@@ -909,27 +1126,27 @@ import {
   FormControlLabel,
   Typography as Typography3
 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = useState4(false);
+  const [dontShowAgain, setDontShowAgain] = useState5(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React9.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React9.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React9.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __8("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React9.createElement(DialogContent2, null, /* @__PURE__ */ React9.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __8(
+  return /* @__PURE__ */ React12.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React12.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React12.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __9("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React12.createElement(DialogContent2, null, /* @__PURE__ */ React12.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __9(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React9.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React9.createElement(
+  ))), /* @__PURE__ */ React12.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React12.createElement(
     FormControlLabel,
     {
-      control: /* @__PURE__ */ React9.createElement(
+      control: /* @__PURE__ */ React12.createElement(
         Checkbox,
         {
           checked: dontShowAgain,
@@ -937,9 +1154,9 @@ var EditConfirmationDialog = ({
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React9.createElement(Typography3, { variant: "body2" }, __8("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React12.createElement(Typography3, { variant: "body2" }, __9("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(Button4, { color: "secondary", onClick: closeDialog }, __8("Keep editing", "elementor")), /* @__PURE__ */ React9.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __8("Save", "elementor")))));
+  ), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button4, { color: "secondary", onClick: closeDialog }, __9("Keep editing", "elementor")), /* @__PURE__ */ React12.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __9("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
@@ -948,18 +1165,18 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
   const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp4(propTypeUtil);
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = useState5(false);
-  const [editConfirmation, setEditConfirmation] = useState5(false);
-  const [errorMessage, setErrorMessage] = useState5("");
-  const [valueFieldError, setValueFieldError] = useState5("");
+  const [deleteConfirmation, setDeleteConfirmation] = useState6(false);
+  const [editConfirmation, setEditConfirmation] = useState6(false);
+  const [errorMessage, setErrorMessage] = useState6("");
+  const [valueFieldError, setValueFieldError] = useState6("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = useState5(() => variable.value);
-  const [label, setLabel] = useState5(() => variable.label);
+  const [value, setValue] = useState6(() => variable.value);
+  const [label, setLabel] = useState6(() => variable.label);
   useEffect2(() => {
     styleVariablesRepository.update({
       [editId]: {
@@ -1023,15 +1240,15 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React10.createElement(
-        IconButton3,
+      /* @__PURE__ */ React13.createElement(
+        IconButton5,
         {
           key: "delete",
           size: SIZE2,
-          "aria-label": __9("Delete", "elementor"),
+          "aria-label": __10("Delete", "elementor"),
           onClick: handleDeleteConfirmation
         },
-        /* @__PURE__ */ React10.createElement(TrashIcon, { fontSize: SIZE2 })
+        /* @__PURE__ */ React13.createElement(TrashIcon2, { fontSize: SIZE2 })
       )
     );
   }
@@ -1051,23 +1268,23 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React13.createElement(
     PopoverHeader2,
     {
-      title: __9("Edit variable", "elementor"),
+      title: __10("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React10.createElement(React10.Fragment, null, onGoBack && /* @__PURE__ */ React10.createElement(
-        IconButton3,
+      icon: /* @__PURE__ */ React13.createElement(React13.Fragment, null, onGoBack && /* @__PURE__ */ React13.createElement(
+        IconButton5,
         {
           size: SIZE2,
-          "aria-label": __9("Go Back", "elementor"),
+          "aria-label": __10("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React10.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })
-      ), /* @__PURE__ */ React10.createElement(VariableIcon, { fontSize: SIZE2 })),
+        /* @__PURE__ */ React13.createElement(ArrowLeftIcon2, { fontSize: SIZE2 })
+      ), /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: SIZE2 })),
       actions
     }
-  ), /* @__PURE__ */ React10.createElement(Divider3, null), /* @__PURE__ */ React10.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React13.createElement(Divider3, null), /* @__PURE__ */ React13.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React13.createElement(
     LabelField,
     {
       value: label,
@@ -1077,7 +1294,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React10.createElement(FormField, { errorMsg: valueFieldError, label: __9("Value", "elementor") }, /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React13.createElement(FormField, { errorMsg: valueFieldError, label: __10("Value", "elementor") }, /* @__PURE__ */ React13.createElement(
     ValueField,
     {
       value,
@@ -1088,7 +1305,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       },
       onValidationChange: setValueFieldError
     }
-  )), errorMessage && /* @__PURE__ */ React10.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React10.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React10.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __9("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React10.createElement(
+  )), errorMessage && /* @__PURE__ */ React13.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React13.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React13.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __10("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React13.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1096,7 +1313,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React10.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React13.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -1107,25 +1324,25 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import * as React14 from "react";
-import { useState as useState6 } from "react";
+import * as React17 from "react";
+import { useState as useState7 } from "react";
 import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { PopoverBody as PopoverBody3 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader3, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
-import { ColorFilterIcon, PlusIcon, SettingsIcon } from "@elementor/icons";
-import { Divider as Divider4, IconButton as IconButton5 } from "@elementor/ui";
-import { __ as __13, sprintf } from "@wordpress/i18n";
+import { ColorFilterIcon as ColorFilterIcon2, PlusIcon, SettingsIcon } from "@elementor/icons";
+import { Divider as Divider4, IconButton as IconButton7 } from "@elementor/ui";
+import { __ as __14, sprintf } from "@wordpress/i18n";
 
 // src/components/ui/menu-item-content.tsx
-import * as React11 from "react";
-import { EllipsisWithTooltip } from "@elementor/editor-ui";
+import * as React14 from "react";
+import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
-import { Box as Box3, IconButton as IconButton4, ListItemIcon, Typography as Typography4 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { Box as Box3, IconButton as IconButton6, ListItemIcon, Typography as Typography4 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React14.createElement(
     Box3,
     {
       sx: {
@@ -1136,8 +1353,8 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React11.createElement(
-      EllipsisWithTooltip,
+    /* @__PURE__ */ React14.createElement(
+      EllipsisWithTooltip2,
       {
         title: item.label || item.value,
         as: Typography4,
@@ -1147,8 +1364,8 @@ var MenuItemContent = ({ item }) => {
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React11.createElement(
-      EllipsisWithTooltip,
+    item.secondaryText && /* @__PURE__ */ React14.createElement(
+      EllipsisWithTooltip2,
       {
         title: item.secondaryText,
         as: Typography4,
@@ -1158,27 +1375,27 @@ var MenuItemContent = ({ item }) => {
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React11.createElement(
-    IconButton4,
+  ), !!onEdit && /* @__PURE__ */ React14.createElement(
+    IconButton6,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": __10("Edit", "elementor")
+      "aria-label": __11("Edit", "elementor")
     },
-    /* @__PURE__ */ React11.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React14.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-import * as React12 from "react";
-import { Link, Stack as Stack3, Typography as Typography5 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import * as React15 from "react";
+import { Link, Stack as Stack4, Typography as Typography5 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React12.createElement(
-    Stack3,
+  return /* @__PURE__ */ React15.createElement(
+    Stack4,
     {
       gap: 1,
       alignItems: "center",
@@ -1189,19 +1406,19 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React12.createElement(Typography5, { align: "center", variant: "subtitle2" }, __11("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React12.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React12.createElement(Typography5, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __11("Try something else.", "elementor"), /* @__PURE__ */ React12.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __11("Clear & try again", "elementor")))
+    /* @__PURE__ */ React15.createElement(Typography5, { align: "center", variant: "subtitle2" }, __12("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React15.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React15.createElement(Typography5, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __12("Try something else.", "elementor"), /* @__PURE__ */ React15.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __12("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
-import * as React13 from "react";
-import { Button as Button6, Stack as Stack4, Typography as Typography6 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import * as React16 from "react";
+import { Button as Button6, Stack as Stack5, Typography as Typography6 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
 var NoVariables = ({ icon, title, onAdd }) => {
   const canAdd = usePermissions().canAdd();
-  return /* @__PURE__ */ React13.createElement(
-    Stack4,
+  return /* @__PURE__ */ React16.createElement(
+    Stack5,
     {
       gap: 1,
       alignItems: "center",
@@ -1211,26 +1428,26 @@ var NoVariables = ({ icon, title, onAdd }) => {
       sx: { p: 2.5, pb: 5.5 }
     },
     icon,
-    canAdd ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
+    canAdd ? /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
       NoVariablesContent,
       {
-        title: title || __12("Create your first variable", "elementor"),
-        message: __12(
+        title: title || __13("Create your first variable", "elementor"),
+        message: __13(
           "Variables are saved attributes that you can apply anywhere on your site.",
           "elementor"
         )
       }
-    ), onAdd && /* @__PURE__ */ React13.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __12("Create a variable", "elementor"))) : /* @__PURE__ */ React13.createElement(
+    ), onAdd && /* @__PURE__ */ React16.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __13("Create a variable", "elementor"))) : /* @__PURE__ */ React16.createElement(
       NoVariablesContent,
       {
-        title: __12("There are no variables", "elementor"),
-        message: __12("With your current role, you can only connect and detach variables.", "elementor")
+        title: __13("There are no variables", "elementor"),
+        message: __13("With your current role, you can only connect and detach variables.", "elementor")
       }
     )
   );
 };
 function NoVariablesContent({ title, message }) {
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Typography6, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React13.createElement(Typography6, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Typography6, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React16.createElement(Typography6, { align: "center", variant: "caption", maxWidth: "180px" }, message));
 }
 
 // src/components/ui/styled-menu-list.tsx
@@ -1270,7 +1487,7 @@ var SIZE4 = "tiny";
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useBoundProp5(propTypeUtil);
-  const [searchValue, setSearchValue] = useState6("");
+  const [searchValue, setSearchValue] = useState7("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -1296,20 +1513,20 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React14.createElement(IconButton5, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React14.createElement(PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React17.createElement(IconButton7, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React17.createElement(PlusIcon, { fontSize: SIZE4 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React14.createElement(IconButton5, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React14.createElement(SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React17.createElement(IconButton7, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React17.createElement(SettingsIcon, { fontSize: SIZE4 }))
     );
   }
-  const StartIcon = startIcon || (() => /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: SIZE4 }));
+  const StartIcon = startIcon || (() => /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE4 }));
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React14.createElement(StartIcon, { value }),
+    icon: /* @__PURE__ */ React17.createElement(StartIcon, { value }),
     secondaryText: value,
     onEdit: onEdit ? () => onEdit?.(key) : void 0
   }));
@@ -1321,25 +1538,25 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   };
   const noVariableTitle = sprintf(
     /* translators: %s: Variable Type. */
-    __13("Create your first %s variable", "elementor"),
+    __14("Create your first %s variable", "elementor"),
     variableType
   );
-  return /* @__PURE__ */ React14.createElement(PopoverBody3, null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React17.createElement(PopoverBody3, null, /* @__PURE__ */ React17.createElement(
     PopoverHeader3,
     {
-      title: __13("Variables", "elementor"),
-      icon: /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: SIZE4 }),
+      title: __14("Variables", "elementor"),
+      icon: /* @__PURE__ */ React17.createElement(ColorFilterIcon2, { fontSize: SIZE4 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React14.createElement(
+  ), hasVariables && /* @__PURE__ */ React17.createElement(
     PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __13("Search", "elementor")
+      placeholder: __14("Search", "elementor")
     }
-  ), /* @__PURE__ */ React14.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React17.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React17.createElement(
     PopoverMenuList,
     {
       items,
@@ -1349,16 +1566,16 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       selectedValue: variable,
       "data-testid": `${variableType}-variables-list`,
       menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React14.createElement(MenuItemContent, { item })
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React17.createElement(MenuItemContent, { item })
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React14.createElement(
+  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React17.createElement(
     NoSearchResults,
     {
       searchValue,
       onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: "large" })
+      icon: /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: "large" })
     }
-  ), !hasVariables && /* @__PURE__ */ React14.createElement(NoVariables, { title: noVariableTitle, icon: /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: "large" }), onAdd }));
+  ), !hasVariables && /* @__PURE__ */ React17.createElement(NoVariables, { title: noVariableTitle, icon: /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: "large" }), onAdd }));
 };
 
 // src/components/variable-selection-popover.tsx
@@ -1366,13 +1583,13 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = useState7(VIEW_LIST);
-  const [editId, setEditId] = useState7("");
+  const [currentView, setCurrentView] = useState8(VIEW_LIST);
+  const [editId, setEditId] = useState8("");
   const { open } = usePanelActions();
-  const onSettingsAvailable = isExperimentActive("e_variables_settings") ? () => {
+  const onSettingsAvailable = isExperimentActive("e_variables_manager") ? () => {
     open();
   } : void 0;
-  return /* @__PURE__ */ React15.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React15.createElement(PopoverContentRefContextProvider, null, RenderView({
+  return /* @__PURE__ */ React18.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React18.createElement(PopoverContentRefContextProvider, null, RenderView({
     propTypeKey,
     currentView,
     selectedVariable,
@@ -1406,8 +1623,8 @@ function RenderView(props) {
   }
   if (userPermissions.canManageSettings() && props.onSettings) {
     handlers.onSettings = () => {
-      props.onSettings?.();
       props.closePopover();
+      props.onSettings?.();
     };
   }
   const handleSubmitOnEdit = () => {
@@ -1418,7 +1635,7 @@ function RenderView(props) {
     }
   };
   if (VIEW_LIST === props.currentView) {
-    return /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React18.createElement(
       VariablesSelection,
       {
         closePopover: handlers.onClose,
@@ -1429,10 +1646,10 @@ function RenderView(props) {
     );
   }
   if (VIEW_ADD === props.currentView) {
-    return /* @__PURE__ */ React15.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
+    return /* @__PURE__ */ React18.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
   }
   if (VIEW_EDIT === props.currentView) {
-    return /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React18.createElement(
       VariableEdit,
       {
         editId: props.editId,
@@ -1446,25 +1663,25 @@ function RenderView(props) {
 }
 
 // src/components/ui/tags/assigned-tag.tsx
-import * as React16 from "react";
+import * as React19 from "react";
 import { DetachIcon } from "@elementor/icons";
-import { Box as Box4, IconButton as IconButton6, Stack as Stack5, Tooltip, Typography as Typography7, UnstableTag as Tag } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { Box as Box4, IconButton as IconButton8, Stack as Stack6, Tooltip, Typography as Typography7, UnstableTag as Tag } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
 var SIZE5 = "tiny";
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React16.createElement(IconButton6, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": __14("Unlink", "elementor") }, /* @__PURE__ */ React16.createElement(DetachIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React19.createElement(IconButton8, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": __15("Unlink", "elementor") }, /* @__PURE__ */ React19.createElement(DetachIcon, { fontSize: SIZE5 }))
     );
   }
-  return /* @__PURE__ */ React16.createElement(Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React19.createElement(
     Tag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React16.createElement(Stack5, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React16.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React16.createElement(Typography7, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      startIcon: /* @__PURE__ */ React19.createElement(Stack6, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React19.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React19.createElement(Typography7, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -1477,21 +1694,21 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
   const { setValue } = useBoundProp6();
   const anchorRef = useRef(null);
   const popupId = useId2();
-  const popupState = usePopupState({
+  const popupState = usePopupState2({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React17.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React20.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React20.createElement(
     AssignedTag,
     {
       label: variable.label,
-      startIcon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(ColorFilterIcon2, { fontSize: SIZE5 }), /* @__PURE__ */ React17.createElement(StartIcon, { value: variable.value })),
+      startIcon: /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(ColorFilterIcon3, { fontSize: SIZE5 }), /* @__PURE__ */ React20.createElement(StartIcon, { value: variable.value })),
       onUnlink: unlinkVariable,
-      ...bindTrigger(popupState)
+      ...bindTrigger2(popupState)
     }
-  ), /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     Popover,
     {
       disableScrollLock: true,
@@ -1503,7 +1720,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
       },
       ...bindPopover(popupState)
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React20.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -1515,19 +1732,19 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/deleted-variable.tsx
-import * as React21 from "react";
-import { useId as useId3, useRef as useRef2, useState as useState9 } from "react";
+import * as React24 from "react";
+import { useId as useId3, useRef as useRef2, useState as useState10 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
-import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip, Popover as Popover2, usePopupState as usePopupState2 } from "@elementor/ui";
+import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip, Popover as Popover2, usePopupState as usePopupState3 } from "@elementor/ui";
 
 // src/components/variable-restore.tsx
-import * as React18 from "react";
-import { useState as useState8 } from "react";
+import * as React21 from "react";
+import { useState as useState9 } from "react";
 import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { PopoverBody as PopoverBody4 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
 import { Button as Button7, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 var SIZE6 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
@@ -1536,10 +1753,10 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = useState8("");
-  const [valueFieldError, setValueFieldError] = useState8("");
-  const [label, setLabel] = useState8(variable.label);
-  const [value, setValue] = useState8(variable.value);
+  const [errorMessage, setErrorMessage] = useState9("");
+  const [valueFieldError, setValueFieldError] = useState9("");
+  const [label, setLabel] = useState9(variable.label);
+  const [value, setValue] = useState9(variable.value);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -1577,14 +1794,14 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React18.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React18.createElement(PopoverBody4, { height: "auto" }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React21.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React21.createElement(PopoverBody4, { height: "auto" }, /* @__PURE__ */ React21.createElement(
     PopoverHeader4,
     {
-      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE6 }),
-      title: __15("Restore variable", "elementor"),
+      icon: /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: SIZE6 }),
+      title: __16("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React18.createElement(Divider5, null), /* @__PURE__ */ React18.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React21.createElement(Divider5, null), /* @__PURE__ */ React21.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React21.createElement(
     LabelField,
     {
       value: label,
@@ -1594,7 +1811,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React18.createElement(FormField, { errorMsg: valueFieldError, label: __15("Value", "elementor") }, /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React21.createElement(FormField, { errorMsg: valueFieldError, label: __16("Value", "elementor") }, /* @__PURE__ */ React21.createElement(
     ValueField,
     {
       value,
@@ -1605,32 +1822,32 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       },
       onValidationChange: setValueFieldError
     }
-  )), errorMessage && /* @__PURE__ */ React18.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React18.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React18.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __15("Restore", "elementor")))));
+  )), errorMessage && /* @__PURE__ */ React21.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React21.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React21.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __16("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
-import * as React19 from "react";
+import * as React22 from "react";
 import { useSectionWidth } from "@elementor/editor-editing-panel";
 import { Alert as Alert2, AlertAction, AlertTitle, ClickAwayListener } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
   const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React19.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React22.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React22.createElement(
     Alert2,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React19.createElement(React19.Fragment, null, onUnlink && /* @__PURE__ */ React19.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __16("Unlink", "elementor")), onRestore && /* @__PURE__ */ React19.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __16("Restore", "elementor"))),
+      action: /* @__PURE__ */ React22.createElement(React22.Fragment, null, onUnlink && /* @__PURE__ */ React22.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __17("Unlink", "elementor")), onRestore && /* @__PURE__ */ React22.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __17("Restore", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React19.createElement(AlertTitle, null, __16("Deleted variable", "elementor")),
-    __16("The variable", "elementor"),
+    /* @__PURE__ */ React22.createElement(AlertTitle, null, __17("Deleted variable", "elementor")),
+    __17("The variable", "elementor"),
     " '",
     label,
     "'",
     " ",
-    __16(
+    __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"
     )
@@ -1638,12 +1855,12 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 };
 
 // src/components/ui/tags/deleted-tag.tsx
-import * as React20 from "react";
+import * as React23 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2 } from "@elementor/icons";
 import { Box as Box6, Chip, Tooltip as Tooltip2, Typography as Typography8 } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
-var DeletedTag = React20.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React20.createElement(
+import { __ as __18 } from "@wordpress/i18n";
+var DeletedTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React23.createElement(
     Chip,
     {
       ref,
@@ -1652,8 +1869,8 @@ var DeletedTag = React20.forwardRef(({ label, onClick, ...props }, ref) => {
       shape: "rounded",
       variant: "standard",
       onClick,
-      icon: /* @__PURE__ */ React20.createElement(AlertTriangleFilledIcon2, null),
-      label: /* @__PURE__ */ React20.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React20.createElement(Box6, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React20.createElement(Typography8, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React20.createElement(Typography8, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __17("deleted", "elementor"), ")"))),
+      icon: /* @__PURE__ */ React23.createElement(AlertTriangleFilledIcon2, null),
+      label: /* @__PURE__ */ React23.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React23.createElement(Box6, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React23.createElement(Typography8, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React23.createElement(Typography8, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __18("deleted", "elementor"), ")"))),
       sx: {
         height: (theme) => theme.spacing(3.5),
         borderRadius: (theme) => theme.spacing(1),
@@ -1670,12 +1887,12 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = useBoundProp8();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = useState9(false);
+  const [showInfotip, setShowInfotip] = useState10(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
   const deletedChipAnchorRef = useRef2(null);
   const popupId = useId3();
-  const popupState = usePopupState2({
+  const popupState = usePopupState3({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
   });
@@ -1701,7 +1918,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React21.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React24.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React24.createElement(
     Infotip,
     {
       color: "warning",
@@ -1709,7 +1926,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       open: showInfotip,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React21.createElement(
+      content: /* @__PURE__ */ React24.createElement(
         DeletedVariableAlert,
         {
           onClose: closeInfotip,
@@ -1729,8 +1946,8 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
         }
       }
     },
-    /* @__PURE__ */ React21.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
-  ), /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React24.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
+  ), /* @__PURE__ */ React24.createElement(
     Popover2,
     {
       disableScrollLock: true,
@@ -1741,7 +1958,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       },
       ...bindPopover2(popupState)
     },
-    /* @__PURE__ */ React21.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React24.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React24.createElement(
       VariableRestore,
       {
         variableId: variable.key ?? "",
@@ -1753,30 +1970,30 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/missing-variable.tsx
-import * as React24 from "react";
-import { useState as useState10 } from "react";
+import * as React27 from "react";
+import { useState as useState11 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop2, Infotip as Infotip2 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 
 // src/components/ui/missing-variable-alert.tsx
-import * as React22 from "react";
+import * as React25 from "react";
 import { useSectionWidth as useSectionWidth2 } from "@elementor/editor-editing-panel";
 import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener2 } from "@elementor/ui";
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __19 } from "@wordpress/i18n";
 var MissingVariableAlert = ({ onClose, onClear }) => {
   const sectionWidth = useSectionWidth2();
-  return /* @__PURE__ */ React22.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React25.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React25.createElement(
     Alert3,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React22.createElement(React22.Fragment, null, onClear && /* @__PURE__ */ React22.createElement(AlertAction2, { variant: "contained", onClick: onClear }, __18("Clear", "elementor"))),
+      action: /* @__PURE__ */ React25.createElement(React25.Fragment, null, onClear && /* @__PURE__ */ React25.createElement(AlertAction2, { variant: "contained", onClick: onClear }, __19("Clear", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React22.createElement(AlertTitle2, null, __18("This variable is missing", "elementor")),
-    __18(
+    /* @__PURE__ */ React25.createElement(AlertTitle2, null, __19("This variable is missing", "elementor")),
+    __19(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
     )
@@ -1784,11 +2001,11 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 };
 
 // src/components/ui/tags/missing-tag.tsx
-import * as React23 from "react";
+import * as React26 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
 import { Chip as Chip2 } from "@elementor/ui";
-var MissingTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React23.createElement(
+var MissingTag = React26.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React26.createElement(
     Chip2,
     {
       ref,
@@ -1797,7 +2014,7 @@ var MissingTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
       shape: "rounded",
       variant: "standard",
       onClick,
-      icon: /* @__PURE__ */ React23.createElement(AlertTriangleFilledIcon3, null),
+      icon: /* @__PURE__ */ React26.createElement(AlertTriangleFilledIcon3, null),
       label,
       sx: {
         height: (theme) => theme.spacing(3.5),
@@ -1813,11 +2030,11 @@ var MissingTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = useBoundProp9();
-  const [infotipVisible, setInfotipVisible] = useState10(false);
+  const [infotipVisible, setInfotipVisible] = useState11(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, infotipVisible && /* @__PURE__ */ React24.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, infotipVisible && /* @__PURE__ */ React27.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React27.createElement(
     Infotip2,
     {
       color: "warning",
@@ -1825,7 +2042,7 @@ var MissingVariable = () => {
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React24.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      content: /* @__PURE__ */ React27.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
       slotProps: {
         popper: {
           modifiers: [
@@ -1837,7 +2054,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React24.createElement(MissingTag, { label: __19("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React27.createElement(MissingTag, { label: __20("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -1846,33 +2063,33 @@ var VariableControl = () => {
   const boundProp = useBoundProp10().value;
   const assignedVariable = useVariable(boundProp?.value);
   if (!assignedVariable) {
-    return /* @__PURE__ */ React25.createElement(MissingVariable, null);
+    return /* @__PURE__ */ React28.createElement(MissingVariable, null);
   }
   const { $$type: propTypeKey } = boundProp;
   if (assignedVariable?.deleted) {
-    return /* @__PURE__ */ React25.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
+    return /* @__PURE__ */ React28.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
   }
-  return /* @__PURE__ */ React25.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
+  return /* @__PURE__ */ React28.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
 // src/hooks/use-prop-variable-action.tsx
-import * as React26 from "react";
+import * as React29 from "react";
 import { useBoundProp as useBoundProp11 } from "@elementor/editor-editing-panel";
-import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
-import { __ as __20 } from "@wordpress/i18n";
+import { ColorFilterIcon as ColorFilterIcon4 } from "@elementor/icons";
+import { __ as __21 } from "@wordpress/i18n";
 var usePropVariableAction = () => {
   const { propType, path } = useBoundProp11();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
-    icon: ColorFilterIcon3,
-    title: __20("Variables", "elementor"),
+    icon: ColorFilterIcon4,
+    title: __21("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
       }
       trackOpenVariablePopover(path, variable.variableType);
-      return /* @__PURE__ */ React26.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
+      return /* @__PURE__ */ React29.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
@@ -1897,17 +2114,17 @@ var trackOpenVariablePopover = (path, variableType) => {
 };
 
 // src/register-variable-types.tsx
-import * as React29 from "react";
+import * as React32 from "react";
 import { colorPropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 import { BrushIcon, TextIcon as TextIcon2 } from "@elementor/icons";
 
 // src/components/fields/color-field.tsx
-import * as React27 from "react";
-import { useRef as useRef3, useState as useState11 } from "react";
+import * as React30 from "react";
+import { useRef as useRef3, useState as useState12 } from "react";
 import { UnstableColorField } from "@elementor/ui";
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = useState11(value);
-  const [errorMessage, setErrorMessage] = useState11("");
+  const [color, setColor] = useState12(value);
+  const [errorMessage, setErrorMessage] = useState12("");
   const defaultRef = useRef3(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
@@ -1917,7 +2134,7 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
     onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React30.createElement(
     UnstableColorField,
     {
       size: "tiny",
@@ -1937,21 +2154,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/components/fields/font-field.tsx
-import * as React28 from "react";
-import { useId as useId4, useRef as useRef4, useState as useState12 } from "react";
+import * as React31 from "react";
+import { useId as useId4, useRef as useRef4, useState as useState13 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector } from "@elementor/editor-controls";
 import { useFontFamilies, useSectionWidth as useSectionWidth3 } from "@elementor/editor-editing-panel";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
-import { bindPopover as bindPopover3, bindTrigger as bindTrigger2, Popover as Popover3, UnstableTag, usePopupState as usePopupState3 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
+import { bindPopover as bindPopover3, bindTrigger as bindTrigger3, Popover as Popover3, UnstableTag, usePopupState as usePopupState4 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = useState12(value);
+  const [fontFamily, setFontFamily] = useState13(value);
   const defaultRef = useRef4(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
-  const fontPopoverState = usePopupState3({ variant: "popover" });
+  const fontPopoverState = usePopupState4({ variant: "popover" });
   const fontFamilies = useFontFamilies();
   const sectionWidth = useSectionWidth3();
-  const mapFontSubs = React28.useMemo(() => {
+  const mapFontSubs = React31.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -1968,17 +2185,17 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     fontPopoverState.close();
   };
   const id2 = useId4();
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(
     UnstableTag,
     {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React28.createElement(ChevronDownIcon, { fontSize: "tiny" }),
-      ...bindTrigger2(fontPopoverState),
+      endIcon: /* @__PURE__ */ React31.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      ...bindTrigger3(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React28.createElement(
+  ), /* @__PURE__ */ React31.createElement(
     Popover3,
     {
       disablePortal: true,
@@ -1988,7 +2205,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
       transformOrigin: { vertical: "top", horizontal: -28 },
       ...bindPopover3(fontPopoverState)
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React31.createElement(
       ItemSelector,
       {
         itemsList: mapFontSubs,
@@ -1996,7 +2213,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: __21("Font Family", "elementor"),
+        title: __22("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: enqueueFont2,
         icon: TextIcon
@@ -2013,7 +2230,7 @@ function registerVariableTypes() {
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: colorPropTypeUtil,
     variableType: "color",
-    startIcon: ({ value }) => /* @__PURE__ */ React29.createElement(ColorIndicator, { size: "inherit", component: "span", value })
+    startIcon: ({ value }) => /* @__PURE__ */ React32.createElement(ColorIndicator, { size: "inherit", component: "span", value })
   });
   registerVariableType({
     valueField: FontField,
@@ -2025,8 +2242,8 @@ function registerVariableTypes() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-import * as React30 from "react";
-import { useEffect as useEffect3, useState as useState13 } from "react";
+import * as React33 from "react";
+import { useEffect as useEffect3, useState as useState14 } from "react";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
@@ -2047,13 +2264,13 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React30.createElement(Portal, { container }, /* @__PURE__ */ React30.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React33.createElement(Portal, { container }, /* @__PURE__ */ React33.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] = useState13({});
+  const [variables, setVariables] = useState14({});
   useEffect3(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
@@ -2077,22 +2294,22 @@ import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elemen
 import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 
 // src/components/variables-repeater-item-slot.tsx
-import * as React31 from "react";
+import * as React34 from "react";
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React31.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React34.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React31.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React34.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React31.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React34.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 
 // src/repeater-injections.ts