@elementor/editor-controls 4.1.0-800 → 4.1.0-802

package/dist/index.mjs

@@ -1390,7 +1390,7 @@ var Control = forwardRef3(({ bind, label, children }, ref) => /* @__PURE__ */ Re
 
 // src/controls/box-shadow-repeater-control.tsx
 import * as React40 from "react";
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import { boxShadowPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 import { FormLabel as FormLabel2, Grid as Grid4, styled as styled4, UnstableColorIndicator } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
@@ -1403,9 +1403,53 @@ import { __ as __5, sprintf } from "@wordpress/i18n";
 
 // src/components/control-repeater/context/repeater-context.tsx
 import * as React25 from "react";
-import { createContext as createContext7, useContext as useContext6, useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
+import { createContext as createContext7, useContext as useContext6, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
 import { usePopupState as usePopupState3 } from "@elementor/ui";
 
+// src/hooks/use-repeater-popover-dismiss.ts
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { useActiveBreakpoint as useActiveBreakpoint2, useBreakpoints } from "@elementor/editor-responsive";
+var serializeBreakpoints = (breakpoints) => breakpoints.map((b) => [b.id, b.width ?? "", b.type ?? ""].join(":")).join("|");
+var usePopoverDismiss = ({ isOpen, onClose }) => {
+  const onCloseRef = useRef4(onClose);
+  onCloseRef.current = onClose;
+  const activeBreakpoint = useActiveBreakpoint2();
+  const breakpoints = useBreakpoints();
+  const breakpointsSignature = useMemo3(() => serializeBreakpoints(breakpoints), [breakpoints]);
+  const prevActiveBreakpointRef = useRef4(void 0);
+  const prevBreakpointsSignatureRef = useRef4(null);
+  useEffect5(() => {
+    if (!isOpen) {
+      prevActiveBreakpointRef.current = activeBreakpoint;
+      prevBreakpointsSignatureRef.current = breakpointsSignature;
+      return;
+    }
+    const previousBreakpoint = prevActiveBreakpointRef.current;
+    const previousSignature = prevBreakpointsSignatureRef.current;
+    const breakpointChanged = previousBreakpoint !== void 0 && previousBreakpoint !== activeBreakpoint;
+    const breakpointsChanged = previousSignature !== null && previousSignature !== breakpointsSignature;
+    if (breakpointChanged || breakpointsChanged) {
+      onCloseRef.current();
+    }
+    prevActiveBreakpointRef.current = activeBreakpoint;
+    prevBreakpointsSignatureRef.current = breakpointsSignature;
+  }, [activeBreakpoint, breakpointsSignature, isOpen]);
+  useEffect5(() => {
+    if (!isOpen) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" && !event.defaultPrevented) {
+        onCloseRef.current();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen]);
+};
+
 // src/services/event-bus.ts
 var EventBus = class {
   listeners = /* @__PURE__ */ new Map();
@@ -1474,7 +1518,7 @@ var RepeaterContextProvider = ({
   const [uniqueKeys, setUniqueKeys] = useState5(() => {
     return items2?.map(() => generateUniqueKey()) ?? [];
   });
-  useEffect5(() => {
+  useEffect6(() => {
     const nextLength = items2?.length ?? 0;
     setUniqueKeys((prev) => {
       const prevLength = prev.length;
@@ -1487,7 +1531,7 @@ var RepeaterContextProvider = ({
       return [...prev, ...Array.from({ length: nextLength - prevLength }, generateUniqueKey)];
     });
   }, [items2?.length]);
-  const itemsWithKeys = useMemo3(
+  const itemsWithKeys = useMemo4(
     () => uniqueKeys.map((key, index) => ({
       key,
       item: items2[index]
@@ -1527,6 +1571,15 @@ var RepeaterContextProvider = ({
     const newItems = [...items2.slice(0, index), updatedItem, ...items2.slice(index + 1)];
     setItems(newItems);
   };
+  const closePopover = () => {
+    if (!isOpen) {
+      return;
+    }
+    setOpenItemIndex(EMPTY_OPEN_ITEM);
+    setRowRef(null);
+    popoverState.close();
+  };
+  usePopoverDismiss({ isOpen, onClose: closePopover });
   return /* @__PURE__ */ React25.createElement(
     RepeaterContext.Provider,
     {
@@ -1976,7 +2029,7 @@ var StyledUnstableColorIndicator = styled4(UnstableColorIndicator)(({ theme }) =
 var ItemIcon = ({ value }) => /* @__PURE__ */ React40.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
 var Content = () => {
   const context = useBoundProp(shadowPropTypeUtil);
-  const rowRef = [useRef4(null), useRef4(null)];
+  const rowRef = [useRef5(null), useRef5(null)];
   const { rowRef: anchorEl } = useRepeaterContext();
   return /* @__PURE__ */ React40.createElement(PropProvider, { ...context }, /* @__PURE__ */ React40.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React40.createElement(PopoverGridContainer, null, /* @__PURE__ */ React40.createElement(Control2, { bind: "color", label: __11("Color", "elementor") }, /* @__PURE__ */ React40.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React40.createElement(Control2, { bind: "position", label: __11("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(
     SelectControl,
@@ -2051,7 +2104,7 @@ import { __ as __17 } from "@wordpress/i18n";
 
 // src/controls/filter-control/context/filter-config-context.tsx
 import * as React41 from "react";
-import { createContext as createContext9, useContext as useContext9, useMemo as useMemo4 } from "react";
+import { createContext as createContext9, useContext as useContext9, useMemo as useMemo5 } from "react";
 import { cssFilterFunctionPropUtil } from "@elementor/editor-props";
 
 // src/controls/filter-control/utils.ts
@@ -2153,7 +2206,7 @@ function extractPropType(propType, filterFunctionGroup) {
 var FilterConfigContext = createContext9(null);
 function FilterConfigProvider({ children }) {
   const propContext = useBoundProp(cssFilterFunctionPropUtil);
-  const contextValue = useMemo4(() => {
+  const contextValue = useMemo5(() => {
     const config = buildFilterConfig(propContext.propType.item_prop_type);
     const filterOptions = Object.entries(config).map(([key, conf]) => ({
       value: key,
@@ -2186,7 +2239,7 @@ import { __ as __15 } from "@wordpress/i18n";
 
 // src/controls/filter-control/drop-shadow/drop-shadow-item-content.tsx
 import * as React42 from "react";
-import { useRef as useRef5 } from "react";
+import { useRef as useRef6 } from "react";
 import { dropShadowFilterPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid5 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
@@ -2214,7 +2267,7 @@ var items = [
 ];
 var DropShadowItemContent = ({ anchorEl }) => {
   const context = useBoundProp(dropShadowFilterPropTypeUtil);
-  const rowRefs = [useRef5(null), useRef5(null)];
+  const rowRefs = [useRef6(null), useRef6(null)];
   return /* @__PURE__ */ React42.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React42.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React42.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React42.createElement(Grid5, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React42.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React42.createElement(
     SizeControl,
     {
@@ -2227,7 +2280,7 @@ var DropShadowItemContent = ({ anchorEl }) => {
 };
 
 // src/controls/filter-control/single-size/single-size-item-content.tsx
-import { useRef as useRef6 } from "react";
+import { useRef as useRef7 } from "react";
 import * as React43 from "react";
 import {
   blurFilterPropTypeUtil,
@@ -2243,7 +2296,7 @@ var propTypeMap = {
   "color-tone": colorToneFilterPropTypeUtil
 };
 var SingleSizeItemContent = ({ filterFunc }) => {
-  const rowRef = useRef6(null);
+  const rowRef = useRef7(null);
   const { getFilterFunctionConfig } = useFilterConfig();
   const { valueName, filterFunctionGroup } = getFilterFunctionConfig(filterFunc);
   const context = useBoundProp(propTypeMap[filterFunctionGroup]);
@@ -2384,7 +2437,7 @@ function ensureFilterConfig(name) {
 
 // src/controls/select-control-wrapper.tsx
 import * as React50 from "react";
-import { useEffect as useEffect6, useState as useState6 } from "react";
+import { useEffect as useEffect7, useState as useState6 } from "react";
 var getOffCanvasElements = () => {
   const extendedWindow = window;
   const documentId = extendedWindow.elementor.config.document.id;
@@ -2421,7 +2474,7 @@ var collectionMethods = {
 };
 var useDynamicOptions = (collectionId, initialOptions) => {
   const [options, setOptions] = useState6(initialOptions ?? []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!collectionId || !collectionMethods[collectionId]) {
       setOptions(initialOptions ?? []);
       return;
@@ -2477,7 +2530,7 @@ import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-pro
 
 // src/components/control-toggle-button-group.tsx
 import * as React53 from "react";
-import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef7, useState as useState7 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef8, useState as useState7 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
@@ -2550,7 +2603,7 @@ var ToggleButtonGroupUi = React53.forwardRef(
     const handleChange = (_, newValue) => {
       onChange(newValue);
     };
-    const getGridTemplateColumns = useMemo5(() => {
+    const getGridTemplateColumns = useMemo6(() => {
       const isOffLimits = menuItems?.length;
       const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
       const templateColumnsSuffix = isOffLimits ? "auto" : "";
@@ -2649,7 +2702,7 @@ var SplitButtonGroup = ({
 }) => {
   const previewButton = usePreviewButton(items2, value);
   const [isMenuOpen, setIsMenuOpen] = useState7(false);
-  const menuButtonRef = useRef7(null);
+  const menuButtonRef = useRef8(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -2720,7 +2773,7 @@ var usePreviewButton = (items2, value) => {
   const [previewButton, setPreviewButton] = useState7(
     items2.find((item) => item.value === value) ?? items2[0]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     const selectedButton = items2.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -2860,7 +2913,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 import * as React57 from "react";
-import { useId as useId2, useRef as useRef8 } from "react";
+import { useId as useId2, useRef as useRef9 } from "react";
 import { bindPopover as bindPopover3, bindToggle, Box as Box7, Grid as Grid8, Popover as Popover3, Stack as Stack7, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
 function EqualUnequalSizesControl({
@@ -2872,7 +2925,7 @@ function EqualUnequalSizesControl({
 }) {
   const popupId = useId2();
   const popupState = usePopupState4({ variant: "popover", popupId });
-  const rowRefs = [useRef8(null), useRef8(null)];
+  const rowRefs = [useRef9(null), useRef9(null)];
   const { propType: multiSizePropType, disabled: multiSizeDisabled } = useBoundProp(multiSizePropTypeUtil);
   const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
   const getMultiSizeValues = (sourceValue) => {
@@ -2967,25 +3020,25 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
 
 // src/controls/linked-dimensions-control.tsx
 import * as React64 from "react";
-import { useLayoutEffect, useRef as useRef11, useState as useState9 } from "react";
+import { useLayoutEffect, useRef as useRef12, useState as useState9 } from "react";
 import {
   dimensionsPropTypeUtil,
   sizePropTypeUtil as sizePropTypeUtil5
 } from "@elementor/editor-props";
-import { useActiveBreakpoint as useActiveBreakpoint3 } from "@elementor/editor-responsive";
+import { useActiveBreakpoint as useActiveBreakpoint4 } from "@elementor/editor-responsive";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
 import { Grid as Grid9, Stack as Stack8, Tooltip as Tooltip6 } from "@elementor/ui";
 import { __ as __20, sprintf as sprintf2 } from "@wordpress/i18n";
 
 // src/controls/size-control/unstable-size-control.tsx
 import * as React63 from "react";
-import { useRef as useRef10 } from "react";
+import { useRef as useRef11 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 
 // src/controls/size-control/size-component.tsx
 import * as React62 from "react";
-import { useEffect as useEffect10 } from "react";
-import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
+import { useEffect as useEffect11 } from "react";
+import { useActiveBreakpoint as useActiveBreakpoint3 } from "@elementor/editor-responsive";
 import { Box as Box8, usePopupState as usePopupState6 } from "@elementor/ui";
 
 // src/controls/size-control/size-field.tsx
@@ -3054,7 +3107,7 @@ var isNumericValue = (value) => {
 };
 
 // src/controls/size-control/hooks/use-size-value.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 
 // src/controls/size-control/utils/resolve-size-value.ts
 var DEFAULT_SIZE2 = "";
@@ -3106,10 +3159,10 @@ var sanitizeSize = (size) => {
 };
 
 // src/controls/size-control/hooks/use-unit-sync.ts
-import { useEffect as useEffect8, useState as useState8 } from "react";
+import { useEffect as useEffect9, useState as useState8 } from "react";
 var useUnitSync = ({ sizeValue, setUnit, persistWhen }) => {
   const [state, setState] = useState8(sizeValue.unit);
-  useEffect8(() => {
+  useEffect9(() => {
     if (sizeValue.unit !== state) {
       setState(sizeValue.unit);
     }
@@ -3130,7 +3183,7 @@ var useSizeValue = ({
   units: units2,
   defaultUnit
 }) => {
-  const resolvedValue = useMemo6(
+  const resolvedValue = useMemo7(
     () => resolveSizeValue(value, { units: units2, defaultUnit }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [value?.size, value?.unit, defaultUnit]
@@ -3371,15 +3424,15 @@ var shouldHighlightUnit = (value) => {
 
 // src/controls/size-control/ui/text-field-popover.tsx
 import * as React61 from "react";
-import { useEffect as useEffect9, useRef as useRef9 } from "react";
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
 import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
 import { MathFunctionIcon as MathFunctionIcon4 } from "@elementor/icons";
 import { bindPopover as bindPopover4, Popover as Popover4, TextField as TextField6 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 var SIZE7 = "tiny";
 var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) => {
-  const inputRef = useRef9(null);
-  useEffect9(() => {
+  const inputRef = useRef10(null);
+  useEffect10(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => {
         if (inputRef.current) {
@@ -3443,10 +3496,10 @@ var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) =>
 // src/controls/size-control/size-component.tsx
 var SizeComponent = ({ anchorRef, SizeFieldWrapper = React62.Fragment, ...sizeFieldProps }) => {
   const popupState = usePopupState6({ variant: "popover" });
-  const activeBreakpoint = useActiveBreakpoint2();
+  const activeBreakpoint = useActiveBreakpoint3();
   const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
   const hasCustomUnitOption = sizeFieldProps.units.includes(EXTENDED_UNITS.custom);
-  useEffect10(() => {
+  useEffect11(() => {
     if (popupState && popupState.isOpen) {
       popupState.close();
     }
@@ -3583,7 +3636,7 @@ var UnstableSizeControl = createControl(
       placeholder: boundPropPlaceholder,
       restoreValue
     } = useBoundProp(sizePropTypeUtil4);
-    const lastNonAutoValue = useRef10(null);
+    const lastNonAutoValue = useRef11(null);
     const { sizeValue, placeholder } = resolveBoundPropValue(
       value ?? lastNonAutoValue.current,
       boundPropPlaceholder,
@@ -3640,7 +3693,7 @@ var isTransitioningFromExtendedUnit = (nextValue, previousValue) => {
 
 // src/controls/linked-dimensions-control.tsx
 var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
-  const gridRowRefs = [useRef11(null), useRef11(null)];
+  const gridRowRefs = [useRef12(null), useRef12(null)];
   const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil5);
   const {
     value: dimensionsValue,
@@ -3660,7 +3713,7 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
     return true;
   };
   const [isLinked, setIsLinked] = useState9(() => inferIsLinked());
-  const activeBreakpoint = useActiveBreakpoint3();
+  const activeBreakpoint = useActiveBreakpoint4();
   const isCurrentlyDimensions = dimensionsPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
   useLayoutEffect(() => {
     setIsLinked(inferIsLinked);
@@ -3833,7 +3886,7 @@ function getCssDimensionProps(label, isSiteRtl) {
 
 // src/controls/font-family-control/font-family-control.tsx
 import * as React66 from "react";
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon2, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover5, bindTrigger as bindTrigger4, Popover as Popover5, UnstableTag as UnstableTag2, usePopupState as usePopupState7 } from "@elementor/ui";
@@ -3841,7 +3894,7 @@ import { __ as __22 } from "@wordpress/i18n";
 
 // src/components/item-selector.tsx
 import * as React65 from "react";
-import { useCallback as useCallback3, useEffect as useEffect11, useState as useState10 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect12, useState as useState10 } from "react";
 import { PopoverBody, PopoverHeader as PopoverHeader3, PopoverMenuList, SearchField } from "@elementor/editor-ui";
 import { Box as Box9, Divider as Divider2, Link, Stack as Stack9, Typography as Typography5 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
@@ -3995,7 +4048,7 @@ var ItemList = ({
 };
 var useDebounce = (fn, delay) => {
   const [debouncedFn] = useState10(() => debounce(fn, delay));
-  useEffect11(() => () => debouncedFn.cancel(), [debouncedFn]);
+  useEffect12(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -4016,7 +4069,7 @@ var FontFamilyControl = createControl(
     } = useBoundProp(stringPropTypeUtil7);
     const popoverState = usePopupState7({ variant: "popover" });
     const isShowingPlaceholder = !fontFamily && placeholder;
-    const mapFontSubs = useMemo7(() => {
+    const mapFontSubs = useMemo8(() => {
       return fontFamilies.map(({ label, fonts }) => ({
         label,
         items: fonts
@@ -4097,7 +4150,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 import * as React72 from "react";
-import { useEffect as useEffect12, useMemo as useMemo9, useState as useState12 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo10, useState as useState12 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
@@ -4171,7 +4224,7 @@ var RestrictedLinkInfotip = ({
 
 // src/controls/query-control.tsx
 import * as React70 from "react";
-import { useMemo as useMemo8, useState as useState11 } from "react";
+import { useMemo as useMemo9, useState as useState11 } from "react";
 import {
   numberPropTypeUtil as numberPropTypeUtil2,
   queryPropTypeUtil,
@@ -4360,7 +4413,7 @@ var QueryControl = createControl((props) => {
     }
     debounceFetch({ ...params, term: newValue });
   };
-  const debounceFetch = useMemo8(
+  const debounceFetch = useMemo9(
     () => debounce2(
       (queryParams) => fetchOptions(url, queryParams).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -4458,7 +4511,7 @@ var LinkControl = createControl((props) => {
     getLinkInLinkRestriction(elementId, value ?? linkPlaceholder)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
-  const debouncedCheckRestriction = useMemo9(
+  const debouncedCheckRestriction = useMemo10(
     () => debounce3(() => {
       const newRestriction = getLinkInLinkRestriction(elementId, value ?? linkPlaceholder);
       if (newRestriction.shouldRestrict && isActive && !linkPlaceholder) {
@@ -4468,7 +4521,7 @@ var LinkControl = createControl((props) => {
     }, 300),
     [elementId, isActive, value, linkPlaceholder]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     debouncedCheckRestriction();
     const handleInlineLinkChanged = (event) => {
       const customEvent = event;
@@ -4648,17 +4701,17 @@ var HtmlTagControl = createControl((props) => {
 
 // src/controls/gap-control.tsx
 import * as React75 from "react";
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef12, useState as useState13 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef13, useState as useState13 } from "react";
 import {
   layoutDirectionPropTypeUtil,
   sizePropTypeUtil as sizePropTypeUtil6
 } from "@elementor/editor-props";
-import { useActiveBreakpoint as useActiveBreakpoint4 } from "@elementor/editor-responsive";
+import { useActiveBreakpoint as useActiveBreakpoint5 } from "@elementor/editor-responsive";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid11, Stack as Stack11, Tooltip as Tooltip7 } from "@elementor/ui";
 import { __ as __27 } from "@wordpress/i18n";
 var GapControl = ({ label }) => {
-  const stackRef = useRef12(null);
+  const stackRef = useRef13(null);
   const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil6);
   const {
     value: directionValue,
@@ -4679,7 +4732,7 @@ var GapControl = ({ label }) => {
   };
   const [isLinked, setIsLinked] = useState13(() => inferIsLinked());
   const isCurrentlyDirection = layoutDirectionPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
-  const activeBreakpoint = useActiveBreakpoint4();
+  const activeBreakpoint = useActiveBreakpoint5();
   useLayoutEffect2(() => {
     setIsLinked(inferIsLinked());
   }, [activeBreakpoint, isCurrentlyDirection]);
@@ -4773,7 +4826,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 import * as React76 from "react";
-import { useEffect as useEffect13, useState as useState14 } from "react";
+import { useEffect as useEffect14, useState as useState14 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
@@ -4806,7 +4859,7 @@ var AspectRatioControl = createControl(({ label }) => {
   const [selectedValue, setSelectedValue] = useState14(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  useEffect13(() => {
+  useEffect14(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -5276,7 +5329,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 import * as React82 from "react";
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
@@ -5298,7 +5351,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil12);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef13(null);
+  const rowRef = useRef14(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -5371,7 +5424,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 import * as React84 from "react";
-import { useRef as useRef14 } from "react";
+import { useRef as useRef15 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -5413,7 +5466,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil13);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef14(null);
+  const rowRef = useRef15(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -5448,7 +5501,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -5473,7 +5526,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef15({
+  const valuesHistory = useRef16({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -5718,7 +5771,7 @@ var BackgroundClipField = () => {
 
 // src/controls/repeatable-control.tsx
 import * as React87 from "react";
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
 import { Box as Box15 } from "@elementor/ui";
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -5739,11 +5792,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = useMemo10(
+    const childArrayPropTypeUtil2 = useMemo11(
       () => createArrayPropUtils(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = useMemo10(
+    const contextValue = useMemo11(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -5875,7 +5928,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React88 from "react";
-import { useMemo as useMemo11, useState as useState17 } from "react";
+import { useMemo as useMemo12, useState as useState17 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -5918,7 +5971,7 @@ var KeyValueControl = createControl((props = {}) => {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = useMemo11(
+  const [keyRegex, valueRegex, errMsg] = useMemo12(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -6047,7 +6100,7 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 import * as React102 from "react";
-import { useRef as useRef23 } from "react";
+import { useRef as useRef24 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
 import { bindTrigger as bindTrigger5, Box as Box19, IconButton as IconButton7, Tooltip as Tooltip8, Typography as Typography7, usePopupState as usePopupState8 } from "@elementor/ui";
@@ -6111,7 +6164,7 @@ import { __ as __44 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
 import * as React91 from "react";
-import { useRef as useRef16 } from "react";
+import { useRef as useRef17 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
 import { Grid as Grid21 } from "@elementor/ui";
@@ -6158,7 +6211,7 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
-  const rowRefs = [useRef16(null), useRef16(null), useRef16(null)];
+  const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
   return /* @__PURE__ */ React91.createElement(Grid21, { container: true, spacing: 1.5 }, /* @__PURE__ */ React91.createElement(PropProvider, { ...context }, /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React91.createElement(
     AxisRow,
     {
@@ -6173,7 +6226,7 @@ var Move = () => {
 
 // src/controls/transform-control/functions/rotate.tsx
 import * as React92 from "react";
-import { useRef as useRef17 } from "react";
+import { useRef as useRef18 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
 import { Grid as Grid22 } from "@elementor/ui";
@@ -6198,7 +6251,7 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
-  const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
+  const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
   return /* @__PURE__ */ React92.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(PropProvider, { ...context }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React92.createElement(
     AxisRow,
     {
@@ -6212,7 +6265,7 @@ var Rotate = () => {
 
 // src/controls/transform-control/functions/scale.tsx
 import * as React94 from "react";
-import { useRef as useRef18 } from "react";
+import { useRef as useRef19 } from "react";
 import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
 import { Grid as Grid24 } from "@elementor/ui";
@@ -6245,13 +6298,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
-  const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
+  const rowRefs = [useRef19(null), useRef19(null), useRef19(null)];
   return /* @__PURE__ */ React94.createElement(Grid24, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React94.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
 import * as React95 from "react";
-import { useRef as useRef19 } from "react";
+import { useRef as useRef20 } from "react";
 import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
 import { Grid as Grid25 } from "@elementor/ui";
@@ -6271,7 +6324,7 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
-  const rowRefs = [useRef19(null), useRef19(null), useRef19(null)];
+  const rowRefs = [useRef20(null), useRef20(null), useRef20(null)];
   return /* @__PURE__ */ React95.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React95.createElement(
     AxisRow,
     {
@@ -6284,7 +6337,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-import { useRef as useRef20 } from "react";
+import { useRef as useRef21 } from "react";
 import {
   moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
   rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
@@ -6316,7 +6369,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
-  const valuesHistory = useRef20({
+  const valuesHistory = useRef21({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -6460,7 +6513,7 @@ import { __ as __48 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 import * as React99 from "react";
-import { useRef as useRef21 } from "react";
+import { useRef as useRef22 } from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid26, Stack as Stack15 } from "@elementor/ui";
 import { __ as __46 } from "@wordpress/i18n";
@@ -6492,13 +6545,13 @@ var PerspectiveOriginControlProvider = () => {
   return /* @__PURE__ */ React99.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React99.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = useRef21(null);
+  const rowRef = useRef22(null);
   return /* @__PURE__ */ React99.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React99.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React99.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
 import * as React100 from "react";
-import { useRef as useRef22 } from "react";
+import { useRef as useRef23 } from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid27, Stack as Stack16 } from "@elementor/ui";
 import { __ as __47 } from "@wordpress/i18n";
@@ -6526,7 +6579,7 @@ var TransformOriginControl = () => {
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
-  const rowRef = useRef22(null);
+  const rowRef = useRef23(null);
   return /* @__PURE__ */ React100.createElement(PropProvider, { ...context }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React100.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React100.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
@@ -6574,7 +6627,7 @@ var SIZE10 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(transformPropTypeUtil);
-    const headerRef = useRef23(null);
+    const headerRef = useRef24(null);
     const popupState = usePopupState8({ variant: "popover" });
     return /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(
       TransformSettingsControl,
@@ -6654,7 +6707,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React105 from "react";
-import { useEffect as useEffect14, useMemo as useMemo14, useState as useState18 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo15, useState as useState18 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils2,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -6666,15 +6719,15 @@ import { __ as __52 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
 import * as React103 from "react";
-import { useMemo as useMemo12, useRef as useRef24 } from "react";
+import { useMemo as useMemo13, useRef as useRef25 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid28 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
-    const rowRef = useRef24(null);
+    const rowRef = useRef25(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = useMemo12(() => {
+    const currentSizeConfig = useMemo13(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -6887,7 +6940,7 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 import * as React104 from "react";
-import { useMemo as useMemo13, useRef as useRef25 } from "react";
+import { useMemo as useMemo14, useRef as useRef26 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
@@ -6974,9 +7027,9 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = useRef25(null);
+  const defaultRef = useRef26(null);
   const popoverState = usePopupState9({ variant: "popover" });
-  const disabledCategories = useMemo13(() => {
+  const disabledCategories = useMemo14(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -7205,11 +7258,11 @@ var TransitionRepeaterControl = createControl(
     const [recentlyUsedList, setRecentlyUsedList] = useState18([]);
     const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo14(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo15(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = useMemo14(() => {
+    const allowedTransitionSet = useMemo15(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -7220,7 +7273,7 @@ var TransitionRepeaterControl = createControl(
       });
       return set;
     }, [proInstalled]);
-    useEffect14(() => {
+    useEffect15(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -7232,10 +7285,10 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    useEffect14(() => {
+    useEffect15(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = useMemo14(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = useMemo15(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React105.createElement(
       RepeatableControl,
@@ -7341,14 +7394,14 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 
 // src/controls/inline-editing-control.tsx
 import * as React108 from "react";
-import { useCallback as useCallback4, useEffect as useEffect16, useMemo as useMemo15 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect17, useMemo as useMemo16 } from "react";
 import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import { Box as Box24 } from "@elementor/ui";
 import { debounce as debounce4 } from "@elementor/utils";
 
 // src/components/inline-editor.tsx
 import * as React107 from "react";
-import { useEffect as useEffect15, useRef as useRef26 } from "react";
+import { useEffect as useEffect16, useRef as useRef27 } from "react";
 import { Box as Box23 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
@@ -7402,8 +7455,8 @@ var InlineEditor = React107.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = useRef26(null);
-  const onBlurRef = useRef26(onBlur);
+  const containerRef = useRef27(null);
+  const onBlurRef = useRef27(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -7500,8 +7553,8 @@ var InlineEditor = React107.forwardRef((props, ref) => {
   return /* @__PURE__ */ React107.createElement(Box23, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React107.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = useRef26(false);
-  useEffect15(() => {
+  const hasMounted = useRef27(false);
+  useEffect16(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -7520,7 +7573,7 @@ var InlineEditingControl = createControl(
   }) => {
     const { value, setValue, placeholder } = useBoundProp(htmlV3PropTypeUtil);
     const content = stringPropTypeUtil17.extract(value?.content ?? null) ?? "";
-    const debouncedParse = useMemo15(
+    const debouncedParse = useMemo16(
       () => debounce4((html) => {
         const parsed = parseHtmlChildren(html);
         setValue({
@@ -7541,7 +7594,7 @@ var InlineEditingControl = createControl(
       },
       [setValue, value?.children, debouncedParse]
     );
-    useEffect16(() => () => debouncedParse.cancel(), [debouncedParse]);
+    useEffect17(() => () => debouncedParse.cancel(), [debouncedParse]);
     return /* @__PURE__ */ React108.createElement(ControlActions, null, /* @__PURE__ */ React108.createElement(
       Box24,
       {
@@ -7743,7 +7796,7 @@ var EmailFormActionControl = createControl(({ toPlaceholder }) => {
 
 // src/components/promotions/display-conditions-control.tsx
 import * as React111 from "react";
-import { useRef as useRef27 } from "react";
+import { useRef as useRef28 } from "react";
 import { SitemapIcon } from "@elementor/icons";
 import { IconButton as IconButton8, Stack as Stack18, Tooltip as Tooltip9 } from "@elementor/ui";
 import { __ as __54 } from "@wordpress/i18n";
@@ -7802,7 +7855,7 @@ var PromotionTrigger = forwardRef12(
 var ARIA_LABEL = __54("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = useRef27(null);
+  const triggerRef = useRef28(null);
   return /* @__PURE__ */ React111.createElement(
     Stack18,
     {
@@ -7834,14 +7887,14 @@ var DisplayConditionsControl = createControl(() => {
 
 // src/components/promotions/attributes-control.tsx
 import * as React112 from "react";
-import { useRef as useRef28 } from "react";
+import { useRef as useRef29 } from "react";
 import { PlusIcon as PlusIcon3 } from "@elementor/icons";
 import { Stack as Stack19, Tooltip as Tooltip10 } from "@elementor/ui";
 import { __ as __55 } from "@wordpress/i18n";
 var ARIA_LABEL2 = __55("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = useRef28(null);
+  const triggerRef = useRef29(null);
   return /* @__PURE__ */ React112.createElement(
     Stack19,
     {
@@ -7878,13 +7931,12 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React114 from "react";
-import { useEffect as useEffect17, useState as useState20 } from "react";
+import { useEffect as useEffect18, useState as useState20 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon4, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover8,
   bindTrigger as bindTrigger7,
   Box as Box27,
-  ClickAwayListener,
   IconButton as IconButton10,
   Infotip as Infotip4,
   Tooltip as Tooltip12,
@@ -8060,10 +8112,11 @@ var RepeaterItem = ({
     wrappedOnPopoverClose
   );
   const triggerProps = bindTrigger7(popoverState);
+  usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
   const duplicateLabel = __56("Duplicate", "elementor");
   const toggleLabel = propDisabled ? __56("Show", "elementor") : __56("Hide", "elementor");
   const removeLabel = __56("Remove", "elementor");
-  return /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(
+  return /* @__PURE__ */ React114.createElement(Box27, { sx: { display: "contents" } }, /* @__PURE__ */ React114.createElement(
     RepeaterTag,
     {
       disabled,
@@ -8080,21 +8133,13 @@ var RepeaterItem = ({
       startIcon,
       actions: /* @__PURE__ */ React114.createElement(React114.Fragment, null, showDuplicate && /* @__PURE__ */ React114.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(IconButton10, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React114.createElement(CopyIcon2, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React114.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(IconButton10, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React114.createElement(EyeOffIcon2, { fontSize: SIZE11 }) : /* @__PURE__ */ React114.createElement(EyeIcon2, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React114.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(IconButton10, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React114.createElement(XIcon4, { fontSize: SIZE11 }))))
     }
-  ), /* @__PURE__ */ React114.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React114.createElement(
-    ClickAwayListener,
-    {
-      mouseEvent: "onMouseDown",
-      touchEvent: "onTouchStart",
-      onClickAway: popoverProps.onClose
-    },
-    /* @__PURE__ */ React114.createElement(Box27, null, children({ anchorEl: ref }))
-  )));
+  ), /* @__PURE__ */ React114.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React114.createElement(Box27, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   const [ref, setRef] = useState20(null);
   const popoverState = usePopupState10({ variant: "popover" });
   const popoverProps = bindPopover8(popoverState);
-  useEffect17(() => {
+  useEffect18(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -8114,7 +8159,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React116 from "react";
-import { useEffect as useEffect19, useMemo as useMemo16, useRef as useRef30, useState as useState21 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo17, useRef as useRef31, useState as useState21 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -8140,7 +8185,7 @@ import { __ as __58 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
 import * as React115 from "react";
-import { useEffect as useEffect18, useRef as useRef29 } from "react";
+import { useEffect as useEffect19, useRef as useRef30 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack20, TextField as TextField10, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
 import { __ as __57 } from "@wordpress/i18n";
@@ -8153,8 +8198,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = useRef29(null);
-  useEffect18(() => {
+  const inputRef = useRef30(null);
+  useEffect19(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -8206,14 +8251,14 @@ var UrlPopover = ({
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
   const [urlValue, setUrlValue] = useState21("");
   const [openInNewTab, setOpenInNewTab] = useState21(false);
-  const toolbarRef = useRef30(null);
+  const toolbarRef = useRef31(null);
   const linkPopupState = usePopupState11({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = useEditorState({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo16(() => {
+  const formatButtonsList = useMemo17(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -8250,7 +8295,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  useEffect19(() => {
+  useEffect20(() => {
     editor?.commands?.focus();
   }, [editor]);
   return /* @__PURE__ */ React116.createElement(
@@ -8560,7 +8605,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo18 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 var getFontControlConfig = () => {
   const { controls } = getElementorConfig();
@@ -8568,7 +8613,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return useMemo17(() => {
+  return useMemo18(() => {
     if (!groups || !options) {
       return [];
     }