@elementor/editor-controls 4.1.0-734 → 4.1.0-736

package/dist/index.js

@@ -1158,7 +1158,7 @@ var SizeControl = createControl(
         popupState.open(anchorRef?.current);
       }
     };
-    const maybeClosePopup = React20.useCallback(() => {
+    const maybeClosePopup = (0, import_react13.useCallback)(() => {
       if (popupState && popupState.isOpen) {
         popupState.close();
       }
@@ -1314,7 +1314,7 @@ var Control = (0, import_react14.forwardRef)(({ bind, label, children }, ref) =>
 
 // src/controls/box-shadow-repeater-control.tsx
 var React39 = __toESM(require("react"));
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_editor_props10 = require("@elementor/editor-props");
 var import_ui30 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
@@ -1375,8 +1375,8 @@ var ItemContext = (0, import_react15.createContext)({
 var RepeaterContext = (0, import_react16.createContext)(null);
 var EMPTY_OPEN_ITEM = -1;
 var useRepeaterContext = () => {
-  const context = React24.useContext(RepeaterContext);
-  const itemContext = React24.useContext(ItemContext);
+  const context = (0, import_react16.useContext)(RepeaterContext);
+  const itemContext = (0, import_react16.useContext)(ItemContext);
   if (!context) {
     throw new Error("useRepeaterContext must be used within a RepeaterContextProvider");
   }
@@ -1398,7 +1398,7 @@ var RepeaterContextProvider = ({
   const [uniqueKeys, setUniqueKeys] = (0, import_react16.useState)(() => {
     return items2?.map(() => generateUniqueKey()) ?? [];
   });
-  React24.useEffect(() => {
+  (0, import_react16.useEffect)(() => {
     const nextLength = items2?.length ?? 0;
     setUniqueKeys((prev) => {
       const prevLength = prev.length;
@@ -1619,6 +1619,7 @@ var ItemsContainer = ({
 
 // src/components/control-repeater/items/item.tsx
 var React29 = __toESM(require("react"));
+var import_react19 = require("react");
 var import_ui21 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 
@@ -1668,7 +1669,7 @@ var Item = ({ Label: Label3, Icon, actions }) => {
     value,
     isItemDisabled: isItemDisabled2
   } = useRepeaterContext();
-  const repeatableContext = React29.useContext(RepeatableControlContext);
+  const repeatableContext = (0, import_react19.useContext)(RepeatableControlContext);
   const disableOpen = !!repeatableContext?.props?.readOnly;
   const triggerProps = (0, import_ui21.bindTrigger)(popoverState);
   const onClick = (ev) => {
@@ -1840,18 +1841,18 @@ var import_ui27 = require("@elementor/ui");
 var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React36.createElement(import_ui27.Stack, { ...props, gap }, children);
 
 // src/components/popover-grid-container.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var React37 = __toESM(require("react"));
 var import_ui28 = require("@elementor/ui");
-var PopoverGridContainer = (0, import_react19.forwardRef)(
+var PopoverGridContainer = (0, import_react20.forwardRef)(
   ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React37.createElement(import_ui28.Grid, { container: true, gap, alignItems, flexWrap, ref }, children)
 );
 
 // src/components/repeater/repeater-header.tsx
 var React38 = __toESM(require("react"));
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_ui29 = require("@elementor/ui");
-var RepeaterHeader = (0, import_react20.forwardRef)(
+var RepeaterHeader = (0, import_react21.forwardRef)(
   ({
     label,
     children,
@@ -1892,7 +1893,7 @@ var StyledUnstableColorIndicator = (0, import_ui30.styled)(import_ui30.UnstableC
 var ItemIcon = ({ value }) => /* @__PURE__ */ React39.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
 var Content = () => {
   const context = useBoundProp(import_editor_props10.shadowPropTypeUtil);
-  const rowRef = [(0, import_react21.useRef)(null), (0, import_react21.useRef)(null)];
+  const rowRef = [(0, import_react22.useRef)(null), (0, import_react22.useRef)(null)];
   const { rowRef: anchorEl } = useRepeaterContext();
   return /* @__PURE__ */ React39.createElement(PropProvider, { ...context }, /* @__PURE__ */ React39.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React39.createElement(PopoverGridContainer, null, /* @__PURE__ */ React39.createElement(Control2, { bind: "color", label: (0, import_i18n11.__)("Color", "elementor") }, /* @__PURE__ */ React39.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React39.createElement(Control2, { bind: "position", label: (0, import_i18n11.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React39.createElement(
     SelectControl,
@@ -1964,7 +1965,7 @@ var import_i18n16 = require("@wordpress/i18n");
 
 // src/controls/filter-control/context/filter-config-context.tsx
 var React40 = __toESM(require("react"));
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_editor_props11 = require("@elementor/editor-props");
 
 // src/controls/filter-control/utils.ts
@@ -2063,10 +2064,10 @@ function extractPropType(propType, filterFunctionGroup) {
 }
 
 // src/controls/filter-control/context/filter-config-context.tsx
-var FilterConfigContext = (0, import_react22.createContext)(null);
+var FilterConfigContext = (0, import_react23.createContext)(null);
 function FilterConfigProvider({ children }) {
   const propContext = useBoundProp(import_editor_props11.cssFilterFunctionPropUtil);
-  const contextValue = (0, import_react22.useMemo)(() => {
+  const contextValue = (0, import_react23.useMemo)(() => {
     const config = buildFilterConfig(propContext.propType.item_prop_type);
     const filterOptions = Object.entries(config).map(([key, conf]) => ({
       value: key,
@@ -2082,7 +2083,7 @@ function FilterConfigProvider({ children }) {
   return /* @__PURE__ */ React40.createElement(FilterConfigContext.Provider, { value: contextValue }, children);
 }
 function useFilterConfig() {
-  const context = (0, import_react22.useContext)(FilterConfigContext);
+  const context = (0, import_react23.useContext)(FilterConfigContext);
   if (!context) {
     throw new Error("useFilterConfig must be used within FilterConfigProvider");
   }
@@ -2097,7 +2098,7 @@ var import_i18n15 = require("@wordpress/i18n");
 
 // src/controls/filter-control/drop-shadow/drop-shadow-item-content.tsx
 var React41 = __toESM(require("react"));
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_editor_props12 = require("@elementor/editor-props");
 var import_ui31 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
@@ -2125,7 +2126,7 @@ var items = [
 ];
 var DropShadowItemContent = ({ anchorEl }) => {
   const context = useBoundProp(import_editor_props12.dropShadowFilterPropTypeUtil);
-  const rowRefs = [(0, import_react23.useRef)(null), (0, import_react23.useRef)(null)];
+  const rowRefs = [(0, import_react24.useRef)(null), (0, import_react24.useRef)(null)];
   return /* @__PURE__ */ React41.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React41.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React41.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React41.createElement(
     SizeControl,
     {
@@ -2138,7 +2139,7 @@ var DropShadowItemContent = ({ anchorEl }) => {
 };
 
 // src/controls/filter-control/single-size/single-size-item-content.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var React42 = __toESM(require("react"));
 var import_editor_props13 = require("@elementor/editor-props");
 var import_ui32 = require("@elementor/ui");
@@ -2149,7 +2150,7 @@ var propTypeMap = {
   "color-tone": import_editor_props13.colorToneFilterPropTypeUtil
 };
 var SingleSizeItemContent = ({ filterFunc }) => {
-  const rowRef = (0, import_react24.useRef)(null);
+  const rowRef = (0, import_react25.useRef)(null);
   const { getFilterFunctionConfig } = useFilterConfig();
   const { valueName, filterFunctionGroup } = getFilterFunctionConfig(filterFunc);
   const context = useBoundProp(propTypeMap[filterFunctionGroup]);
@@ -2289,7 +2290,7 @@ function ensureFilterConfig(name) {
 
 // src/controls/select-control-wrapper.tsx
 var React49 = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react26 = require("react");
 var getOffCanvasElements = () => {
   const extendedWindow = window;
   const documentId = extendedWindow.elementor.config.document.id;
@@ -2325,8 +2326,8 @@ var collectionMethods = {
   "form-elements": getFormElements
 };
 var useDynamicOptions = (collectionId, initialOptions) => {
-  const [options, setOptions] = (0, import_react25.useState)(initialOptions ?? []);
-  (0, import_react25.useEffect)(() => {
+  const [options, setOptions] = (0, import_react26.useState)(initialOptions ?? []);
+  (0, import_react26.useEffect)(() => {
     if (!collectionId || !collectionMethods[collectionId]) {
       setOptions(initialOptions ?? []);
       return;
@@ -2382,7 +2383,7 @@ var import_editor_props17 = require("@elementor/editor-props");
 
 // src/components/control-toggle-button-group.tsx
 var React52 = __toESM(require("react"));
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_icons9 = require("@elementor/icons");
 var import_ui39 = require("@elementor/ui");
 
@@ -2446,7 +2447,7 @@ var ToggleButtonGroupUi = React52.forwardRef(
     const handleChange = (_, newValue) => {
       onChange(newValue);
     };
-    const getGridTemplateColumns = (0, import_react26.useMemo)(() => {
+    const getGridTemplateColumns = (0, import_react27.useMemo)(() => {
       const isOffLimits = menuItems?.length;
       const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
       const templateColumnsSuffix = isOffLimits ? "auto" : "";
@@ -2544,8 +2545,8 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items2, value);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react26.useState)(false);
-  const menuButtonRef = (0, import_react26.useRef)(null);
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react27.useState)(false);
+  const menuButtonRef = (0, import_react27.useRef)(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -2613,10 +2614,10 @@ var SplitButtonGroup = ({
   ));
 };
 var usePreviewButton = (items2, value) => {
-  const [previewButton, setPreviewButton] = (0, import_react26.useState)(
+  const [previewButton, setPreviewButton] = (0, import_react27.useState)(
     items2.find((item) => item.value === value) ?? items2[0]
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const selectedButton = items2.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -2756,7 +2757,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 var React56 = __toESM(require("react"));
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_ui41 = require("@elementor/ui");
 var import_i18n17 = require("@wordpress/i18n");
 function EqualUnequalSizesControl({
@@ -2766,9 +2767,9 @@ function EqualUnequalSizesControl({
   items: items2,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react27.useId)();
+  const popupId = (0, import_react28.useId)();
   const popupState = (0, import_ui41.usePopupState)({ variant: "popover", popupId });
-  const rowRefs = [(0, import_react27.useRef)(null), (0, import_react27.useRef)(null)];
+  const rowRefs = [(0, import_react28.useRef)(null), (0, import_react28.useRef)(null)];
   const { propType: multiSizePropType, disabled: multiSizeDisabled } = useBoundProp(multiSizePropTypeUtil);
   const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
   const getMultiSizeValues = (sourceValue) => {
@@ -2863,14 +2864,14 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
 
 // src/controls/linked-dimensions-control.tsx
 var React57 = __toESM(require("react"));
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_editor_props19 = require("@elementor/editor-props");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_icons10 = require("@elementor/icons");
 var import_ui42 = require("@elementor/ui");
 var import_i18n18 = require("@wordpress/i18n");
 var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min }) => {
-  const gridRowRefs = [(0, import_react28.useRef)(null), (0, import_react28.useRef)(null)];
+  const gridRowRefs = [(0, import_react29.useRef)(null), (0, import_react29.useRef)(null)];
   const { disabled: sizeDisabled } = useBoundProp(import_editor_props19.sizePropTypeUtil);
   const {
     value: dimensionsValue,
@@ -2889,9 +2890,9 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min
     }
     return true;
   };
-  const [isLinked, setIsLinked] = (0, import_react28.useState)(() => inferIsLinked());
+  const [isLinked, setIsLinked] = (0, import_react29.useState)(() => inferIsLinked());
   const activeBreakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
-  (0, import_react28.useLayoutEffect)(() => {
+  (0, import_react29.useLayoutEffect)(() => {
     setIsLinked(inferIsLinked);
   }, [activeBreakpoint]);
   const onLinkToggle = () => {
@@ -3048,6 +3049,7 @@ function getCssDimensionProps(label, isSiteRtl) {
 
 // src/controls/font-family-control/font-family-control.tsx
 var React59 = __toESM(require("react"));
+var import_react31 = require("react");
 var import_editor_props20 = require("@elementor/editor-props");
 var import_icons11 = require("@elementor/icons");
 var import_ui44 = require("@elementor/ui");
@@ -3055,7 +3057,7 @@ var import_i18n20 = require("@wordpress/i18n");
 
 // src/components/item-selector.tsx
 var React58 = __toESM(require("react"));
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_ui43 = require("@elementor/ui");
 var import_utils3 = require("@elementor/utils");
@@ -3094,7 +3096,7 @@ var ItemSelector = ({
   footer,
   categoryItemContentTemplate
 }) => {
-  const [searchValue, setSearchValue] = (0, import_react29.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react30.useState)("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
   const IconComponent = icon;
   const handleSearch = (value) => {
@@ -3192,7 +3194,7 @@ var ItemList = ({
       }
     });
   }, 100);
-  const memoizedItemStyle = (0, import_react29.useCallback)((item) => itemStyle(item), [itemStyle]);
+  const memoizedItemStyle = (0, import_react30.useCallback)((item) => itemStyle(item), [itemStyle]);
   return /* @__PURE__ */ React58.createElement(
     import_editor_ui5.PopoverMenuList,
     {
@@ -3208,8 +3210,8 @@ var ItemList = ({
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = (0, import_react29.useState)(() => (0, import_utils3.debounce)(fn, delay));
-  (0, import_react29.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = (0, import_react30.useState)(() => (0, import_utils3.debounce)(fn, delay));
+  (0, import_react30.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -3230,7 +3232,7 @@ var FontFamilyControl = createControl(
     } = useBoundProp(import_editor_props20.stringPropTypeUtil);
     const popoverState = (0, import_ui44.usePopupState)({ variant: "popover" });
     const isShowingPlaceholder = !fontFamily && placeholder;
-    const mapFontSubs = React59.useMemo(() => {
+    const mapFontSubs = (0, import_react31.useMemo)(() => {
       return fontFamilies.map(({ label, fonts }) => ({
         label,
         items: fonts
@@ -3310,7 +3312,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 var React65 = __toESM(require("react"));
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_editor_props24 = require("@elementor/editor-props");
 var import_icons15 = require("@elementor/icons");
@@ -3383,7 +3385,7 @@ var RestrictedLinkInfotip = ({
 
 // src/controls/query-control.tsx
 var React63 = __toESM(require("react"));
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_editor_props22 = require("@elementor/editor-props");
 var import_http_client2 = require("@elementor/http-client");
 var import_icons14 = require("@elementor/icons");
@@ -3392,10 +3394,10 @@ var import_i18n22 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
 var React62 = __toESM(require("react"));
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_icons13 = require("@elementor/icons");
 var import_ui47 = require("@elementor/ui");
-var Autocomplete2 = (0, import_react30.forwardRef)((props, ref) => {
+var Autocomplete2 = (0, import_react32.forwardRef)((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -3527,7 +3529,7 @@ var QueryControl = createControl((props) => {
     ariaLabel
   } = props || {};
   const normalizedPlaceholder = placeholder || (0, import_i18n22.__)("Search", "elementor");
-  const [options, setOptions] = (0, import_react31.useState)(
+  const [options, setOptions] = (0, import_react33.useState)(
     generateFirstLoadedOption(value?.value)
   );
   const onOptionChange = (newValue) => {
@@ -3565,7 +3567,7 @@ var QueryControl = createControl((props) => {
     }
     debounceFetch({ ...params, term: newValue });
   };
-  const debounceFetch = (0, import_react31.useMemo)(
+  const debounceFetch = (0, import_react33.useMemo)(
     () => (0, import_utils4.debounce)(
       (queryParams) => fetchOptions(url, queryParams).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -3649,7 +3651,7 @@ var SIZE7 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props24.linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isActive, setIsActive] = (0, import_react32.useState)(!!value);
+  const [isActive, setIsActive] = (0, import_react34.useState)(!!value);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -3659,11 +3661,11 @@ var LinkControl = createControl((props) => {
     label = (0, import_i18n23.__)("Link", "elementor"),
     ariaLabel
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react32.useState)(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react34.useState)(
     (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
-  const debouncedCheckRestriction = (0, import_react32.useMemo)(
+  const debouncedCheckRestriction = (0, import_react34.useMemo)(
     () => (0, import_utils5.debounce)(() => {
       const newRestriction = (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value);
       if (newRestriction.shouldRestrict && isActive) {
@@ -3673,7 +3675,7 @@ var LinkControl = createControl((props) => {
     }, 300),
     [elementId, isActive, value]
   );
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     debouncedCheckRestriction();
     const handleInlineLinkChanged = (event) => {
       const customEvent = event;
@@ -3849,14 +3851,14 @@ var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} })
 
 // src/controls/gap-control.tsx
 var React68 = __toESM(require("react"));
-var import_react33 = require("react");
+var import_react35 = require("react");
 var import_editor_props26 = require("@elementor/editor-props");
 var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_icons16 = require("@elementor/icons");
 var import_ui53 = require("@elementor/ui");
 var import_i18n25 = require("@wordpress/i18n");
 var GapControl = ({ label }) => {
-  const stackRef = (0, import_react33.useRef)(null);
+  const stackRef = (0, import_react35.useRef)(null);
   const { disabled: sizeDisabled } = useBoundProp(import_editor_props26.sizePropTypeUtil);
   const {
     value: directionValue,
@@ -3875,9 +3877,9 @@ var GapControl = ({ label }) => {
     }
     return true;
   };
-  const [isLinked, setIsLinked] = (0, import_react33.useState)(() => inferIsLinked());
+  const [isLinked, setIsLinked] = (0, import_react35.useState)(() => inferIsLinked());
   const activeBreakpoint = (0, import_editor_responsive3.useActiveBreakpoint)();
-  (0, import_react33.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     setIsLinked(inferIsLinked());
   }, [activeBreakpoint]);
   const onLinkToggle = () => {
@@ -3956,7 +3958,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 var React69 = __toESM(require("react"));
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_editor_props27 = require("@elementor/editor-props");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons17 = require("@elementor/icons");
@@ -3983,13 +3985,13 @@ 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] = (0, import_react34.useState)(isCustomSelected);
-  const [customWidth, setCustomWidth] = (0, import_react34.useState)(initialWidth);
-  const [customHeight, setCustomHeight] = (0, import_react34.useState)(initialHeight);
-  const [selectedValue, setSelectedValue] = (0, import_react34.useState)(
+  const [isCustom, setIsCustom] = (0, import_react36.useState)(isCustomSelected);
+  const [customWidth, setCustomWidth] = (0, import_react36.useState)(initialWidth);
+  const [customHeight, setCustomHeight] = (0, import_react36.useState)(initialHeight);
+  const [selectedValue, setSelectedValue] = (0, import_react36.useState)(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -4076,7 +4078,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 var React71 = __toESM(require("react"));
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_props28 = require("@elementor/editor-props");
 var import_icons18 = require("@elementor/icons");
@@ -4086,7 +4088,7 @@ var import_i18n28 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
 var React70 = __toESM(require("react"));
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_ui55 = require("@elementor/ui");
 var import_i18n27 = require("@wordpress/i18n");
 var ADMIN_TITLE_TEXT = (0, import_i18n27.__)("Enable Unfiltered Uploads", "elementor");
@@ -4102,7 +4104,7 @@ var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n27.__)(
 var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
-  const [isError, setIsError] = (0, import_react35.useState)(false);
+  const [isError, setIsError] = (0, import_react37.useState)(false);
   const onClose = (enabled) => {
     props.onClose(enabled);
     setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -4165,7 +4167,7 @@ var SvgMediaControl = createControl(() => {
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react36.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react38.useState)(false);
   const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
     mediaTypes: ["svg"],
@@ -4436,7 +4438,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 var React75 = __toESM(require("react"));
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_editor_props31 = require("@elementor/editor-props");
 var import_editor_ui9 = require("@elementor/editor-ui");
 var import_icons21 = require("@elementor/icons");
@@ -4458,7 +4460,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(import_editor_props31.backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props31.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = (0, import_react37.useRef)(null);
+  const rowRef = (0, import_react39.useRef)(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -4531,7 +4533,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 var React77 = __toESM(require("react"));
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_editor_props32 = require("@elementor/editor-props");
 var import_icons23 = require("@elementor/icons");
 var import_ui62 = require("@elementor/ui");
@@ -4566,7 +4568,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(import_editor_props32.backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props32.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = (0, import_react38.useRef)(null);
+  const rowRef = (0, import_react40.useRef)(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -4601,7 +4603,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_editor_props33 = require("@elementor/editor-props");
 var import_ui63 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
@@ -4622,7 +4624,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui63.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react39.useRef)({
+  const valuesHistory = (0, import_react41.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -4867,7 +4869,7 @@ var BackgroundClipField = () => {
 
 // src/controls/repeatable-control.tsx
 var React80 = __toESM(require("react"));
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_editor_props36 = require("@elementor/editor-props");
 var import_ui66 = require("@elementor/ui");
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -4887,11 +4889,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = (0, import_react40.useMemo)(
+    const childArrayPropTypeUtil2 = (0, import_react42.useMemo)(
       () => (0, import_editor_props36.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = (0, import_react40.useMemo)(
+    const contextValue = (0, import_react42.useMemo)(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -5022,7 +5024,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 var React81 = __toESM(require("react"));
-var import_react41 = require("react");
+var import_react43 = require("react");
 var import_editor_props37 = require("@elementor/editor-props");
 var import_ui67 = require("@elementor/ui");
 var import_i18n36 = require("@wordpress/i18n");
@@ -5049,9 +5051,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props37.keyValuePropTypeUtil);
-  const [keyError, setKeyError] = (0, import_react41.useState)("");
-  const [valueError, setValueError] = (0, import_react41.useState)("");
-  const [sessionState, setSessionState] = (0, import_react41.useState)({
+  const [keyError, setKeyError] = (0, import_react43.useState)("");
+  const [valueError, setValueError] = (0, import_react43.useState)("");
+  const [sessionState, setSessionState] = (0, import_react43.useState)({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -5061,7 +5063,7 @@ var KeyValueControl = createControl((props = {}) => {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = (0, import_react41.useMemo)(
+  const [keyRegex, valueRegex, errMsg] = (0, import_react43.useMemo)(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -5190,7 +5192,7 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 var React95 = __toESM(require("react"));
-var import_react47 = require("react");
+var import_react51 = require("react");
 var import_editor_props47 = require("@elementor/editor-props");
 var import_icons31 = require("@elementor/icons");
 var import_ui81 = require("@elementor/ui");
@@ -5249,7 +5251,7 @@ var import_i18n42 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/move.tsx
 var React84 = __toESM(require("react"));
-var import_react42 = require("react");
+var import_react44 = require("react");
 var import_editor_props40 = require("@elementor/editor-props");
 var import_icons25 = require("@elementor/icons");
 var import_ui70 = require("@elementor/ui");
@@ -5296,7 +5298,7 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(import_editor_props40.moveTransformPropTypeUtil);
-  const rowRefs = [(0, import_react42.useRef)(null), (0, import_react42.useRef)(null), (0, import_react42.useRef)(null)];
+  const rowRefs = [(0, import_react44.useRef)(null), (0, import_react44.useRef)(null), (0, import_react44.useRef)(null)];
   return /* @__PURE__ */ React84.createElement(import_ui70.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React84.createElement(PropProvider, { ...context }, /* @__PURE__ */ React84.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React84.createElement(
     AxisRow,
     {
@@ -5311,7 +5313,7 @@ var Move = () => {
 
 // src/controls/transform-control/functions/rotate.tsx
 var React85 = __toESM(require("react"));
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_editor_props41 = require("@elementor/editor-props");
 var import_icons26 = require("@elementor/icons");
 var import_ui71 = require("@elementor/ui");
@@ -5336,7 +5338,7 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(import_editor_props41.rotateTransformPropTypeUtil);
-  const rowRefs = [(0, import_react43.useRef)(null), (0, import_react43.useRef)(null), (0, import_react43.useRef)(null)];
+  const rowRefs = [(0, import_react45.useRef)(null), (0, import_react45.useRef)(null), (0, import_react45.useRef)(null)];
   return /* @__PURE__ */ React85.createElement(import_ui71.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React85.createElement(PropProvider, { ...context }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React85.createElement(
     AxisRow,
     {
@@ -5350,7 +5352,7 @@ var Rotate = () => {
 
 // src/controls/transform-control/functions/scale.tsx
 var React87 = __toESM(require("react"));
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_editor_props42 = require("@elementor/editor-props");
 var import_icons27 = require("@elementor/icons");
 var import_ui73 = require("@elementor/ui");
@@ -5383,13 +5385,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(import_editor_props42.scaleTransformPropTypeUtil);
-  const rowRefs = [(0, import_react44.useRef)(null), (0, import_react44.useRef)(null), (0, import_react44.useRef)(null)];
+  const rowRefs = [(0, import_react46.useRef)(null), (0, import_react46.useRef)(null), (0, import_react46.useRef)(null)];
   return /* @__PURE__ */ React87.createElement(import_ui73.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(PropProvider, { ...context }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React87.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
 var React88 = __toESM(require("react"));
-var import_react45 = require("react");
+var import_react47 = require("react");
 var import_editor_props43 = require("@elementor/editor-props");
 var import_icons28 = require("@elementor/icons");
 var import_ui74 = require("@elementor/ui");
@@ -5409,7 +5411,7 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(import_editor_props43.skewTransformPropTypeUtil);
-  const rowRefs = [(0, import_react45.useRef)(null), (0, import_react45.useRef)(null), (0, import_react45.useRef)(null)];
+  const rowRefs = [(0, import_react47.useRef)(null), (0, import_react47.useRef)(null), (0, import_react47.useRef)(null)];
   return /* @__PURE__ */ React88.createElement(import_ui74.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React88.createElement(PropProvider, { ...context }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React88.createElement(
     AxisRow,
     {
@@ -5422,7 +5424,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-var import_react46 = require("react");
+var import_react48 = require("react");
 var import_editor_props44 = require("@elementor/editor-props");
 var import_ui75 = require("@elementor/ui");
 var useTransformTabsHistory = ({
@@ -5449,7 +5451,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui75.useTabs)(getCurrentTransformType());
-  const valuesHistory = (0, import_react46.useRef)({
+  const valuesHistory = (0, import_react48.useRef)({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -5593,6 +5595,7 @@ var import_i18n46 = require("@wordpress/i18n");
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 var React92 = __toESM(require("react"));
+var import_react49 = require("react");
 var import_editor_props45 = require("@elementor/editor-props");
 var import_ui78 = require("@elementor/ui");
 var import_i18n44 = require("@wordpress/i18n");
@@ -5624,12 +5627,13 @@ var PerspectiveOriginControlProvider = () => {
   return /* @__PURE__ */ React92.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React92.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = React92.useRef(null);
+  const rowRef = (0, import_react49.useRef)(null);
   return /* @__PURE__ */ React92.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React92.createElement(import_ui78.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React92.createElement(import_ui78.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
 var React93 = __toESM(require("react"));
+var import_react50 = require("react");
 var import_editor_props46 = require("@elementor/editor-props");
 var import_ui79 = require("@elementor/ui");
 var import_i18n45 = require("@wordpress/i18n");
@@ -5657,7 +5661,7 @@ var TransformOriginControl = () => {
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(import_editor_props46.transformOriginPropTypeUtil);
-  const rowRef = React93.useRef(null);
+  const rowRef = (0, import_react50.useRef)(null);
   return /* @__PURE__ */ React93.createElement(PropProvider, { ...context }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React93.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React93.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React93.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
 };
 
@@ -5705,7 +5709,7 @@ var SIZE9 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(import_editor_props47.transformPropTypeUtil);
-    const headerRef = (0, import_react47.useRef)(null);
+    const headerRef = (0, import_react51.useRef)(null);
     const popupState = (0, import_ui81.usePopupState)({ variant: "popover" });
     return /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(
       TransformSettingsControl,
@@ -5785,7 +5789,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 var React98 = __toESM(require("react"));
-var import_react50 = require("react");
+var import_react54 = require("react");
 var import_editor_props50 = require("@elementor/editor-props");
 var import_icons33 = require("@elementor/icons");
 var import_ui84 = require("@elementor/ui");
@@ -5794,15 +5798,15 @@ var import_i18n50 = require("@wordpress/i18n");
 
 // src/controls/selection-size-control.tsx
 var React96 = __toESM(require("react"));
-var import_react48 = require("react");
+var import_react52 = require("react");
 var import_editor_props48 = require("@elementor/editor-props");
 var import_ui82 = require("@elementor/ui");
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(import_editor_props48.selectionSizePropTypeUtil);
-    const rowRef = (0, import_react48.useRef)(null);
+    const rowRef = (0, import_react52.useRef)(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = (0, import_react48.useMemo)(() => {
+    const currentSizeConfig = (0, import_react52.useMemo)(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -6015,7 +6019,7 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 var React97 = __toESM(require("react"));
-var import_react49 = require("react");
+var import_react53 = require("react");
 var import_editor_props49 = require("@elementor/editor-props");
 var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons32 = require("@elementor/icons");
@@ -6102,9 +6106,9 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = (0, import_react49.useRef)(null);
+  const defaultRef = (0, import_react53.useRef)(null);
   const popoverState = (0, import_ui83.usePopupState)({ variant: "popover" });
-  const disabledCategories = (0, import_react49.useMemo)(() => {
+  const disabledCategories = (0, import_react53.useMemo)(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -6330,14 +6334,14 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = (0, import_react50.useState)([]);
+    const [recentlyUsedList, setRecentlyUsedList] = (0, import_react54.useState)([]);
     const proInstalled = (0, import_utils7.hasProInstalled)();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react50.useMemo)(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react54.useMemo)(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = (0, import_react50.useMemo)(() => {
+    const allowedTransitionSet = (0, import_react54.useMemo)(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -6348,7 +6352,7 @@ var TransitionRepeaterControl = createControl(
       });
       return set;
     }, [proInstalled]);
-    (0, import_react50.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -6360,10 +6364,10 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    (0, import_react50.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = (0, import_react50.useMemo)(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = (0, import_react54.useMemo)(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React98.createElement(
       RepeatableControl,
@@ -6469,14 +6473,14 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 
 // src/controls/inline-editing-control.tsx
 var React101 = __toESM(require("react"));
-var import_react53 = require("react");
+var import_react57 = require("react");
 var import_editor_props53 = require("@elementor/editor-props");
 var import_ui87 = require("@elementor/ui");
 var import_utils8 = require("@elementor/utils");
 
 // src/components/inline-editor.tsx
 var React100 = __toESM(require("react"));
-var import_react51 = require("react");
+var import_react55 = require("react");
 var import_ui86 = require("@elementor/ui");
 var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
 var import_extension_document = __toESM(require("@tiptap/extension-document"));
@@ -6490,7 +6494,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
 var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
 var import_extension_text = __toESM(require("@tiptap/extension-text"));
 var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
-var import_react52 = require("@tiptap/react");
+var import_react56 = require("@tiptap/react");
 
 // src/utils/inline-editing.ts
 function isEmpty(value = "") {
@@ -6520,7 +6524,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
     wrapperClassName,
     onSelectionEnd
   } = props;
-  const containerRef = (0, import_react51.useRef)(null);
+  const containerRef = (0, import_react55.useRef)(null);
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
     const newValue = updatedEditor.getHTML();
@@ -6541,7 +6545,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
     ...HTMLAttributes,
     class: elementClasses
   });
-  const editor = (0, import_react52.useEditor)({
+  const editor = (0, import_react56.useEditor)({
     extensions: [
       import_extension_document.default.extend({
         content: documentContentSettings
@@ -6615,7 +6619,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
       onBlur,
       className: wrapperClassName
     },
-    /* @__PURE__ */ React100.createElement(import_react52.EditorContent, { ref, editor })
+    /* @__PURE__ */ React100.createElement(import_react56.EditorContent, { ref, editor })
   ));
 });
 var Wrapper = ({ children, containerRef, editor, sx, onBlur, className }) => {
@@ -6634,8 +6638,8 @@ var Wrapper = ({ children, containerRef, editor, sx, onBlur, className }) => {
   ) : /* @__PURE__ */ React100.createElement(React100.Fragment, null, wrappedChildren);
 };
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = (0, import_react51.useRef)(false);
-  (0, import_react51.useEffect)(() => {
+  const hasMounted = (0, import_react55.useRef)(false);
+  (0, import_react55.useEffect)(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -6654,7 +6658,7 @@ var InlineEditingControl = createControl(
   }) => {
     const { value, setValue } = useBoundProp(import_editor_props53.htmlV3PropTypeUtil);
     const content = import_editor_props53.stringPropTypeUtil.extract(value?.content ?? null) ?? "";
-    const debouncedParse = (0, import_react53.useMemo)(
+    const debouncedParse = (0, import_react57.useMemo)(
       () => (0, import_utils8.debounce)((html) => {
         const parsed = (0, import_editor_props53.parseHtmlChildren)(html);
         setValue({
@@ -6664,7 +6668,7 @@ var InlineEditingControl = createControl(
       }, CHILDREN_PARSE_DEBOUNCE_MS),
       [setValue]
     );
-    const handleChange = (0, import_react53.useCallback)(
+    const handleChange = (0, import_react57.useCallback)(
       (newValue) => {
         const html = newValue ?? "";
         setValue({
@@ -6675,7 +6679,7 @@ var InlineEditingControl = createControl(
       },
       [setValue, value?.children, debouncedParse]
     );
-    (0, import_react53.useEffect)(() => () => debouncedParse.cancel(), [debouncedParse]);
+    (0, import_react57.useEffect)(() => () => debouncedParse.cancel(), [debouncedParse]);
     return /* @__PURE__ */ React101.createElement(ControlActions, null, /* @__PURE__ */ React101.createElement(
       import_ui87.Box,
       {
@@ -6803,7 +6807,7 @@ var import_editor_props56 = require("@elementor/editor-props");
 
 // src/controls/size-control/size-component.tsx
 var React107 = __toESM(require("react"));
-var import_react58 = require("react");
+var import_react62 = require("react");
 var import_editor_responsive4 = require("@elementor/editor-responsive");
 var import_ui92 = require("@elementor/ui");
 
@@ -6874,7 +6878,7 @@ var isNumericValue = (value) => {
 };
 
 // src/controls/size-control/hooks/use-size-value.ts
-var import_react54 = require("react");
+var import_react58 = require("react");
 
 // src/controls/size-control/utils/resolve-size-value.ts
 var DEFAULT_SIZE2 = "";
@@ -6932,7 +6936,7 @@ var useSizeValue = ({
   units: units2,
   defaultUnit
 }) => {
-  const resolvedValue = (0, import_react54.useMemo)(
+  const resolvedValue = (0, import_react58.useMemo)(
     () => resolveSizeValue(value, { units: units2, defaultUnit }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [value?.size, value?.unit, defaultUnit]
@@ -6975,8 +6979,8 @@ var hasChanged = (next, current) => {
 
 // src/controls/size-control/ui/size-input.tsx
 var React103 = __toESM(require("react"));
-var import_react55 = require("react");
-var SizeInput2 = (0, import_react55.forwardRef)(
+var import_react59 = require("react");
+var SizeInput2 = (0, import_react59.forwardRef)(
   ({
     id,
     type,
@@ -7020,7 +7024,7 @@ var getCursorStyle = (readOnly) => ({
 
 // src/controls/size-control/ui/unit-selector.tsx
 var React104 = __toESM(require("react"));
-var import_react56 = require("react");
+var import_react60 = require("react");
 var import_editor_ui14 = require("@elementor/editor-ui");
 var import_ui89 = require("@elementor/ui");
 var menuItemContentStyles = {
@@ -7039,7 +7043,7 @@ var UnitSelector = ({
 }) => {
   const popupState = (0, import_ui89.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react56.useId)()
+    popupId: (0, import_react60.useId)()
   });
   const handleMenuItemClick = (option) => {
     onSelect(option);
@@ -7164,15 +7168,15 @@ var shouldHighlightUnit = (value) => {
 
 // src/controls/size-control/ui/text-field-popover.tsx
 var React106 = __toESM(require("react"));
-var import_react57 = require("react");
+var import_react61 = require("react");
 var import_editor_ui15 = require("@elementor/editor-ui");
 var import_icons35 = require("@elementor/icons");
 var import_ui91 = require("@elementor/ui");
 var import_i18n52 = require("@wordpress/i18n");
 var SIZE10 = "tiny";
 var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) => {
-  const inputRef = (0, import_react57.useRef)(null);
-  (0, import_react57.useEffect)(() => {
+  const inputRef = (0, import_react61.useRef)(null);
+  (0, import_react61.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => {
         if (inputRef.current) {
@@ -7239,7 +7243,7 @@ var SizeComponent = ({ anchorRef, SizeFieldWrapper = React107.Fragment, ...sizeF
   const activeBreakpoint = (0, import_editor_responsive4.useActiveBreakpoint)();
   const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
   const hasCustomUnitOption = sizeFieldProps.units.includes(EXTENDED_UNITS.custom);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     if (popupState && popupState.isOpen) {
       popupState.close();
     }
@@ -7416,24 +7420,24 @@ var UnstableSizeControl = createControl(
 
 // src/components/promotions/display-conditions-control.tsx
 var React110 = __toESM(require("react"));
-var import_react60 = require("react");
+var import_react64 = require("react");
 var import_icons36 = require("@elementor/icons");
 var import_ui94 = require("@elementor/ui");
 var import_i18n53 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
 var React109 = __toESM(require("react"));
-var import_react59 = require("react");
+var import_react63 = require("react");
 var import_editor_ui16 = require("@elementor/editor-ui");
 var import_ui93 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = (0, import_react59.forwardRef)(
+var PromotionTrigger = (0, import_react63.forwardRef)(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react59.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react63.useState)(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = (0, import_react59.useCallback)(() => {
+    const toggle = (0, import_react63.useCallback)(() => {
       setIsOpen((prev) => {
         if (!prev) {
           trackViewPromotion(trackingData);
@@ -7441,7 +7445,7 @@ var PromotionTrigger = (0, import_react59.forwardRef)(
         return !prev;
       });
     }, [trackingData]);
-    (0, import_react59.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
+    (0, import_react63.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     return /* @__PURE__ */ React109.createElement(React109.Fragment, null, promotion && /* @__PURE__ */ React109.createElement(
       import_editor_ui16.PromotionInfotip,
       {
@@ -7475,7 +7479,7 @@ var PromotionTrigger = (0, import_react59.forwardRef)(
 var ARIA_LABEL = (0, import_i18n53.__)("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = (0, import_react60.useRef)(null);
+  const triggerRef = (0, import_react64.useRef)(null);
   return /* @__PURE__ */ React110.createElement(
     import_ui94.Stack,
     {
@@ -7507,14 +7511,14 @@ var DisplayConditionsControl = createControl(() => {
 
 // src/components/promotions/attributes-control.tsx
 var React111 = __toESM(require("react"));
-var import_react61 = require("react");
+var import_react65 = require("react");
 var import_icons37 = require("@elementor/icons");
 var import_ui95 = require("@elementor/ui");
 var import_i18n54 = require("@wordpress/i18n");
 var ARIA_LABEL2 = (0, import_i18n54.__)("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = (0, import_react61.useRef)(null);
+  const triggerRef = (0, import_react65.useRef)(null);
   return /* @__PURE__ */ React111.createElement(
     import_ui95.Stack,
     {
@@ -7551,7 +7555,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 var React113 = __toESM(require("react"));
-var import_react62 = require("react");
+var import_react66 = require("react");
 var import_icons39 = require("@elementor/icons");
 var import_ui97 = require("@elementor/ui");
 var import_i18n55 = require("@wordpress/i18n");
@@ -7572,7 +7576,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = (0, import_react62.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react66.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -7754,10 +7758,10 @@ var RepeaterItem = ({
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react62.useState)(null);
+  const [ref, setRef] = (0, import_react66.useState)(null);
   const popoverState = (0, import_ui97.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui97.bindPopover)(popoverState);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -7773,16 +7777,16 @@ var usePopover = (openOnMount, onOpen) => {
 
 // src/components/inline-editor-toolbar.tsx
 var React115 = __toESM(require("react"));
-var import_react64 = require("react");
+var import_react68 = require("react");
 var import_editor_elements6 = require("@elementor/editor-elements");
 var import_icons41 = require("@elementor/icons");
 var import_ui99 = require("@elementor/ui");
-var import_react65 = require("@tiptap/react");
+var import_react69 = require("@tiptap/react");
 var import_i18n57 = require("@wordpress/i18n");
 
 // src/components/url-popover.tsx
 var React114 = __toESM(require("react"));
-var import_react63 = require("react");
+var import_react67 = require("react");
 var import_icons40 = require("@elementor/icons");
 var import_ui98 = require("@elementor/ui");
 var import_i18n56 = require("@wordpress/i18n");
@@ -7795,8 +7799,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = (0, import_react63.useRef)(null);
-  (0, import_react63.useEffect)(() => {
+  const inputRef = (0, import_react67.useRef)(null);
+  (0, import_react67.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -7846,16 +7850,16 @@ var UrlPopover = ({
 
 // src/components/inline-editor-toolbar.tsx
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = (0, import_react64.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react64.useState)(false);
-  const toolbarRef = (0, import_react64.useRef)(null);
+  const [urlValue, setUrlValue] = (0, import_react68.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react68.useState)(false);
+  const toolbarRef = (0, import_react68.useRef)(null);
   const linkPopupState = (0, import_ui99.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = (0, import_react65.useEditorState)({
+  const editorState = (0, import_react69.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react64.useMemo)(() => {
+  const formatButtonsList = (0, import_react68.useMemo)(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -7892,7 +7896,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  React115.useEffect(() => {
+  (0, import_react68.useEffect)(() => {
     editor?.commands?.focus();
   }, [editor]);
   return /* @__PURE__ */ React115.createElement(
@@ -8086,7 +8090,7 @@ var differsFromExternal = (newState, externalState) => {
 
 // src/components/size/unit-select.tsx
 var React116 = __toESM(require("react"));
-var import_react66 = require("react");
+var import_react70 = require("react");
 var import_editor_ui17 = require("@elementor/editor-ui");
 var import_ui100 = require("@elementor/ui");
 var menuItemContentStyles2 = {
@@ -8097,7 +8101,7 @@ var menuItemContentStyles2 = {
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
   const popupState = (0, import_ui100.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react66.useId)()
+    popupId: (0, import_react70.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
@@ -8133,8 +8137,8 @@ var StyledButton3 = (0, import_ui100.styled)(import_ui100.Button, {
 
 // src/components/size/unstable-size-input.tsx
 var React117 = __toESM(require("react"));
-var import_react67 = require("react");
-var UnstableSizeInput = (0, import_react67.forwardRef)(
+var import_react71 = require("react");
+var UnstableSizeInput = (0, import_react71.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
     return /* @__PURE__ */ React117.createElement(
       NumberInput,
@@ -8202,7 +8206,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-var import_react68 = require("react");
+var import_react72 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var getFontControlConfig = () => {
   const { controls } = (0, import_editor_v1_adapters.getElementorConfig)();
@@ -8210,7 +8214,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return (0, import_react68.useMemo)(() => {
+  return (0, import_react72.useMemo)(() => {
     if (!groups || !options) {
       return [];
     }