@elementor/editor-variables 4.0.0-564 → 4.0.0-573

package/dist/index.mjs

@@ -10,8 +10,8 @@ import { useEffect as useEffect4, useRef as useRef7 } from "react";
 import { __privateListenTo as listenTo, routeOpenEvent } from "@elementor/editor-v1-adapters";
 
 // src/components/variables-manager/variables-manager-panel.tsx
-import * as React15 from "react";
-import { useCallback as useCallback5, useEffect as useEffect3, useState as useState7 } from "react";
+import * as React14 from "react";
+import { useCallback as useCallback5, useEffect as useEffect3, useState as useState6 } from "react";
 import {
   __createPanel as createPanel,
   Panel,
@@ -20,21 +20,21 @@ import {
   PanelHeader,
   PanelHeaderTitle
 } from "@elementor/editor-panels";
-import { SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
+import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
 import { changeEditMode } from "@elementor/editor-v1-adapters";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, ColorFilterIcon, TrashIcon } from "@elementor/icons";
 import {
   Alert,
   AlertAction,
   AlertTitle,
-  Button as Button3,
+  Button as Button2,
   CloseButton,
   Divider,
   Infotip,
   Stack as Stack6,
   usePopupState as usePopupState2
 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
 import { getMixpanel } from "@elementor/events";
@@ -805,58 +805,10 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
   );
 };
 
-// src/components/ui/stop-sync-confirmation-dialog.tsx
-import * as React5 from "react";
-import { useState } from "react";
-import { BrushIcon } from "@elementor/icons";
-import {
-  Button as Button2,
-  Checkbox,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  FormControlLabel,
-  Typography as Typography5
-} from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
-var StopSyncConfirmationDialog = ({
-  open,
-  closeDialog,
-  onConfirm,
-  onSuppressMessage
-}) => {
-  const [dontShowAgain, setDontShowAgain] = useState(false);
-  const handleConfirm = () => {
-    if (dontShowAgain) {
-      onSuppressMessage?.();
-    }
-    onConfirm();
-  };
-  return /* @__PURE__ */ React5.createElement(Dialog, { open, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React5.createElement(DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React5.createElement(BrushIcon, { color: "secondary" }), __7("Stop syncing variable color", "elementor")), /* @__PURE__ */ React5.createElement(DialogContent, null, /* @__PURE__ */ React5.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __7(
-    "This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.",
-    "elementor"
-  ))), /* @__PURE__ */ React5.createElement(DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React5.createElement(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ React5.createElement(
-        Checkbox,
-        {
-          checked: dontShowAgain,
-          onChange: (event) => setDontShowAgain(event.target.checked),
-          size: "small"
-        }
-      ),
-      label: /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2" }, __7("Don't show this again", "elementor"))
-    }
-  ), /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement(Button2, { color: "secondary", onClick: closeDialog }, __7("Cancel", "elementor")), /* @__PURE__ */ React5.createElement(Button2, { variant: "contained", color: "secondary", onClick: handleConfirm, sx: { ml: 1 } }, __7("Got it", "elementor")))));
-};
-
 // src/components/variables-manager/hooks/use-auto-edit.ts
