@elementor/editor-variables 3.32.0-64 → 3.32.0-66

package/dist/index.d.mts

@@ -5,6 +5,14 @@ import * as _mui_material from '@mui/material';
 
 declare function init(): void;
 
+type Variable = {
+    key?: string;
+    label: string;
+    value: string;
+    type: string;
+    deleted?: boolean;
+    deleted_at?: string;
+};
 type NormalizedVariable = {
     key: string;
     label: string;
@@ -18,7 +26,7 @@ type ValueFieldProps = {
     propType?: PropType;
 };
 
-declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, selectionFilter, valueTransformer, fallbackPropTypeUtil, }: {
+declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, selectionFilter, valueTransformer, fallbackPropTypeUtil, isCompatible, }: {
     icon: react.ForwardRefExoticComponent<Omit<_mui_material.SvgIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
     startIcon?: ({ value }: {
         value: string;
@@ -29,6 +37,7 @@ declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil
     propTypeUtil: _elementor_editor_props.PropTypeUtil<string, string>;
     selectionFilter?: (variables: NormalizedVariable[], propType: _elementor_editor_props.PropType) => NormalizedVariable[];
     valueTransformer?: (value: string) => _elementor_editor_props.PropValue;
+    isCompatible?: (propType: _elementor_editor_props.PropType, variable: Variable) => boolean;
 }) => void;
 
 export { init, registerVariableType };

package/dist/index.d.ts

@@ -5,6 +5,14 @@ import * as _mui_material from '@mui/material';
 
 declare function init(): void;
 
+type Variable = {
+    key?: string;
+    label: string;
+    value: string;
+    type: string;
+    deleted?: boolean;
+    deleted_at?: string;
+};
 type NormalizedVariable = {
     key: string;
     label: string;
@@ -18,7 +26,7 @@ type ValueFieldProps = {
     propType?: PropType;
 };
 
-declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, selectionFilter, valueTransformer, fallbackPropTypeUtil, }: {
+declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, selectionFilter, valueTransformer, fallbackPropTypeUtil, isCompatible, }: {
     icon: react.ForwardRefExoticComponent<Omit<_mui_material.SvgIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
     startIcon?: ({ value }: {
         value: string;
@@ -29,6 +37,7 @@ declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil
     propTypeUtil: _elementor_editor_props.PropTypeUtil<string, string>;
     selectionFilter?: (variables: NormalizedVariable[], propType: _elementor_editor_props.PropType) => NormalizedVariable[];
     valueTransformer?: (value: string) => _elementor_editor_props.PropValue;
+    isCompatible?: (propType: _elementor_editor_props.PropType, variable: Variable) => boolean;
 }) => void;
 
 export { init, registerVariableType };

package/dist/index.js

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
-var import_editor_editing_panel10 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel11 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/variables-manager/variables-manager-panel.tsx
@@ -422,11 +422,22 @@ function createVariableTypeRegistry() {
     variableType,
     selectionFilter,
     valueTransformer,
-    fallbackPropTypeUtil
+    fallbackPropTypeUtil,
+    isCompatible
   }) => {
     if (variableTypes[propTypeUtil.key]) {
       throw new Error(`Variable with key "${propTypeUtil.key}" is already registered.`);
     }
+    if (!isCompatible) {
+      isCompatible = (propType, variable) => {
+        if ("union" === propType.kind) {
+          if (variable.type in propType.prop_types) {
+            return true;
+          }
+        }
+        return false;
+      };
+    }
     variableTypes[propTypeUtil.key] = {
       icon,
       startIcon,
@@ -435,7 +446,8 @@ function createVariableTypeRegistry() {
       variableType,
       selectionFilter,
       valueTransformer,
-      fallbackPropTypeUtil
+      fallbackPropTypeUtil,
+      isCompatible
     };
     registerTransformer(propTypeUtil.key);
     registerInheritanceTransformer(propTypeUtil.key);
@@ -884,8 +896,8 @@ var usePreventUnload = (isDirty) => {
 };
 
 // src/controls/variable-control.tsx
-var React29 = __toESM(require("react"));
-var import_editor_controls10 = require("@elementor/editor-controls");
+var React32 = __toESM(require("react"));
+var import_editor_controls11 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
 var import_react14 = require("react");
@@ -2062,19 +2074,29 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   )));
 };
 
