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

package/dist/index.js

@@ -1497,7 +1497,7 @@ var Control = (0, import_react15.forwardRef)(({ bind, label, children }, ref) =>
 
 // src/controls/box-shadow-repeater-control.tsx
 var React40 = __toESM(require("react"));
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_editor_props11 = require("@elementor/editor-props");
 var import_ui31 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
@@ -1510,9 +1510,53 @@ var import_i18n5 = require("@wordpress/i18n");
 
 // src/components/control-repeater/context/repeater-context.tsx
 var React25 = __toESM(require("react"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_ui18 = require("@elementor/ui");
 
+// src/hooks/use-repeater-popover-dismiss.ts
+var import_react16 = require("react");
+var import_editor_responsive2 = require("@elementor/editor-responsive");
+var serializeBreakpoints = (breakpoints) => breakpoints.map((b) => [b.id, b.width ?? "", b.type ?? ""].join(":")).join("|");
+var usePopoverDismiss = ({ isOpen, onClose }) => {
+  const onCloseRef = (0, import_react16.useRef)(onClose);
+  onCloseRef.current = onClose;
+  const activeBreakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
+  const breakpoints = (0, import_editor_responsive2.useBreakpoints)();
+  const breakpointsSignature = (0, import_react16.useMemo)(() => serializeBreakpoints(breakpoints), [breakpoints]);
+  const prevActiveBreakpointRef = (0, import_react16.useRef)(void 0);
+  const prevBreakpointsSignatureRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
+    if (!isOpen) {
+      prevActiveBreakpointRef.current = activeBreakpoint;
+      prevBreakpointsSignatureRef.current = breakpointsSignature;
+      return;
+    }
+    const previousBreakpoint = prevActiveBreakpointRef.current;
+    const previousSignature = prevBreakpointsSignatureRef.current;
+    const breakpointChanged = previousBreakpoint !== void 0 && previousBreakpoint !== activeBreakpoint;
+    const breakpointsChanged = previousSignature !== null && previousSignature !== breakpointsSignature;
+    if (breakpointChanged || breakpointsChanged) {
+      onCloseRef.current();
+    }
+    prevActiveBreakpointRef.current = activeBreakpoint;
+    prevBreakpointsSignatureRef.current = breakpointsSignature;
+  }, [activeBreakpoint, breakpointsSignature, isOpen]);
+  (0, import_react16.useEffect)(() => {
+    if (!isOpen) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" && !event.defaultPrevented) {
+        onCloseRef.current();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen]);
+};
+
 // src/services/event-bus.ts
 var EventBus = class {
   listeners = /* @__PURE__ */ new Map();
@@ -1548,18 +1592,18 @@ var EventBus = class {
 var eventBus = new EventBus();
 
 // src/components/control-repeater/context/item-context.tsx
-var import_react16 = require("react");
-var ItemContext = (0, import_react16.createContext)({
+var import_react17 = require("react");
+var ItemContext = (0, import_react17.createContext)({
   index: -1,
   value: {}
 });
 
 // src/components/control-repeater/context/repeater-context.tsx
-var RepeaterContext = (0, import_react17.createContext)(null);
+var RepeaterContext = (0, import_react18.createContext)(null);
 var EMPTY_OPEN_ITEM = -1;
 var useRepeaterContext = () => {
-  const context = (0, import_react17.useContext)(RepeaterContext);
-  const itemContext = (0, import_react17.useContext)(ItemContext);
+  const context = (0, import_react18.useContext)(RepeaterContext);
+  const itemContext = (0, import_react18.useContext)(ItemContext);
   if (!context) {
     throw new Error("useRepeaterContext must be used within a RepeaterContextProvider");
   }
@@ -1578,10 +1622,10 @@ var RepeaterContextProvider = ({
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = (0, import_react17.useState)(() => {
+  const [uniqueKeys, setUniqueKeys] = (0, import_react18.useState)(() => {
     return items2?.map(() => generateUniqueKey()) ?? [];
   });
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const nextLength = items2?.length ?? 0;
     setUniqueKeys((prev) => {
       const prevLength = prev.length;
@@ -1594,7 +1638,7 @@ var RepeaterContextProvider = ({
       return [...prev, ...Array.from({ length: nextLength - prevLength }, generateUniqueKey)];
     });
   }, [items2?.length]);
-  const itemsWithKeys = (0, import_react17.useMemo)(
+  const itemsWithKeys = (0, import_react18.useMemo)(
     () => uniqueKeys.map((key, index) => ({
       key,
       item: items2[index]
@@ -1604,8 +1648,8 @@ var RepeaterContextProvider = ({
   const handleSetItems = (newItemsWithKeys) => {
     setItems(newItemsWithKeys.map(({ item }) => item));
   };
-  const [openItemIndex, setOpenItemIndex] = (0, import_react17.useState)(EMPTY_OPEN_ITEM);
-  const [rowRef, setRowRef] = (0, import_react17.useState)(null);
+  const [openItemIndex, setOpenItemIndex] = (0, import_react18.useState)(EMPTY_OPEN_ITEM);
+  const [rowRef, setRowRef] = (0, import_react18.useState)(null);
   const isOpen = openItemIndex !== EMPTY_OPEN_ITEM;
   const popoverState = (0, import_ui18.usePopupState)({ variant: "popover" });
   const addItem = (ev, config) => {
@@ -1634,6 +1678,15 @@ var RepeaterContextProvider = ({
     const newItems = [...items2.slice(0, index), updatedItem, ...items2.slice(index + 1)];
     setItems(newItems);
   };
+  const closePopover = () => {
+    if (!isOpen) {
+      return;
+    }
+    setOpenItemIndex(EMPTY_OPEN_ITEM);
+    setRowRef(null);
+    popoverState.close();
+  };
+  usePopoverDismiss({ isOpen, onClose: closePopover });
   return /* @__PURE__ */ React25.createElement(
     RepeaterContext.Provider,
     {
@@ -1802,15 +1855,15 @@ var ItemsContainer = ({
 
 // src/components/control-repeater/items/item.tsx
 var React30 = __toESM(require("react"));
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_ui22 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 
 // src/hooks/use-repeatable-control-context.ts
-var import_react18 = require("react");
-var RepeatableControlContext = (0, import_react18.createContext)(void 0);
+var import_react19 = require("react");
+var RepeatableControlContext = (0, import_react19.createContext)(void 0);
 var useRepeatableControlContext = () => {
-  const context = (0, import_react18.useContext)(RepeatableControlContext);
+  const context = (0, import_react19.useContext)(RepeatableControlContext);
   if (!context) {
     throw new Error("useRepeatableControlContext must be used within RepeatableControl");
   }
@@ -1819,9 +1872,9 @@ var useRepeatableControlContext = () => {
 
 // src/components/repeater/repeater-tag.tsx
 var React29 = __toESM(require("react"));
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_ui21 = require("@elementor/ui");
-var RepeaterTag = (0, import_react19.forwardRef)((props, ref) => {
+var RepeaterTag = (0, import_react20.forwardRef)((props, ref) => {
   return /* @__PURE__ */ React29.createElement(
     import_ui21.UnstableTag,
     {
@@ -1852,7 +1905,7 @@ var Item = ({ Label: Label3, Icon, actions }) => {
     value,
     isItemDisabled: isItemDisabled2
   } = useRepeaterContext();
-  const repeatableContext = (0, import_react20.useContext)(RepeatableControlContext);
+  const repeatableContext = (0, import_react21.useContext)(RepeatableControlContext);
   const disableOpen = !!repeatableContext?.props?.readOnly;
   const triggerProps = (0, import_ui22.bindTrigger)(popoverState);
   const onClick = (ev) => {
@@ -2024,18 +2077,18 @@ var import_ui28 = require("@elementor/ui");
 var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React37.createElement(import_ui28.Stack, { ...props, gap }, children);
 
 // src/components/popover-grid-container.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var React38 = __toESM(require("react"));
 var import_ui29 = require("@elementor/ui");
-var PopoverGridContainer = (0, import_react21.forwardRef)(
+var PopoverGridContainer = (0, import_react22.forwardRef)(
   ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React38.createElement(import_ui29.Grid, { container: true, gap, alignItems, flexWrap, ref }, children)
 );
 
 // src/components/repeater/repeater-header.tsx
 var React39 = __toESM(require("react"));
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_ui30 = require("@elementor/ui");
-var RepeaterHeader = (0, import_react22.forwardRef)(
+var RepeaterHeader = (0, import_react23.forwardRef)(
   ({
     label,
     children,
@@ -2076,7 +2129,7 @@ var StyledUnstableColorIndicator = (0, import_ui31.styled)(import_ui31.UnstableC
 var ItemIcon = ({ value }) => /* @__PURE__ */ React40.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
 var Content = () => {
   const context = useBoundProp(import_editor_props11.shadowPropTypeUtil);
-  const rowRef = [(0, import_react23.useRef)(null), (0, import_react23.useRef)(null)];
+  const rowRef = [(0, import_react24.useRef)(null), (0, import_react24.useRef)(null)];
   const { rowRef: anchorEl } = useRepeaterContext();
   return /* @__PURE__ */ React40.createElement(PropProvider, { ...context }, /* @__PURE__ */ React40.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React40.createElement(PopoverGridContainer, null, /* @__PURE__ */ React40.createElement(Control2, { bind: "color", label: (0, import_i18n11.__)("Color", "elementor") }, /* @__PURE__ */ React40.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React40.createElement(Control2, { bind: "position", label: (0, import_i18n11.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(
     SelectControl,
@@ -2148,7 +2201,7 @@ var import_i18n17 = require("@wordpress/i18n");
 
 // src/controls/filter-control/context/filter-config-context.tsx
 var React41 = __toESM(require("react"));
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_editor_props12 = require("@elementor/editor-props");
 
 // src/controls/filter-control/utils.ts
@@ -2247,10 +2300,10 @@ function extractPropType(propType, filterFunctionGroup) {
 }
 
 // src/controls/filter-control/context/filter-config-context.tsx
-var FilterConfigContext = (0, import_react24.createContext)(null);
+var FilterConfigContext = (0, import_react25.createContext)(null);
 function FilterConfigProvider({ children }) {
   const propContext = useBoundProp(import_editor_props12.cssFilterFunctionPropUtil);
-  const contextValue = (0, import_react24.useMemo)(() => {
+  const contextValue = (0, import_react25.useMemo)(() => {
     const config = buildFilterConfig(propContext.propType.item_prop_type);
     const filterOptions = Object.entries(config).map(([key, conf]) => ({
       value: key,
@@ -2266,7 +2319,7 @@ function FilterConfigProvider({ children }) {
   return /* @__PURE__ */ React41.createElement(FilterConfigContext.Provider, { value: contextValue }, children);
 }
 function useFilterConfig() {
-  const context = (0, import_react24.useContext)(FilterConfigContext);
+  const context = (0, import_react25.useContext)(FilterConfigContext);
   if (!context) {
     throw new Error("useFilterConfig must be used within FilterConfigProvider");
   }
@@ -2281,7 +2334,7 @@ var import_i18n15 = require("@wordpress/i18n");
 
 // src/controls/filter-control/drop-shadow/drop-shadow-item-content.tsx
 var React42 = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_editor_props13 = require("@elementor/editor-props");
 var import_ui32 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
@@ -2309,7 +2362,7 @@ var items = [
 ];
 var DropShadowItemContent = ({ anchorEl }) => {
   const context = useBoundProp(import_editor_props13.dropShadowFilterPropTypeUtil);
-  const rowRefs = [(0, import_react25.useRef)(null), (0, import_react25.useRef)(null)];
+  const rowRefs = [(0, import_react26.useRef)(null), (0, import_react26.useRef)(null)];
   return /* @__PURE__ */ React42.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React42.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React42.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React42.createElement(import_ui32.Grid, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React42.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React42.createElement(
     SizeControl,
     {
@@ -2322,7 +2375,7 @@ var DropShadowItemContent = ({ anchorEl }) => {
 };
 
 // src/controls/filter-control/single-size/single-size-item-content.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var React43 = __toESM(require("react"));
 var import_editor_props14 = require("@elementor/editor-props");
 var import_ui33 = require("@elementor/ui");
@@ -2333,7 +2386,7 @@ var propTypeMap = {
   "color-tone": import_editor_props14.colorToneFilterPropTypeUtil
 };
 var SingleSizeItemContent = ({ filterFunc }) => {
-  const rowRef = (0, import_react26.useRef)(null);
+  const rowRef = (0, import_react27.useRef)(null);
   const { getFilterFunctionConfig } = useFilterConfig();
   const { valueName, filterFunctionGroup } = getFilterFunctionConfig(filterFunc);
   const context = useBoundProp(propTypeMap[filterFunctionGroup]);
@@ -2474,7 +2527,7 @@ function ensureFilterConfig(name) {
 
 // src/controls/select-control-wrapper.tsx
 var React50 = __toESM(require("react"));
-var import_react27 = require("react");
+var import_react28 = require("react");
 var getOffCanvasElements = () => {
   const extendedWindow = window;
   const documentId = extendedWindow.elementor.config.document.id;
@@ -2510,8 +2563,8 @@ var collectionMethods = {
   "form-elements": getFormElements
 };
 var useDynamicOptions = (collectionId, initialOptions) => {
-  const [options, setOptions] = (0, import_react27.useState)(initialOptions ?? []);
-  (0, import_react27.useEffect)(() => {
+  const [options, setOptions] = (0, import_react28.useState)(initialOptions ?? []);
+  (0, import_react28.useEffect)(() => {
     if (!collectionId || !collectionMethods[collectionId]) {
       setOptions(initialOptions ?? []);
       return;
@@ -2567,7 +2620,7 @@ var import_editor_props18 = require("@elementor/editor-props");
 
 // src/components/control-toggle-button-group.tsx
 var React53 = __toESM(require("react"));
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_icons9 = require("@elementor/icons");
 var import_ui40 = require("@elementor/ui");
 
@@ -2631,7 +2684,7 @@ var ToggleButtonGroupUi = React53.forwardRef(
     const handleChange = (_, newValue) => {
       onChange(newValue);
     };
-    const getGridTemplateColumns = (0, import_react28.useMemo)(() => {
+    const getGridTemplateColumns = (0, import_react29.useMemo)(() => {
       const isOffLimits = menuItems?.length;
       const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
       const templateColumnsSuffix = isOffLimits ? "auto" : "";
@@ -2729,8 +2782,8 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items2, value);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react28.useState)(false);
-  const menuButtonRef = (0, import_react28.useRef)(null);
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react29.useState)(false);
+  const menuButtonRef = (0, import_react29.useRef)(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -2798,10 +2851,10 @@ var SplitButtonGroup = ({
   ));
 };
 var usePreviewButton = (items2, value) => {
-  const [previewButton, setPreviewButton] = (0, import_react28.useState)(
+  const [previewButton, setPreviewButton] = (0, import_react29.useState)(
     items2.find((item) => item.value === value) ?? items2[0]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const selectedButton = items2.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -2941,7 +2994,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 var React57 = __toESM(require("react"));
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_ui42 = require("@elementor/ui");
 var import_i18n18 = require("@wordpress/i18n");
 function EqualUnequalSizesControl({
@@ -2951,9 +3004,9 @@ function EqualUnequalSizesControl({
   items: items2,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react29.useId)();
+  const popupId = (0, import_react30.useId)();
   const popupState = (0, import_ui42.usePopupState)({ variant: "popover", popupId });
-  const rowRefs = [(0, import_react29.useRef)(null), (0, import_react29.useRef)(null)];
+  const rowRefs = [(0, import_react30.useRef)(null), (0, import_react30.useRef)(null)];
   const { propType: multiSizePropType, disabled: multiSizeDisabled } = useBoundProp(multiSizePropTypeUtil);
   const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
   const getMultiSizeValues = (sourceValue) => {
@@ -3048,22 +3101,22 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
 
 // src/controls/linked-dimensions-control.tsx
 var React64 = __toESM(require("react"));
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_editor_props22 = require("@elementor/editor-props");
-var import_editor_responsive3 = require("@elementor/editor-responsive");
+var import_editor_responsive4 = require("@elementor/editor-responsive");
 var import_icons12 = require("@elementor/icons");
 var import_ui47 = require("@elementor/ui");
 var import_i18n20 = require("@wordpress/i18n");
 
 // src/controls/size-control/unstable-size-control.tsx
 var React63 = __toESM(require("react"));
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_editor_props21 = require("@elementor/editor-props");
 
 // src/controls/size-control/size-component.tsx
 var React62 = __toESM(require("react"));
-var import_react35 = require("react");
-var import_editor_responsive2 = require("@elementor/editor-responsive");
+var import_react36 = require("react");
+var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_ui46 = require("@elementor/ui");
 
 // src/controls/size-control/size-field.tsx
@@ -3132,7 +3185,7 @@ var isNumericValue = (value) => {
 };
 
 // src/controls/size-control/hooks/use-size-value.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/controls/size-control/utils/resolve-size-value.ts
 var DEFAULT_SIZE2 = "";
@@ -3184,10 +3237,10 @@ var sanitizeSize = (size) => {
 };
 
 // src/controls/size-control/hooks/use-unit-sync.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 var useUnitSync = ({ sizeValue, setUnit, persistWhen }) => {
-  const [state, setState] = (0, import_react30.useState)(sizeValue.unit);
-  (0, import_react30.useEffect)(() => {
+  const [state, setState] = (0, import_react31.useState)(sizeValue.unit);
+  (0, import_react31.useEffect)(() => {
     if (sizeValue.unit !== state) {
       setState(sizeValue.unit);
     }
@@ -3208,7 +3261,7 @@ var useSizeValue = ({
   units: units2,
   defaultUnit
 }) => {
-  const resolvedValue = (0, import_react31.useMemo)(
+  const resolvedValue = (0, import_react32.useMemo)(
     () => resolveSizeValue(value, { units: units2, defaultUnit }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [value?.size, value?.unit, defaultUnit]
@@ -3260,8 +3313,8 @@ var hasChanged = (next, current) => {
 
 // src/controls/size-control/ui/size-input.tsx
 var React58 = __toESM(require("react"));
-var import_react32 = require("react");
-var SizeInput2 = (0, import_react32.forwardRef)(
+var import_react33 = require("react");
+var SizeInput2 = (0, import_react33.forwardRef)(
   ({
     id,
     type,
@@ -3305,7 +3358,7 @@ var getCursorStyle = (readOnly) => ({
 
 // src/controls/size-control/ui/unit-selector.tsx
 var React59 = __toESM(require("react"));
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_ui43 = require("@elementor/ui");
 var menuItemContentStyles = {
@@ -3324,7 +3377,7 @@ var UnitSelector = ({
 }) => {
   const popupState = (0, import_ui43.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react33.useId)()
+    popupId: (0, import_react34.useId)()
   });
   const handleMenuItemClick = (option) => {
     onSelect(option);
@@ -3449,15 +3502,15 @@ var shouldHighlightUnit = (value) => {
 
 // src/controls/size-control/ui/text-field-popover.tsx
 var React61 = __toESM(require("react"));
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
 var import_ui45 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 var SIZE7 = "tiny";
 var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) => {
-  const inputRef = (0, import_react34.useRef)(null);
-  (0, import_react34.useEffect)(() => {
+  const inputRef = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => {
         if (inputRef.current) {
@@ -3521,10 +3574,10 @@ var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) =>
 // src/controls/size-control/size-component.tsx
 var SizeComponent = ({ anchorRef, SizeFieldWrapper = React62.Fragment, ...sizeFieldProps }) => {
   const popupState = (0, import_ui46.usePopupState)({ variant: "popover" });
-  const activeBreakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
+  const activeBreakpoint = (0, import_editor_responsive3.useActiveBreakpoint)();
   const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
   const hasCustomUnitOption = sizeFieldProps.units.includes(EXTENDED_UNITS.custom);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (popupState && popupState.isOpen) {
       popupState.close();
     }
@@ -3661,7 +3714,7 @@ var UnstableSizeControl = createControl(
       placeholder: boundPropPlaceholder,
       restoreValue
     } = useBoundProp(import_editor_props21.sizePropTypeUtil);
-    const lastNonAutoValue = (0, import_react36.useRef)(null);
+    const lastNonAutoValue = (0, import_react37.useRef)(null);
     const { sizeValue, placeholder } = resolveBoundPropValue(
       value ?? lastNonAutoValue.current,
       boundPropPlaceholder,
@@ -3718,7 +3771,7 @@ var isTransitioningFromExtendedUnit = (nextValue, previousValue) => {
 
 // src/controls/linked-dimensions-control.tsx
 var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
-  const gridRowRefs = [(0, import_react37.useRef)(null), (0, import_react37.useRef)(null)];
+  const gridRowRefs = [(0, import_react38.useRef)(null), (0, import_react38.useRef)(null)];
   const { disabled: sizeDisabled } = useBoundProp(import_editor_props22.sizePropTypeUtil);
   const {
     value: dimensionsValue,
@@ -3737,10 +3790,10 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
     }
     return true;
   };
-  const [isLinked, setIsLinked] = (0, import_react37.useState)(() => inferIsLinked());
-  const activeBreakpoint = (0, import_editor_responsive3.useActiveBreakpoint)();
+  const [isLinked, setIsLinked] = (0, import_react38.useState)(() => inferIsLinked());
+  const activeBreakpoint = (0, import_editor_responsive4.useActiveBreakpoint)();
   const isCurrentlyDimensions = import_editor_props22.dimensionsPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
-  (0, import_react37.useLayoutEffect)(() => {
+  (0, import_react38.useLayoutEffect)(() => {
     setIsLinked(inferIsLinked);
   }, [activeBreakpoint, isCurrentlyDimensions]);
   const onLinkToggle = () => {
@@ -3911,7 +3964,7 @@ function getCssDimensionProps(label, isSiteRtl) {
 
 // src/controls/font-family-control/font-family-control.tsx
 var React66 = __toESM(require("react"));
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_editor_props23 = require("@elementor/editor-props");
 var import_icons13 = require("@elementor/icons");
 var import_ui49 = require("@elementor/ui");
@@ -3919,7 +3972,7 @@ var import_i18n22 = require("@wordpress/i18n");
 
 // src/components/item-selector.tsx
 var React65 = __toESM(require("react"));
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_ui48 = require("@elementor/ui");
 var import_utils3 = require("@elementor/utils");
@@ -3958,7 +4011,7 @@ var ItemSelector = ({
   footer,
   categoryItemContentTemplate
 }) => {
-  const [searchValue, setSearchValue] = (0, import_react38.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react39.useState)("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
   const IconComponent = icon;
   const handleSearch = (value) => {
@@ -4056,7 +4109,7 @@ var ItemList = ({
       }
     });
   }, 100);
-  const memoizedItemStyle = (0, import_react38.useCallback)((item) => itemStyle(item), [itemStyle]);
+  const memoizedItemStyle = (0, import_react39.useCallback)((item) => itemStyle(item), [itemStyle]);
   return /* @__PURE__ */ React65.createElement(
     import_editor_ui7.PopoverMenuList,
     {
@@ -4072,8 +4125,8 @@ var ItemList = ({
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = (0, import_react38.useState)(() => (0, import_utils3.debounce)(fn, delay));
-  (0, import_react38.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = (0, import_react39.useState)(() => (0, import_utils3.debounce)(fn, delay));
+  (0, import_react39.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -4094,7 +4147,7 @@ var FontFamilyControl = createControl(
     } = useBoundProp(import_editor_props23.stringPropTypeUtil);
     const popoverState = (0, import_ui49.usePopupState)({ variant: "popover" });
     const isShowingPlaceholder = !fontFamily && placeholder;
-    const mapFontSubs = (0, import_react39.useMemo)(() => {
+    const mapFontSubs = (0, import_react40.useMemo)(() => {
       return fontFamilies.map(({ label, fonts }) => ({
         label,
         items: fonts
@@ -4175,7 +4228,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 var React72 = __toESM(require("react"));
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_editor_props27 = require("@elementor/editor-props");
 var import_icons17 = require("@elementor/icons");
@@ -4249,7 +4302,7 @@ var RestrictedLinkInfotip = ({
 
 // src/controls/query-control.tsx
 var React70 = __toESM(require("react"));
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_editor_props25 = require("@elementor/editor-props");
 var import_http_client2 = require("@elementor/http-client");
 var import_icons16 = require("@elementor/icons");
@@ -4258,10 +4311,10 @@ var import_i18n24 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
 var React69 = __toESM(require("react"));
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_icons15 = require("@elementor/icons");
 var import_ui52 = require("@elementor/ui");
-var Autocomplete2 = (0, import_react40.forwardRef)((props, ref) => {
+var Autocomplete2 = (0, import_react41.forwardRef)((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -4393,7 +4446,7 @@ var QueryControl = createControl((props) => {
     onSetValue,
     ariaLabel
   } = props || {};
-  const [options, setOptions] = (0, import_react41.useState)(
+  const [options, setOptions] = (0, import_react42.useState)(
     generateFirstLoadedOption(queryValue)
   );
   const onOptionChange = (newValue) => {
@@ -4427,7 +4480,7 @@ var QueryControl = createControl((props) => {
     }
     debounceFetch({ ...params, term: newValue });
   };
-  const debounceFetch = (0, import_react41.useMemo)(
+  const debounceFetch = (0, import_react42.useMemo)(
     () => (0, import_utils4.debounce)(
       (queryParams) => fetchOptions(url, queryParams).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -4511,7 +4564,7 @@ var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props27.linkPropTypeUtil);
   const linkPlaceholder = propContext.placeholder;
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isActive, setIsActive] = (0, import_react42.useState)(!!value || !!linkPlaceholder);
+  const [isActive, setIsActive] = (0, import_react43.useState)(!!value || !!linkPlaceholder);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -4521,11 +4574,11 @@ var LinkControl = createControl((props) => {
     label = (0, import_i18n25.__)("Link", "elementor"),
     ariaLabel
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react42.useState)(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react43.useState)(
     (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
-  const debouncedCheckRestriction = (0, import_react42.useMemo)(
+  const debouncedCheckRestriction = (0, import_react43.useMemo)(
     () => (0, import_utils5.debounce)(() => {
       const newRestriction = (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder);
       if (newRestriction.shouldRestrict && isActive && !linkPlaceholder) {
@@ -4535,7 +4588,7 @@ var LinkControl = createControl((props) => {
     }, 300),
     [elementId, isActive, value, linkPlaceholder]
   );
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     debouncedCheckRestriction();
     const handleInlineLinkChanged = (event) => {
       const customEvent = event;
@@ -4715,14 +4768,14 @@ var HtmlTagControl = createControl((props) => {
 
 // src/controls/gap-control.tsx
 var React75 = __toESM(require("react"));
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_editor_props29 = require("@elementor/editor-props");
-var import_editor_responsive4 = require("@elementor/editor-responsive");
+var import_editor_responsive5 = require("@elementor/editor-responsive");
 var import_icons18 = require("@elementor/icons");
 var import_ui58 = require("@elementor/ui");
 var import_i18n27 = require("@wordpress/i18n");
 var GapControl = ({ label }) => {
-  const stackRef = (0, import_react43.useRef)(null);
+  const stackRef = (0, import_react44.useRef)(null);
   const { disabled: sizeDisabled } = useBoundProp(import_editor_props29.sizePropTypeUtil);
   const {
     value: directionValue,
@@ -4741,10 +4794,10 @@ var GapControl = ({ label }) => {
     }
     return true;
   };
-  const [isLinked, setIsLinked] = (0, import_react43.useState)(() => inferIsLinked());
+  const [isLinked, setIsLinked] = (0, import_react44.useState)(() => inferIsLinked());
   const isCurrentlyDirection = import_editor_props29.layoutDirectionPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
-  const activeBreakpoint = (0, import_editor_responsive4.useActiveBreakpoint)();
-  (0, import_react43.useLayoutEffect)(() => {
+  const activeBreakpoint = (0, import_editor_responsive5.useActiveBreakpoint)();
+  (0, import_react44.useLayoutEffect)(() => {
     setIsLinked(inferIsLinked());
   }, [activeBreakpoint, isCurrentlyDirection]);
   const onLinkToggle = () => {
@@ -4837,7 +4890,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 var React76 = __toESM(require("react"));
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_editor_props30 = require("@elementor/editor-props");
 var import_editor_ui10 = require("@elementor/editor-ui");
 var import_icons19 = require("@elementor/icons");
@@ -4864,13 +4917,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_react44.useState)(isCustomSelected);
-  const [customWidth, setCustomWidth] = (0, import_react44.useState)(initialWidth);
-  const [customHeight, setCustomHeight] = (0, import_react44.useState)(initialHeight);
-  const [selectedValue, setSelectedValue] = (0, import_react44.useState)(
+  const [isCustom, setIsCustom] = (0, import_react45.useState)(isCustomSelected);
+  const [customWidth, setCustomWidth] = (0, import_react45.useState)(initialWidth);
+  const [customHeight, setCustomHeight] = (0, import_react45.useState)(initialHeight);
+  const [selectedValue, setSelectedValue] = (0, import_react45.useState)(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -4957,7 +5010,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 var React78 = __toESM(require("react"));
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_props31 = require("@elementor/editor-props");
 var import_icons20 = require("@elementor/icons");
@@ -4967,7 +5020,7 @@ var import_i18n30 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
 var React77 = __toESM(require("react"));
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_ui60 = require("@elementor/ui");
 var import_i18n29 = require("@wordpress/i18n");
 var ADMIN_TITLE_TEXT = (0, import_i18n29.__)("Enable Unfiltered Uploads", "elementor");
@@ -4983,7 +5036,7 @@ var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n29.__)(
 var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
-  const [isError, setIsError] = (0, import_react45.useState)(false);
+  const [isError, setIsError] = (0, import_react46.useState)(false);
   const onClose = (enabled) => {
     props.onClose(enabled);
     setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -5047,7 +5100,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_react46.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react47.useState)(false);
   const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
     mediaTypes: ["svg"],
@@ -5318,7 +5371,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 var React82 = __toESM(require("react"));
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_editor_props34 = require("@elementor/editor-props");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_icons23 = require("@elementor/icons");
@@ -5340,7 +5393,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(import_editor_props34.backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props34.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = (0, import_react47.useRef)(null);
+  const rowRef = (0, import_react48.useRef)(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -5413,7 +5466,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 var React84 = __toESM(require("react"));
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_editor_props35 = require("@elementor/editor-props");
 var import_icons25 = require("@elementor/icons");
 var import_ui67 = require("@elementor/ui");
@@ -5448,7 +5501,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(import_editor_props35.backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props35.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = (0, import_react48.useRef)(null);
+  const rowRef = (0, import_react49.useRef)(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -5483,7 +5536,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_editor_props36 = require("@elementor/editor-props");
 var import_ui68 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
@@ -5504,7 +5557,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui68.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react49.useRef)({
+  const valuesHistory = (0, import_react50.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -5749,7 +5802,7 @@ var BackgroundClipField = () => {
 
 // src/controls/repeatable-control.tsx
 var React87 = __toESM(require("react"));
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_editor_props39 = require("@elementor/editor-props");
 var import_ui71 = require("@elementor/ui");
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -5770,11 +5823,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = (0, import_react50.useMemo)(
+    const childArrayPropTypeUtil2 = (0, import_react51.useMemo)(
       () => (0, import_editor_props39.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = (0, import_react50.useMemo)(
+    const contextValue = (0, import_react51.useMemo)(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -5906,7 +5959,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 var React88 = __toESM(require("react"));
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_editor_props40 = require("@elementor/editor-props");
 var import_ui72 = require("@elementor/ui");
 var import_i18n38 = require("@wordpress/i18n");
@@ -5933,9 +5986,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props40.keyValuePropTypeUtil);
-  const [keyError, setKeyError] = (0, import_react51.useState)("");
-  const [valueError, setValueError] = (0, import_react51.useState)("");
-  const [sessionState, setSessionState] = (0, import_react51.useState)({
+  const [keyError, setKeyError] = (0, import_react52.useState)("");
+  const [valueError, setValueError] = (0, import_react52.useState)("");
+  const [sessionState, setSessionState] = (0, import_react52.useState)({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -5945,7 +5998,7 @@ var KeyValueControl = createControl((props = {}) => {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = (0, import_react51.useMemo)(
+  const [keyRegex, valueRegex, errMsg] = (0, import_react52.useMemo)(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -6074,7 +6127,7 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 var React102 = __toESM(require("react"));
-var import_react59 = require("react");
+var import_react60 = require("react");
 var import_editor_props50 = require("@elementor/editor-props");
 var import_icons33 = require("@elementor/icons");
 var import_ui86 = require("@elementor/ui");
@@ -6133,7 +6186,7 @@ var import_i18n44 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/move.tsx
 var React91 = __toESM(require("react"));
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_editor_props43 = require("@elementor/editor-props");
 var import_icons27 = require("@elementor/icons");
 var import_ui75 = require("@elementor/ui");
@@ -6180,7 +6233,7 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(import_editor_props43.moveTransformPropTypeUtil);
-  const rowRefs = [(0, import_react52.useRef)(null), (0, import_react52.useRef)(null), (0, import_react52.useRef)(null)];
+  const rowRefs = [(0, import_react53.useRef)(null), (0, import_react53.useRef)(null), (0, import_react53.useRef)(null)];
   return /* @__PURE__ */ React91.createElement(import_ui75.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React91.createElement(PropProvider, { ...context }, /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React91.createElement(
     AxisRow,
     {
@@ -6195,7 +6248,7 @@ var Move = () => {
 
 // src/controls/transform-control/functions/rotate.tsx
 var React92 = __toESM(require("react"));
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_editor_props44 = require("@elementor/editor-props");
 var import_icons28 = require("@elementor/icons");
 var import_ui76 = require("@elementor/ui");
@@ -6220,7 +6273,7 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(import_editor_props44.rotateTransformPropTypeUtil);
-  const rowRefs = [(0, import_react53.useRef)(null), (0, import_react53.useRef)(null), (0, import_react53.useRef)(null)];
+  const rowRefs = [(0, import_react54.useRef)(null), (0, import_react54.useRef)(null), (0, import_react54.useRef)(null)];
   return /* @__PURE__ */ React92.createElement(import_ui76.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(PropProvider, { ...context }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React92.createElement(
     AxisRow,
     {
@@ -6234,7 +6287,7 @@ var Rotate = () => {
 
 // src/controls/transform-control/functions/scale.tsx
 var React94 = __toESM(require("react"));
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_editor_props45 = require("@elementor/editor-props");
 var import_icons29 = require("@elementor/icons");
 var import_ui78 = require("@elementor/ui");
@@ -6267,13 +6320,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(import_editor_props45.scaleTransformPropTypeUtil);
-  const rowRefs = [(0, import_react54.useRef)(null), (0, import_react54.useRef)(null), (0, import_react54.useRef)(null)];
+  const rowRefs = [(0, import_react55.useRef)(null), (0, import_react55.useRef)(null), (0, import_react55.useRef)(null)];
   return /* @__PURE__ */ React94.createElement(import_ui78.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React94.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
 var React95 = __toESM(require("react"));
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_editor_props46 = require("@elementor/editor-props");
 var import_icons30 = require("@elementor/icons");
 var import_ui79 = require("@elementor/ui");
@@ -6293,7 +6346,7 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(import_editor_props46.skewTransformPropTypeUtil);
-  const rowRefs = [(0, import_react55.useRef)(null), (0, import_react55.useRef)(null), (0, import_react55.useRef)(null)];
+  const rowRefs = [(0, import_react56.useRef)(null), (0, import_react56.useRef)(null), (0, import_react56.useRef)(null)];
   return /* @__PURE__ */ React95.createElement(import_ui79.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React95.createElement(
     AxisRow,
     {
@@ -6306,7 +6359,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_editor_props47 = require("@elementor/editor-props");
 var import_ui80 = require("@elementor/ui");
 var useTransformTabsHistory = ({
@@ -6333,7 +6386,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui80.useTabs)(getCurrentTransformType());
-  const valuesHistory = (0, import_react56.useRef)({
+  const valuesHistory = (0, import_react57.useRef)({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -6477,7 +6530,7 @@ var import_i18n48 = require("@wordpress/i18n");
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 var React99 = __toESM(require("react"));
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_editor_props48 = require("@elementor/editor-props");
 var import_ui83 = require("@elementor/ui");
 var import_i18n46 = require("@wordpress/i18n");
@@ -6509,13 +6562,13 @@ var PerspectiveOriginControlProvider = () => {
   return /* @__PURE__ */ React99.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React99.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = (0, import_react57.useRef)(null);
+  const rowRef = (0, import_react58.useRef)(null);
   return /* @__PURE__ */ React99.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
 var React100 = __toESM(require("react"));
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_editor_props49 = require("@elementor/editor-props");
 var import_ui84 = require("@elementor/ui");
 var import_i18n47 = require("@wordpress/i18n");
@@ -6543,7 +6596,7 @@ var TransformOriginControl = () => {
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(import_editor_props49.transformOriginPropTypeUtil);
-  const rowRef = (0, import_react58.useRef)(null);
+  const rowRef = (0, import_react59.useRef)(null);
   return /* @__PURE__ */ React100.createElement(PropProvider, { ...context }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
@@ -6591,7 +6644,7 @@ var SIZE10 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(import_editor_props50.transformPropTypeUtil);
-    const headerRef = (0, import_react59.useRef)(null);
+    const headerRef = (0, import_react60.useRef)(null);
     const popupState = (0, import_ui86.usePopupState)({ variant: "popover" });
     return /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(
       TransformSettingsControl,
@@ -6671,7 +6724,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 var React105 = __toESM(require("react"));
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_editor_props53 = require("@elementor/editor-props");
 var import_icons35 = require("@elementor/icons");
 var import_ui89 = require("@elementor/ui");
@@ -6680,15 +6733,15 @@ var import_i18n52 = require("@wordpress/i18n");
 
 // src/controls/selection-size-control.tsx
 var React103 = __toESM(require("react"));
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_editor_props51 = require("@elementor/editor-props");
 var import_ui87 = require("@elementor/ui");
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(import_editor_props51.selectionSizePropTypeUtil);
-    const rowRef = (0, import_react60.useRef)(null);
+    const rowRef = (0, import_react61.useRef)(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = (0, import_react60.useMemo)(() => {
+    const currentSizeConfig = (0, import_react61.useMemo)(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -6901,7 +6954,7 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 var React104 = __toESM(require("react"));
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_editor_props52 = require("@elementor/editor-props");
 var import_editor_ui14 = require("@elementor/editor-ui");
 var import_icons34 = require("@elementor/icons");
@@ -6988,9 +7041,9 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = (0, import_react61.useRef)(null);
+  const defaultRef = (0, import_react62.useRef)(null);
   const popoverState = (0, import_ui88.usePopupState)({ variant: "popover" });
-  const disabledCategories = (0, import_react61.useMemo)(() => {
+  const disabledCategories = (0, import_react62.useMemo)(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -7216,14 +7269,14 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = (0, import_react62.useState)([]);
+    const [recentlyUsedList, setRecentlyUsedList] = (0, import_react63.useState)([]);
     const proInstalled = (0, import_utils7.hasProInstalled)();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react62.useMemo)(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react63.useMemo)(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = (0, import_react62.useMemo)(() => {
+    const allowedTransitionSet = (0, import_react63.useMemo)(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -7234,7 +7287,7 @@ var TransitionRepeaterControl = createControl(
       });
       return set;
     }, [proInstalled]);
-    (0, import_react62.useEffect)(() => {
+    (0, import_react63.useEffect)(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -7246,10 +7299,10 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    (0, import_react62.useEffect)(() => {
+    (0, import_react63.useEffect)(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = (0, import_react62.useMemo)(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = (0, import_react63.useMemo)(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React105.createElement(
       RepeatableControl,
@@ -7355,14 +7408,14 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 
 // src/controls/inline-editing-control.tsx
 var React108 = __toESM(require("react"));
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_editor_props56 = require("@elementor/editor-props");
 var import_ui92 = require("@elementor/ui");
 var import_utils8 = require("@elementor/utils");
 
 // src/components/inline-editor.tsx
 var React107 = __toESM(require("react"));
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_ui91 = require("@elementor/ui");
 var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
 var import_extension_document = __toESM(require("@tiptap/extension-document"));
@@ -7376,7 +7429,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_react64 = require("@tiptap/react");
+var import_react65 = require("@tiptap/react");
 
 // src/utils/inline-editing.ts
 function isEmpty(value = "") {
@@ -7416,8 +7469,8 @@ var InlineEditor = React107.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = (0, import_react63.useRef)(null);
-  const onBlurRef = (0, import_react63.useRef)(onBlur);
+  const containerRef = (0, import_react64.useRef)(null);
+  const onBlurRef = (0, import_react64.useRef)(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -7439,7 +7492,7 @@ var InlineEditor = React107.forwardRef((props, ref) => {
     ...HTMLAttributes,
     class: elementClasses
   });
-  const editor = (0, import_react64.useEditor)({
+  const editor = (0, import_react65.useEditor)({
     ...mountElement ? { element: mountElement } : {},
     extensions: [
       import_extension_document.default.extend({
@@ -7511,11 +7564,11 @@ var InlineEditor = React107.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React107.createElement(import_ui91.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React107.createElement(import_react64.EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React107.createElement(import_ui91.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React107.createElement(import_react65.EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = (0, import_react63.useRef)(false);
-  (0, import_react63.useEffect)(() => {
+  const hasMounted = (0, import_react64.useRef)(false);
+  (0, import_react64.useEffect)(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -7534,7 +7587,7 @@ var InlineEditingControl = createControl(
   }) => {
     const { value, setValue, placeholder } = useBoundProp(import_editor_props56.htmlV3PropTypeUtil);
     const content = import_editor_props56.stringPropTypeUtil.extract(value?.content ?? null) ?? "";
-    const debouncedParse = (0, import_react65.useMemo)(
+    const debouncedParse = (0, import_react66.useMemo)(
       () => (0, import_utils8.debounce)((html) => {
         const parsed = (0, import_editor_props56.parseHtmlChildren)(html);
         setValue({
@@ -7544,7 +7597,7 @@ var InlineEditingControl = createControl(
       }, CHILDREN_PARSE_DEBOUNCE_MS),
       [setValue]
     );
-    const handleChange = (0, import_react65.useCallback)(
+    const handleChange = (0, import_react66.useCallback)(
       (newValue) => {
         const html = newValue ?? "";
         setValue({
@@ -7555,7 +7608,7 @@ var InlineEditingControl = createControl(
       },
       [setValue, value?.children, debouncedParse]
     );
-    (0, import_react65.useEffect)(() => () => debouncedParse.cancel(), [debouncedParse]);
+    (0, import_react66.useEffect)(() => () => debouncedParse.cancel(), [debouncedParse]);
     return /* @__PURE__ */ React108.createElement(ControlActions, null, /* @__PURE__ */ React108.createElement(
       import_ui92.Box,
       {
@@ -7757,24 +7810,24 @@ var EmailFormActionControl = createControl(({ toPlaceholder }) => {
 
 // src/components/promotions/display-conditions-control.tsx
 var React111 = __toESM(require("react"));
-var import_react67 = require("react");
+var import_react68 = require("react");
 var import_icons36 = require("@elementor/icons");
 var import_ui95 = require("@elementor/ui");
 var import_i18n54 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
 var React110 = __toESM(require("react"));
-var import_react66 = require("react");
+var import_react67 = require("react");
 var import_editor_ui16 = require("@elementor/editor-ui");
 var import_ui94 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = (0, import_react66.forwardRef)(
+var PromotionTrigger = (0, import_react67.forwardRef)(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react66.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react67.useState)(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = (0, import_react66.useCallback)(() => {
+    const toggle = (0, import_react67.useCallback)(() => {
       setIsOpen((prev) => {
         if (!prev) {
           trackViewPromotion(trackingData);
@@ -7782,7 +7835,7 @@ var PromotionTrigger = (0, import_react66.forwardRef)(
         return !prev;
       });
     }, [trackingData]);
-    (0, import_react66.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
+    (0, import_react67.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     return /* @__PURE__ */ React110.createElement(React110.Fragment, null, promotion && /* @__PURE__ */ React110.createElement(
       import_editor_ui16.PromotionInfotip,
       {
@@ -7816,7 +7869,7 @@ var PromotionTrigger = (0, import_react66.forwardRef)(
 var ARIA_LABEL = (0, import_i18n54.__)("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = (0, import_react67.useRef)(null);
+  const triggerRef = (0, import_react68.useRef)(null);
   return /* @__PURE__ */ React111.createElement(
     import_ui95.Stack,
     {
@@ -7848,14 +7901,14 @@ var DisplayConditionsControl = createControl(() => {
 
 // src/components/promotions/attributes-control.tsx
 var React112 = __toESM(require("react"));
-var import_react68 = require("react");
+var import_react69 = require("react");
 var import_icons37 = require("@elementor/icons");
 var import_ui96 = require("@elementor/ui");
 var import_i18n55 = require("@wordpress/i18n");
 var ARIA_LABEL2 = (0, import_i18n55.__)("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = (0, import_react68.useRef)(null);
+  const triggerRef = (0, import_react69.useRef)(null);
   return /* @__PURE__ */ React112.createElement(
     import_ui96.Stack,
     {
@@ -7892,7 +7945,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 var React114 = __toESM(require("react"));
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_icons39 = require("@elementor/icons");
 var import_ui98 = require("@elementor/ui");
 var import_i18n56 = require("@wordpress/i18n");
@@ -7913,7 +7966,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = (0, import_react69.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react70.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -8065,10 +8118,11 @@ var RepeaterItem = ({
     wrappedOnPopoverClose
   );
   const triggerProps = (0, import_ui98.bindTrigger)(popoverState);
+  usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
   const duplicateLabel = (0, import_i18n56.__)("Duplicate", "elementor");
   const toggleLabel = propDisabled ? (0, import_i18n56.__)("Show", "elementor") : (0, import_i18n56.__)("Hide", "elementor");
   const removeLabel = (0, import_i18n56.__)("Remove", "elementor");
-  return /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(
+  return /* @__PURE__ */ React114.createElement(import_ui98.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React114.createElement(
     RepeaterTag,
     {
       disabled,
@@ -8085,21 +8139,13 @@ var RepeaterItem = ({
       startIcon,
       actions: /* @__PURE__ */ React114.createElement(React114.Fragment, null, showDuplicate && /* @__PURE__ */ React114.createElement(import_ui98.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(import_ui98.IconButton, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React114.createElement(import_icons39.CopyIcon, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React114.createElement(import_ui98.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(import_ui98.IconButton, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React114.createElement(import_icons39.EyeOffIcon, { fontSize: SIZE11 }) : /* @__PURE__ */ React114.createElement(import_icons39.EyeIcon, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React114.createElement(import_ui98.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(import_ui98.IconButton, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React114.createElement(import_icons39.XIcon, { fontSize: SIZE11 }))))
     }
-  ), /* @__PURE__ */ React114.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React114.createElement(
-    import_ui98.ClickAwayListener,
-    {
-      mouseEvent: "onMouseDown",
-      touchEvent: "onTouchStart",
-      onClickAway: popoverProps.onClose
-    },
-    /* @__PURE__ */ React114.createElement(import_ui98.Box, null, children({ anchorEl: ref }))
-  )));
+  ), /* @__PURE__ */ React114.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React114.createElement(import_ui98.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = (0, import_react69.useState)(null);
+  const [ref, setRef] = (0, import_react70.useState)(null);
   const popoverState = (0, import_ui98.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui98.bindPopover)(popoverState);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -8119,16 +8165,16 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 
 // src/components/inline-editor-toolbar.tsx
 var React116 = __toESM(require("react"));
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_icons41 = require("@elementor/icons");
 var import_ui100 = require("@elementor/ui");
-var import_react72 = require("@tiptap/react");
+var import_react73 = require("@tiptap/react");
 var import_i18n58 = require("@wordpress/i18n");
 
 // src/components/url-popover.tsx
 var React115 = __toESM(require("react"));
-var import_react70 = require("react");
+var import_react71 = require("react");
 var import_icons40 = require("@elementor/icons");
 var import_ui99 = require("@elementor/ui");
 var import_i18n57 = require("@wordpress/i18n");
@@ -8141,8 +8187,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = (0, import_react70.useRef)(null);
-  (0, import_react70.useEffect)(() => {
+  const inputRef = (0, import_react71.useRef)(null);
+  (0, import_react71.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -8192,16 +8238,16 @@ var UrlPopover = ({
 
 // src/components/inline-editor-toolbar.tsx
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = (0, import_react71.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react71.useState)(false);
-  const toolbarRef = (0, import_react71.useRef)(null);
+  const [urlValue, setUrlValue] = (0, import_react72.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react72.useState)(false);
+  const toolbarRef = (0, import_react72.useRef)(null);
   const linkPopupState = (0, import_ui100.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = (0, import_react72.useEditorState)({
+  const editorState = (0, import_react73.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react71.useMemo)(() => {
+  const formatButtonsList = (0, import_react72.useMemo)(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -8238,7 +8284,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  (0, import_react71.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     editor?.commands?.focus();
   }, [editor]);
   return /* @__PURE__ */ React116.createElement(
@@ -8432,7 +8478,7 @@ var differsFromExternal = (newState, externalState) => {
 
 // src/components/size/unit-select.tsx
 var React117 = __toESM(require("react"));
-var import_react73 = require("react");
+var import_react74 = require("react");
 var import_editor_ui17 = require("@elementor/editor-ui");
 var import_ui101 = require("@elementor/ui");
 var menuItemContentStyles2 = {
@@ -8443,7 +8489,7 @@ var menuItemContentStyles2 = {
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
   const popupState = (0, import_ui101.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react73.useId)()
+    popupId: (0, import_react74.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
@@ -8479,8 +8525,8 @@ var StyledButton3 = (0, import_ui101.styled)(import_ui101.Button, {
 
 // src/components/size/unstable-size-input.tsx
 var React118 = __toESM(require("react"));
-var import_react74 = require("react");
-var UnstableSizeInput = (0, import_react74.forwardRef)(
+var import_react75 = require("react");
+var UnstableSizeInput = (0, import_react75.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
     return /* @__PURE__ */ React118.createElement(
       NumberInput,
@@ -8548,7 +8594,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var getFontControlConfig = () => {
   const { controls } = (0, import_editor_v1_adapters2.getElementorConfig)();
@@ -8556,7 +8602,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return (0, import_react75.useMemo)(() => {
+  return (0, import_react76.useMemo)(() => {
     if (!groups || !options) {
       return [];
     }