-import { useCallback, useState as useState2 } from "react";
+import { useCallback, useState } from "react";
 var useAutoEdit = () => {
-  const [autoEditVariableId, setAutoEditVariableId] = useState2(void 0);
+  const [autoEditVariableId, setAutoEditVariableId] = useState(void 0);
   const startAutoEdit = useCallback((variableId) => {
     setAutoEditVariableId(variableId);
   }, []);
@@ -908,18 +860,18 @@ var useErrorNavigation = () => {
 };
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
-import { useCallback as useCallback3, useState as useState3 } from "react";
+import { useCallback as useCallback3, useState as useState2 } from "react";
 
 // src/hooks/use-prop-variables.ts
 import { useMemo } from "react";
 import { useBoundProp } from "@elementor/editor-controls";
 
 // src/context/variable-type-context.tsx
-import * as React6 from "react";
+import * as React5 from "react";
 import { createContext, useContext } from "react";
 var VariableTypeContext = createContext(null);
 function VariableTypeProvider({ children, propTypeKey }) {
-  return /* @__PURE__ */ React6.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
+  return /* @__PURE__ */ React5.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
 }
 function useVariableType() {
   const context = useContext(VariableTypeContext);
@@ -1039,12 +991,12 @@ var restoreVariable = (restoreId, label, value, type) => {
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
 var useVariablesManagerState = () => {
-  const [variables, setVariables] = useState3(() => getVariables(false));
-  const [deletedVariables, setDeletedVariables] = useState3([]);
-  const [isSaveDisabled, setIsSaveDisabled] = useState3(false);
-  const [isDirty, setIsDirty] = useState3(false);
-  const [isSaving, setIsSaving] = useState3(false);
-  const [searchValue, setSearchValue] = useState3("");
+  const [variables, setVariables] = useState2(() => getVariables(false));
+  const [deletedVariables, setDeletedVariables] = useState2([]);
+  const [isSaveDisabled, setIsSaveDisabled] = useState2(false);
+  const [isDirty, setIsDirty] = useState2(false);
+  const [isSaving, setIsSaving] = useState2(false);
+  const [searchValue, setSearchValue] = useState2("");
   const handleOnChange = useCallback3(
     (newVariables) => {
       setVariables({ ...variables, ...newVariables });
@@ -1125,12 +1077,12 @@ var useVariablesManagerState = () => {
 };
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
-import * as React8 from "react";
-import { createElement as createElement9, useMemo as useMemo2, useRef as useRef2 } from "react";
+import * as React7 from "react";
+import { createElement as createElement8, useMemo as useMemo2, useRef as useRef2 } from "react";
 import { PlusIcon } from "@elementor/icons";
-import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, Typography as Typography6 } from "@elementor/ui";
+import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, Typography as Typography5 } from "@elementor/ui";
 import { capitalize as capitalize2 } from "@elementor/utils";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/hooks/use-quota-permissions.ts
 var useQuotaPermissions = (variableType) => {
@@ -1148,42 +1100,42 @@ var useQuotaPermissions = (variableType) => {
 };
 
 // src/components/ui/variable-promotion-chip.tsx
-import * as React7 from "react";
-import { forwardRef, useImperativeHandle, useState as useState4 } from "react";
+import * as React6 from "react";
+import { forwardRef, useImperativeHandle, useState as useState3 } from "react";
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
 import { Box } from "@elementor/ui";
 import { capitalize } from "@elementor/utils";
-import { __ as __8, sprintf as sprintf2 } from "@wordpress/i18n";
+import { __ as __7, sprintf as sprintf2 } from "@wordpress/i18n";
 var VariablePromotionChip = forwardRef(
   ({ variableType, upgradeUrl }, ref) => {
-    const [isOpen, setIsOpen] = useState4(false);
+    const [isOpen, setIsOpen] = useState3(false);
     useCanvasClickHandler(isOpen, () => setIsOpen(false));
     const toggle = () => setIsOpen((prev) => !prev);
     useImperativeHandle(ref, () => ({ toggle }), []);
     const title = sprintf2(
       /* translators: %s: Variable Type. */
-      __8("%s variables", "elementor"),
+      __7("%s variables", "elementor"),
       capitalize(variableType)
     );
     const content = sprintf2(
       /* translators: %s: Variable Type. */
-      __8("Upgrade to continue creating and editing %s variables.", "elementor"),
+      __7("Upgrade to continue creating and editing %s variables.", "elementor"),
       variableType
     );
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React6.createElement(
       PromotionPopover,
       {
         open: isOpen,
         title,
         content,
-        ctaText: __8("Upgrade now", "elementor"),
+        ctaText: __7("Upgrade now", "elementor"),
         ctaUrl: upgradeUrl,
         onClose: (e) => {
           e.stopPropagation();
           setIsOpen(false);
         }
       },
-      /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React6.createElement(
         Box,
         {
           onClick: (e) => {
@@ -1192,7 +1144,7 @@ var VariablePromotionChip = forwardRef(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        /* @__PURE__ */ React7.createElement(PromotionChip, null)
+        /* @__PURE__ */ React6.createElement(PromotionChip, null)
       )
     );
   }
@@ -1213,16 +1165,16 @@ var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
     })),
     [variableTypes]
   );
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     IconButton,
     {
       ...bindTrigger(menuState),
       ref: buttonRef,
       size: SIZE,
-      "aria-label": __9("Add variable", "elementor")
+      "aria-label": __8("Add variable", "elementor")
     },
-    /* @__PURE__ */ React8.createElement(PlusIcon, { fontSize: SIZE })
-  ), /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React7.createElement(PlusIcon, { fontSize: SIZE })
+  ), /* @__PURE__ */ React7.createElement(
     Menu,
     {
       disablePortal: true,
@@ -1244,7 +1196,7 @@ var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
       },
       "data-testid": "variable-manager-create-menu"
     },
-    menuOptionConfigs.map((config) => /* @__PURE__ */ React8.createElement(
+    menuOptionConfigs.map((config) => /* @__PURE__ */ React7.createElement(
       MenuOption,
       {
         key: config.key,
@@ -1276,7 +1228,7 @@ var MenuOption = ({
     trackVariablesManagerEvent({ action: "add", varType: config.variableType });
     onClose();
   };
-  return /* @__PURE__ */ React8.createElement(MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: "pointer" } }, createElement9(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React8.createElement(Typography6, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React7.createElement(MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: "pointer" } }, createElement8(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React7.createElement(Typography5, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React7.createElement(
     VariablePromotionChip,
     {
       variableType: config.variableType,
@@ -1297,7 +1249,7 @@ var getDefaultName = (variables, type, baseName) => {
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
-import * as React14 from "react";
+import * as React13 from "react";
 import { useEffect as useEffect2, useRef as useRef6 } from "react";
 import {
   Table,
@@ -1308,10 +1260,10 @@ import {
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/components/variables-manager/ui/variable-table-cell.tsx
-import * as React9 from "react";
+import * as React8 from "react";
 import { TableCell } from "@elementor/ui";
 var VariableTableCell = ({
   children,
@@ -1331,26 +1283,26 @@ var VariableTableCell = ({
     ...width && { width },
     ...sx
   };
-  return /* @__PURE__ */ React9.createElement(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+  return /* @__PURE__ */ React8.createElement(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
 };
 
 // src/components/variables-manager/ui/variable-table-row.tsx
-import * as React13 from "react";
-import { createElement as createElement16, useRef as useRef5 } from "react";
+import * as React12 from "react";
+import { createElement as createElement15, useRef as useRef5 } from "react";
 import { EllipsisWithTooltip } from "@elementor/editor-ui";
 import { GripVerticalIcon } from "@elementor/icons";
 import { IconButton as IconButton3, Stack as Stack5, TableRow } from "@elementor/ui";
 
 // src/components/fields/label-field.tsx
-import * as React10 from "react";
-import { useRef as useRef3, useState as useState5 } from "react";
+import * as React9 from "react";
+import { useRef as useRef3, useState as useState4 } from "react";
 import { WarningInfotip } from "@elementor/editor-ui";
 import { TextField } from "@elementor/ui";
 function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
 var useLabelError = (initialError) => {
-  const [error, setError] = useState5(initialError ?? { value: "", message: "" });
+  const [error, setError] = useState4(initialError ?? { value: "", message: "" });
   return {
     labelFieldError: error,
     setLabelFieldError: setError
@@ -1369,8 +1321,8 @@ var LabelField = ({
   variables,
   onKeyDown
 }) => {
-  const [label, setLabel] = useState5(value);
-  const [errorMessage, setErrorMessage] = useState5("");
+  const [label, setLabel] = useState4(value);
+  const [errorMessage, setErrorMessage] = useState4("");
   const fieldRef = useRef3(null);
   const handleChange = (newValue) => {
     setLabel(newValue);
@@ -1384,7 +1336,7 @@ var LabelField = ({
     errorMsg = error.message;
   }
   const hintMsg = !errorMsg ? labelHint(label) : "";
-  const textField = /* @__PURE__ */ React10.createElement(
+  const textField = /* @__PURE__ */ React9.createElement(
     TextField,
     {
       ref: fieldRef,
@@ -1405,7 +1357,7 @@ var LabelField = ({
   );
   if (showWarningInfotip) {
     const tooltipWidth = Math.max(240, fieldRef.current?.getBoundingClientRect().width ?? 240);
-    return /* @__PURE__ */ React10.createElement(
+    return /* @__PURE__ */ React9.createElement(
       WarningInfotip,
       {
         open: Boolean(errorMsg || hintMsg),
@@ -1422,10 +1374,10 @@ var LabelField = ({
 };
 
 // src/components/variables-manager/variable-editable-cell.tsx
-import * as React11 from "react";
-import { useCallback as useCallback4, useEffect, useRef as useRef4, useState as useState6 } from "react";
+import * as React10 from "react";
+import { useCallback as useCallback4, useEffect, useRef as useRef4, useState as useState5 } from "react";
 import { ClickAwayListener, Stack as Stack4 } from "@elementor/ui";
-var VariableEditableCell = React11.memo(
+var VariableEditableCell = React10.memo(
   ({
     initialValue,
     children,
@@ -1439,10 +1391,10 @@ var VariableEditableCell = React11.memo(
     fieldType,
     disabled = false
   }) => {
-    const [value, setValue] = useState6(initialValue);
-    const [isEditing, setIsEditing] = useState6(false);
+    const [value, setValue] = useState5(initialValue);
+    const [isEditing, setIsEditing] = useState5(false);
     const { labelFieldError, setLabelFieldError } = useLabelError();
-    const [valueFieldError, setValueFieldError] = useState6("");
+    const [valueFieldError, setValueFieldError] = useState5("");
     const rowRef = useRef4(null);
     const handleSave = useCallback4(() => {
       const hasError = fieldType === "label" && labelFieldError?.message || fieldType === "value" && valueFieldError;
@@ -1509,7 +1461,7 @@ var VariableEditableCell = React11.memo(
       error: currentError
     });
     if (isEditing) {
-      return /* @__PURE__ */ React11.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React10.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React10.createElement(
         Stack4,
         {
           ref: rowRef,
@@ -1526,7 +1478,7 @@ var VariableEditableCell = React11.memo(
         editableContent
       ));
     }
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React10.createElement(
       Stack4,
       {
         ref: rowRef,
@@ -1546,8 +1498,8 @@ var VariableEditableCell = React11.memo(
 );
 
 // src/components/variables-manager/ui/variable-edit-menu.tsx
-import * as React12 from "react";
-import { createElement as createElement14 } from "react";
+import * as React11 from "react";
+import { createElement as createElement13 } from "react";
 import { DotsVerticalIcon } from "@elementor/icons";
 import { bindMenu as bindMenu2, bindTrigger as bindTrigger2, IconButton as IconButton2, Menu as Menu2, MenuItem as MenuItem2, usePopupState } from "@elementor/ui";
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
@@ -1555,7 +1507,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
     variant: "popover"
   });
   const triggerProps = bindTrigger2(menuState);
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
     IconButton2,
     {
       ...triggerProps,
@@ -1566,8 +1518,8 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
         triggerProps.onClick?.(e);
       }
     },
-    /* @__PURE__ */ React12.createElement(DotsVerticalIcon, { fontSize: "tiny" })
-  ), /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React11.createElement(DotsVerticalIcon, { fontSize: "tiny" })
+  ), /* @__PURE__ */ React11.createElement(
     Menu2,
     {
       disablePortal: true,
@@ -1590,7 +1542,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuActions.map((action) => /* @__PURE__ */ React12.createElement(
+    menuActions.map((action) => /* @__PURE__ */ React11.createElement(
       MenuItem2,
       {
         key: action.name,
@@ -1604,7 +1556,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
           gap: 1
         }
       },
-      action.icon && createElement14(action.icon, {
+      action.icon && createElement13(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -1638,7 +1590,7 @@ var VariableRow = (props) => {
   const isDisabled = !useQuotaPermissions(row.type).canEdit();
   const showIndicationBefore = showDropIndication && dropPosition === "before";
   const showIndicationAfter = showDropIndication && dropPosition === "after";
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React12.createElement(
     TableRow,
     {
       ...itemProps,
@@ -1679,8 +1631,8 @@ var VariableRow = (props) => {
         }
       }
     },
-    /* @__PURE__ */ React13.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React13.createElement(IconButton3, { size: "small", ref: setTriggerRef, ...triggerProps, disabled: isSorting, draggable: true }, /* @__PURE__ */ React13.createElement(GripVerticalIcon, { fontSize: "inherit" }))),
-    /* @__PURE__ */ React13.createElement(VariableTableCell, null, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React12.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React12.createElement(IconButton3, { size: "small", ref: setTriggerRef, ...triggerProps, disabled: isSorting, draggable: true }, /* @__PURE__ */ React12.createElement(GripVerticalIcon, { fontSize: "inherit" }))),
+    /* @__PURE__ */ React12.createElement(VariableTableCell, null, /* @__PURE__ */ React12.createElement(
       VariableEditableCell,
       {
         initialValue: row.name,
@@ -1692,11 +1644,11 @@ var VariableRow = (props) => {
             });
           }
         },
-        prefixElement: createElement16(row.icon, {
+        prefixElement: createElement15(row.icon, {
           fontSize: "inherit",
           color: isDisabled ? "disabled" : "inherit"
         }),
-        editableElement: ({ value, onChange, onValidationChange, error }) => /* @__PURE__ */ React13.createElement(
+        editableElement: ({ value, onChange, onValidationChange, error }) => /* @__PURE__ */ React12.createElement(
           LabelField,
           {
             id: "variable-label-" + row.id,
@@ -1720,9 +1672,9 @@ var VariableRow = (props) => {
         fieldType: "label",
         disabled: isDisabled
       },
-      /* @__PURE__ */ React13.createElement(EllipsisWithTooltip, { title: row.name, sx: { border: "4px solid transparent" } }, row.name)
+      /* @__PURE__ */ React12.createElement(EllipsisWithTooltip, { title: row.name, sx: { border: "4px solid transparent" } }, row.name)
     )),
-    /* @__PURE__ */ React13.createElement(VariableTableCell, null, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React12.createElement(VariableTableCell, null, /* @__PURE__ */ React12.createElement(
       VariableEditableCell,
       {
         initialValue: row.value,
@@ -1751,14 +1703,14 @@ var VariableRow = (props) => {
             onFieldError?.(!!errorMsg);
           },
           error
-        }) ?? /* @__PURE__ */ React13.createElement(React13.Fragment, null),
+        }) ?? /* @__PURE__ */ React12.createElement(React12.Fragment, null),
         onRowRef: handleRowRef(row.id),
         gap: 0.25,
         fieldType: "value",
         disabled: isDisabled
       },
       row.startIcon && row.startIcon({ value: row.value }),
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React12.createElement(
         EllipsisWithTooltip,
         {
           title: row.value,
@@ -1771,14 +1723,14 @@ var VariableRow = (props) => {
         row.value
       )
     )),
-    /* @__PURE__ */ React13.createElement(VariableTableCell, { align: "right", noPadding: true, width: 16, maxWidth: 16, sx: { paddingInlineEnd: 1 } }, /* @__PURE__ */ React13.createElement(Stack5, { role: "toolbar", direction: "row", justifyContent: "flex-end", alignItems: "center" }, isDisabled && /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React12.createElement(VariableTableCell, { align: "right", noPadding: true, width: 16, maxWidth: 16, sx: { paddingInlineEnd: 1 } }, /* @__PURE__ */ React12.createElement(Stack5, { role: "toolbar", direction: "row", justifyContent: "flex-end", alignItems: "center" }, isDisabled && /* @__PURE__ */ React12.createElement(
       VariablePromotionChip,
       {
         variableType: row.variableType,
         upgradeUrl: `https://go.elementor.com/renew-license-manager-${row.variableType}-variable`,
         ref: promotionRef
       }
-    ), /* @__PURE__ */ React13.createElement(VariableEditMenu, { menuActions: menuActions(row.id), disabled: isSorting, itemId: row.id })))
+    ), /* @__PURE__ */ React12.createElement(VariableEditMenu, { menuActions: menuActions(row.id), disabled: isSorting, itemId: row.id })))
   );
 };
 
@@ -1844,21 +1796,21 @@ var VariablesManagerTable = ({
     });
     handleOnChange(updatedVariables);
   };
-  return /* @__PURE__ */ React14.createElement(TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React14.createElement(Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React14.createElement(TableHead, null, /* @__PURE__ */ React14.createElement(TableRow2, null, /* @__PURE__ */ React14.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React14.createElement(VariableTableCell, { isHeader: true }, __10("Name", "elementor")), /* @__PURE__ */ React14.createElement(VariableTableCell, { isHeader: true }, __10("Value", "elementor")), /* @__PURE__ */ React14.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React14.createElement(TableBody, null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React13.createElement(Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React13.createElement(TableHead, null, /* @__PURE__ */ React13.createElement(TableRow2, null, /* @__PURE__ */ React13.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React13.createElement(VariableTableCell, { isHeader: true }, __9("Name", "elementor")), /* @__PURE__ */ React13.createElement(VariableTableCell, { isHeader: true }, __9("Value", "elementor")), /* @__PURE__ */ React13.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React13.createElement(TableBody, null, /* @__PURE__ */ React13.createElement(
     UnstableSortableProvider,
     {
       value: ids,
       onChange: handleReorder,
       variant: "static",
       restrictAxis: true,
-      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React14.createElement(Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React14.createElement(TableBody, null, dragOverlayChildren))
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React13.createElement(Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React13.createElement(TableBody, null, dragOverlayChildren))
     },
-    rows.map((row) => /* @__PURE__ */ React14.createElement(
+    rows.map((row) => /* @__PURE__ */ React13.createElement(
       UnstableSortableItem,
       {
         key: row.id,
         id: row.id,
-        render: (props) => /* @__PURE__ */ React14.createElement(
+        render: (props) => /* @__PURE__ */ React13.createElement(
           VariableRow,
           {
             ...props,
@@ -1922,9 +1874,9 @@ function VariablesManagerPanel() {
   } = useVariablesManagerState();
   const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
   const { createNavigationCallback, resetNavigation } = useErrorNavigation();
-  const [deleteConfirmation, setDeleteConfirmation] = useState7(null);
-  const [stopSyncConfirmation, setStopSyncConfirmation] = useState7(null);
-  const [serverError, setServerError] = useState7(null);
+  const [deleteConfirmation, setDeleteConfirmation] = useState6(null);
+  const [stopSyncConfirmation, setStopSyncConfirmation] = useState6(null);
+  const [serverError, setServerError] = useState6(null);
   usePreventUnload(isDirty);
   const handleClosePanel = () => {
     if (isDirty) {
@@ -1996,7 +1948,7 @@ function VariablesManagerPanel() {
         }
       });
       const deleteAction = {
-        name: __11("Delete", "elementor"),
+        name: __10("Delete", "elementor"),
         icon: TrashIcon,
         color: "error.main",
         onClick: (itemId) => {
@@ -2013,21 +1965,21 @@ function VariablesManagerPanel() {
     [variables, handleStartSync]
   );
   const hasVariables = Object.keys(variables).length > 0;
-  return /* @__PURE__ */ React15.createElement(ThemeProvider, null, /* @__PURE__ */ React15.createElement(Panel, null, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React14.createElement(ThemeProvider, null, /* @__PURE__ */ React14.createElement(Panel, null, /* @__PURE__ */ React14.createElement(
     PanelHeader,
     {
       sx: {
         height: "unset"
       }
     },
-    /* @__PURE__ */ React15.createElement(Stack6, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React15.createElement(Stack6, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React15.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React15.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React15.createElement(ColorFilterIcon, { fontSize: "inherit" }), __11("Variables Manager", "elementor"))), /* @__PURE__ */ React15.createElement(Stack6, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React14.createElement(Stack6, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "inherit" }), __10("Variables Manager", "elementor"))), /* @__PURE__ */ React14.createElement(Stack6, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React14.createElement(
       VariableManagerCreateMenu,
       {
         onCreate: handleCreateVariable,
         variables,
         menuState: createMenuState
       }
-    ), /* @__PURE__ */ React15.createElement(
+    ), /* @__PURE__ */ React14.createElement(
       CloseButton,
       {
         "aria-label": "Close",
@@ -2036,19 +1988,19 @@ function VariablesManagerPanel() {
           handleClosePanel();
         }
       }
-    ))), /* @__PURE__ */ React15.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React15.createElement(
+    ))), /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(
       SearchField,
       {
         sx: {
           display: "flex",
           flex: 1
         },
-        placeholder: __11("Search", "elementor"),
+        placeholder: __10("Search", "elementor"),
         value: searchValue,
         onSearch: handleSearch
       }
-    )), /* @__PURE__ */ React15.createElement(Divider, { sx: { width: "100%" } }))
-  ), /* @__PURE__ */ React15.createElement(
+    )), /* @__PURE__ */ React14.createElement(Divider, { sx: { width: "100%" } }))
+  ), /* @__PURE__ */ React14.createElement(
     PanelBody,
     {
       sx: {
@@ -2057,7 +2009,7 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    hasVariables && /* @__PURE__ */ React15.createElement(
+    hasVariables && /* @__PURE__ */ React14.createElement(
       VariablesManagerTable,
       {
         menuActions: buildMenuActions,
@@ -2068,43 +2020,43 @@ function VariablesManagerPanel() {
         onFieldError: setIsSaveDisabled
       }
     ),
-    !hasVariables && searchValue && /* @__PURE__ */ React15.createElement(
+    !hasVariables && searchValue && /* @__PURE__ */ React14.createElement(
       NoSearchResults,
       {
         searchValue,
         onClear: () => handleSearch(""),
-        icon: /* @__PURE__ */ React15.createElement(ColorFilterIcon, { fontSize: "large" })
+        icon: /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "large" })
       }
     ),
-    !hasVariables && !searchValue && /* @__PURE__ */ React15.createElement(
+    !hasVariables && !searchValue && /* @__PURE__ */ React14.createElement(
       EmptyState,
       {
-        title: __11("Create your first variable", "elementor"),
-        message: __11(
+        title: __10("Create your first variable", "elementor"),
+        message: __10(
           "Variables are saved attributes that you can apply anywhere on your site.",
           "elementor"
         ),
-        icon: /* @__PURE__ */ React15.createElement(ColorFilterIcon, { fontSize: "large" }),
+        icon: /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "large" }),
         onAdd: createMenuState.open
       }
     )
-  ), /* @__PURE__ */ React15.createElement(PanelFooter, null, /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React14.createElement(PanelFooter, null, /* @__PURE__ */ React14.createElement(
     Infotip,
     {
       placement: "right",
       open: !!serverError,
-      content: serverError ? /* @__PURE__ */ React15.createElement(
+      content: serverError ? /* @__PURE__ */ React14.createElement(
         Alert,
         {
           severity: serverError.severity ?? "error",
-          action: serverError.action?.label ? /* @__PURE__ */ React15.createElement(AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
+          action: serverError.action?.label ? /* @__PURE__ */ React14.createElement(AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
           onClose: !serverError.action?.label ? () => {
             setServerError(null);
             setIsSaveDisabled(false);
           } : void 0,
-          icon: serverError.IconComponent ? /* @__PURE__ */ React15.createElement(serverError.IconComponent, null) : /* @__PURE__ */ React15.createElement(AlertTriangleFilledIcon2, null)
+          icon: serverError.IconComponent ? /* @__PURE__ */ React14.createElement(serverError.IconComponent, null) : /* @__PURE__ */ React14.createElement(AlertTriangleFilledIcon2, null)
         },
-        /* @__PURE__ */ React15.createElement(AlertTitle, null, serverError.message),
+        /* @__PURE__ */ React14.createElement(AlertTitle, null, serverError.message),
         serverError.action?.message
       ) : null,
       arrow: false,
@@ -2119,8 +2071,8 @@ function VariablesManagerPanel() {
         }
       }
     },
-    /* @__PURE__ */ React15.createElement(
-      Button3,
+    /* @__PURE__ */ React14.createElement(
+      Button2,
       {
         fullWidth: true,
         size: "small",
@@ -2130,9 +2082,9 @@ function VariablesManagerPanel() {
         onClick: handleSaveClick,
         loading: isSaving
       },
-      __11("Save changes", "elementor")
+      __10("Save changes", "elementor")
     )
-  ))), deleteConfirmation && /* @__PURE__ */ React15.createElement(
+  ))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -2140,26 +2092,26 @@ function VariablesManagerPanel() {
       onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
       closeDialog: () => setDeleteConfirmation(null)
     }
-  ), stopSyncConfirmation && /* @__PURE__ */ React15.createElement(
+  ), stopSyncConfirmation && /* @__PURE__ */ React14.createElement(
     StopSyncConfirmationDialog,
     {
       open: true,
-      closeDialog: () => setStopSyncConfirmation(null),
+      onClose: () => setStopSyncConfirmation(null),
       onConfirm: () => handleStopSyncWithConfirmation(stopSyncConfirmation)
     }
-  ), isSaveChangesDialogOpen && /* @__PURE__ */ React15.createElement(SaveChangesDialog, null, /* @__PURE__ */ React15.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __11("You have unsaved changes", "elementor")), /* @__PURE__ */ React15.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React15.createElement(SaveChangesDialog.ContentText, null, __11("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React15.createElement(
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React14.createElement(SaveChangesDialog, null, /* @__PURE__ */ React14.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __10("You have unsaved changes", "elementor")), /* @__PURE__ */ React14.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React14.createElement(SaveChangesDialog.ContentText, null, __10("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React14.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: __11("Discard", "elementor"),
+          label: __10("Discard", "elementor"),
           action: () => {
             closeSaveChangesDialog();
             closePanel();
           }
         },
         confirm: {
-          label: __11("Save", "elementor"),
+          label: __10("Save", "elementor"),
           action: async () => {
             const result = await handleSaveClick();
             closeSaveChangesDialog();
@@ -2185,6 +2137,19 @@ var usePreventUnload = (isDirty) => {
     };
   }, [isDirty]);
 };
+var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => /* @__PURE__ */ React14.createElement(ConfirmationDialog2, { open, onClose }, /* @__PURE__ */ React14.createElement(ConfirmationDialog2.Title, { icon: ColorFilterIcon, iconColor: "secondary" }, __10("Stop syncing variable color", "elementor")), /* @__PURE__ */ React14.createElement(ConfirmationDialog2.Content, null, /* @__PURE__ */ React14.createElement(ConfirmationDialog2.ContentText, null, __10(
+  "This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.",
+  "elementor"
+))), /* @__PURE__ */ React14.createElement(
+  ConfirmationDialog2.Actions,
+  {
+    onClose,
+    onConfirm,
+    cancelLabel: __10("Cancel", "elementor"),
+    confirmLabel: __10("Got it", "elementor"),
+    color: "secondary"
+  }
+));
 
 // src/components/open-panel-from-url.tsx
 var ACTIVE_PANEL_PARAM = "active-panel";
@@ -2214,12 +2179,12 @@ function OpenPanelFromUrl() {
 }
 
 // src/controls/variable-control.tsx
-import * as React34 from "react";
+import * as React33 from "react";
 import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 
 // src/components/ui/variable/assigned-variable.tsx
 import { useId, useRef as useRef8 } from "react";
-import * as React25 from "react";
+import * as React24 from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
 import { bindPopover, bindTrigger as bindTrigger3, Box as Box5, Popover, usePopupState as usePopupState3 } from "@elementor/ui";
@@ -2241,31 +2206,31 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 }
 
 // src/components/variable-selection-popover.tsx
-import * as React23 from "react";
-import { useState as useState13 } from "react";
+import * as React22 from "react";
+import { useState as useState12 } from "react";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 
 // src/context/variable-selection-popover.context.tsx
-import * as React16 from "react";
-import { createContext as createContext2, useContext as useContext2, useState as useState8 } from "react";
+import * as React15 from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState7 } from "react";
 import { Box as Box2 } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = useState8(null);
-  return /* @__PURE__ */ React16.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React16.createElement(Box2, { ref: setAnchorRef }, children));
+  const [anchorRef, setAnchorRef] = useState7(null);
+  return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(Box2, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
   return useContext2(PopoverContentRefContext);
 };
 
 // src/components/variable-creation.tsx
-import * as React18 from "react";
-import { useState as useState9 } from "react";
+import * as React17 from "react";
+import { useState as useState8 } from "react";
 import { PopoverContent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { PopoverHeader, SectionPopoverBody } from "@elementor/editor-ui";
 import { ArrowLeftIcon } from "@elementor/icons";
-import { Button as Button4, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton4, Typography as Typography7 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { Button as Button3, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton4, Typography as Typography6 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 
 // src/hooks/use-initial-value.ts
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
@@ -2308,10 +2273,10 @@ var unwrapValue = (input) => {
 };
 
 // src/components/ui/form-field.tsx
-import * as React17 from "react";
+import * as React16 from "react";
 import { FormHelperText, FormLabel, Grid } from "@elementor/ui";
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React17.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React17.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React17.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React17.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React17.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React17.createElement(FormHelperText, null, noticeMsg)));
+  return /* @__PURE__ */ React16.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React16.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React16.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React16.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React16.createElement(FormHelperText, null, noticeMsg)));
 };
 
 // src/components/variable-creation.tsx
@@ -2321,11 +2286,11 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = useBoundProp4();
   const initialValue = useInitialValue();
-  const [value, setValue] = useState9(initialValue);
-  const [label, setLabel] = useState9("");
-  const [errorMessage, setErrorMessage] = useState9("");
-  const [valueFieldError, setValueFieldError] = useState9("");
-  const [propTypeKey, setPropTypeKey] = useState9(propTypeUtil.key);
+  const [value, setValue] = useState8(initialValue);
+  const [label, setLabel] = useState8("");
+  const [errorMessage, setErrorMessage] = useState8("");
+  const [valueFieldError, setValueFieldError] = useState8("");
+  const [propTypeKey, setPropTypeKey] = useState8(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -2382,22 +2347,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       handleCreateAndTrack();
     }
   };
-  return /* @__PURE__ */ React18.createElement(SectionPopoverBody, { height: "auto" }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React17.createElement(SectionPopoverBody, { height: "auto" }, /* @__PURE__ */ React17.createElement(
     PopoverHeader,
     {
-      icon: /* @__PURE__ */ React18.createElement(React18.Fragment, null, onGoBack && /* @__PURE__ */ React18.createElement(IconButton4, { size: SIZE2, "aria-label": __12("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React18.createElement(ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE2 })),
-      title: __12("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, onGoBack && /* @__PURE__ */ React17.createElement(IconButton4, { size: SIZE2, "aria-label": __11("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React17.createElement(ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE2 })),
+      title: __11("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React18.createElement(Divider2, null), /* @__PURE__ */ React18.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React17.createElement(Divider2, null), /* @__PURE__ */ React17.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React17.createElement(
     FormField,
     {
       id: "variable-label",
-      label: __12("Name", "elementor"),
+      label: __11("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React17.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -2416,7 +2381,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         onKeyDown: handleKeyDown
       }
     )
-  ), ValueField && /* @__PURE__ */ React18.createElement(FormField, { errorMsg: valueFieldError, label: __12("Value", "elementor") }, /* @__PURE__ */ React18.createElement(Typography7, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React18.createElement(
+  ), ValueField && /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: __11("Value", "elementor") }, /* @__PURE__ */ React17.createElement(Typography6, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React17.createElement(
     ValueField,
     {
       value,
@@ -2430,8 +2395,8 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       propType,
       onKeyDown: handleKeyDown
     }
-  ))), errorMessage && /* @__PURE__ */ React18.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React18.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React18.createElement(
-    Button4,
+  ))), errorMessage && /* @__PURE__ */ React17.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React17.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React17.createElement(
+    Button3,
     {
       id: "create-variable-button",
       size: "small",
@@ -2439,89 +2404,89 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       disabled: isSubmitDisabled,
       onClick: handleCreateAndTrack
     },
-    __12("Create", "elementor")
+    __11("Create", "elementor")
   )));
 };
 
 // src/components/variable-edit.tsx
-import * as React20 from "react";
-import { useEffect as useEffect5, useState as useState11 } from "react";
+import * as React19 from "react";
+import { useEffect as useEffect5, useState as useState10 } from "react";
 import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { PopoverHeader as PopoverHeader2, SectionPopoverBody as SectionPopoverBody2 } from "@elementor/editor-ui";
 import { ArrowLeftIcon as ArrowLeftIcon2, TrashIcon as TrashIcon2 } from "@elementor/icons";
-import { Button as Button6, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5, Tooltip, Typography as Typography9 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { Button as Button5, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5, Tooltip, Typography as Typography8 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
 
 // src/components/ui/edit-confirmation-dialog.tsx
-import * as React19 from "react";
-import { useState as useState10 } from "react";
+import * as React18 from "react";
+import { useState as useState9 } from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
 import {
-  Button as Button5,
-  Checkbox as Checkbox2,
-  Dialog as Dialog2,
-  DialogActions as DialogActions2,
-  DialogContent as DialogContent2,
-  DialogContentText as DialogContentText2,
-  DialogTitle as DialogTitle2,
-  FormControlLabel as FormControlLabel2,
-  Typography as Typography8
+  Button as Button4,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  FormControlLabel,
+  Typography as Typography7
 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = useState10(false);
+  const [dontShowAgain, setDontShowAgain] = useState9(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React19.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React19.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React19.createElement(AlertTriangleFilledIcon3, { color: "secondary" }), __13("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React19.createElement(DialogContent2, null, /* @__PURE__ */ React19.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __13(
+  return /* @__PURE__ */ React18.createElement(Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React18.createElement(DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React18.createElement(AlertTriangleFilledIcon3, { color: "secondary" }), __12("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React18.createElement(DialogContent, null, /* @__PURE__ */ React18.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __12(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React19.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React19.createElement(
-    FormControlLabel2,
+  ))), /* @__PURE__ */ React18.createElement(DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(
+    FormControlLabel,
     {
-      control: /* @__PURE__ */ React19.createElement(
-        Checkbox2,
+      control: /* @__PURE__ */ React18.createElement(
+        Checkbox,
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React19.createElement(Typography8, { variant: "body2" }, __13("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React18.createElement(Typography7, { variant: "body2" }, __12("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement(Button5, { color: "secondary", onClick: closeDialog }, __13("Keep editing", "elementor")), /* @__PURE__ */ React19.createElement(Button5, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __13("Save", "elementor")))));
+  ), /* @__PURE__ */ React18.createElement("div", null, /* @__PURE__ */ React18.createElement(Button4, { color: "secondary", onClick: closeDialog }, __12("Keep editing", "elementor")), /* @__PURE__ */ React18.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __12("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
 var SIZE3 = "tiny";
-var DELETE_LABEL = __14("Delete variable", "elementor");
+var DELETE_LABEL = __13("Delete variable", "elementor");
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
   const { propType } = useBoundProp5();
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = useState11(false);
-  const [editConfirmation, setEditConfirmation] = useState11(false);
-  const [errorMessage, setErrorMessage] = useState11("");
-  const [valueFieldError, setValueFieldError] = useState11("");
+  const [deleteConfirmation, setDeleteConfirmation] = useState10(false);
+  const [editConfirmation, setEditConfirmation] = useState10(false);
+  const [errorMessage, setErrorMessage] = useState10("");
+  const [valueFieldError, setValueFieldError] = useState10("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
-  const [propTypeKey, setPropTypeKey] = useState11(variable?.type ?? propTypeUtil.key);
+  const [propTypeKey, setPropTypeKey] = useState10(variable?.type ?? propTypeUtil.key);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = useState11(() => variable.value);
-  const [label, setLabel] = useState11(() => variable.label);
+  const [value, setValue] = useState10(() => variable.value);
+  const [label, setLabel] = useState10(() => variable.label);
   useEffect5(() => {
     styleVariablesRepository.update({
       [editId]: {
@@ -2584,7 +2549,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React20.createElement(Tooltip, { key: "delete", placement: "top", title: DELETE_LABEL }, /* @__PURE__ */ React20.createElement(IconButton5, { size: SIZE3, onClick: handleDeleteConfirmation, "aria-label": DELETE_LABEL }, /* @__PURE__ */ React20.createElement(TrashIcon2, { fontSize: SIZE3 })))
+      /* @__PURE__ */ React19.createElement(Tooltip, { key: "delete", placement: "top", title: DELETE_LABEL }, /* @__PURE__ */ React19.createElement(IconButton5, { size: SIZE3, onClick: handleDeleteConfirmation, "aria-label": DELETE_LABEL }, /* @__PURE__ */ React19.createElement(TrashIcon2, { fontSize: SIZE3 })))
     );
   }
   const hasEmptyFields = () => {
@@ -2609,31 +2574,31 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       handleUpdate();
     }
   };
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(SectionPopoverBody2, { height: "auto" }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(SectionPopoverBody2, { height: "auto" }, /* @__PURE__ */ React19.createElement(
     PopoverHeader2,
     {
-      title: __14("Edit variable", "elementor"),
+      title: __13("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React20.createElement(React20.Fragment, null, onGoBack && /* @__PURE__ */ React20.createElement(
+      icon: /* @__PURE__ */ React19.createElement(React19.Fragment, null, onGoBack && /* @__PURE__ */ React19.createElement(
         IconButton5,
         {
           size: SIZE3,
-          "aria-label": __14("Go Back", "elementor"),
+          "aria-label": __13("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React20.createElement(ArrowLeftIcon2, { fontSize: SIZE3 })
-      ), /* @__PURE__ */ React20.createElement(VariableIcon, { fontSize: SIZE3 })),
+        /* @__PURE__ */ React19.createElement(ArrowLeftIcon2, { fontSize: SIZE3 })
+      ), /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: SIZE3 })),
       actions
     }
-  ), /* @__PURE__ */ React20.createElement(Divider3, null), /* @__PURE__ */ React20.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React19.createElement(Divider3, null), /* @__PURE__ */ React19.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React19.createElement(
     FormField,
     {
       id: "variable-label",
-      label: __14("Name", "elementor"),
+      label: __13("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React19.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -2652,7 +2617,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         onKeyDown: handleKeyDown
       }
     )
-  ), ValueField && /* @__PURE__ */ React20.createElement(FormField, { errorMsg: valueFieldError, label: __14("Value", "elementor") }, /* @__PURE__ */ React20.createElement(Typography9, { variant: "h5" }, /* @__PURE__ */ React20.createElement(
+  ), ValueField && /* @__PURE__ */ React19.createElement(FormField, { errorMsg: valueFieldError, label: __13("Value", "elementor") }, /* @__PURE__ */ React19.createElement(Typography8, { variant: "h5" }, /* @__PURE__ */ React19.createElement(
     ValueField,
     {
       propTypeKey: variable.type,
@@ -2667,7 +2632,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React20.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React20.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React20.createElement(Button6, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __14("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React20.createElement(
+  ))), errorMessage && /* @__PURE__ */ React19.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React19.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React19.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __13("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React19.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -2675,7 +2640,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React20.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React19.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -2686,8 +2651,8 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import { useState as useState12 } from "react";
-import * as React22 from "react";
+import { useState as useState11 } from "react";
+import * as React21 from "react";
 import {
   PopoverHeader as PopoverHeader3,
   PopoverMenuList,
@@ -2697,19 +2662,19 @@ import {
 import { PromotionAlert } from "@elementor/editor-ui";
 import { ColorFilterIcon as ColorFilterIcon2, PlusIcon as PlusIcon2, SettingsIcon } from "@elementor/icons";
 import { Divider as Divider4, IconButton as IconButton7, Tooltip as Tooltip3 } from "@elementor/ui";
-import { __ as __16, sprintf as sprintf3 } from "@wordpress/i18n";
+import { __ as __15, sprintf as sprintf3 } from "@wordpress/i18n";
 
 // src/components/ui/menu-item-content.tsx
-import * as React21 from "react";
+import * as React20 from "react";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
-import { Box as Box3, IconButton as IconButton6, ListItemIcon, Tooltip as Tooltip2, Typography as Typography10 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { Box as Box3, IconButton as IconButton6, ListItemIcon, Tooltip as Tooltip2, Typography as Typography9 } from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
 var SIZE4 = "tiny";
-var EDIT_LABEL = __15("Edit variable", "elementor");
+var EDIT_LABEL = __14("Edit variable", "elementor");
 var MenuItemContent = ({ item, disabled = false }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(ListItemIcon, { sx: { color: disabled ? "text.disabled" : "inherit" } }, item.icon), /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(ListItemIcon, { sx: { color: disabled ? "text.disabled" : "inherit" } }, item.icon), /* @__PURE__ */ React20.createElement(
     Box3,
     {
       sx: {
@@ -2720,29 +2685,29 @@ var MenuItemContent = ({ item, disabled = false }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React20.createElement(
       EllipsisWithTooltip2,
       {
         title: item.label || item.value,
-        as: Typography10,
+        as: Typography9,
         variant: "caption",
         color: disabled ? "text.disabled" : "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React21.createElement(
+    item.secondaryText && /* @__PURE__ */ React20.createElement(
       EllipsisWithTooltip2,
       {
         title: item.secondaryText,
-        as: Typography10,
+        as: Typography9,
         variant: "caption",
         color: disabled ? "text.disabled" : "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && !disabled && /* @__PURE__ */ React21.createElement(Tooltip2, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React21.createElement(
+  ), !!onEdit && !disabled && /* @__PURE__ */ React20.createElement(Tooltip2, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React20.createElement(
     IconButton6,
     {
       sx: { mx: 1, opacity: "0" },
@@ -2752,7 +2717,7 @@ var MenuItemContent = ({ item, disabled = false }) => {
       },
       "aria-label": EDIT_LABEL
     },
-    /* @__PURE__ */ React21.createElement(EditIcon, { color: "action", fontSize: SIZE4 })
+    /* @__PURE__ */ React20.createElement(EditIcon, { color: "action", fontSize: SIZE4 })
   )));
 };
 
@@ -2792,13 +2757,13 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme, disabled }) => ({
 
 // src/components/variables-selection.tsx
 var SIZE5 = "tiny";
-var CREATE_LABEL = __16("Create variable", "elementor");
-var MANAGER_LABEL = __16("Variables Manager", "elementor");
+var CREATE_LABEL = __15("Create variable", "elementor");
+var MANAGER_LABEL = __15("Variables Manager", "elementor");
 var getProUpgradeUrl = (variableType) => `https://go.elementor.com/renew-license-panel-${variableType}-variable`;
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled = false }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil, emptyState } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
-  const [searchValue, setSearchValue] = useState12("");
+  const [searchValue, setSearchValue] = useState11("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -2825,7 +2790,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React22.createElement(Tooltip3, { key: "add", placement: "top", title: CREATE_LABEL }, /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React21.createElement(Tooltip3, { key: "add", placement: "top", title: CREATE_LABEL }, /* @__PURE__ */ React21.createElement("span", null, /* @__PURE__ */ React21.createElement(
         IconButton7,
         {
           id: "add-variable-button",
@@ -2834,7 +2799,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
           "aria-label": CREATE_LABEL,
           disabled
         },
-        /* @__PURE__ */ React22.createElement(PlusIcon2, { fontSize: SIZE5 })
+        /* @__PURE__ */ React21.createElement(PlusIcon2, { fontSize: SIZE5 })
       )))
     );
   }
@@ -2848,7 +2813,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
       });
     };
     actions.push(
-      /* @__PURE__ */ React22.createElement(Tooltip3, { key: "settings", placement: "top", title: MANAGER_LABEL }, /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React21.createElement(Tooltip3, { key: "settings", placement: "top", title: MANAGER_LABEL }, /* @__PURE__ */ React21.createElement(
         IconButton7,
         {
           id: "variables-manager-button",
@@ -2856,16 +2821,16 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
           onClick: handleOpenManager,
           "aria-label": MANAGER_LABEL
         },
-        /* @__PURE__ */ React22.createElement(SettingsIcon, { fontSize: SIZE5 })
+        /* @__PURE__ */ React21.createElement(SettingsIcon, { fontSize: SIZE5 })
       ))
     );
   }
-  const StartIcon = startIcon || (() => /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: SIZE5 }));
+  const StartIcon = startIcon || (() => /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: SIZE5 }));
   const items = variables.map(({ value, label, key }) => ({
     type: "item",
     value: key,
     label,
-    icon: /* @__PURE__ */ React22.createElement(StartIcon, { value }),
+    icon: /* @__PURE__ */ React21.createElement(StartIcon, { value }),
     secondaryText: value,
     onEdit: onEdit ? () => onEdit?.(key) : void 0
   }));
@@ -2875,22 +2840,22 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React22.createElement(SectionPopoverBody3, null, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React21.createElement(SectionPopoverBody3, null, /* @__PURE__ */ React21.createElement(
     PopoverHeader3,
     {
-      title: __16("Variables", "elementor"),
-      icon: /* @__PURE__ */ React22.createElement(ColorFilterIcon2, { fontSize: SIZE5 }),
+      title: __15("Variables", "elementor"),
+      icon: /* @__PURE__ */ React21.createElement(ColorFilterIcon2, { fontSize: SIZE5 }),
       onClose: closePopover,
       actions
     }
-  ), hasVariables && /* @__PURE__ */ React22.createElement(
+  ), hasVariables && /* @__PURE__ */ React21.createElement(
     SearchField2,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __16("Search", "elementor")
+      placeholder: __15("Search", "elementor")
     }
-  ), /* @__PURE__ */ React22.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React21.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
     PopoverMenuList,
     {
       items,
@@ -2900,66 +2865,66 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
       },
       selectedValue: variable,
       "data-testid": `${variableType}-variables-list`,
-      menuListTemplate: (props) => /* @__PURE__ */ React22.createElement(VariablesStyledMenuList, { ...props, disabled }),
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React22.createElement(MenuItemContent, { item, disabled })
+      menuListTemplate: (props) => /* @__PURE__ */ React21.createElement(VariablesStyledMenuList, { ...props, disabled }),
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React21.createElement(MenuItemContent, { item, disabled })
     }
-  ), disabled && /* @__PURE__ */ React22.createElement(
+  ), disabled && /* @__PURE__ */ React21.createElement(
     PromotionAlert,
     {
       message: sprintf3(
         /* translators: %s: Variable Type. */
-        __16("Upgrade to continue creating and editing %s variables.", "elementor"),
+        __15("Upgrade to continue creating and editing %s variables.", "elementor"),
         variableType
       ),
       upgradeUrl: getProUpgradeUrl(variableType)
     }
-  )), !hasSearchResults && hasVariables && /* @__PURE__ */ React22.createElement(
+  )), !hasSearchResults && hasVariables && /* @__PURE__ */ React21.createElement(
     NoSearchResults,
     {
       searchValue,
       onClear: handleClearSearch,
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: "large" })
+      icon: /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: "large" })
     }
-  ), disabled && !hasVariables && /* @__PURE__ */ React22.createElement(
+  ), disabled && !hasVariables && /* @__PURE__ */ React21.createElement(
     EmptyState,
     {
       title: sprintf3(
         /* translators: %s: Variable Type. */
-        __16("No %s variables yet", "elementor"),
+        __15("No %s variables yet", "elementor"),
         variableType
       ),
       message: sprintf3(
         /* translators: %s: Variable Type. */
-        __16("Upgrade to create %s variables and maintain consistent element sizing.", "elementor"),
+        __15("Upgrade to create %s variables and maintain consistent element sizing.", "elementor"),
         variableType
       ),
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: "large" })
+      icon: /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: "large" })
     },
     emptyState
-  ), !hasVariables && !hasNoCompatibleVariables && !disabled && /* @__PURE__ */ React22.createElement(
+  ), !hasVariables && !hasNoCompatibleVariables && !disabled && /* @__PURE__ */ React21.createElement(
     EmptyState,
     {
       title: sprintf3(
         /* translators: %s: Variable Type. */
-        __16("Create your first %s variable", "elementor"),
+        __15("Create your first %s variable", "elementor"),
         variableType
       ),
-      message: __16(
+      message: __15(
         "Variables are saved attributes that you can apply anywhere on your site.",
         "elementor"
       ),
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: "large" }),
+      icon: /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: "large" }),
       onAdd
     }
-  ), hasNoCompatibleVariables && !disabled && /* @__PURE__ */ React22.createElement(
+  ), hasNoCompatibleVariables && !disabled && /* @__PURE__ */ React21.createElement(
     EmptyState,
     {
-      title: __16("No compatible variables", "elementor"),
-      message: __16(
+      title: __15("No compatible variables", "elementor"),
+      message: __15(
         "Looks like none of your variables work with this control. Create a new variable to use it here.",
         "elementor"
       ),
-      icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: "large" }),
+      icon: /* @__PURE__ */ React21.createElement(VariableIcon, { fontSize: "large" }),
       onAdd
     }
   ));
@@ -2970,13 +2935,13 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = useState13(VIEW_LIST);
-  const [editId, setEditId] = useState13("");
+  const [currentView, setCurrentView] = useState12(VIEW_LIST);
+  const [editId, setEditId] = useState12("");
   const { open } = usePanelActions();
   const onSettingsAvailable = isExperimentActive("e_variables_manager") ? () => {
     open();
   } : void 0;
-  return /* @__PURE__ */ React23.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React23.createElement(PopoverContentRefContextProvider, null, RenderView({
+  return /* @__PURE__ */ React22.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React22.createElement(PopoverContentRefContextProvider, null, RenderView({
     propTypeKey,
     currentView,
     selectedVariable,
@@ -3023,7 +2988,7 @@ function RenderView(props) {
     }
   };
   if (VIEW_LIST === props.currentView) {
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React22.createElement(
       VariablesSelection,
       {
         closePopover: handlers.onClose,
@@ -3035,10 +3000,10 @@ function RenderView(props) {
     );
   }
   if (VIEW_ADD === props.currentView) {
-    return /* @__PURE__ */ React23.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
+    return /* @__PURE__ */ React22.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
   }
   if (VIEW_EDIT === props.currentView) {
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React22.createElement(
       VariableEdit,
       {
         editId: props.editId,
@@ -3052,26 +3017,26 @@ function RenderView(props) {
 }
 
 // src/components/ui/tags/assigned-tag.tsx
-import * as React24 from "react";
+import * as React23 from "react";
 import { DetachIcon } from "@elementor/icons";
-import { Box as Box4, IconButton as IconButton8, Stack as Stack7, Tooltip as Tooltip4, Typography as Typography11, UnstableTag as Tag } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
+import { Box as Box4, IconButton as IconButton8, Stack as Stack7, Tooltip as Tooltip4, Typography as Typography10, UnstableTag as Tag } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
 var SIZE6 = "tiny";
-var UNLINK_LABEL = __17("Unlink variable", "elementor");
+var UNLINK_LABEL = __16("Unlink variable", "elementor");
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React24.createElement(Tooltip4, { key: "unlink", title: UNLINK_LABEL, placement: "bottom" }, /* @__PURE__ */ React24.createElement(IconButton8, { size: SIZE6, onClick: onUnlink, "aria-label": UNLINK_LABEL }, /* @__PURE__ */ React24.createElement(DetachIcon, { fontSize: SIZE6 })))
+      /* @__PURE__ */ React23.createElement(Tooltip4, { key: "unlink", title: UNLINK_LABEL, placement: "bottom" }, /* @__PURE__ */ React23.createElement(IconButton8, { size: SIZE6, onClick: onUnlink, "aria-label": UNLINK_LABEL }, /* @__PURE__ */ React23.createElement(DetachIcon, { fontSize: SIZE6 })))
     );
   }
-  return /* @__PURE__ */ React24.createElement(Tooltip4, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React23.createElement(Tooltip4, { title: label, placement: "top" }, /* @__PURE__ */ React23.createElement(
     Tag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      startIcon: /* @__PURE__ */ React24.createElement(Stack7, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React24.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React24.createElement(Typography11, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      startIcon: /* @__PURE__ */ React23.createElement(Stack7, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
+      label: /* @__PURE__ */ React23.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React23.createElement(Typography10, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -3090,15 +3055,15 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React25.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React24.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React24.createElement(
     AssignedTag,
     {
       label: variable.label,
-      startIcon: /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(ColorFilterIcon3, { fontSize: SIZE6 }), /* @__PURE__ */ React25.createElement(StartIcon, { value: variable.value })),
+      startIcon: /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(ColorFilterIcon3, { fontSize: SIZE6 }), /* @__PURE__ */ React24.createElement(StartIcon, { value: variable.value })),
       onUnlink: unlinkVariable,
       ...bindTrigger3(popupState)
     }
-  ), /* @__PURE__ */ React25.createElement(
+  ), /* @__PURE__ */ React24.createElement(
     Popover,
     {
       disableScrollLock: true,
@@ -3110,7 +3075,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
       },
       ...bindPopover(popupState)
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React24.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -3122,19 +3087,19 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/deleted-variable.tsx
-import * as React29 from "react";
-import { useId as useId2, useRef as useRef9, useState as useState15 } from "react";
+import * as React28 from "react";
+import { useId as useId2, useRef as useRef9, useState as useState14 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
+import { __ as __19 } from "@wordpress/i18n";
 
 // src/components/variable-restore.tsx
-import * as React26 from "react";
-import { useState as useState14 } from "react";
+import * as React25 from "react";
+import { useState as useState13 } from "react";
 import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { PopoverHeader as PopoverHeader4, SectionPopoverBody as SectionPopoverBody4 } from "@elementor/editor-ui";
-import { Button as Button7, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4, Typography as Typography12 } from "@elementor/ui";
-import { __ as __18 } from "@wordpress/i18n";
+import { Button as Button6, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4, Typography as Typography11 } from "@elementor/ui";
+import { __ as __17 } from "@wordpress/i18n";
 var SIZE7 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
@@ -3144,11 +3109,11 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = useState14("");
-  const [valueFieldError, setValueFieldError] = useState14("");
-  const [label, setLabel] = useState14(variable.label);
-  const [value, setValue] = useState14(variable.value);
-  const [propTypeKey, setPropTypeKey] = useState14(variable?.type ?? propTypeUtil.key);
+  const [errorMessage, setErrorMessage] = useState13("");
+  const [valueFieldError, setValueFieldError] = useState13("");
+  const [label, setLabel] = useState13(variable.label);
+  const [value, setValue] = useState13(variable.value);
+  const [propTypeKey, setPropTypeKey] = useState13(variable?.type ?? propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -3194,22 +3159,22 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       handleRestore();
     }
   };
-  return /* @__PURE__ */ React26.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React26.createElement(SectionPopoverBody4, { height: "auto" }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React25.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React25.createElement(SectionPopoverBody4, { height: "auto" }, /* @__PURE__ */ React25.createElement(
     PopoverHeader4,
     {
-      icon: /* @__PURE__ */ React26.createElement(VariableIcon, { fontSize: SIZE7 }),
-      title: __18("Restore variable", "elementor"),
+      icon: /* @__PURE__ */ React25.createElement(VariableIcon, { fontSize: SIZE7 }),
+      title: __17("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React26.createElement(Divider5, null), /* @__PURE__ */ React26.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React25.createElement(Divider5, null), /* @__PURE__ */ React25.createElement(PopoverContent3, { p: 2 }, /* @__PURE__ */ React25.createElement(
     FormField,
     {
       id: "variable-label",
-      label: __18("Name", "elementor"),
+      label: __17("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React25.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -3228,7 +3193,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         onKeyDown: handleKeyDown
       }
     )
-  ), ValueField && /* @__PURE__ */ React26.createElement(FormField, { errorMsg: valueFieldError, label: __18("Value", "elementor") }, /* @__PURE__ */ React26.createElement(Typography12, { variant: "h5" }, /* @__PURE__ */ React26.createElement(
+  ), ValueField && /* @__PURE__ */ React25.createElement(FormField, { errorMsg: valueFieldError, label: __17("Value", "elementor") }, /* @__PURE__ */ React25.createElement(Typography11, { variant: "h5" }, /* @__PURE__ */ React25.createElement(
     ValueField,
     {
       propTypeKey,
@@ -3243,25 +3208,25 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       propType,
       onKeyDown: handleKeyDown
     }
-  ))), errorMessage && /* @__PURE__ */ React26.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React26.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React26.createElement(Button7, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __18("Restore", "elementor")))));
+  ))), errorMessage && /* @__PURE__ */ React25.createElement(FormHelperText4, { error: true }, errorMessage)), /* @__PURE__ */ React25.createElement(CardActions3, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React25.createElement(Button6, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, __17("Restore", "elementor")))));
 };
 
 // src/components/ui/deleted-variable-alert.tsx
-import * as React27 from "react";
-import { Alert as Alert2, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener2, Typography as Typography13 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import * as React26 from "react";
+import { Alert as Alert2, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener2, Typography as Typography12 } from "@elementor/ui";
+import { __ as __18 } from "@wordpress/i18n";
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
-  return /* @__PURE__ */ React27.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React26.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React26.createElement(
     Alert2,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React27.createElement(React27.Fragment, null, onUnlink && /* @__PURE__ */ React27.createElement(AlertAction2, { variant: "contained", onClick: onUnlink }, __19("Unlink", "elementor")), onRestore && /* @__PURE__ */ React27.createElement(AlertAction2, { variant: "outlined", onClick: onRestore }, __19("Restore", "elementor"))),
+      action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onUnlink && /* @__PURE__ */ React26.createElement(AlertAction2, { variant: "contained", onClick: onUnlink }, __18("Unlink", "elementor")), onRestore && /* @__PURE__ */ React26.createElement(AlertAction2, { variant: "outlined", onClick: onRestore }, __18("Restore", "elementor"))),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React27.createElement(AlertTitle2, null, __19("Deleted variable", "elementor")),
-    /* @__PURE__ */ React27.createElement(Typography13, { variant: "body2", color: "textPrimary" }, __19("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React27.createElement(Typography13, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", __19(
+    /* @__PURE__ */ React26.createElement(AlertTitle2, null, __18("Deleted variable", "elementor")),
+    /* @__PURE__ */ React26.createElement(Typography12, { variant: "body2", color: "textPrimary" }, __18("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React26.createElement(Typography12, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", __18(
       "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"
     ))
@@ -3269,13 +3234,13 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 };
 
 // src/components/ui/tags/warning-variable-tag.tsx
-import * as React28 from "react";
+import * as React27 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon4 } from "@elementor/icons";
-import { Box as Box6, Chip, Tooltip as Tooltip5, Typography as Typography14 } from "@elementor/ui";
-var WarningVariableTag = React28.forwardRef(
+import { Box as Box6, Chip, Tooltip as Tooltip5, Typography as Typography13 } from "@elementor/ui";
+var WarningVariableTag = React27.forwardRef(
   ({ label, suffix, onClick, icon, ...props }, ref) => {
     const displayText = suffix ? `${label} (${suffix})` : label;
-    return /* @__PURE__ */ React28.createElement(
+    return /* @__PURE__ */ React27.createElement(
       Chip,
       {
         ref,
@@ -3284,8 +3249,8 @@ var WarningVariableTag = React28.forwardRef(
         shape: "rounded",
         variant: "standard",
         onClick,
-        icon: /* @__PURE__ */ React28.createElement(AlertTriangleFilledIcon4, null),
-        label: /* @__PURE__ */ React28.createElement(Tooltip5, { title: displayText, placement: "top" }, /* @__PURE__ */ React28.createElement(Box6, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React28.createElement(Typography14, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
+        icon: /* @__PURE__ */ React27.createElement(AlertTriangleFilledIcon4, null),
+        label: /* @__PURE__ */ React27.createElement(Tooltip5, { title: displayText, placement: "top" }, /* @__PURE__ */ React27.createElement(Box6, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React27.createElement(Typography13, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
         sx: {
           height: (theme) => theme.spacing(3.5),
           borderRadius: (theme) => theme.spacing(1),
@@ -3304,7 +3269,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = useBoundProp8();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = useState15(false);
+  const [showInfotip, setShowInfotip] = useState14(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
   const deletedChipAnchorRef = useRef9(null);
@@ -3335,7 +3300,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React29.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React28.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
     Infotip2,
     {
       color: "warning",
@@ -3343,7 +3308,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       open: showInfotip,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React29.createElement(
+      content: /* @__PURE__ */ React28.createElement(
         DeletedVariableAlert,
         {
           onClose: closeInfotip,
@@ -3363,15 +3328,15 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
         }
       }
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React28.createElement(
       WarningVariableTag,
       {
         label: variable.label,
         onClick: toggleInfotip,
-        suffix: __20("deleted", "elementor")
+        suffix: __19("deleted", "elementor")
       }
     )
-  ), /* @__PURE__ */ React29.createElement(
+  ), /* @__PURE__ */ React28.createElement(
     Popover2,
     {
       disableScrollLock: true,
@@ -3382,7 +3347,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       },
       ...bindPopover2(popupState)
     },
-    /* @__PURE__ */ React29.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React28.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React28.createElement(
       VariableRestore,
       {
         variableId: variable.key ?? "",
@@ -3394,39 +3359,39 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/mismatch-variable.tsx
-import * as React31 from "react";
-import { useId as useId3, useRef as useRef10, useState as useState16 } from "react";
+import * as React30 from "react";
+import { useId as useId3, useRef as useRef10, useState as useState15 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box8, Infotip as Infotip3, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
+import { __ as __21 } from "@wordpress/i18n";
 
 // src/components/ui/mismatch-variable-alert.tsx
-import * as React30 from "react";
-import { Alert as Alert3, AlertAction as AlertAction3, AlertTitle as AlertTitle3, ClickAwayListener as ClickAwayListener3, Typography as Typography15 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
+import * as React29 from "react";
+import { Alert as Alert3, AlertAction as AlertAction3, AlertTitle as AlertTitle3, ClickAwayListener as ClickAwayListener3, Typography as Typography14 } from "@elementor/ui";
+import { __ as __20 } from "@wordpress/i18n";
 var i18n = {
-  title: __21("Variable has changed", "elementor"),
-  message: __21(
+  title: __20("Variable has changed", "elementor"),
+  message: __20(
     `This variable is no longer compatible with this property. You can clear it or select a different one.`,
     "elementor"
   ),
   buttons: {
-    clear: __21("Clear", "elementor"),
-    select: __21("Select variable", "elementor")
+    clear: __20("Clear", "elementor"),
+    select: __20("Select variable", "elementor")
   }
 };
 var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
-  return /* @__PURE__ */ React30.createElement(ClickAwayListener3, { onClickAway: onClose }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React29.createElement(ClickAwayListener3, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
     Alert3,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React30.createElement(React30.Fragment, null, onClear && /* @__PURE__ */ React30.createElement(AlertAction3, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React30.createElement(AlertAction3, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
+      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(AlertAction3, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React29.createElement(AlertAction3, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React30.createElement(AlertTitle3, null, i18n.title),
-    /* @__PURE__ */ React30.createElement(Typography15, { variant: "body2", color: "textPrimary" }, i18n.message)
+    /* @__PURE__ */ React29.createElement(AlertTitle3, null, i18n.title),
+    /* @__PURE__ */ React29.createElement(Typography14, { variant: "body2", color: "textPrimary" }, i18n.message)
   ));
 };
 
@@ -3439,7 +3404,7 @@ var MismatchVariable = ({ variable }) => {
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = useState16(false);
+  const [infotipVisible, setInfotipVisible] = useState15(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -3452,7 +3417,7 @@ var MismatchVariable = ({ variable }) => {
     setValue(null);
   };
   const showClearButton = !!value;
-  return /* @__PURE__ */ React31.createElement(Box8, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React31.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React30.createElement(Box8, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React30.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React30.createElement(
     Infotip3,
     {
       color: "warning",
@@ -3460,7 +3425,7 @@ var MismatchVariable = ({ variable }) => {
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React31.createElement(
+      content: /* @__PURE__ */ React30.createElement(
         MismatchVariableAlert,
         {
           onClose: closeInfotip,
@@ -3479,15 +3444,15 @@ var MismatchVariable = ({ variable }) => {
         }
       }
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React30.createElement(
       WarningVariableTag,
       {
         label: variable.label,
         onClick: toggleInfotip,
-        suffix: __22("changed", "elementor")
+        suffix: __21("changed", "elementor")
       }
     )
-  ), /* @__PURE__ */ React31.createElement(
+  ), /* @__PURE__ */ React30.createElement(
     Popover3,
     {
       disableScrollLock: true,
@@ -3499,7 +3464,7 @@ var MismatchVariable = ({ variable }) => {
       },
       ...bindPopover3(popupState)
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React30.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -3511,28 +3476,28 @@ var MismatchVariable = ({ variable }) => {
 };
 
 // src/components/ui/variable/missing-variable.tsx
-import * as React33 from "react";
-import { useState as useState17 } from "react";
+import * as React32 from "react";
+import { useState as useState16 } from "react";
 import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop3, Infotip as Infotip4 } from "@elementor/ui";
-import { __ as __24 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 
 // src/components/ui/missing-variable-alert.tsx
-import * as React32 from "react";
-import { Alert as Alert4, AlertAction as AlertAction4, AlertTitle as AlertTitle4, ClickAwayListener as ClickAwayListener4, Typography as Typography16 } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
+import * as React31 from "react";
+import { Alert as Alert4, AlertAction as AlertAction4, AlertTitle as AlertTitle4, ClickAwayListener as ClickAwayListener4, Typography as Typography15 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
 var MissingVariableAlert = ({ onClose, onClear }) => {
-  return /* @__PURE__ */ React32.createElement(ClickAwayListener4, { onClickAway: onClose }, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React31.createElement(ClickAwayListener4, { onClickAway: onClose }, /* @__PURE__ */ React31.createElement(
     Alert4,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React32.createElement(React32.Fragment, null, onClear && /* @__PURE__ */ React32.createElement(AlertAction4, { variant: "contained", onClick: onClear }, __23("Clear", "elementor"))),
+      action: /* @__PURE__ */ React31.createElement(React31.Fragment, null, onClear && /* @__PURE__ */ React31.createElement(AlertAction4, { variant: "contained", onClick: onClear }, __22("Clear", "elementor"))),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React32.createElement(AlertTitle4, null, __23("This variable is missing", "elementor")),
-    /* @__PURE__ */ React32.createElement(Typography16, { variant: "body2", color: "textPrimary" }, __23(
+    /* @__PURE__ */ React31.createElement(AlertTitle4, null, __22("This variable is missing", "elementor")),
+    /* @__PURE__ */ React31.createElement(Typography15, { variant: "body2", color: "textPrimary" }, __22(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
     ))
@@ -3542,11 +3507,11 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = useBoundProp10();
-  const [infotipVisible, setInfotipVisible] = useState17(false);
+  const [infotipVisible, setInfotipVisible] = useState16(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, infotipVisible && /* @__PURE__ */ React33.createElement(Backdrop3, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, infotipVisible && /* @__PURE__ */ React32.createElement(Backdrop3, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React32.createElement(
     Infotip4,
     {
       color: "warning",
@@ -3554,7 +3519,7 @@ var MissingVariable = () => {
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React33.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      content: /* @__PURE__ */ React32.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
       slotProps: {
         popper: {
           modifiers: [
@@ -3566,7 +3531,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React33.createElement(WarningVariableTag, { label: __24("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React32.createElement(WarningVariableTag, { label: __23("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -3576,37 +3541,37 @@ var VariableControl = () => {
   const boundPropValue = boundProp.value ?? boundProp.placeholder;
   const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
-    return /* @__PURE__ */ React34.createElement(MissingVariable, null);
+    return /* @__PURE__ */ React33.createElement(MissingVariable, null);
   }
   const { $$type: propTypeKey } = boundPropValue;
   if (assignedVariable?.deleted) {
-    return /* @__PURE__ */ React34.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
+    return /* @__PURE__ */ React33.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
   }
   const { isCompatible } = getVariableType(assignedVariable.type);
   if (isCompatible && !isCompatible(boundProp?.propType, assignedVariable)) {
-    return /* @__PURE__ */ React34.createElement(MismatchVariable, { variable: assignedVariable });
+    return /* @__PURE__ */ React33.createElement(MismatchVariable, { variable: assignedVariable });
   }
-  return /* @__PURE__ */ React34.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
+  return /* @__PURE__ */ React33.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
 // src/hooks/use-prop-variable-action.tsx
-import * as React35 from "react";
+import * as React34 from "react";
 import { useBoundProp as useBoundProp12 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon4 } from "@elementor/icons";
-import { __ as __25 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 var usePropVariableAction = () => {
   const { propType, path } = useBoundProp12();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
     icon: ColorFilterIcon4,
-    title: __25("Variables", "elementor"),
+    title: __24("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
       }
       trackOpenVariablePopover(path, variable.variableType);
-      return /* @__PURE__ */ React35.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
+      return /* @__PURE__ */ React34.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
@@ -3753,20 +3718,20 @@ function initMcp() {
 }
 
 // src/register-variable-types.tsx
-import * as React38 from "react";
+import * as React37 from "react";
 import { colorPropTypeUtil, sizePropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 import { CtaButton } from "@elementor/editor-ui";
 import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
-import { BrushIcon as BrushIcon2, ExpandDiagonalIcon, ResetIcon, TextIcon as TextIcon2 } from "@elementor/icons";
-import { __ as __27 } from "@wordpress/i18n";
+import { BrushIcon, ExpandDiagonalIcon, ResetIcon, TextIcon as TextIcon2 } from "@elementor/icons";
+import { __ as __26 } from "@wordpress/i18n";
 
 // src/components/fields/color-field.tsx
-import * as React36 from "react";
-import { useRef as useRef11, useState as useState18 } from "react";
+import * as React35 from "react";
+import { useRef as useRef11, useState as useState17 } from "react";
 import { UnstableColorField } from "@elementor/ui";
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = useState18(value);
-  const [errorMessage, setErrorMessage] = useState18("");
+  const [color, setColor] = useState17(value);
+  const [errorMessage, setErrorMessage] = useState17("");
   const defaultRef = useRef11(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
@@ -3776,7 +3741,7 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
     onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(
     UnstableColorField,
     {
       id: "color-variable-field",
@@ -3805,21 +3770,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/components/fields/font-field.tsx
-import * as React37 from "react";
-import { useId as useId4, useRef as useRef12, useState as useState19 } from "react";
+import * as React36 from "react";
+import { useId as useId4, useRef as useRef12, useState as useState18 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector, useFontFamilies } from "@elementor/editor-controls";
 import { useSectionWidth } from "@elementor/editor-ui";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger4, Popover as Popover4, UnstableTag, usePopupState as usePopupState6 } from "@elementor/ui";
-import { __ as __26 } from "@wordpress/i18n";
+import { __ as __25 } from "@wordpress/i18n";
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = useState19(value);
+  const [fontFamily, setFontFamily] = useState18(value);
   const defaultRef = useRef12(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = usePopupState6({ variant: "popover" });
   const fontFamilies = useFontFamilies();
   const sectionWidth = useSectionWidth();
-  const mapFontSubs = React37.useMemo(() => {
+  const mapFontSubs = React36.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -3836,17 +3801,17 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     fontPopoverState.close();
   };
   const id2 = useId4();
-  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
     UnstableTag,
     {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React37.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React36.createElement(ChevronDownIcon, { fontSize: "tiny" }),
       ...bindTrigger4(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React37.createElement(
+  ), /* @__PURE__ */ React36.createElement(
     Popover4,
     {
       disablePortal: true,
@@ -3856,7 +3821,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
       transformOrigin: { vertical: "top", horizontal: -28 },
       ...bindPopover4(fontPopoverState)
     },
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React36.createElement(
       ItemSelector,
       {
         id: "font-family-variables-selector",
@@ -3865,7 +3830,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: __26("Font family", "elementor"),
+        title: __25("Font family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: enqueueFont2,
         icon: TextIcon
@@ -3890,11 +3855,11 @@ function registerVariableTypes() {
   registerVariableType({
     key: colorVariablePropTypeUtil.key,
     valueField: ColorField,
-    icon: BrushIcon2,
+    icon: BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: colorPropTypeUtil,
     variableType: "color",
-    startIcon: ({ value }) => /* @__PURE__ */ React38.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
+    startIcon: ({ value }) => /* @__PURE__ */ React37.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
     defaultValue: "#ffffff",
     menuActionsFactory: ({ variable, variableId, handlers }) => {
       const actions = [];
@@ -3903,14 +3868,14 @@ function registerVariableTypes() {
       }
       if (variable.sync_to_v3) {
         actions.push({
-          name: __27("Stop syncing to Version 3", "elementor"),
+          name: __26("Stop syncing to Version 3", "elementor"),
           icon: ResetIcon,
           color: "text.primary",
           onClick: () => handlers.onStopSync(variableId)
         });
       } else {
         actions.push({
-          name: __27("Sync to Version 3", "elementor"),
+          name: __26("Sync to Version 3", "elementor"),
           icon: ResetIcon,
           color: "text.primary",
           onClick: () => handlers.onStartSync(variableId)
@@ -3936,7 +3901,7 @@ function registerVariableTypes() {
     styleTransformer: EmptyTransformer,
     variableType: "size",
     selectionFilter: () => [],
-    emptyState: /* @__PURE__ */ React38.createElement(CtaButton, { size: "small", href: "https://go.elementor.com/go-pro-panel-size-variable/" })
+    emptyState: /* @__PURE__ */ React37.createElement(CtaButton, { size: "small", href: "https://go.elementor.com/go-pro-panel-size-variable/" })
   };
   registerVariableType({
     ...sizePromotions,
@@ -3950,8 +3915,8 @@ function registerVariableTypes() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-import * as React39 from "react";
-import { useEffect as useEffect6, useState as useState20 } from "react";
+import * as React38 from "react";
+import { useEffect as useEffect6, useState as useState19 } from "react";
 import {
   __privateUseListenTo as useListenTo,
   commandEndEvent,
@@ -3968,13 +3933,13 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React39.createElement(Portal, { container }, /* @__PURE__ */ React39.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React38.createElement(Portal, { container }, /* @__PURE__ */ React38.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = useState20({});
+  const [variables, setVariables] = useState19({});
   useEffect6(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
@@ -3998,22 +3963,22 @@ import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elemen
 import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 
 // src/components/variables-repeater-item-slot.tsx
-import * as React40 from "react";
+import * as React39 from "react";
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React40.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React40.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React39.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React40.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 
 // src/repeater-injections.ts