-// src/components/ui/variable/missing-variable.tsx
+// src/components/ui/variable/mismatch-variable.tsx
 var React28 = __toESM(require("react"));
 var import_react17 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
 var import_ui28 = require("@elementor/ui");
-var import_i18n20 = require("@wordpress/i18n");
 
-// src/components/ui/missing-variable-alert.tsx
+// src/components/ui/mismatch-variable-alert.tsx
 var React26 = __toESM(require("react"));
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
 var import_ui26 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
-var MissingVariableAlert = ({ onClose, onClear }) => {
+var i18n = {
+  title: (0, import_i18n19.__)("Variable has changed", "elementor"),
+  message: (0, import_i18n19.__)(
+    `This variable is no longer compatible with this property. You can clear it or select a different one.`,
+    "elementor"
+  ),
+  buttons: {
+    clear: (0, import_i18n19.__)("Clear", "elementor"),
+    select: (0, import_i18n19.__)("Select variable", "elementor")
+  }
+};
+var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
   const sectionWidth = (0, import_editor_editing_panel7.useSectionWidth)();
   return /* @__PURE__ */ React26.createElement(import_ui26.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React26.createElement(
     import_ui26.Alert,
@@ -2082,22 +2104,23 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onClear && /* @__PURE__ */ React26.createElement(import_ui26.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n19.__)("Clear", "elementor"))),
-      sx: { width: sectionWidth }
+      action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onClear && /* @__PURE__ */ React26.createElement(import_ui26.AlertAction, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React26.createElement(import_ui26.AlertAction, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
+      sx: {
+        width: sectionWidth,
+        minWidth: 300
+      }
     },
-    /* @__PURE__ */ React26.createElement(import_ui26.AlertTitle, null, (0, import_i18n19.__)("This variable is missing", "elementor")),
-    (0, import_i18n19.__)(
-      "It may have been deleted. Try clearing this field and select a different value or variable.",
-      "elementor"
-    )
+    /* @__PURE__ */ React26.createElement(import_ui26.AlertTitle, null, i18n.title),
+    i18n.message
   ));
 };
 
-// src/components/ui/tags/missing-tag.tsx
+// src/components/ui/tags/mismatch-tag.tsx
 var React27 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
 var import_ui27 = require("@elementor/ui");
