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

package/dist/index.js

@@ -41,101 +41,44 @@ var import_editor_editing_panel10 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/variables-manager/variables-manager-panel.tsx
-var React = __toESM(require("react"));
-var import_react = require("react");
+var React6 = __toESM(require("react"));
+var import_react5 = require("react");
 var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui = require("@elementor/editor-ui");
+var import_editor_ui2 = require("@elementor/editor-ui");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_icons = require("@elementor/icons");
-var import_ui = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
-var id = "variables-manager";
-var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
-  id,
-  component: VariablesManagerPanel,
-  allowedEditModes: ["edit", id],
-  onOpen: () => {
-    (0, import_editor_v1_adapters.changeEditMode)(id);
-  },
-  onClose: () => {
-    (0, import_editor_v1_adapters.changeEditMode)("edit");
-  }
-});
-function VariablesManagerPanel() {
-  const { close: closePanel } = usePanelActions();
-  const isDirty = false;
-  usePreventUnload(isDirty);
-  return /* @__PURE__ */ React.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React.createElement(import_ui.ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React.createElement(import_ui.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React.createElement(import_ui.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React.createElement(import_icons.FilterIcon, { fontSize: "inherit" }), (0, import_i18n.__)("Variables Manager", "elementor"))), /* @__PURE__ */ React.createElement(
-    CloseButton,
-    {
-      sx: { marginLeft: "auto" },
-      onClose: () => {
-        closePanel();
-      }
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    import_editor_panels.PanelBody,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
-      }
-    },
-    /* @__PURE__ */ React.createElement(import_ui.Divider, null),
-    /* @__PURE__ */ React.createElement(
-      import_ui.Box,
-      {
-        px: 2,
-        sx: {
-          flexGrow: 1,
-          overflowY: "auto"
-        }
-      },
-      "List"
-    )
-  ), /* @__PURE__ */ React.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React.createElement(import_ui.Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, (0, import_i18n.__)("Save changes", "elementor"))))));
-}
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React.createElement(import_ui.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React.createElement(import_icons.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React.createElement(import_ui.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React.createElement(import_ui.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React.createElement("strong", null, (0, import_i18n.__)("Something went wrong", "elementor"))));
-var usePreventUnload = (isDirty) => {
-  (0, import_react.useEffect)(() => {
-    const handleBeforeUnload = (event) => {
-      if (isDirty) {
-        event.preventDefault();
-      }
-    };
-    window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-    };
-  }, [isDirty]);
-};
+var import_icons3 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 
-// src/controls/variable-control.tsx
-var React25 = __toESM(require("react"));
-var import_editor_controls10 = require("@elementor/editor-controls");
+// src/components/variables-manager/variables-manager-table.tsx
+var React5 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_editor_ui = require("@elementor/editor-ui");
+var import_icons2 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
 
-// src/components/ui/variable/assigned-variable.tsx
-var import_react11 = require("react");
-var React17 = __toESM(require("react"));
-var import_editor_controls6 = require("@elementor/editor-controls");
-var import_icons9 = require("@elementor/icons");
-var import_ui17 = require("@elementor/ui");
+// src/hooks/use-prop-variables.ts
+var import_react2 = require("react");
+var import_editor_controls = require("@elementor/editor-controls");
+
+// src/context/variable-type-context.tsx
+var React2 = __toESM(require("react"));
+var import_react = require("react");
 
 // src/variables-registry/create-variable-type-registry.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 
 // src/transformers/inheritance-transformer.tsx
-var React2 = __toESM(require("react"));
+var React = __toESM(require("react"));
 var import_editor_canvas = require("@elementor/editor-canvas");
-var import_ui3 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_ui2 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
 
 // src/components/ui/color-indicator.tsx
-var import_ui2 = require("@elementor/ui");
-var ColorIndicator = (0, import_ui2.styled)(import_ui2.UnstableColorIndicator)(({ theme }) => ({
+var import_ui = require("@elementor/ui");
+var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`,
   marginRight: theme.spacing(0.25)
 }));
@@ -146,7 +89,7 @@ var import_schema = require("@elementor/schema");
 var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
 
 // src/service.ts
-var import_i18n2 = require("@wordpress/i18n");
+var import_i18n = require("@wordpress/i18n");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
@@ -345,7 +288,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -367,7 +310,7 @@ var service = {
     return apiClient.update(id2, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -459,11 +402,11 @@ var inheritanceTransformer = (0, import_editor_canvas.createTransformer)((id2) =
   const variables = service.variables();
   const variable = variables[id2];
   if (!variable) {
-    return /* @__PURE__ */ React2.createElement("span", null, (0, import_i18n3.__)("Missing variable", "elementor"));
+    return /* @__PURE__ */ React.createElement("span", null, (0, import_i18n2.__)("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
   const css = resolveCssVariable(id2, variable);
-  return /* @__PURE__ */ React2.createElement(import_ui3.Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React2.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React2.createElement(import_ui3.Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
+  return /* @__PURE__ */ React.createElement(import_ui2.Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React.createElement(import_ui2.Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
 });
 
 // src/transformers/variable-transformer.ts
@@ -527,88 +470,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
-var React15 = __toESM(require("react"));
-var import_react10 = require("react");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-
-// src/context/variable-selection-popover.context.tsx
-var React3 = __toESM(require("react"));
-var import_react2 = require("react");
-var import_ui4 = require("@elementor/ui");
-var PopoverContentRefContext = (0, import_react2.createContext)(null);
-var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = (0, import_react2.useState)(null);
-  return /* @__PURE__ */ React3.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React3.createElement(import_ui4.Box, { ref: setAnchorRef }, children));
-};
-var usePopoverContentRef = () => {
-  return (0, import_react2.useContext)(PopoverContentRefContext);
-};
-
 // src/context/variable-type-context.tsx
-var React4 = __toESM(require("react"));
-var import_react3 = require("react");
-var VariableTypeContext = (0, import_react3.createContext)(null);
+var VariableTypeContext = (0, import_react.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 = (0, import_react3.useContext)(VariableTypeContext);
+  const context = (0, import_react.useContext)(VariableTypeContext);
   if (context === null) {
     throw new Error("useVariableType must be used within a VariableTypeProvider");
   }
   return getVariableType(context);
 }
 
-// src/hooks/use-permissions.ts
-var import_editor_current_user = require("@elementor/editor-current-user");
-var usePermissions = () => {
-  const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
-  return {
-    canAssign: () => canUser("edit_posts"),
-    canUnlink: () => canUser("edit_posts"),
-    canAdd: () => canUser("manage_options"),
-    canDelete: () => canUser("manage_options"),
-    canEdit: () => canUser("manage_options"),
-    canRestore: () => canUser("manage_options"),
-    canManageSettings: () => canUser("manage_options")
-  };
-};
-
-// src/components/variable-creation.tsx
-var React7 = __toESM(require("react"));
-var import_react6 = require("react");
-var import_editor_controls3 = require("@elementor/editor-controls");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_icons2 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
-
-// src/hooks/use-initial-value.ts
-var import_editor_controls2 = require("@elementor/editor-controls");
-
 // src/hooks/use-prop-variables.ts
-var import_react4 = require("react");
-var import_editor_controls = require("@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;
   }
@@ -637,12 +521,11 @@ var filterVariablesBySearchValue = (variables, searchValue) => {
   return variables.filter(({ label }) => label.toLowerCase().includes(lowerSearchValue));
 };
 var usePropVariables = (propKey) => {
-  return (0, import_react4.useMemo)(() => normalizeVariables(propKey), [propKey]);
+  return (0, import_react2.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
@@ -662,7 +545,331 @@ var restoreVariable = (restoreId, label, value) => {
   return service.restore(restoreId, label, value).then(extractId);
 };
 
+// src/components/variables-manager/variable-edit-menu.tsx
+var React3 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_icons = require("@elementor/icons");
+var import_ui3 = require("@elementor/ui");
+var VariableEditMenu = ({ menuActions, disabled }) => {
+  const menuState = (0, import_ui3.usePopupState)({
+    variant: "popover"
+  });
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(import_ui3.IconButton, { ...(0, import_ui3.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React3.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React3.createElement(
+    import_ui3.Menu,
+    {
+      disablePortal: true,
+      MenuListProps: {
+        dense: true
+      },
+      PaperProps: {
+        elevation: 6
+      },
+      ...(0, import_ui3.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(
+      import_ui3.MenuItem,
+      {
+        key: action.name,
+        onClick: () => {
+          action.onClick?.();
+          menuState.close();
+        },
+        sx: {
+          color: action.color,
+          gap: 1
+        }
+      },
+      action.icon && (0, import_react3.createElement)(action.icon, {
+        fontSize: "inherit"
+      }),
+      " ",
+      action.name
+    ))
+  ));
+};
+
+// src/components/variables-manager/variable-table-cell.tsx
+var React4 = __toESM(require("react"));
+var import_ui4 = require("@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(import_ui4.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] = (0, import_react4.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(import_ui5.TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React5.createElement(import_ui5.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering" }, /* @__PURE__ */ React5.createElement(import_ui5.TableHead, null, /* @__PURE__ */ React5.createElement(import_ui5.TableRow, null, /* @__PURE__ */ React5.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React5.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n3.__)("Name", "elementor")), /* @__PURE__ */ React5.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n3.__)("Value", "elementor")), /* @__PURE__ */ React5.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React5.createElement(import_ui5.TableBody, null, /* @__PURE__ */ React5.createElement(
+    import_ui5.UnstableSortableProvider,
+    {
+      value: ids,
+      onChange: setIds,
+      variant: "static",
+      restrictAxis: true,
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React5.createElement(import_ui5.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React5.createElement(import_ui5.TableBody, null, dragOverlayChildren))
+    },
+    rows.map((row) => /* @__PURE__ */ React5.createElement(
+      import_ui5.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(
+            import_ui5.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(
+              import_ui5.IconButton,
+              {
+                size: "small",
+                ref: setTriggerRef,
+                ...triggerProps,
+                disabled: isSorting,
+                draggable: true
+              },
+              /* @__PURE__ */ React5.createElement(import_icons2.GripVerticalIcon, { fontSize: "inherit" })
+            )),
+            /* @__PURE__ */ React5.createElement(VariableTableCell, null, /* @__PURE__ */ React5.createElement(import_ui5.Stack, { direction: "row", alignItems: "center", gap: 1 }, (0, import_react4.createElement)(row.icon, { fontSize: "inherit" }), /* @__PURE__ */ React5.createElement(import_editor_ui.EllipsisWithTooltip, { title: row.name }, row.name))),
+            /* @__PURE__ */ React5.createElement(VariableTableCell, null, /* @__PURE__ */ React5.createElement(import_ui5.Stack, { direction: "row", alignItems: "center", gap: 1 }, row.startIcon && row.startIcon({ value: row.value }), /* @__PURE__ */ React5.createElement(import_editor_ui.EllipsisWithTooltip, { title: row.value }, row.value))),
+            /* @__PURE__ */ React5.createElement(
+              VariableTableCell,
+              {
+                align: "right",
+                noPadding: true,
+                width: 16,
+                maxWidth: 16,
+                sx: { paddingInlineEnd: 1 }
+              },
+              /* @__PURE__ */ React5.createElement(import_ui5.Stack, { 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 } = (0, import_editor_panels.__createPanel)({
+  id,
+  component: VariablesManagerPanel,
+  allowedEditModes: ["edit", id],
+  onOpen: () => {
+    (0, import_editor_v1_adapters.changeEditMode)(id);
+  },
+  onClose: () => {
+    (0, import_editor_v1_adapters.changeEditMode)("edit");
+  }
+});
+function VariablesManagerPanel() {
+  const { close: closePanel } = usePanelActions();
+  const isDirty = false;
+  usePreventUnload(isDirty);
+  const menuActions = [
+    {
+      name: (0, import_i18n4.__)("Delete", "elementor"),
+      icon: import_icons3.TrashIcon,
+      color: "error.main",
+      onClick: () => {
+      }
+    }
+  ];
+  return /* @__PURE__ */ React6.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React6.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React6.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React6.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React6.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React6.createElement(import_ui6.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React6.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n4.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React6.createElement(
+    CloseButton,
+    {
+      sx: { marginLeft: "auto" },
+      onClose: () => {
+        closePanel();
+      }
+    }
+  ))), /* @__PURE__ */ React6.createElement(
+    import_editor_panels.PanelBody,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    /* @__PURE__ */ React6.createElement(import_ui6.Divider, null),
+    /* @__PURE__ */ React6.createElement(VariablesManagerTable, { menuActions })
+  ), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React6.createElement(import_ui6.Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, (0, import_i18n4.__)("Save changes", "elementor"))))));
+}
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React6.createElement(import_icons3.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React6.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React6.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React6.createElement("strong", null, (0, import_i18n4.__)("Something went wrong", "elementor"))));
+var usePreventUnload = (isDirty) => {
+  (0, import_react5.useEffect)(() => {
+    const handleBeforeUnload = (event) => {
+      if (isDirty) {
+        event.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty]);
+};
+
+// src/controls/variable-control.tsx
+var React28 = __toESM(require("react"));
+var import_editor_controls10 = require("@elementor/editor-controls");
+
+// src/components/ui/variable/assigned-variable.tsx
+var import_react13 = require("react");
+var React20 = __toESM(require("react"));
+var import_editor_controls6 = require("@elementor/editor-controls");
+var import_icons11 = require("@elementor/icons");
+var import_ui20 = require("@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
+var React18 = __toESM(require("react"));
+var import_react12 = require("react");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+
+// src/context/variable-selection-popover.context.tsx
+var React7 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_ui7 = require("@elementor/ui");
+var PopoverContentRefContext = (0, import_react6.createContext)(null);
+var PopoverContentRefContextProvider = ({ children }) => {
+  const [anchorRef, setAnchorRef] = (0, import_react6.useState)(null);
+  return /* @__PURE__ */ React7.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React7.createElement(import_ui7.Box, { ref: setAnchorRef }, children));
+};
+var usePopoverContentRef = () => {
+  return (0, import_react6.useContext)(PopoverContentRefContext);
+};
+
+// src/hooks/use-permissions.ts
+var import_editor_current_user = require("@elementor/editor-current-user");
+var usePermissions = () => {
+  const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
+  return {
+    canAssign: () => canUser("edit_posts"),
+    canUnlink: () => canUser("edit_posts"),
+    canAdd: () => canUser("manage_options"),
+    canDelete: () => canUser("manage_options"),
+    canEdit: () => canUser("manage_options"),
+    canRestore: () => canUser("manage_options"),
+    canManageSettings: () => canUser("manage_options")
+  };
+};
+
+// src/components/variable-creation.tsx
+var React10 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_icons4 = require("@elementor/icons");
+var import_ui10 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
+
 // src/hooks/use-initial-value.ts
+var import_editor_controls2 = require("@elementor/editor-controls");
 var useInitialValue = () => {
   const { value: initial } = (0, import_editor_controls2.useBoundProp)();
   const hasAssignedVariable2 = hasVariableType(initial?.$$type) && Boolean(initial?.value);
@@ -692,15 +899,15 @@ var trackVariableEvent = ({ varType, controlPath, action }) => {
 };
 
 // src/utils/validations.ts
-var import_i18n4 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: (0, import_i18n4.__)("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: (0, import_i18n4.__)("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: (0, import_i18n4.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: (0, import_i18n4.__)("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n4.__)("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: (0, import_i18n4.__)("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: (0, import_i18n4.__)("There was a glitch. Try saving your variable again.", "elementor")
+  MISSING_VARIABLE_NAME: (0, import_i18n5.__)("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: (0, import_i18n5.__)("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: (0, import_i18n5.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: (0, import_i18n5.__)("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n5.__)("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: (0, import_i18n5.__)("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: (0, import_i18n5.__)("There was a glitch. Try saving your variable again.", "elementor")
 };
 var VARIABLE_LABEL_MAX_LENGTH = 50;
 var mapServerError = (error) => {
@@ -744,16 +951,16 @@ var validateValue = (value) => {
 };
 
 // src/components/fields/label-field.tsx
-var React6 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_ui6 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var React9 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_ui9 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/ui/form-field.tsx
-var React5 = __toESM(require("react"));
-var import_ui5 = require("@elementor/ui");
+var React8 = __toESM(require("react"));
+var import_ui8 = require("@elementor/ui");
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React5.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React5.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(import_ui5.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React5.createElement(import_ui5.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React5.createElement(import_ui5.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React5.createElement(import_ui5.FormHelperText, null, noticeMsg)));
+  return /* @__PURE__ */ React8.createElement(import_ui8.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui8.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_ui8.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React8.createElement(import_ui8.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React8.createElement(import_ui8.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React8.createElement(import_ui8.FormHelperText, null, noticeMsg)));
 };
 
 // src/components/fields/label-field.tsx
@@ -761,16 +968,16 @@ function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
 var useLabelError = (initialError) => {
-  const [error, setError] = (0, import_react5.useState)(initialError ?? { value: "", message: "" });
+  const [error, setError] = (0, import_react7.useState)(initialError ?? { value: "", message: "" });
   return {
     labelFieldError: error,
     setLabelFieldError: setError
   };
 };
 var LabelField = ({ value, error, onChange }) => {
-  const [label, setLabel] = (0, import_react5.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react5.useState)("");
-  const [noticeMessage, setNoticeMessage] = (0, import_react5.useState)(() => labelHint(value));
+  const [label, setLabel] = (0, import_react7.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react7.useState)("");
+  const [noticeMessage, setNoticeMessage] = (0, import_react7.useState)(() => labelHint(value));
   const handleChange = (newValue) => {
     setLabel(newValue);
     const errorMsg2 = validateLabel(newValue);
@@ -779,14 +986,14 @@ var LabelField = ({ value, error, onChange }) => {
     setNoticeMessage(errorMsg2 ? "" : hintMsg);
     onChange(isLabelEqual(newValue, error?.value ?? "") || errorMsg2 ? "" : newValue);
   };
-  const id2 = (0, import_react5.useId)();
+  const id2 = (0, import_react7.useId)();
   let errorMsg = errorMessage;
   if (isLabelEqual(label, error?.value ?? "") && error?.message) {
     errorMsg = error.message;
   }
   const noticeMsg = errorMsg ? "" : noticeMessage;
-  return /* @__PURE__ */ React6.createElement(FormField, { id: id2, label: (0, import_i18n5.__)("Name", "elementor"), errorMsg, noticeMsg }, /* @__PURE__ */ React6.createElement(
-    import_ui6.TextField,
+  return /* @__PURE__ */ React9.createElement(FormField, { id: id2, label: (0, import_i18n6.__)("Name", "elementor"), errorMsg, noticeMsg }, /* @__PURE__ */ React9.createElement(
+    import_ui9.TextField,
     {
       id: id2,
       size: "tiny",
@@ -805,10 +1012,10 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
   const { setValue: setVariable, path } = (0, import_editor_controls3.useBoundProp)(propTypeUtil);
   const initialValue = useInitialValue();
-  const [value, setValue] = (0, import_react6.useState)(initialValue);
-  const [label, setLabel] = (0, import_react6.useState)("");
-  const [errorMessage, setErrorMessage] = (0, import_react6.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react6.useState)("");
+  const [value, setValue] = (0, import_react8.useState)(initialValue);
+  const [label, setLabel] = (0, import_react8.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react8.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -859,14 +1066,14 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React7.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React7.createElement(
-    import_editor_ui2.PopoverHeader,
+  return /* @__PURE__ */ React10.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React10.createElement(
+    import_editor_ui3.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React7.createElement(React7.Fragment, null, onGoBack && /* @__PURE__ */ React7.createElement(import_ui7.IconButton, { size: SIZE, "aria-label": (0, import_i18n6.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React7.createElement(import_icons2.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React7.createElement(VariableIcon, { fontSize: SIZE })),
-      title: (0, import_i18n6.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React10.createElement(React10.Fragment, null, onGoBack && /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: SIZE, "aria-label": (0, import_i18n7.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React10.createElement(import_icons4.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React10.createElement(VariableIcon, { fontSize: SIZE })),
+      title: (0, import_i18n7.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React7.createElement(import_ui7.Divider, null), /* @__PURE__ */ React7.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React10.createElement(
     LabelField,
     {
       value: label,
@@ -876,7 +1083,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React7.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n6.__)("Value", "elementor") }, /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React10.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n7.__)("Value", "elementor") }, /* @__PURE__ */ React10.createElement(
     ValueField,
     {
       value,
@@ -887,25 +1094,25 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       },
       onValidationChange: setValueFieldError
     }
-  )), errorMessage && /* @__PURE__ */ React7.createElement(import_ui7.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React7.createElement(import_ui7.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React7.createElement(import_ui7.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n6.__)("Create", "elementor"))));
+  )), errorMessage && /* @__PURE__ */ React10.createElement(import_ui10.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React10.createElement(import_ui10.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React10.createElement(import_ui10.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n7.__)("Create", "elementor"))));
 };
 
 // src/components/variable-edit.tsx
-var React10 = __toESM(require("react"));
-var import_react8 = require("react");
+var React13 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_icons5 = require("@elementor/icons");
-var import_ui10 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_icons7 = require("@elementor/icons");
+var import_ui13 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/components/ui/delete-confirmation-dialog.tsx
-var React8 = __toESM(require("react"));
-var import_icons3 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var React11 = __toESM(require("react"));
+var import_icons5 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
 var TITLE_ID = "delete-variable-dialog";
 var DeleteConfirmationDialog = ({
   open,
@@ -913,45 +1120,45 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  return /* @__PURE__ */ React8.createElement(import_ui8.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React8.createElement(import_ui8.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React8.createElement(import_icons3.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n7.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React8.createElement(import_ui8.DialogContent, null, /* @__PURE__ */ React8.createElement(import_ui8.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n7.__)("All elements using", "elementor"), /* @__PURE__ */ React8.createElement(import_ui8.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n7.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React8.createElement(import_ui8.DialogActions, null, /* @__PURE__ */ React8.createElement(import_ui8.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n7.__)("Not now", "elementor")), /* @__PURE__ */ React8.createElement(import_ui8.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n7.__)("Delete", "elementor"))));
+  return /* @__PURE__ */ React11.createElement(import_ui11.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React11.createElement(import_ui11.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React11.createElement(import_icons5.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n8.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React11.createElement(import_ui11.DialogContent, null, /* @__PURE__ */ React11.createElement(import_ui11.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n8.__)("All elements using", "elementor"), /* @__PURE__ */ React11.createElement(import_ui11.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n8.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React11.createElement(import_ui11.DialogActions, null, /* @__PURE__ */ React11.createElement(import_ui11.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n8.__)("Not now", "elementor")), /* @__PURE__ */ React11.createElement(import_ui11.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n8.__)("Delete", "elementor"))));
 };
 
 // src/components/ui/edit-confirmation-dialog.tsx
-var React9 = __toESM(require("react"));
-var import_react7 = require("react");
-var import_icons4 = require("@elementor/icons");
-var import_ui9 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var React12 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_icons6 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react7.useState)(false);
+  const [dontShowAgain, setDontShowAgain] = (0, import_react9.useState)(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React9.createElement(import_ui9.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React9.createElement(import_ui9.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React9.createElement(import_icons4.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n8.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React9.createElement(import_ui9.DialogContent, null, /* @__PURE__ */ React9.createElement(import_ui9.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n8.__)(
+  return /* @__PURE__ */ React12.createElement(import_ui12.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React12.createElement(import_ui12.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React12.createElement(import_icons6.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n9.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.DialogContent, null, /* @__PURE__ */ React12.createElement(import_ui12.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n9.__)(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React9.createElement(import_ui9.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React9.createElement(
-    import_ui9.FormControlLabel,
+  ))), /* @__PURE__ */ React12.createElement(import_ui12.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React12.createElement(
+    import_ui12.FormControlLabel,
     {
-      control: /* @__PURE__ */ React9.createElement(
-        import_ui9.Checkbox,
+      control: /* @__PURE__ */ React12.createElement(
+        import_ui12.Checkbox,
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React9.createElement(import_ui9.Typography, { variant: "body2" }, (0, import_i18n8.__)("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React12.createElement(import_ui12.Typography, { variant: "body2" }, (0, import_i18n9.__)("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(import_ui9.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n8.__)("Keep editing", "elementor")), /* @__PURE__ */ React9.createElement(import_ui9.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n8.__)("Save", "elementor")))));
+  ), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(import_ui12.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n9.__)("Keep editing", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n9.__)("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
@@ -960,19 +1167,19 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
   const { setValue: notifyBoundPropChange, value: assignedValue } = (0, import_editor_controls4.useBoundProp)(propTypeUtil);
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user2.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react8.useState)(false);
-  const [editConfirmation, setEditConfirmation] = (0, import_react8.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react8.useState)("");
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react10.useState)(false);
+  const [editConfirmation, setEditConfirmation] = (0, import_react10.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react10.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react10.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = (0, import_react8.useState)(() => variable.value);
-  const [label, setLabel] = (0, import_react8.useState)(() => variable.label);
-  (0, import_react8.useEffect)(() => {
+  const [value, setValue] = (0, import_react10.useState)(() => variable.value);
+  const [label, setLabel] = (0, import_react10.useState)(() => variable.label);
+  (0, import_react10.useEffect)(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -1035,15 +1242,15 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React10.createElement(
-        import_ui10.IconButton,
+      /* @__PURE__ */ React13.createElement(
+        import_ui13.IconButton,
         {
           key: "delete",
           size: SIZE2,
-          "aria-label": (0, import_i18n9.__)("Delete", "elementor"),
+          "aria-label": (0, import_i18n10.__)("Delete", "elementor"),
           onClick: handleDeleteConfirmation
         },
-        /* @__PURE__ */ React10.createElement(import_icons5.TrashIcon, { fontSize: SIZE2 })
+        /* @__PURE__ */ React13.createElement(import_icons7.TrashIcon, { fontSize: SIZE2 })
       )
     );
   }
@@ -1063,23 +1270,23 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React10.createElement(
-    import_editor_ui3.PopoverHeader,
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React13.createElement(
+    import_editor_ui4.PopoverHeader,
     {
-      title: (0, import_i18n9.__)("Edit variable", "elementor"),
+      title: (0, import_i18n10.__)("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React10.createElement(React10.Fragment, null, onGoBack && /* @__PURE__ */ React10.createElement(
-        import_ui10.IconButton,
+      icon: /* @__PURE__ */ React13.createElement(React13.Fragment, null, onGoBack && /* @__PURE__ */ React13.createElement(
+        import_ui13.IconButton,
         {
           size: SIZE2,
-          "aria-label": (0, import_i18n9.__)("Go Back", "elementor"),
+          "aria-label": (0, import_i18n10.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React10.createElement(import_icons5.ArrowLeftIcon, { fontSize: SIZE2 })
-      ), /* @__PURE__ */ React10.createElement(VariableIcon, { fontSize: SIZE2 })),
+        /* @__PURE__ */ React13.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE2 })
+      ), /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: SIZE2 })),
       actions
     }
-  ), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React13.createElement(import_ui13.Divider, null), /* @__PURE__ */ React13.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React13.createElement(
     LabelField,
     {
       value: label,
@@ -1089,7 +1296,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React10.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n9.__)("Value", "elementor") }, /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React13.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n10.__)("Value", "elementor") }, /* @__PURE__ */ React13.createElement(
     ValueField,
     {
       value,
@@ -1100,7 +1307,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       },
       onValidationChange: setValueFieldError
     }
-  )), errorMessage && /* @__PURE__ */ React10.createElement(import_ui10.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React10.createElement(import_ui10.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React10.createElement(import_ui10.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n9.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React10.createElement(
+  )), errorMessage && /* @__PURE__ */ React13.createElement(import_ui13.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React13.createElement(import_ui13.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React13.createElement(import_ui13.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n10.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React13.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1108,7 +1315,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React10.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React13.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -1119,26 +1326,26 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-var React14 = __toESM(require("react"));
-var import_react9 = require("react");
+var React17 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_icons7 = require("@elementor/icons");
-var import_ui15 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_icons9 = require("@elementor/icons");
+var import_ui18 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
-var React11 = __toESM(require("react"));
-var import_editor_ui4 = require("@elementor/editor-ui");
-var import_icons6 = require("@elementor/icons");
-var import_ui11 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var React14 = __toESM(require("react"));
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_icons8 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(import_ui11.ListItemIcon, null, item.icon), /* @__PURE__ */ React11.createElement(
-    import_ui11.Box,
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(import_ui14.ListItemIcon, null, item.icon), /* @__PURE__ */ React14.createElement(
+    import_ui14.Box,
     {
       sx: {
         flex: 1,
@@ -1148,49 +1355,49 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React11.createElement(
-      import_editor_ui4.EllipsisWithTooltip,
+    /* @__PURE__ */ React14.createElement(
+      import_editor_ui5.EllipsisWithTooltip,
       {
         title: item.label || item.value,
-        as: import_ui11.Typography,
+        as: import_ui14.Typography,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React11.createElement(
-      import_editor_ui4.EllipsisWithTooltip,
+    item.secondaryText && /* @__PURE__ */ React14.createElement(
+      import_editor_ui5.EllipsisWithTooltip,
       {
         title: item.secondaryText,
-        as: import_ui11.Typography,
+        as: import_ui14.Typography,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React11.createElement(
-    import_ui11.IconButton,
+  ), !!onEdit && /* @__PURE__ */ React14.createElement(
+    import_ui14.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": (0, import_i18n10.__)("Edit", "elementor")
+      "aria-label": (0, import_i18n11.__)("Edit", "elementor")
     },
-    /* @__PURE__ */ React11.createElement(import_icons6.EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React14.createElement(import_icons8.EditIcon, { color: "action", fontSize: SIZE3 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-var React12 = __toESM(require("react"));
-var import_ui12 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var React15 = __toESM(require("react"));
+var import_ui15 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React12.createElement(
-    import_ui12.Stack,
+  return /* @__PURE__ */ React15.createElement(
+    import_ui15.Stack,
     {
       gap: 1,
       alignItems: "center",
@@ -1201,19 +1408,19 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
       sx: { pb: 3.5 }
     },
     icon,
-    /* @__PURE__ */ React12.createElement(import_ui12.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React12.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React12.createElement(import_ui12.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n11.__)("Try something else.", "elementor"), /* @__PURE__ */ React12.createElement(import_ui12.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React15.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n12.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React15.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React15.createElement(import_ui15.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n12.__)("Try something else.", "elementor"), /* @__PURE__ */ React15.createElement(import_ui15.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n12.__)("Clear & try again", "elementor")))
   );
 };
 
 // src/components/ui/no-variables.tsx
-var React13 = __toESM(require("react"));
-var import_ui13 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var React16 = __toESM(require("react"));
+var import_ui16 = require("@elementor/ui");
+var import_i18n13 = require("@wordpress/i18n");
 var NoVariables = ({ icon, title, onAdd }) => {
   const canAdd = usePermissions().canAdd();
-  return /* @__PURE__ */ React13.createElement(
-    import_ui13.Stack,
+  return /* @__PURE__ */ React16.createElement(
+    import_ui16.Stack,
     {
       gap: 1,
       alignItems: "center",
@@ -1223,31 +1430,31 @@ 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 || (0, import_i18n12.__)("Create your first variable", "elementor"),
-        message: (0, import_i18n12.__)(
+        title: title || (0, import_i18n13.__)("Create your first variable", "elementor"),
+        message: (0, import_i18n13.__)(
           "Variables are saved attributes that you can apply anywhere on your site.",
           "elementor"
         )
       }
-    ), onAdd && /* @__PURE__ */ React13.createElement(import_ui13.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n12.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React13.createElement(
+    ), onAdd && /* @__PURE__ */ React16.createElement(import_ui16.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n13.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React16.createElement(
       NoVariablesContent,
       {
-        title: (0, import_i18n12.__)("There are no variables", "elementor"),
-        message: (0, import_i18n12.__)("With your current role, you can only connect and detach variables.", "elementor")
+        title: (0, import_i18n13.__)("There are no variables", "elementor"),
+        message: (0, import_i18n13.__)("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(import_ui13.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React13.createElement(import_ui13.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
 }
 
 // src/components/ui/styled-menu-list.tsx
-var import_ui14 = require("@elementor/ui");
-var VariablesStyledMenuList = (0, import_ui14.styled)(import_ui14.MenuList)(({ theme }) => ({
+var import_ui17 = require("@elementor/ui");
+var VariablesStyledMenuList = (0, import_ui17.styled)(import_ui17.MenuList)(({ theme }) => ({
   "& > li": {
     height: 32,
     width: "100%",
@@ -1282,7 +1489,7 @@ var SIZE4 = "tiny";
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
   const { value: variable, setValue: setVariable, path } = (0, import_editor_controls5.useBoundProp)(propTypeUtil);
-  const [searchValue, setSearchValue] = (0, import_react9.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react11.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -1308,20 +1515,20 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React14.createElement(import_ui15.IconButton, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React14.createElement(import_icons7.PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React17.createElement(import_ui18.IconButton, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React17.createElement(import_icons9.PlusIcon, { fontSize: SIZE4 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React14.createElement(import_ui15.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React14.createElement(import_icons7.SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React17.createElement(import_ui18.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React17.createElement(import_icons9.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
   }));
@@ -1331,28 +1538,28 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  const noVariableTitle = (0, import_i18n13.sprintf)(
+  const noVariableTitle = (0, import_i18n14.sprintf)(
     /* translators: %s: Variable Type. */
-    (0, import_i18n13.__)("Create your first %s variable", "elementor"),
+    (0, import_i18n14.__)("Create your first %s variable", "elementor"),
     variableType
   );
-  return /* @__PURE__ */ React14.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React14.createElement(
-    import_editor_ui5.PopoverHeader,
+  return /* @__PURE__ */ React17.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React17.createElement(
+    import_editor_ui6.PopoverHeader,
     {
-      title: (0, import_i18n13.__)("Variables", "elementor"),
-      icon: /* @__PURE__ */ React14.createElement(import_icons7.ColorFilterIcon, { fontSize: SIZE4 }),
+      title: (0, import_i18n14.__)("Variables", "elementor"),
+      icon: /* @__PURE__ */ React17.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE4 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React14.createElement(
-    import_editor_ui5.PopoverSearch,
+  ), hasVariables && /* @__PURE__ */ React17.createElement(
+    import_editor_ui6.PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n13.__)("Search", "elementor")
+      placeholder: (0, import_i18n14.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React14.createElement(import_ui15.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React14.createElement(
-    import_editor_ui5.PopoverMenuList,
+  ), /* @__PURE__ */ React17.createElement(import_ui18.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React17.createElement(
+    import_editor_ui6.PopoverMenuList,
     {
       items,
       onSelect: handleSetVariable,
@@ -1361,16 +1568,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
@@ -1378,13 +1585,13 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = (0, import_react10.useState)(VIEW_LIST);
-  const [editId, setEditId] = (0, import_react10.useState)("");
+  const [currentView, setCurrentView] = (0, import_react12.useState)(VIEW_LIST);
+  const [editId, setEditId] = (0, import_react12.useState)("");
   const { open } = usePanelActions();
-  const onSettingsAvailable = (0, import_editor_v1_adapters2.isExperimentActive)("e_variables_settings") ? () => {
+  const onSettingsAvailable = (0, import_editor_v1_adapters2.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,
@@ -1418,8 +1625,8 @@ function RenderView(props) {
   }
   if (userPermissions.canManageSettings() && props.onSettings) {
     handlers.onSettings = () => {
-      props.onSettings?.();
       props.closePopover();
+      props.onSettings?.();
     };
   }
   const handleSubmitOnEdit = () => {
@@ -1430,7 +1637,7 @@ function RenderView(props) {
     }
   };
   if (VIEW_LIST === props.currentView) {
-    return /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React18.createElement(
       VariablesSelection,
       {
         closePopover: handlers.onClose,
@@ -1441,10 +1648,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,
@@ -1458,25 +1665,25 @@ function RenderView(props) {
 }
 
 // src/components/ui/tags/assigned-tag.tsx
-var React16 = __toESM(require("react"));
-var import_icons8 = require("@elementor/icons");
-var import_ui16 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var React19 = __toESM(require("react"));
+var import_icons10 = require("@elementor/icons");
+var import_ui19 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
 var SIZE5 = "tiny";
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React16.createElement(import_ui16.IconButton, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": (0, import_i18n14.__)("Unlink", "elementor") }, /* @__PURE__ */ React16.createElement(import_icons8.DetachIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React19.createElement(import_ui19.IconButton, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": (0, import_i18n15.__)("Unlink", "elementor") }, /* @__PURE__ */ React19.createElement(import_icons10.DetachIcon, { fontSize: SIZE5 }))
     );
   }
-  return /* @__PURE__ */ React16.createElement(import_ui16.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React16.createElement(
-    import_ui16.UnstableTag,
+  return /* @__PURE__ */ React19.createElement(import_ui19.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React19.createElement(
+    import_ui19.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React16.createElement(import_ui16.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React16.createElement(import_ui16.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React16.createElement(import_ui16.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      startIcon: /* @__PURE__ */ React19.createElement(import_ui19.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React19.createElement(import_ui19.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React19.createElement(import_ui19.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -1487,24 +1694,24 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = (0, import_editor_controls6.useBoundProp)();
-  const anchorRef = (0, import_react11.useRef)(null);
-  const popupId = (0, import_react11.useId)();
-  const popupState = (0, import_ui17.usePopupState)({
+  const anchorRef = (0, import_react13.useRef)(null);
+  const popupId = (0, import_react13.useId)();
+  const popupState = (0, import_ui20.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React17.createElement(import_ui17.Box, { ref: anchorRef }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React20.createElement(import_ui20.Box, { ref: anchorRef }, /* @__PURE__ */ React20.createElement(
     AssignedTag,
     {
       label: variable.label,
-      startIcon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE5 }), /* @__PURE__ */ React17.createElement(StartIcon, { value: variable.value })),
+      startIcon: /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE5 }), /* @__PURE__ */ React20.createElement(StartIcon, { value: variable.value })),
       onUnlink: unlinkVariable,
-      ...(0, import_ui17.bindTrigger)(popupState)
+      ...(0, import_ui20.bindTrigger)(popupState)
     }
-  ), /* @__PURE__ */ React17.createElement(
-    import_ui17.Popover,
+  ), /* @__PURE__ */ React20.createElement(
+    import_ui20.Popover,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
@@ -1513,9 +1720,9 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui17.bindPopover)(popupState)
+      ...(0, import_ui20.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React20.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -1527,19 +1734,19 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/deleted-variable.tsx
-var React21 = __toESM(require("react"));
-var import_react13 = require("react");
+var React24 = __toESM(require("react"));
+var import_react15 = require("react");
 var import_editor_controls8 = require("@elementor/editor-controls");
-var import_ui21 = require("@elementor/ui");
+var import_ui24 = require("@elementor/ui");
 
 // src/components/variable-restore.tsx
-var React18 = __toESM(require("react"));
-var import_react12 = require("react");
+var React21 = __toESM(require("react"));
+var import_react14 = require("react");
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
-var import_editor_ui6 = require("@elementor/editor-ui");
-var import_ui18 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_editor_ui7 = require("@elementor/editor-ui");
+var import_ui21 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
@@ -1548,10 +1755,10 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = (0, import_react12.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react12.useState)("");
-  const [label, setLabel] = (0, import_react12.useState)(variable.label);
-  const [value, setValue] = (0, import_react12.useState)(variable.value);
+  const [errorMessage, setErrorMessage] = (0, import_react14.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react14.useState)("");
+  const [label, setLabel] = (0, import_react14.useState)(variable.label);
+  const [value, setValue] = (0, import_react14.useState)(variable.value);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -1589,14 +1796,14 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React18.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React18.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React18.createElement(
-    import_editor_ui6.PopoverHeader,
+  return /* @__PURE__ */ React21.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React21.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React21.createElement(
+    import_editor_ui7.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE6 }),
-      title: (0, import_i18n15.__)("Restore variable", "elementor"),
+      icon: /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: SIZE6 }),
+      title: (0, import_i18n16.__)("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React18.createElement(import_ui18.Divider, null), /* @__PURE__ */ React18.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React21.createElement(import_ui21.Divider, null), /* @__PURE__ */ React21.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React21.createElement(
     LabelField,
     {
       value: label,
@@ -1606,7 +1813,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         setErrorMessage("");
       }
     }
-  ), /* @__PURE__ */ React18.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n15.__)("Value", "elementor") }, /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React21.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n16.__)("Value", "elementor") }, /* @__PURE__ */ React21.createElement(
     ValueField,
     {
       value,
@@ -1617,32 +1824,32 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       },
       onValidationChange: setValueFieldError
     }
-  )), errorMessage && /* @__PURE__ */ React18.createElement(import_ui18.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React18.createElement(import_ui18.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React18.createElement(import_ui18.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n15.__)("Restore", "elementor")))));
+  )), errorMessage && /* @__PURE__ */ React21.createElement(import_ui21.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React21.createElement(import_ui21.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React21.createElement(import_ui21.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n16.__)("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
-var React19 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
-var import_ui19 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var import_ui22 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
   const sectionWidth = (0, import_editor_editing_panel6.useSectionWidth)();
-  return /* @__PURE__ */ React19.createElement(import_ui19.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React19.createElement(
-    import_ui19.Alert,
+  return /* @__PURE__ */ React22.createElement(import_ui22.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React22.createElement(
+    import_ui22.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React19.createElement(React19.Fragment, null, onUnlink && /* @__PURE__ */ React19.createElement(import_ui19.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n16.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React19.createElement(import_ui19.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n16.__)("Restore", "elementor"))),
+      action: /* @__PURE__ */ React22.createElement(React22.Fragment, null, onUnlink && /* @__PURE__ */ React22.createElement(import_ui22.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n17.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React22.createElement(import_ui22.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n17.__)("Restore", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React19.createElement(import_ui19.AlertTitle, null, (0, import_i18n16.__)("Deleted variable", "elementor")),
-    (0, import_i18n16.__)("The variable", "elementor"),
+    /* @__PURE__ */ React22.createElement(import_ui22.AlertTitle, null, (0, import_i18n17.__)("Deleted variable", "elementor")),
+    (0, import_i18n17.__)("The variable", "elementor"),
     " '",
     label,
     "'",
     " ",
-    (0, import_i18n16.__)(
+    (0, import_i18n17.__)(
       "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"
     )
@@ -1650,13 +1857,13 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 };
 
 // src/components/ui/tags/deleted-tag.tsx
-var React20 = __toESM(require("react"));
-var import_icons10 = require("@elementor/icons");
-var import_ui20 = require("@elementor/ui");
-var import_i18n17 = require("@wordpress/i18n");
-var DeletedTag = React20.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React20.createElement(
-    import_ui20.Chip,
+var React23 = __toESM(require("react"));
+var import_icons12 = require("@elementor/icons");
+var import_ui23 = require("@elementor/ui");
+var import_i18n18 = require("@wordpress/i18n");
+var DeletedTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React23.createElement(
+    import_ui23.Chip,
     {
       ref,
       size: "tiny",
@@ -1664,8 +1871,8 @@ var DeletedTag = React20.forwardRef(({ label, onClick, ...props }, ref) => {
       shape: "rounded",
       variant: "standard",
       onClick,
-      icon: /* @__PURE__ */ React20.createElement(import_icons10.AlertTriangleFilledIcon, null),
-      label: /* @__PURE__ */ React20.createElement(import_ui20.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React20.createElement(import_ui20.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React20.createElement(import_ui20.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React20.createElement(import_ui20.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n17.__)("deleted", "elementor"), ")"))),
+      icon: /* @__PURE__ */ React23.createElement(import_icons12.AlertTriangleFilledIcon, null),
+      label: /* @__PURE__ */ React23.createElement(import_ui23.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui23.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React23.createElement(import_ui23.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React23.createElement(import_ui23.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n18.__)("deleted", "elementor"), ")"))),
       sx: {
         height: (theme) => theme.spacing(3.5),
         borderRadius: (theme) => theme.spacing(1),
@@ -1682,12 +1889,12 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = (0, import_editor_controls8.useBoundProp)();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = (0, import_react13.useState)(false);
+  const [showInfotip, setShowInfotip] = (0, import_react15.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = (0, import_react13.useRef)(null);
-  const popupId = (0, import_react13.useId)();
-  const popupState = (0, import_ui21.usePopupState)({
+  const deletedChipAnchorRef = (0, import_react15.useRef)(null);
+  const popupId = (0, import_react15.useId)();
+  const popupState = (0, import_ui24.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
   });
@@ -1713,15 +1920,15 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui21.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React21.createElement(import_ui21.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React21.createElement(
-    import_ui21.Infotip,
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(import_ui24.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React24.createElement(import_ui24.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React24.createElement(
+    import_ui24.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: showInfotip,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React21.createElement(
+      content: /* @__PURE__ */ React24.createElement(
         DeletedVariableAlert,
         {
           onClose: closeInfotip,
@@ -1741,9 +1948,9 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
         }
       }
     },
-    /* @__PURE__ */ React21.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
-  ), /* @__PURE__ */ React21.createElement(
-    import_ui21.Popover,
+    /* @__PURE__ */ React24.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
+  ), /* @__PURE__ */ React24.createElement(
+    import_ui24.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
@@ -1751,9 +1958,9 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui21.bindPopover)(popupState)
+      ...(0, import_ui24.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React21.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React24.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React24.createElement(
       VariableRestore,
       {
         variableId: variable.key ?? "",
@@ -1765,30 +1972,30 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/missing-variable.tsx
-var React24 = __toESM(require("react"));
-var import_react14 = require("react");
+var React27 = __toESM(require("react"));
+var import_react16 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
-var import_ui24 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
+var import_ui27 = require("@elementor/ui");
+var import_i18n20 = require("@wordpress/i18n");
 
 // src/components/ui/missing-variable-alert.tsx
-var React22 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
-var import_ui22 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
+var import_ui25 = require("@elementor/ui");
+var import_i18n19 = require("@wordpress/i18n");
 var MissingVariableAlert = ({ onClose, onClear }) => {
   const sectionWidth = (0, import_editor_editing_panel7.useSectionWidth)();
-  return /* @__PURE__ */ React22.createElement(import_ui22.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React22.createElement(
-    import_ui22.Alert,
+  return /* @__PURE__ */ React25.createElement(import_ui25.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React25.createElement(
+    import_ui25.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React22.createElement(React22.Fragment, null, onClear && /* @__PURE__ */ React22.createElement(import_ui22.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n18.__)("Clear", "elementor"))),
+      action: /* @__PURE__ */ React25.createElement(React25.Fragment, null, onClear && /* @__PURE__ */ React25.createElement(import_ui25.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n19.__)("Clear", "elementor"))),
       sx: { width: sectionWidth }
     },
-    /* @__PURE__ */ React22.createElement(import_ui22.AlertTitle, null, (0, import_i18n18.__)("This variable is missing", "elementor")),
-    (0, import_i18n18.__)(
+    /* @__PURE__ */ React25.createElement(import_ui25.AlertTitle, null, (0, import_i18n19.__)("This variable is missing", "elementor")),
+    (0, import_i18n19.__)(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
     )
@@ -1796,12 +2003,12 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 };
 
 // src/components/ui/tags/missing-tag.tsx
-var React23 = __toESM(require("react"));
-var import_icons11 = require("@elementor/icons");
-var import_ui23 = require("@elementor/ui");
-var MissingTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React23.createElement(
-    import_ui23.Chip,
+var React26 = __toESM(require("react"));
+var import_icons13 = require("@elementor/icons");
+var import_ui26 = require("@elementor/ui");
+var MissingTag = React26.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React26.createElement(
+    import_ui26.Chip,
     {
       ref,
       size: "tiny",
@@ -1809,7 +2016,7 @@ var MissingTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
       shape: "rounded",
       variant: "standard",
       onClick,
-      icon: /* @__PURE__ */ React23.createElement(import_icons11.AlertTriangleFilledIcon, null),
+      icon: /* @__PURE__ */ React26.createElement(import_icons13.AlertTriangleFilledIcon, null),
       label,
       sx: {
         height: (theme) => theme.spacing(3.5),
@@ -1825,19 +2032,19 @@ var MissingTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = (0, import_editor_controls9.useBoundProp)();
-  const [infotipVisible, setInfotipVisible] = (0, import_react14.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react16.useState)(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(import_ui24.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React24.createElement(
-    import_ui24.Infotip,
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, infotipVisible && /* @__PURE__ */ React27.createElement(import_ui27.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React27.createElement(
+    import_ui27.Infotip,
     {
       color: "warning",
       placement: "right-start",
       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: [
@@ -1849,7 +2056,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React24.createElement(MissingTag, { label: (0, import_i18n19.__)("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React27.createElement(MissingTag, { label: (0, import_i18n20.__)("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -1858,33 +2065,33 @@ var VariableControl = () => {
   const boundProp = (0, import_editor_controls10.useBoundProp)().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
-var React26 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
-var import_icons12 = require("@elementor/icons");
-var import_i18n20 = require("@wordpress/i18n");
+var import_icons14 = require("@elementor/icons");
+var import_i18n21 = require("@wordpress/i18n");
 var usePropVariableAction = () => {
   const { propType, path } = (0, import_editor_editing_panel8.useBoundProp)();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
-    icon: import_icons12.ColorFilterIcon,
-    title: (0, import_i18n20.__)("Variables", "elementor"),
+    icon: import_icons14.ColorFilterIcon,
+    title: (0, import_i18n21.__)("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 });
     }
   };
 };
@@ -1909,18 +2116,18 @@ var trackOpenVariablePopover = (path, variableType) => {
 };
 
 // src/register-variable-types.tsx
-var React29 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var import_editor_props3 = require("@elementor/editor-props");
-var import_icons14 = require("@elementor/icons");
+var import_icons16 = require("@elementor/icons");
 
 // src/components/fields/color-field.tsx
-var React27 = __toESM(require("react"));
-var import_react15 = require("react");
-var import_ui25 = require("@elementor/ui");
+var React30 = __toESM(require("react"));
+var import_react17 = require("react");
+var import_ui28 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = (0, import_react15.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react15.useState)("");
-  const defaultRef = (0, import_react15.useRef)(null);
+  const [color, setColor] = (0, import_react17.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react17.useState)("");
+  const defaultRef = (0, import_react17.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -1929,8 +2136,8 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
     onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React27.createElement(
-    import_ui25.UnstableColorField,
+  return /* @__PURE__ */ React30.createElement(
+    import_ui28.UnstableColorField,
     {
       size: "tiny",
       fullWidth: true,
@@ -1949,21 +2156,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/components/fields/font-field.tsx
-var React28 = __toESM(require("react"));
-var import_react16 = require("react");
+var React31 = __toESM(require("react"));
+var import_react18 = require("react");
 var import_editor_controls11 = require("@elementor/editor-controls");
 var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
-var import_icons13 = require("@elementor/icons");
-var import_ui26 = require("@elementor/ui");
-var import_i18n21 = require("@wordpress/i18n");
+var import_icons15 = require("@elementor/icons");
+var import_ui29 = require("@elementor/ui");
+var import_i18n22 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = (0, import_react16.useState)(value);
-  const defaultRef = (0, import_react16.useRef)(null);
+  const [fontFamily, setFontFamily] = (0, import_react18.useState)(value);
+  const defaultRef = (0, import_react18.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
-  const fontPopoverState = (0, import_ui26.usePopupState)({ variant: "popover" });
+  const fontPopoverState = (0, import_ui29.usePopupState)({ variant: "popover" });
   const fontFamilies = (0, import_editor_editing_panel9.useFontFamilies)();
   const sectionWidth = (0, import_editor_editing_panel9.useSectionWidth)();
-  const mapFontSubs = React28.useMemo(() => {
+  const mapFontSubs = React31.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -1979,28 +2186,28 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = (0, import_react16.useId)();
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
-    import_ui26.UnstableTag,
+  const id2 = (0, import_react18.useId)();
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(
+    import_ui29.UnstableTag,
     {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React28.createElement(import_icons13.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui26.bindTrigger)(fontPopoverState),
+      endIcon: /* @__PURE__ */ React31.createElement(import_icons15.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui29.bindTrigger)(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React28.createElement(
-    import_ui26.Popover,
+  ), /* @__PURE__ */ React31.createElement(
+    import_ui29.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef,
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: -28 },
-      ...(0, import_ui26.bindPopover)(fontPopoverState)
+      ...(0, import_ui29.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React31.createElement(
       import_editor_controls11.ItemSelector,
       {
         itemsList: mapFontSubs,
@@ -2008,10 +2215,10 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: (0, import_i18n21.__)("Font Family", "elementor"),
+        title: (0, import_i18n22.__)("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: import_editor_controls11.enqueueFont,
-        icon: import_icons13.TextIcon
+        icon: import_icons15.TextIcon
       }
     )
   ));
@@ -2021,15 +2228,15 @@ var FontField = ({ value, onChange, onValidationChange }) => {
 function registerVariableTypes() {
   registerVariableType({
     valueField: ColorField,
-    icon: import_icons14.BrushIcon,
+    icon: import_icons16.BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props3.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,
-    icon: import_icons14.TextIcon,
+    icon: import_icons16.TextIcon,
     propTypeUtil: fontVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props3.stringPropTypeUtil,
     variableType: "font"
@@ -2037,10 +2244,10 @@ function registerVariableTypes() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React30 = __toESM(require("react"));
-var import_react17 = require("react");
+var React33 = __toESM(require("react"));
+var import_react19 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_ui27 = require("@elementor/ui");
+var import_ui30 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -2059,14 +2266,14 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React30.createElement(import_ui27.Portal, { container }, /* @__PURE__ */ React30.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React33.createElement(import_ui30.Portal, { container }, /* @__PURE__ */ React33.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react17.useState)({});
-  (0, import_react17.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react19.useState)({});
+  (0, import_react19.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -2089,22 +2296,22 @@ var import_editor_controls12 = require("@elementor/editor-controls");
 var import_editor_props4 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
-var React31 = __toESM(require("react"));
+var React34 = __toESM(require("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