@elementor/editor-controls 4.3.0-beta3 → 4.3.1

package/dist/index.mjs

@@ -2929,8 +2929,24 @@ var ToggleControl = createControl(
 
 // src/controls/number-control.tsx
 import * as React57 from "react";
+import { useRef as useRef9, useState as useState8 } from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
 import { InputAdornment as InputAdornment3, Typography as Typography4 } from "@elementor/ui";
+
+// src/utils/number-value.ts
+var isEmptyDraft = (raw) => raw.trim() === "";
+var parseNumberDraft = (raw, shouldForceInt = false) => {
+  const trimmed = raw.trim();
+  if (trimmed === "") {
+    return null;
+  }
+  const parsed = shouldForceInt ? parseInt(trimmed, 10) : Number(trimmed);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+var isInRange = (value, min, max) => value >= min && value <= max;
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+// src/controls/number-control.tsx
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
 var renderSuffix = (propType) => {
   if (propType.meta?.suffix) {
@@ -2941,31 +2957,63 @@ var renderSuffix = (propType) => {
 var NumberControl = createControl(
   ({
     placeholder: labelPlaceholder,
-    max = Number.MAX_SAFE_INTEGER,
-    min = -Number.MAX_SAFE_INTEGER,
-    step = 1,
+    max: maxProp,
+    min: minProp,
+    step: stepProp,
     shouldForceInt = false,
     startIcon,
     disabled: inputDisabled
   }) => {
+    const max = maxProp ?? Number.MAX_SAFE_INTEGER;
+    const min = minProp ?? -Number.MAX_SAFE_INTEGER;
+    const step = stepProp ?? 1;
     const { value, setValue, placeholder, disabled, restoreValue, propType } = useBoundProp(numberPropTypeUtil);
-    const handleChange = (event) => {
-      const {
-        value: eventValue,
-        validity: { valid: isInputValid }
-      } = event.target;
-      let updatedValue;
-      if (isEmptyOrNaN(eventValue)) {
-        updatedValue = null;
-      } else {
-        const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
-        updatedValue = Math.min(
-          Math.max(formattedValue, min ?? Number.MIN_SAFE_INTEGER),
-          max ?? Number.MAX_SAFE_INTEGER
-        );
+    const [draft, setDraft] = useState8(null);
+    const committedNullOnInputRef = useRef9(false);
+    const handleInput = (event) => {
+      const raw = event.target.value;
+      setDraft(raw);
+      if (isEmptyDraft(raw)) {
+        if (!propType.settings.required) {
+          setValue(null);
+          committedNullOnInputRef.current = true;
+        }
+        return;
+      }
+      committedNullOnInputRef.current = false;
+      const parsed = parseNumberDraft(raw, shouldForceInt);
+      if (parsed === null) {
+        return;
+      }
+      if (isInRange(parsed, min, max)) {
+        setValue(parsed);
+      }
+    };
+    const handleBlur = () => {
+      const raw = draft;
+      const committedNullOnInput = committedNullOnInputRef.current;
+      committedNullOnInputRef.current = false;
+      setDraft(null);
+      restoreValue();
+      if (raw === null) {
+        return;
+      }
+      if (isEmptyDraft(raw)) {
+        if (!propType.settings.required && !committedNullOnInput) {
+          setValue(null);
+        }
+        return;
+      }
+      const parsed = parseNumberDraft(raw, shouldForceInt);
+      if (parsed === null) {
+        return;
+      }
+      if (isInRange(parsed, min, max)) {
+        return;
       }
-      setValue(updatedValue, void 0, { validation: () => isInputValid });
+      setValue(clamp(parsed, min, max));
     };
+    const displayValue = draft ?? (isEmptyOrNaN(value) ? "" : String(value));
     return /* @__PURE__ */ React57.createElement(ControlActions, null, /* @__PURE__ */ React57.createElement(
       NumberInput,
       {
@@ -2973,11 +3021,11 @@ var NumberControl = createControl(
         type: "number",
         fullWidth: true,
         disabled: inputDisabled ?? disabled,
-        value: isEmptyOrNaN(value) ? "" : value,
-        onInput: handleChange,
-        onBlur: restoreValue,
+        value: displayValue,
+        onInput: handleInput,
+        onBlur: handleBlur,
         placeholder: labelPlaceholder ?? (isEmptyOrNaN(placeholder) ? "" : String(placeholder)),
-        inputProps: { step, min },
+        inputProps: { step, min, ...maxProp !== null && maxProp !== void 0 && { max } },
         InputProps: {
           startAdornment: startIcon ? /* @__PURE__ */ React57.createElement(InputAdornment3, { position: "start", disabled: inputDisabled ?? disabled }, startIcon) : void 0,
           endAdornment: renderSuffix(propType)
@@ -2989,7 +3037,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 import * as React58 from "react";
-import { useId as useId2, useRef as useRef9 } from "react";
+import { useId as useId2, useRef as useRef10 } 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({
@@ -3001,7 +3049,7 @@ function EqualUnequalSizesControl({
 }) {
   const popupId = useId2();
   const popupState = usePopupState4({ variant: "popover", popupId });
-  const rowRefs = [useRef9(null), useRef9(null)];
+  const rowRefs = [useRef10(null), useRef10(null)];
   const { propType: multiSizePropType, disabled: multiSizeDisabled } = useBoundProp(multiSizePropTypeUtil);
   const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
   const getMultiSizeValues = (sourceValue) => {
@@ -3096,7 +3144,7 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
 
 // src/controls/linked-dimensions-control.tsx
 import * as React65 from "react";
-import { useLayoutEffect, useRef as useRef12, useState as useState9 } from "react";
+import { useLayoutEffect, useRef as useRef13, useState as useState10 } from "react";
 import {
   dimensionsPropTypeUtil,
   sizePropTypeUtil as sizePropTypeUtil5
@@ -3108,7 +3156,7 @@ import { __ as __20, sprintf as sprintf2 } from "@wordpress/i18n";
 
 // src/controls/size-control/unstable-size-control.tsx
 import * as React64 from "react";
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 
 // src/controls/size-control/size-component.tsx
@@ -3235,9 +3283,9 @@ var sanitizeSize = (size) => {
 };
 
 // src/controls/size-control/hooks/use-unit-sync.ts
-import { useEffect as useEffect9, useState as useState8 } from "react";
+import { useEffect as useEffect9, useState as useState9 } from "react";
 var useUnitSync = ({ sizeValue, setUnit, persistWhen }) => {
-  const [state, setState] = useState8(sizeValue.unit);
+  const [state, setState] = useState9(sizeValue.unit);
   useEffect9(() => {
     if (sizeValue.unit !== state) {
       setState(sizeValue.unit);
@@ -3500,14 +3548,14 @@ var shouldHighlightUnit = (value) => {
 
 // src/controls/size-control/ui/text-field-popover.tsx
 import * as React62 from "react";
-import { useEffect as useEffect10, useRef as useRef10 } from "react";
+import { useEffect as useEffect10, useRef as useRef11 } 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 = useRef10(null);
+  const inputRef = useRef11(null);
   useEffect10(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => {
@@ -3707,7 +3755,7 @@ var UnstableSizeControl = createControl(
       placeholder: boundPropPlaceholder,
       restoreValue
     } = useBoundProp(sizePropTypeUtil4);
-    const lastNonAutoValue = useRef11(null);
+    const lastNonAutoValue = useRef12(null);
     const { sizeValue, placeholder } = resolveBoundPropValue(
       value ?? lastNonAutoValue.current,
       boundPropPlaceholder,
@@ -3764,7 +3812,7 @@ var isTransitioningFromExtendedUnit = (nextValue, previousValue) => {
 
 // src/controls/linked-dimensions-control.tsx
 var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
-  const gridRowRefs = [useRef12(null), useRef12(null)];
+  const gridRowRefs = [useRef13(null), useRef13(null)];
   const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil5);
   const {
     value: dimensionsValue,
@@ -3783,7 +3831,7 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
     }
     return true;
   };
-  const [isLinked, setIsLinked] = useState9(() => inferIsLinked());
+  const [isLinked, setIsLinked] = useState10(() => inferIsLinked());
   const activeBreakpoint = useActiveBreakpoint4();
   const isCurrentlyDimensions = dimensionsPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
   useLayoutEffect(() => {
@@ -3965,7 +4013,7 @@ import { __ as __22 } from "@wordpress/i18n";
 
 // src/components/item-selector.tsx
 import * as React66 from "react";
-import { useCallback as useCallback3, useEffect as useEffect12, useState as useState10 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect12, useState as useState11 } 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";
@@ -4004,7 +4052,7 @@ var ItemSelector = ({
   footer,
   categoryItemContentTemplate
 }) => {
-  const [searchValue, setSearchValue] = useState10("");
+  const [searchValue, setSearchValue] = useState11("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
   const IconComponent = icon;
   const handleSearch = (value) => {
@@ -4118,7 +4166,7 @@ var ItemList = ({
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = useState10(() => debounce(fn, delay));
+  const [debouncedFn] = useState11(() => debounce(fn, delay));
   useEffect12(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
@@ -4221,7 +4269,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 import * as React73 from "react";
-import { useEffect as useEffect14, useState as useState12 } from "react";
+import { useEffect as useEffect14, useState as useState13 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
@@ -4449,7 +4497,7 @@ function factoryFilter(newValue, options, minInputLength) {
 }
 
 // src/hooks/use-query-autocomplete.ts
-import { useEffect as useEffect13, useMemo as useMemo9, useState as useState11 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo9, useState as useState12 } from "react";
 import { numberPropTypeUtil as numberPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { debounce as debounce2 } from "@elementor/utils";
@@ -4461,7 +4509,7 @@ function useQueryAutocomplete({
   excludeIds
 }) {
   const excludeIdSet = useMemo9(() => new Set((excludeIds ?? []).map(String)), [excludeIds]);
-  const [options, setOptions] = useState11(
+  const [options, setOptions] = useState12(
     generateFirstLoadedOption(initialQueryValue)
   );
   const debounceFetch = useMemo9(
@@ -4619,7 +4667,7 @@ var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const linkPlaceholder = propContext.placeholder;
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isActive, setIsActive] = useState12(!!value || !!linkPlaceholder);
+  const [isActive, setIsActive] = useState13(!!value || !!linkPlaceholder);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -4629,37 +4677,43 @@ var LinkControl = createControl((props) => {
     label = __25("Link", "elementor"),
     ariaLabel
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState12(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState13(
     getLinkInLinkRestriction(elementId, value ?? linkPlaceholder)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
-  const debouncedCheckRestriction = useDebouncedCallback(() => {
+  const syncLinkRestriction = (clearActiveLinkWhen = "restricted") => {
     const newRestriction = getLinkInLinkRestriction(elementId, value ?? linkPlaceholder);
-    if (newRestriction.shouldRestrict && isActive && !linkPlaceholder) {
+    const becameRestricted = newRestriction.shouldRestrict && !linkInLinkRestriction.shouldRestrict;
+    const shouldClearActiveLink = clearActiveLinkWhen === "newly-restricted" ? becameRestricted : newRestriction.shouldRestrict;
+    if (shouldClearActiveLink && isActive && !linkPlaceholder) {
       setIsActive(false);
       if (value !== null) {
         setValue(null);
       }
     }
     setLinkInLinkRestriction((prev) => isSameRestriction(prev, newRestriction) ? prev : newRestriction);
-  }, 300);
+  };
+  const debouncedSyncLinkRestriction = useDebouncedCallback(
+    (clearActiveLinkWhen = "restricted") => syncLinkRestriction(clearActiveLinkWhen),
+    300
+  );
   useListenTo(
     commandEndEvent("document/elements/set-settings"),
     () => {
-      debouncedCheckRestriction();
+      debouncedSyncLinkRestriction("newly-restricted");
     },
-    [debouncedCheckRestriction]
+    [debouncedSyncLinkRestriction]
   );
   useEffect14(() => {
-    debouncedCheckRestriction();
+    debouncedSyncLinkRestriction();
     const handleInlineLinkChanged = () => {
-      debouncedCheckRestriction();
+      debouncedSyncLinkRestriction();
     };
     window.addEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
     return () => {
       window.removeEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
     };
-  }, [elementId, debouncedCheckRestriction]);
+  }, [elementId, debouncedSyncLinkRestriction]);
   const onEnabledChange = () => {
     setLinkInLinkRestriction(getLinkInLinkRestriction(elementId, value ?? linkPlaceholder));
     if (linkInLinkRestriction.shouldRestrict && !isActive) {
@@ -4904,7 +4958,7 @@ function extractChips(value) {
 
 // src/controls/query-filter-repeater-control.tsx
 import * as React77 from "react";
-import { useMemo as useMemo11, useRef as useRef13 } from "react";
+import { useMemo as useMemo11, useRef as useRef14 } from "react";
 import { useSelectedElementSettings } from "@elementor/editor-elements";
 import {
   extractValue,
@@ -5006,7 +5060,7 @@ var ItemContent = ({
   chipsPlaceholder
 }) => {
   const propContext = useBoundProp(queryFilterPropTypeUtil);
-  const snapshotsByKeyRef = useRef13({});
+  const snapshotsByKeyRef = useRef14({});
   const handleValueChange = (nextValue, options, meta) => {
     if (meta?.bind !== "key") {
       propContext.setValue(nextValue, options, meta);
@@ -5078,7 +5132,7 @@ function getUsedKeys(items2) {
 
 // src/controls/gap-control.tsx
 import * as React78 from "react";
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef14, useState as useState13 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef15, useState as useState14 } from "react";
 import {
   layoutDirectionPropTypeUtil,
   sizePropTypeUtil as sizePropTypeUtil6
@@ -5088,7 +5142,7 @@ import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/ico
 import { Grid as Grid12, Stack as Stack11, Tooltip as Tooltip7 } from "@elementor/ui";
 import { __ as __29 } from "@wordpress/i18n";
 var GapControl = ({ label }) => {
-  const stackRef = useRef14(null);
+  const stackRef = useRef15(null);
   const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil6);
   const {
     value: directionValue,
@@ -5107,7 +5161,7 @@ var GapControl = ({ label }) => {
     }
     return true;
   };
-  const [isLinked, setIsLinked] = useState13(() => inferIsLinked());
+  const [isLinked, setIsLinked] = useState14(() => inferIsLinked());
   const isCurrentlyDirection = layoutDirectionPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
   const activeBreakpoint = useActiveBreakpoint5();
   useLayoutEffect2(() => {
@@ -5203,7 +5257,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 import * as React79 from "react";
-import { useEffect as useEffect15, useState as useState14 } from "react";
+import { useEffect as useEffect15, useState as useState15 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
@@ -5230,10 +5284,10 @@ var AspectRatioControl = createControl(({ label }) => {
   const aspectRatioValue = currentPropValue ?? externalPlaceholder;
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
-  const [isCustom, setIsCustom] = useState14(isCustomSelected);
-  const [customWidth, setCustomWidth] = useState14(initialWidth);
-  const [customHeight, setCustomHeight] = useState14(initialHeight);
-  const [selectedValue, setSelectedValue] = useState14(
+  const [isCustom, setIsCustom] = useState15(isCustomSelected);
+  const [customWidth, setCustomWidth] = useState15(initialWidth);
+  const [customHeight, setCustomHeight] = useState15(initialHeight);
+  const [selectedValue, setSelectedValue] = useState15(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
   useEffect15(() => {
@@ -5323,7 +5377,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React88 from "react";
-import { useEffect as useEffect16, useRef as useRef16, useState as useState18 } from "react";
+import { useEffect as useEffect16, useRef as useRef17, useState as useState19 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
 import { Box as Box20, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack17, styled as styled11, usePopupState as usePopupState10 } from "@elementor/ui";
@@ -5332,7 +5386,7 @@ import { __ as __38 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
 import * as React80 from "react";
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import {
   Button as Button4,
   CircularProgress as CircularProgress2,
@@ -5358,7 +5412,7 @@ var ADMIN_FAILED_CONTENT_TEXT_PT2 = __31(
 var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
-  const [isError, setIsError] = useState15(false);
+  const [isError, setIsError] = useState16(false);
   const onClose = (enabled) => {
     props.onClose(enabled);
     setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -5407,7 +5461,7 @@ function measureIconLibraryAnchor(container, buttonGroup) {
 
 // src/controls/icon-library/icon-library-popover.tsx
 import * as React85 from "react";
-import { useMemo as useMemo12, useState as useState17 } from "react";
+import { useMemo as useMemo12, useState as useState18 } from "react";
 import {
   PopoverBody as PopoverBody2,
   PopoverHeader as PopoverHeader4,
@@ -5823,7 +5877,7 @@ var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ Rea
 
 // src/controls/icon-library/icon-library-grid.tsx
 import * as React83 from "react";
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef15, useState as useState16 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef16, useState as useState17 } from "react";
 import { Box as Box16, Tooltip as Tooltip9, useTheme as useTheme3 } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { __ as __33 } from "@wordpress/i18n";
@@ -5861,12 +5915,12 @@ var IconLibraryGrid = ({
   noResultsComponent
 }) => {
   const theme = useTheme3();
-  const containerRef = useRef15(null);
-  const cellRefs = useRef15(/* @__PURE__ */ new Map());
-  const shouldRestoreFocusRef = useRef15(false);
+  const containerRef = useRef16(null);
+  const cellRefs = useRef16(/* @__PURE__ */ new Map());
+  const shouldRestoreFocusRef = useRef16(false);
   const selectedIndex = items2.findIndex((item) => item.id === selectedValue);
-  const [focusedIndex, setFocusedIndex] = useState16(selectedIndex >= 0 ? selectedIndex : 0);
-  const [{ columnCount, cellSize }, setGridMetrics] = useState16(() => getGridMetrics(0, 0, 0));
+  const [focusedIndex, setFocusedIndex] = useState17(selectedIndex >= 0 ? selectedIndex : 0);
+  const [{ columnCount, cellSize }, setGridMetrics] = useState17(() => getGridMetrics(0, 0, 0));
   const rowCount = Math.ceil(items2.length / columnCount);
   const virtualizer = useVirtualizer({
     count: rowCount,
@@ -6242,7 +6296,7 @@ var IconLibraryPopover = ({
     handleChange: handleSearchChange,
     setImmediateValue: setSearchValue
   } = useDebounceState({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
-  const [activeLibraries, setActiveLibraries] = useState17([]);
+  const [activeLibraries, setActiveLibraries] = useState18([]);
   const [storedView, setStoredView] = useSessionStorage2(
     ICON_LIBRARY_VIEW_STORAGE_KEY,
     ICON_LIBRARY_VIEW_STORAGE_PREFIX
@@ -6599,11 +6653,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState18(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState19(false);
   const iconLibraryPopoverState = usePopupState10({ variant: "popover" });
-  const controlContainerRef = useRef16(null);
-  const buttonGroupRef = useRef16(null);
-  const [iconLibraryAnchor, setIconLibraryAnchor] = useState18(null);
+  const controlContainerRef = useRef17(null);
+  const buttonGroupRef = useRef17(null);
+  const [iconLibraryAnchor, setIconLibraryAnchor] = useState19(null);
   const { isAdmin } = useCurrentUserCapabilities();
   const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
   const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
@@ -6969,7 +7023,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 import * as React92 from "react";
-import { useRef as useRef17 } from "react";
+import { useRef as useRef18 } from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
@@ -6991,7 +7045,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil16);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef17(null);
+  const rowRef = useRef18(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -7064,7 +7118,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 import * as React94 from "react";
-import { useRef as useRef18 } from "react";
+import { useRef as useRef19 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -7106,7 +7160,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil17);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef18(null);
+  const rowRef = useRef19(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -7141,7 +7195,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef19 } from "react";
+import { useRef as useRef20 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -7166,7 +7220,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef19({
+  const valuesHistory = useRef20({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -7570,7 +7624,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React98 from "react";
-import { useMemo as useMemo14, useState as useState19 } from "react";
+import { useMemo as useMemo14, useState as useState20 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -7601,9 +7655,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState19("");
-  const [valueError, setValueError] = useState19("");
-  const [sessionState, setSessionState] = useState19({
+  const [keyError, setKeyError] = useState20("");
+  const [valueError, setValueError] = useState20("");
+  const [sessionState, setSessionState] = useState20({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -7745,7 +7799,7 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 import * as React112 from "react";
-import { useRef as useRef27 } from "react";
+import { useRef as useRef28 } 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 Box26, IconButton as IconButton8, Tooltip as Tooltip11, Typography as Typography11, usePopupState as usePopupState11 } from "@elementor/ui";
@@ -7809,7 +7863,7 @@ import { __ as __52 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
 import * as React101 from "react";
-import { useRef as useRef20 } from "react";
+import { useRef as useRef21 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
 import { Grid as Grid22 } from "@elementor/ui";
@@ -7856,7 +7910,7 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
-  const rowRefs = [useRef20(null), useRef20(null), useRef20(null)];
+  const rowRefs = [useRef21(null), useRef21(null), useRef21(null)];
   return /* @__PURE__ */ React101.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React101.createElement(PropProvider, { ...context }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React101.createElement(
     AxisRow,
     {
@@ -7871,7 +7925,7 @@ var Move = () => {
 
 // src/controls/transform-control/functions/rotate.tsx
 import * as React102 from "react";
-import { useRef as useRef21 } from "react";
+import { useRef as useRef22 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
 import { Grid as Grid23 } from "@elementor/ui";
@@ -7896,7 +7950,7 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
-  const rowRefs = [useRef21(null), useRef21(null), useRef21(null)];
+  const rowRefs = [useRef22(null), useRef22(null), useRef22(null)];
   return /* @__PURE__ */ React102.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
     AxisRow,
     {
@@ -7910,7 +7964,7 @@ var Rotate = () => {
 
 // src/controls/transform-control/functions/scale.tsx
 import * as React104 from "react";
-import { useRef as useRef22 } from "react";
+import { useRef as useRef23 } 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 Grid25 } from "@elementor/ui";
@@ -7943,13 +7997,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
-  const rowRefs = [useRef22(null), useRef22(null), useRef22(null)];
+  const rowRefs = [useRef23(null), useRef23(null), useRef23(null)];
   return /* @__PURE__ */ React104.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(PropProvider, { ...context }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React104.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
 import * as React105 from "react";
-import { useRef as useRef23 } from "react";
+import { useRef as useRef24 } from "react";
 import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
 import { Grid as Grid26 } from "@elementor/ui";
@@ -7969,7 +8023,7 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
-  const rowRefs = [useRef23(null), useRef23(null), useRef23(null)];
+  const rowRefs = [useRef24(null), useRef24(null), useRef24(null)];
   return /* @__PURE__ */ React105.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(
     AxisRow,
     {
@@ -7982,7 +8036,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-import { useRef as useRef24 } from "react";
+import { useRef as useRef25 } from "react";
 import {
   moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
   rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
@@ -8014,7 +8068,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
-  const valuesHistory = useRef24({
+  const valuesHistory = useRef25({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -8158,7 +8212,7 @@ import { __ as __56 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 import * as React109 from "react";
-import { useRef as useRef25 } from "react";
+import { useRef as useRef26 } from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid27, Stack as Stack19 } from "@elementor/ui";
 import { __ as __54 } from "@wordpress/i18n";
@@ -8190,13 +8244,13 @@ var PerspectiveOriginControlProvider = () => {
   return /* @__PURE__ */ React109.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React109.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = useRef25(null);
+  const rowRef = useRef26(null);
   return /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React109.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React109.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
 import * as React110 from "react";
-import { useRef as useRef26 } from "react";
+import { useRef as useRef27 } from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid28, Stack as Stack20 } from "@elementor/ui";
 import { __ as __55 } from "@wordpress/i18n";
@@ -8224,7 +8278,7 @@ var TransformOriginControl = () => {
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
-  const rowRef = useRef26(null);
+  const rowRef = useRef27(null);
   return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
@@ -8272,7 +8326,7 @@ var SIZE11 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(transformPropTypeUtil);
-    const headerRef = useRef27(null);
+    const headerRef = useRef28(null);
     const popupState = usePopupState11({ variant: "popover" });
     return /* @__PURE__ */ React112.createElement(PropProvider, { ...context }, /* @__PURE__ */ React112.createElement(
       TransformSettingsControl,
@@ -8352,7 +8406,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React115 from "react";
-import { useEffect as useEffect17, useMemo as useMemo17, useState as useState20 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo17, useState as useState21 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils3,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -8364,13 +8418,13 @@ import { __ as __60 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
 import * as React113 from "react";
-import { useMemo as useMemo15, useRef as useRef28 } from "react";
+import { useMemo as useMemo15, useRef as useRef29 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid29 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
-    const rowRef = useRef28(null);
+    const rowRef = useRef29(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
     const currentSizeConfig = useMemo15(() => {
       switch (value.selection.$$type) {
@@ -8585,7 +8639,7 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 import * as React114 from "react";
-import { useMemo as useMemo16, useRef as useRef29 } from "react";
+import { useMemo as useMemo16, useRef as useRef30 } 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";
@@ -8671,7 +8725,7 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = useRef29(null);
+  const defaultRef = useRef30(null);
   const popoverState = usePopupState12({ variant: "popover" });
   const disabledCategories = useMemo16(() => {
     return new Set(
@@ -8899,7 +8953,7 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState20([]);
+    const [recentlyUsedList, setRecentlyUsedList] = useState21([]);
     const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
     const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo17(
@@ -9215,13 +9269,13 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 
 // src/controls/inline-editing-control.tsx
 import * as React124 from "react";
-import { useCallback as useCallback4, useState as useState22 } from "react";
+import { useCallback as useCallback4, useState as useState23 } from "react";
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
 import { Box as Box32 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
 import * as React121 from "react";
-import { useEffect as useEffect18, useRef as useRef30 } from "react";
+import { useEffect as useEffect18, useRef as useRef31 } from "react";
 import { Box as Box30 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
@@ -9284,8 +9338,8 @@ var InlineEditor = React121.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = useRef30(null);
-  const onBlurRef = useRef30(onBlur);
+  const containerRef = useRef31(null);
+  const onBlurRef = useRef31(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -9383,7 +9437,7 @@ var InlineEditor = React121.forwardRef((props, ref) => {
   return /* @__PURE__ */ React121.createElement(Box30, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = useRef30(false);
+  const hasMounted = useRef31(false);
   useEffect18(() => {
     if (hasMounted.current) {
       callback();
@@ -9395,7 +9449,7 @@ var useOnUpdate = (callback, dependencies) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React123 from "react";
-import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef32, useState as useState21 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef33, useState as useState22 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -9421,7 +9475,7 @@ import { __ as __64 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
 import * as React122 from "react";
-import { useEffect as useEffect19, useRef as useRef31 } from "react";
+import { useEffect as useEffect19, useRef as useRef32 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack23, TextField as TextField11, ToggleButton as ToggleButton4, Tooltip as Tooltip12 } from "@elementor/ui";
 import { __ as __63 } from "@wordpress/i18n";
@@ -9434,7 +9488,7 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = useRef31(null);
+  const inputRef = useRef32(null);
   useEffect19(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -9490,9 +9544,9 @@ var InlineEditorToolbar = ({
   sx = {},
   inControlPanel = false
 }) => {
-  const [urlValue, setUrlValue] = useState21("");
-  const [openInNewTab, setOpenInNewTab] = useState21(false);
-  const toolbarRef = useRef32(null);
+  const [urlValue, setUrlValue] = useState22("");
+  const [openInNewTab, setOpenInNewTab] = useState22(false);
+  const toolbarRef = useRef33(null);
   const linkPopupState = usePopupState13({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = useEditorState({
@@ -9717,7 +9771,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
   const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
   const { value: rawValue } = usePropKeyContext();
   const content = value ?? extractInlineHtmlContent(rawValue);
-  const [editor, setEditor] = useState22(null);
+  const [editor, setEditor] = useState23(null);
   const handleChange = useCallback4(
     (newValue) => {
       const html = newValue ?? "";
@@ -9900,7 +9954,7 @@ function useFormFieldSuggestions(options) {
 
 // src/controls/email-form-action-control/email-chips-field.tsx
 import * as React125 from "react";
-import { useMemo as useMemo19, useState as useState23 } from "react";
+import { useMemo as useMemo19, useState as useState24 } from "react";
 import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
 import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField12 } from "@elementor/ui";
 
@@ -9938,7 +9992,7 @@ function resolveMention(raw, suggestions) {
 }
 var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
-  const [inputValue, setInputValue] = useState23("");
+  const [inputValue, setInputValue] = useState24("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => stringPropTypeUtil23.extract(item)).filter((val) => val !== null);
   const suggestionOptions = useMemo19(
@@ -10121,7 +10175,7 @@ var AttachmentTypeControl = createControl(({ label, options }) => {
 
 // src/controls/notice-control.tsx
 import * as React130 from "react";
-import { useState as useState24 } from "react";
+import { useState as useState25 } from "react";
 import { ajax } from "@elementor/editor-v1-adapters";
 import { BulbIcon } from "@elementor/icons";
 import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle4, styled as styled13, Typography as Typography13 } from "@elementor/ui";
@@ -10139,7 +10193,7 @@ var markNoticeAsDismissedInSession = (dismissId) => {
 };
 var NoticeControl = createControl(
   ({ noticeType = "info", heading, content, dismissible, buttonText, buttonUrl }) => {
-    const [isDismissed, setIsDismissed] = useState24(false);
+    const [isDismissed, setIsDismissed] = useState25(false);
     if (isDismissed || !content) {
       return null;
     }
@@ -10222,14 +10276,14 @@ var GridSpanControl = createControl(
 
 // src/components/promotions/display-conditions-control.tsx
 import * as React133 from "react";
-import { useRef as useRef33 } from "react";
+import { useRef as useRef34 } from "react";
 import { SitemapIcon } from "@elementor/icons";
 import { IconButton as IconButton10, Stack as Stack26, Tooltip as Tooltip14 } from "@elementor/ui";
 import { __ as __68 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
 import * as React132 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState25 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState26 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box34 } from "@elementor/ui";
 function getV4Promotion(key) {
@@ -10237,7 +10291,7 @@ function getV4Promotion(key) {
 }
 var PromotionTrigger = forwardRef12(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = useState25(false);
+    const [isOpen, setIsOpen] = useState26(false);
     const promotion = getV4Promotion(promotionKey);
     const toggle = useCallback5(() => {
       setIsOpen((prev) => {
@@ -10281,7 +10335,7 @@ var PromotionTrigger = forwardRef12(
 var ARIA_LABEL = __68("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = useRef33(null);
+  const triggerRef = useRef34(null);
   return /* @__PURE__ */ React133.createElement(
     Stack26,
     {
@@ -10313,14 +10367,14 @@ var DisplayConditionsControl = createControl(() => {
 
 // src/components/promotions/attributes-control.tsx
 import * as React134 from "react";
-import { useRef as useRef34 } from "react";
+import { useRef as useRef35 } from "react";
 import { PlusIcon as PlusIcon4 } from "@elementor/icons";
 import { Stack as Stack27, Tooltip as Tooltip15 } from "@elementor/ui";
 import { __ as __69 } from "@wordpress/i18n";
 var ARIA_LABEL2 = __69("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = useRef34(null);
+  const triggerRef = useRef35(null);
   return /* @__PURE__ */ React134.createElement(
     Stack27,
     {
@@ -10357,7 +10411,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React136 from "react";
-import { useEffect as useEffect21, useState as useState26 } from "react";
+import { useEffect as useEffect21, useState as useState27 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover9,
@@ -10387,7 +10441,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = useState26(initialOpenItem);
+  const [openItem, setOpenItem] = useState27(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -10563,7 +10617,7 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(Box35, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = useState26(null);
+  const [ref, setRef] = useState27(null);
   const popoverState = usePopupState14({ variant: "popover" });
   const popoverProps = bindPopover9(popoverState);
   useEffect21(() => {