-var MissingTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
+var import_i18n20 = require("@wordpress/i18n");
+var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
   return /* @__PURE__ */ React27.createElement(
     import_ui27.Chip,
     {
@@ -2108,6 +2131,136 @@ var MissingTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
       variant: "standard",
       onClick,
       icon: /* @__PURE__ */ React27.createElement(import_icons13.AlertTriangleFilledIcon, null),
+      label: /* @__PURE__ */ React27.createElement(import_ui27.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(import_ui27.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n20.__)("changed", "elementor"), ")"))),
+      sx: {
+        height: (theme) => theme.spacing(3.5),
+        borderRadius: (theme) => theme.spacing(1),
+        justifyContent: "flex-start",
+        width: "100%"
+      },
+      ...props
+    }
+  );
+});
+
+// src/components/ui/variable/mismatch-variable.tsx
+var MismatchVariable = ({ variable }) => {
+  const { setValue } = (0, import_editor_controls9.useBoundProp)();
+  const anchorRef = (0, import_react17.useRef)(null);
+  const popupId = (0, import_react17.useId)();
+  const popupState = (0, import_ui28.usePopupState)({
+    variant: "popover",
+    popupId: `elementor-variables-list-${popupId}`
+  });
+  const [infotipVisible, setInfotipVisible] = (0, import_react17.useState)(false);
+  const toggleInfotip = () => setInfotipVisible((prev) => !prev);
+  const closeInfotip = () => setInfotipVisible(false);
+  const triggerSelect = () => {
+    closeInfotip();
+    popupState.setAnchorEl(anchorRef.current);
+    popupState.open();
+  };
+  const clearValue = () => {
+    closeInfotip();
+    setValue(null);
+  };
+  return /* @__PURE__ */ React28.createElement(import_ui28.Box, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(import_ui28.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
+    import_ui28.Infotip,
+    {
+      color: "warning",
+      placement: "right-start",
+      open: infotipVisible,
+      disableHoverListener: true,
+      onClose: closeInfotip,
+      content: /* @__PURE__ */ React28.createElement(
+        MismatchVariableAlert,
+        {
+          onClose: closeInfotip,
+          onClear: clearValue,
+          triggerSelect
+        }
+      ),
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [0, 24] }
+            }
+          ]
+        }
+      }
+    },
+    /* @__PURE__ */ React28.createElement(MismatchTag, { label: variable.label, onClick: toggleInfotip })
+  ), /* @__PURE__ */ React28.createElement(
+    import_ui28.Popover,
+    {
+      disableScrollLock: true,
+      anchorEl: anchorRef.current,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      PaperProps: {
+        sx: { my: 1 }
+      },
+      ...(0, import_ui28.bindPopover)(popupState)
+    },
+    /* @__PURE__ */ React28.createElement(
+      VariableSelectionPopover,
+      {
+        selectedVariable: variable,
+        closePopover: popupState.close,
+        propTypeKey: variable.type
+      }
+    )
+  ));
+};
+
+// src/components/ui/variable/missing-variable.tsx
+var React31 = __toESM(require("react"));
+var import_react18 = require("react");
+var import_editor_controls10 = require("@elementor/editor-controls");
+var import_ui31 = require("@elementor/ui");
+var import_i18n22 = require("@wordpress/i18n");
+
+// src/components/ui/missing-variable-alert.tsx
+var React29 = __toESM(require("react"));
+var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
+var import_ui29 = require("@elementor/ui");
+var import_i18n21 = require("@wordpress/i18n");
+var MissingVariableAlert = ({ onClose, onClear }) => {
+  const sectionWidth = (0, import_editor_editing_panel8.useSectionWidth)();
+  return /* @__PURE__ */ React29.createElement(import_ui29.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
+    import_ui29.Alert,
+    {
+      variant: "standard",
+      severity: "warning",
+      onClose,
+      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(import_ui29.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n21.__)("Clear", "elementor"))),
+      sx: { width: sectionWidth }
+    },
+    /* @__PURE__ */ React29.createElement(import_ui29.AlertTitle, null, (0, import_i18n21.__)("This variable is missing", "elementor")),
+    (0, import_i18n21.__)(
+      "It may have been deleted. Try clearing this field and select a different value or variable.",
+      "elementor"
+    )
+  ));
+};
+
+// src/components/ui/tags/missing-tag.tsx
+var React30 = __toESM(require("react"));
+var import_icons14 = require("@elementor/icons");
+var import_ui30 = require("@elementor/ui");
+var MissingTag = React30.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React30.createElement(
+    import_ui30.Chip,
+    {
+      ref,
+      size: "tiny",
+      color: "warning",
+      shape: "rounded",
+      variant: "standard",
+      onClick,
+      icon: /* @__PURE__ */ React30.createElement(import_icons14.AlertTriangleFilledIcon, null),
       label,
       sx: {
         height: (theme) => theme.spacing(3.5),
@@ -2122,20 +2275,20 @@ var MissingTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
 
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
-  const { setValue } = (0, import_editor_controls9.useBoundProp)();
-  const [infotipVisible, setInfotipVisible] = (0, import_react17.useState)(false);
+  const { setValue } = (0, import_editor_controls10.useBoundProp)();
+  const [infotipVisible, setInfotipVisible] = (0, import_react18.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, infotipVisible && /* @__PURE__ */ React28.createElement(import_ui28.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
-    import_ui28.Infotip,
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, infotipVisible && /* @__PURE__ */ React31.createElement(import_ui31.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React31.createElement(
+    import_ui31.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React28.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      content: /* @__PURE__ */ React31.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
       slotProps: {
         popper: {
           modifiers: [
@@ -2147,42 +2300,47 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React28.createElement(MissingTag, { label: (0, import_i18n20.__)("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React31.createElement(MissingTag, { label: (0, import_i18n22.__)("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
 // src/controls/variable-control.tsx
 var VariableControl = () => {
-  const boundProp = (0, import_editor_controls10.useBoundProp)().value;
-  const assignedVariable = useVariable(boundProp?.value);
+  const boundProp = (0, import_editor_controls11.useBoundProp)();
+  const boundPropValue = boundProp.value;
+  const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
-    return /* @__PURE__ */ React29.createElement(MissingVariable, null);
+    return /* @__PURE__ */ React32.createElement(MissingVariable, null);
   }
-  const { $$type: propTypeKey } = boundProp;
+  const { $$type: propTypeKey } = boundPropValue;
   if (assignedVariable?.deleted) {
-    return /* @__PURE__ */ React29.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
+    return /* @__PURE__ */ React32.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
   }
-  return /* @__PURE__ */ React29.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
+  const { isCompatible } = getVariableType(assignedVariable.type);
+  if (isCompatible && !isCompatible(boundProp?.propType, assignedVariable)) {
+    return /* @__PURE__ */ React32.createElement(MismatchVariable, { variable: assignedVariable });
+  }
+  return /* @__PURE__ */ React32.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
 // src/hooks/use-prop-variable-action.tsx
-var React30 = __toESM(require("react"));
-var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
-var import_icons14 = require("@elementor/icons");
-var import_i18n21 = require("@wordpress/i18n");
+var React33 = __toESM(require("react"));
+var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
+var import_icons15 = require("@elementor/icons");
+var import_i18n23 = require("@wordpress/i18n");
 var usePropVariableAction = () => {
-  const { propType, path } = (0, import_editor_editing_panel8.useBoundProp)();
+  const { propType, path } = (0, import_editor_editing_panel9.useBoundProp)();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
-    icon: import_icons14.ColorFilterIcon,
-    title: (0, import_i18n21.__)("Variables", "elementor"),
+    icon: import_icons15.ColorFilterIcon,
+    title: (0, import_i18n23.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
       }
       trackOpenVariablePopover(path, variable.variableType);
-      return /* @__PURE__ */ React30.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
+      return /* @__PURE__ */ React33.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
@@ -2207,18 +2365,18 @@ var trackOpenVariablePopover = (path, variableType) => {
 };
 
 // src/register-variable-types.tsx
-var React33 = __toESM(require("react"));
+var React36 = __toESM(require("react"));
 var import_editor_props3 = require("@elementor/editor-props");
-var import_icons16 = require("@elementor/icons");
+var import_icons17 = require("@elementor/icons");
 
 // src/components/fields/color-field.tsx
-var React31 = __toESM(require("react"));
-var import_react18 = require("react");
-var import_ui29 = require("@elementor/ui");
+var React34 = __toESM(require("react"));
+var import_react19 = require("react");
+var import_ui32 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = (0, import_react18.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react18.useState)("");
-  const defaultRef = (0, import_react18.useRef)(null);
+  const [color, setColor] = (0, import_react19.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react19.useState)("");
+  const defaultRef = (0, import_react19.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -2227,8 +2385,8 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
     onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React31.createElement(
-    import_ui29.UnstableColorField,
+  return /* @__PURE__ */ React34.createElement(
+    import_ui32.UnstableColorField,
     {
       size: "tiny",
       fullWidth: true,
@@ -2247,21 +2405,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/components/fields/font-field.tsx
-var React32 = __toESM(require("react"));
-var import_react19 = require("react");
-var import_editor_controls11 = require("@elementor/editor-controls");
-var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
-var import_icons15 = require("@elementor/icons");
-var import_ui30 = require("@elementor/ui");
-var import_i18n22 = require("@wordpress/i18n");
+var React35 = __toESM(require("react"));
+var import_react20 = require("react");
+var import_editor_controls12 = require("@elementor/editor-controls");
+var import_editor_editing_panel10 = require("@elementor/editor-editing-panel");
+var import_icons16 = require("@elementor/icons");
+var import_ui33 = require("@elementor/ui");
+var import_i18n24 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = (0, import_react19.useState)(value);
-  const defaultRef = (0, import_react19.useRef)(null);
+  const [fontFamily, setFontFamily] = (0, import_react20.useState)(value);
+  const defaultRef = (0, import_react20.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
-  const fontPopoverState = (0, import_ui30.usePopupState)({ variant: "popover" });
-  const fontFamilies = (0, import_editor_editing_panel9.useFontFamilies)();
-  const sectionWidth = (0, import_editor_editing_panel9.useSectionWidth)();
-  const mapFontSubs = React32.useMemo(() => {
+  const fontPopoverState = (0, import_ui33.usePopupState)({ variant: "popover" });
+  const fontFamilies = (0, import_editor_editing_panel10.useFontFamilies)();
+  const sectionWidth = (0, import_editor_editing_panel10.useSectionWidth)();
+  const mapFontSubs = React35.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -2277,39 +2435,39 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = (0, import_react19.useId)();
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(
-    import_ui30.UnstableTag,
+  const id2 = (0, import_react20.useId)();
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
+    import_ui33.UnstableTag,
     {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React32.createElement(import_icons15.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui30.bindTrigger)(fontPopoverState),
+      endIcon: /* @__PURE__ */ React35.createElement(import_icons16.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui33.bindTrigger)(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React32.createElement(
-    import_ui30.Popover,
+  ), /* @__PURE__ */ React35.createElement(
+    import_ui33.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef,
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: -28 },
-      ...(0, import_ui30.bindPopover)(fontPopoverState)
+      ...(0, import_ui33.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React32.createElement(
-      import_editor_controls11.ItemSelector,
+    /* @__PURE__ */ React35.createElement(
+      import_editor_controls12.ItemSelector,
       {
         itemsList: mapFontSubs,
         selectedItem: fontFamily,
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: (0, import_i18n22.__)("Font Family", "elementor"),
+        title: (0, import_i18n24.__)("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
-        onDebounce: import_editor_controls11.enqueueFont,
-        icon: import_icons15.TextIcon
+        onDebounce: import_editor_controls12.enqueueFont,
+        icon: import_icons16.TextIcon
       }
     )
   ));
@@ -2319,15 +2477,15 @@ var FontField = ({ value, onChange, onValidationChange }) => {
 function registerVariableTypes() {
   registerVariableType({
     valueField: ColorField,
-    icon: import_icons16.BrushIcon,
+    icon: import_icons17.BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props3.colorPropTypeUtil,
     variableType: "color",
-    startIcon: ({ value }) => /* @__PURE__ */ React33.createElement(ColorIndicator, { size: "inherit", component: "span", value })
+    startIcon: ({ value }) => /* @__PURE__ */ React36.createElement(ColorIndicator, { size: "inherit", component: "span", value })
   });
   registerVariableType({
     valueField: FontField,
-    icon: import_icons16.TextIcon,
+    icon: import_icons17.TextIcon,
     propTypeUtil: fontVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props3.stringPropTypeUtil,
     variableType: "font"
@@ -2335,10 +2493,10 @@ function registerVariableTypes() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React34 = __toESM(require("react"));
-var import_react20 = require("react");
+var React37 = __toESM(require("react"));
+var import_react21 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_ui31 = require("@elementor/ui");
+var import_ui34 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -2357,14 +2515,14 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React34.createElement(import_ui31.Portal, { container }, /* @__PURE__ */ React34.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React37.createElement(import_ui34.Portal, { container }, /* @__PURE__ */ React37.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react20.useState)({});
-  (0, import_react20.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react21.useState)({});
+  (0, import_react21.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -2383,45 +2541,45 @@ function convertToCssVariables(variables) {
 }
 
 // src/repeater-injections.ts
-var import_editor_controls12 = require("@elementor/editor-controls");
+var import_editor_controls13 = require("@elementor/editor-controls");
 var import_editor_props4 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
-var React35 = __toESM(require("react"));
+var React38 = __toESM(require("react"));
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React35.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React38.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React35.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React38.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React35.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React38.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 
 // src/repeater-injections.ts
 function registerRepeaterInjections() {
-  (0, import_editor_controls12.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls13.injectIntoRepeaterItemIcon)({
     id: "color-variables-background-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: ({ value: prop }) => {
       return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
     }
   });
-  (0, import_editor_controls12.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls13.injectIntoRepeaterItemIcon)({
     id: "color-variables-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value: prop }) => {
       return hasAssignedColorVariable(import_editor_props4.shadowPropTypeUtil.extract(prop)?.color);
     }
   });
-  (0, import_editor_controls12.injectIntoRepeaterItemLabel)({
+  (0, import_editor_controls13.injectIntoRepeaterItemLabel)({
     id: "color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: ({ value: prop }) => {
@@ -2434,11 +2592,11 @@ var hasAssignedColorVariable = (propValue) => {
 };
 
 // src/init.ts
-var { registerPopoverAction } = import_editor_editing_panel10.controlActionsMenu;
+var { registerPopoverAction } = import_editor_editing_panel11.controlActionsMenu;
 function init() {
   registerVariableTypes();
   registerRepeaterInjections();
-  (0, import_editor_editing_panel10.registerControlReplacement)({
+  (0, import_editor_editing_panel11.registerControlReplacement)({
     component: VariableControl,
     condition: ({ value }) => hasAssignedVariable(value)
   });