@elementor/editor-controls 4.3.0 → 4.3.2

package/dist/index.js

@@ -3022,8 +3022,24 @@ var ToggleControl = createControl(
 
 // src/controls/number-control.tsx
 var React57 = __toESM(require("react"));
+var import_react30 = require("react");
 var import_editor_props19 = require("@elementor/editor-props");
 var import_ui42 = require("@elementor/ui");
+
+// src/utils/number-value.ts
+var isEmptyDraft = (raw) => raw.trim() === "";
+var parseNumberDraft = (raw, shouldForceInt = false) => {
+  const trimmed = raw.trim();
+  if (trimmed === "") {
+    return null;
+  }
+  const parsed = shouldForceInt ? parseInt(trimmed, 10) : Number(trimmed);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+var isInRange = (value, min, max) => value >= min && value <= max;
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+// src/controls/number-control.tsx
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
 var renderSuffix = (propType) => {
   if (propType.meta?.suffix) {
@@ -3034,31 +3050,63 @@ var renderSuffix = (propType) => {
 var NumberControl = createControl(
   ({
     placeholder: labelPlaceholder,
-    max = Number.MAX_SAFE_INTEGER,
-    min = -Number.MAX_SAFE_INTEGER,
-    step = 1,
+    max: maxProp,
+    min: minProp,
+    step: stepProp,
     shouldForceInt = false,
     startIcon,
     disabled: inputDisabled
   }) => {
+    const max = maxProp ?? Number.MAX_SAFE_INTEGER;
+    const min = minProp ?? -Number.MAX_SAFE_INTEGER;
+    const step = stepProp ?? 1;
     const { value, setValue, placeholder, disabled, restoreValue, propType } = useBoundProp(import_editor_props19.numberPropTypeUtil);
-    const handleChange = (event) => {
-      const {
-        value: eventValue,
-        validity: { valid: isInputValid }
-      } = event.target;
-      let updatedValue;
-      if (isEmptyOrNaN(eventValue)) {
-        updatedValue = null;
-      } else {
-        const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
-        updatedValue = Math.min(
-          Math.max(formattedValue, min ?? Number.MIN_SAFE_INTEGER),
-          max ?? Number.MAX_SAFE_INTEGER
-        );
+    const [draft, setDraft] = (0, import_react30.useState)(null);
+    const committedNullOnInputRef = (0, import_react30.useRef)(false);
+    const handleInput = (event) => {
+      const raw = event.target.value;
+      setDraft(raw);
+      if (isEmptyDraft(raw)) {
+        if (!propType.settings.required) {
+          setValue(null);
+          committedNullOnInputRef.current = true;
+        }
+        return;
+      }
+      committedNullOnInputRef.current = false;
+      const parsed = parseNumberDraft(raw, shouldForceInt);
+      if (parsed === null) {
+        return;
+      }
+      if (isInRange(parsed, min, max)) {
+        setValue(parsed);
       }
-      setValue(updatedValue, void 0, { validation: () => isInputValid });
     };
+    const handleBlur = () => {
+      const raw = draft;
+      const committedNullOnInput = committedNullOnInputRef.current;
+      committedNullOnInputRef.current = false;
+      setDraft(null);
+      restoreValue();
+      if (raw === null) {
+        return;
+      }
+      if (isEmptyDraft(raw)) {
+        if (!propType.settings.required && !committedNullOnInput) {
+          setValue(null);
+        }
+        return;
+      }
+      const parsed = parseNumberDraft(raw, shouldForceInt);
+      if (parsed === null) {
+        return;
+      }
+      if (isInRange(parsed, min, max)) {
+        return;
+      }
+      setValue(clamp(parsed, min, max));
+    };
+    const displayValue = draft ?? (isEmptyOrNaN(value) ? "" : String(value));
     return /* @__PURE__ */ React57.createElement(ControlActions, null, /* @__PURE__ */ React57.createElement(
       NumberInput,
       {
@@ -3066,11 +3114,11 @@ var NumberControl = createControl(
         type: "number",
         fullWidth: true,
         disabled: inputDisabled ?? disabled,
-        value: isEmptyOrNaN(value) ? "" : value,
-        onInput: handleChange,
-        onBlur: restoreValue,
+        value: displayValue,
+        onInput: handleInput,
+        onBlur: handleBlur,
         placeholder: labelPlaceholder ?? (isEmptyOrNaN(placeholder) ? "" : String(placeholder)),
-        inputProps: { step, min },
+        inputProps: { step, min, ...maxProp !== null && maxProp !== void 0 && { max } },
         InputProps: {
           startAdornment: startIcon ? /* @__PURE__ */ React57.createElement(import_ui42.InputAdornment, { position: "start", disabled: inputDisabled ?? disabled }, startIcon) : void 0,
           endAdornment: renderSuffix(propType)
@@ -3082,7 +3130,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 var React58 = __toESM(require("react"));
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_ui43 = require("@elementor/ui");
 var import_i18n18 = require("@wordpress/i18n");
 function EqualUnequalSizesControl({
@@ -3092,9 +3140,9 @@ function EqualUnequalSizesControl({
   items: items2,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react30.useId)();
+  const popupId = (0, import_react31.useId)();
   const popupState = (0, import_ui43.usePopupState)({ variant: "popover", popupId });
-  const rowRefs = [(0, import_react30.useRef)(null), (0, import_react30.useRef)(null)];
+  const rowRefs = [(0, import_react31.useRef)(null), (0, import_react31.useRef)(null)];
   const { propType: multiSizePropType, disabled: multiSizeDisabled } = useBoundProp(multiSizePropTypeUtil);
   const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
   const getMultiSizeValues = (sourceValue) => {
@@ -3189,7 +3237,7 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
 
 // src/controls/linked-dimensions-control.tsx
 var React65 = __toESM(require("react"));
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_editor_props22 = require("@elementor/editor-props");
 var import_editor_responsive4 = require("@elementor/editor-responsive");
 var import_icons12 = require("@elementor/icons");
@@ -3198,12 +3246,12 @@ var import_i18n20 = require("@wordpress/i18n");
 
 // src/controls/size-control/unstable-size-control.tsx
 var React64 = __toESM(require("react"));
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_editor_props21 = require("@elementor/editor-props");
 
 // src/controls/size-control/size-component.tsx
 var React63 = __toESM(require("react"));
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_ui47 = require("@elementor/ui");
 
@@ -3273,7 +3321,7 @@ var isNumericValue = (value) => {
 };
 
 // src/controls/size-control/hooks/use-size-value.ts
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/controls/size-control/utils/resolve-size-value.ts
 var DEFAULT_SIZE2 = "";
@@ -3325,10 +3373,10 @@ var sanitizeSize = (size) => {
 };
 
 // src/controls/size-control/hooks/use-unit-sync.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 var useUnitSync = ({ sizeValue, setUnit, persistWhen }) => {
-  const [state, setState] = (0, import_react31.useState)(sizeValue.unit);
-  (0, import_react31.useEffect)(() => {
+  const [state, setState] = (0, import_react32.useState)(sizeValue.unit);
+  (0, import_react32.useEffect)(() => {
     if (sizeValue.unit !== state) {
       setState(sizeValue.unit);
     }
@@ -3349,7 +3397,7 @@ var useSizeValue = ({
   units: units2,
   defaultUnit
 }) => {
-  const resolvedValue = (0, import_react32.useMemo)(
+  const resolvedValue = (0, import_react33.useMemo)(
     () => resolveSizeValue(value, { units: units2, defaultUnit }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [value?.size, value?.unit, defaultUnit]
@@ -3401,8 +3449,8 @@ var hasChanged = (next, current) => {
 
 // src/controls/size-control/ui/size-input.tsx
 var React59 = __toESM(require("react"));
-var import_react33 = require("react");
-var SizeInput2 = (0, import_react33.forwardRef)(
+var import_react34 = require("react");
+var SizeInput2 = (0, import_react34.forwardRef)(
   ({
     id,
     type,
@@ -3446,7 +3494,7 @@ var getCursorStyle = (readOnly) => ({
 
 // src/controls/size-control/ui/unit-selector.tsx
 var React60 = __toESM(require("react"));
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_ui44 = require("@elementor/ui");
 var menuItemContentStyles = {
@@ -3465,7 +3513,7 @@ var UnitSelector = ({
 }) => {
   const popupState = (0, import_ui44.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react34.useId)()
+    popupId: (0, import_react35.useId)()
   });
   const handleMenuItemClick = (option) => {
     onSelect(option);
@@ -3590,15 +3638,15 @@ var shouldHighlightUnit = (value) => {
 
 // src/controls/size-control/ui/text-field-popover.tsx
 var React62 = __toESM(require("react"));
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
 var import_ui46 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 var SIZE7 = "tiny";
 var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) => {
-  const inputRef = (0, import_react35.useRef)(null);
-  (0, import_react35.useEffect)(() => {
+  const inputRef = (0, import_react36.useRef)(null);
+  (0, import_react36.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => {
         if (inputRef.current) {
@@ -3665,7 +3713,7 @@ var SizeComponent = ({ anchorRef, SizeFieldWrapper = React63.Fragment, ...sizeFi
   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_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (popupState && popupState.isOpen) {
       popupState.close();
     }
@@ -3797,7 +3845,7 @@ var UnstableSizeControl = createControl(
       placeholder: boundPropPlaceholder,
       restoreValue
     } = useBoundProp(import_editor_props21.sizePropTypeUtil);
-    const lastNonAutoValue = (0, import_react37.useRef)(null);
+    const lastNonAutoValue = (0, import_react38.useRef)(null);
     const { sizeValue, placeholder } = resolveBoundPropValue(
       value ?? lastNonAutoValue.current,
       boundPropPlaceholder,
@@ -3854,7 +3902,7 @@ var isTransitioningFromExtendedUnit = (nextValue, previousValue) => {
 
 // src/controls/linked-dimensions-control.tsx
 var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
-  const gridRowRefs = [(0, import_react38.useRef)(null), (0, import_react38.useRef)(null)];
+  const gridRowRefs = [(0, import_react39.useRef)(null), (0, import_react39.useRef)(null)];
   const { disabled: sizeDisabled } = useBoundProp(import_editor_props22.sizePropTypeUtil);
   const {
     value: dimensionsValue,
@@ -3873,10 +3921,10 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
     }
     return true;
   };
-  const [isLinked, setIsLinked] = (0, import_react38.useState)(() => inferIsLinked());
+  const [isLinked, setIsLinked] = (0, import_react39.useState)(() => inferIsLinked());
   const activeBreakpoint = (0, import_editor_responsive4.useActiveBreakpoint)();
   const isCurrentlyDimensions = import_editor_props22.dimensionsPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
-  (0, import_react38.useLayoutEffect)(() => {
+  (0, import_react39.useLayoutEffect)(() => {
     setIsLinked(inferIsLinked);
   }, [activeBreakpoint, isCurrentlyDimensions]);
   const onLinkToggle = () => {
@@ -4047,7 +4095,7 @@ function getCssDimensionProps(label, isSiteRtl) {
 
 // src/controls/font-family-control/font-family-control.tsx
 var React67 = __toESM(require("react"));
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_editor_props23 = require("@elementor/editor-props");
 var import_icons13 = require("@elementor/icons");
 var import_ui50 = require("@elementor/ui");
@@ -4055,7 +4103,7 @@ var import_i18n22 = require("@wordpress/i18n");
 
 // src/components/item-selector.tsx
 var React66 = __toESM(require("react"));
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_ui49 = require("@elementor/ui");
 var import_utils3 = require("@elementor/utils");
@@ -4094,7 +4142,7 @@ var ItemSelector = ({
   footer,
   categoryItemContentTemplate
 }) => {
-  const [searchValue, setSearchValue] = (0, import_react39.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react40.useState)("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
   const IconComponent = icon;
   const handleSearch = (value) => {
@@ -4192,7 +4240,7 @@ var ItemList = ({
       }
     });
   }, 100);
-  const memoizedItemStyle = (0, import_react39.useCallback)((item) => itemStyle(item), [itemStyle]);
+  const memoizedItemStyle = (0, import_react40.useCallback)((item) => itemStyle(item), [itemStyle]);
   return /* @__PURE__ */ React66.createElement(
     import_editor_ui7.PopoverMenuList,
     {
@@ -4208,8 +4256,8 @@ var ItemList = ({
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = (0, import_react39.useState)(() => (0, import_utils3.debounce)(fn, delay));
-  (0, import_react39.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = (0, import_react40.useState)(() => (0, import_utils3.debounce)(fn, delay));
+  (0, import_react40.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -4230,7 +4278,7 @@ var FontFamilyControl = createControl(
     } = useBoundProp(import_editor_props23.fontFamilyPropTypeUtil);
     const popoverState = (0, import_ui50.usePopupState)({ variant: "popover" });
     const isShowingPlaceholder = !fontFamily && placeholder;
-    const mapFontSubs = (0, import_react40.useMemo)(() => {
+    const mapFontSubs = (0, import_react41.useMemo)(() => {
       return fontFamilies.map(({ label, fonts }) => ({
         label,
         items: fonts
@@ -4311,7 +4359,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 var React73 = __toESM(require("react"));
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_editor_props28 = require("@elementor/editor-props");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
@@ -4405,10 +4453,10 @@ var import_i18n24 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
 var React70 = __toESM(require("react"));
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_icons15 = require("@elementor/icons");
 var import_ui53 = require("@elementor/ui");
-var Autocomplete2 = (0, import_react41.forwardRef)((props, ref) => {
+var Autocomplete2 = (0, import_react42.forwardRef)((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -4529,7 +4577,7 @@ function factoryFilter(newValue, options, minInputLength) {
 }
 
 // src/hooks/use-query-autocomplete.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_editor_props25 = require("@elementor/editor-props");
 var import_http_client2 = require("@elementor/http-client");
 var import_utils4 = require("@elementor/utils");
@@ -4540,11 +4588,11 @@ function useQueryAutocomplete({
   initialQueryValue = null,
   excludeIds
 }) {
-  const excludeIdSet = (0, import_react42.useMemo)(() => new Set((excludeIds ?? []).map(String)), [excludeIds]);
-  const [options, setOptions] = (0, import_react42.useState)(
+  const excludeIdSet = (0, import_react43.useMemo)(() => new Set((excludeIds ?? []).map(String)), [excludeIds]);
+  const [options, setOptions] = (0, import_react43.useState)(
     generateFirstLoadedOption(initialQueryValue)
   );
-  const debounceFetch = (0, import_react42.useMemo)(
+  const debounceFetch = (0, import_react43.useMemo)(
     () => (0, import_utils4.debounce)(
       (queryParams) => fetchOptions(url, queryParams).then((newOptions) => {
         setOptions(formatOptions(filterExcludedOptions(newOptions, excludeIdSet)));
@@ -4553,7 +4601,7 @@ function useQueryAutocomplete({
     ),
     [url, excludeIdSet]
   );
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (minInputLength === 0 && url) {
       fetchOptions(url, { ...params, term: "" }).then((newOptions) => {
         setOptions(formatOptions(filterExcludedOptions(newOptions, excludeIdSet)));
@@ -4699,7 +4747,7 @@ var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props28.linkPropTypeUtil);
   const linkPlaceholder = propContext.placeholder;
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isActive, setIsActive] = (0, import_react43.useState)(!!value || !!linkPlaceholder);
+  const [isActive, setIsActive] = (0, import_react44.useState)(!!value || !!linkPlaceholder);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -4709,7 +4757,7 @@ var LinkControl = createControl((props) => {
     label = (0, import_i18n25.__)("Link", "elementor"),
     ariaLabel
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react43.useState)(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react44.useState)(
     (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
@@ -4736,7 +4784,7 @@ var LinkControl = createControl((props) => {
     },
     [debouncedSyncLinkRestriction]
   );
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     debouncedSyncLinkRestriction();
     const handleInlineLinkChanged = () => {
       debouncedSyncLinkRestriction();
@@ -4915,7 +4963,7 @@ var HtmlTagControl = createControl((props) => {
 
 // src/controls/query-chips-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_ui59 = require("@elementor/ui");
 var import_i18n27 = require("@wordpress/i18n");
@@ -4924,8 +4972,8 @@ var SIZE9 = "tiny";
 var QueryChipsControl = createControl((props) => {
   const { queryOptions, placeholder, minInputLength = 2 } = props;
   const { value, setValue, disabled } = useBoundProp(queryArrayPropTypeUtil);
-  const selectedChips = (0, import_react44.useMemo)(() => extractChips(value), [value]);
-  const excludeIds = (0, import_react44.useMemo)(
+  const selectedChips = (0, import_react45.useMemo)(() => extractChips(value), [value]);
+  const excludeIds = (0, import_react45.useMemo)(
     () => selectedChips.map((chip) => Number(chip.id)).filter((id) => Number.isFinite(id)),
     [selectedChips]
   );
@@ -4985,7 +5033,7 @@ function extractChips(value) {
 
 // src/controls/query-filter-repeater-control.tsx
 var React77 = __toESM(require("react"));
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_props31 = require("@elementor/editor-props");
 var import_icons18 = require("@elementor/icons");
@@ -5000,16 +5048,16 @@ var QueryFilterRepeaterControl = createControl(
   }) => {
     const { propType, value, setValue } = useBoundProp(import_editor_props31.queryFilterArrayPropTypeUtil);
     const { settings } = (0, import_editor_elements4.useSelectedElementSettings)();
-    const visibleKeys = (0, import_react45.useMemo)(
+    const visibleKeys = (0, import_react46.useMemo)(
       () => allowedKeys.filter((key) => isKeyVisible(keyConfig[key]?.visibleWhen, settings)),
       [allowedKeys, keyConfig, settings]
     );
-    const usedKeys = (0, import_react45.useMemo)(() => getUsedKeys(value ?? []), [value]);
-    const nextAvailableKey = (0, import_react45.useMemo)(
+    const usedKeys = (0, import_react46.useMemo)(() => getUsedKeys(value ?? []), [value]);
+    const nextAvailableKey = (0, import_react46.useMemo)(
       () => visibleKeys.find((key) => !usedKeys.has(key)) ?? null,
       [visibleKeys, usedKeys]
     );
-    const getKeySelectOptions = (0, import_react45.useMemo)(
+    const getKeySelectOptions = (0, import_react46.useMemo)(
       () => (currentKey) => visibleKeys.map((itemKey) => ({
         value: itemKey,
         label: keyConfig[itemKey]?.label ?? itemKey,
@@ -5017,7 +5065,7 @@ var QueryFilterRepeaterControl = createControl(
       })),
       [visibleKeys, keyConfig, usedKeys]
     );
-    const initialFallback = (0, import_react45.useMemo)(() => createItemForKey(visibleKeys[0] ?? ""), [visibleKeys]);
+    const initialFallback = (0, import_react46.useMemo)(() => createItemForKey(visibleKeys[0] ?? ""), [visibleKeys]);
     return /* @__PURE__ */ React77.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React77.createElement(ControlRepeater, { initial: initialFallback, propTypeUtil: import_editor_props31.queryFilterArrayPropTypeUtil }, /* @__PURE__ */ React77.createElement(RepeaterHeader, { label }, /* @__PURE__ */ React77.createElement(AddFilterItemAction, { nextAvailableKey, ariaLabel: label })), /* @__PURE__ */ React77.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React77.createElement(
       Item,
       {
@@ -5081,7 +5129,7 @@ var ItemContent = ({
   chipsPlaceholder
 }) => {
   const propContext = useBoundProp(import_editor_props31.queryFilterPropTypeUtil);
-  const snapshotsByKeyRef = (0, import_react45.useRef)({});
+  const snapshotsByKeyRef = (0, import_react46.useRef)({});
   const handleValueChange = (nextValue, options, meta) => {
     if (meta?.bind !== "key") {
       propContext.setValue(nextValue, options, meta);
@@ -5109,7 +5157,7 @@ var ItemContent = ({
   const currentKey = import_editor_props31.stringPropTypeUtil.extract(propContext.value?.key);
   const currentKeyConfig = currentKey ? keyConfig[currentKey] : void 0;
   const valueType = currentKeyConfig?.valueType ?? "chips";
-  const keySelectOptions = (0, import_react45.useMemo)(() => getKeySelectOptions(currentKey), [getKeySelectOptions, currentKey]);
+  const keySelectOptions = (0, import_react46.useMemo)(() => getKeySelectOptions(currentKey), [getKeySelectOptions, currentKey]);
   return /* @__PURE__ */ React77.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, (0, import_i18n28.__)("Type", "elementor"))), /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React77.createElement(SelectControl, { options: keySelectOptions })))), valueType === "taxonomies" && currentKeyConfig?.staticOptions && /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, currentKeyConfig.label)), /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "taxonomies" }, /* @__PURE__ */ React77.createElement(ChipsControl, { options: currentKeyConfig.staticOptions })))), valueType !== "taxonomies" && currentKeyConfig?.queryEndpoint && /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, currentKeyConfig.label)), /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "values" }, /* @__PURE__ */ React77.createElement(
     QueryChipsControl,
     {
@@ -5153,14 +5201,14 @@ function getUsedKeys(items2) {
 
 // src/controls/gap-control.tsx
 var React78 = __toESM(require("react"));
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_editor_props32 = require("@elementor/editor-props");
 var import_editor_responsive5 = require("@elementor/editor-responsive");
 var import_icons19 = require("@elementor/icons");
 var import_ui61 = require("@elementor/ui");
 var import_i18n29 = require("@wordpress/i18n");
 var GapControl = ({ label }) => {
-  const stackRef = (0, import_react46.useRef)(null);
+  const stackRef = (0, import_react47.useRef)(null);
   const { disabled: sizeDisabled } = useBoundProp(import_editor_props32.sizePropTypeUtil);
   const {
     value: directionValue,
@@ -5179,10 +5227,10 @@ var GapControl = ({ label }) => {
     }
     return true;
   };
-  const [isLinked, setIsLinked] = (0, import_react46.useState)(() => inferIsLinked());
+  const [isLinked, setIsLinked] = (0, import_react47.useState)(() => inferIsLinked());
   const isCurrentlyDirection = import_editor_props32.layoutDirectionPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
   const activeBreakpoint = (0, import_editor_responsive5.useActiveBreakpoint)();
-  (0, import_react46.useLayoutEffect)(() => {
+  (0, import_react47.useLayoutEffect)(() => {
     setIsLinked(inferIsLinked());
   }, [activeBreakpoint, isCurrentlyDirection]);
   const onLinkToggle = () => {
@@ -5275,7 +5323,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 var React79 = __toESM(require("react"));
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_editor_props33 = require("@elementor/editor-props");
 var import_editor_ui10 = require("@elementor/editor-ui");
 var import_icons20 = require("@elementor/icons");
@@ -5302,13 +5350,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_react47.useState)(isCustomSelected);
-  const [customWidth, setCustomWidth] = (0, import_react47.useState)(initialWidth);
-  const [customHeight, setCustomHeight] = (0, import_react47.useState)(initialHeight);
-  const [selectedValue, setSelectedValue] = (0, import_react47.useState)(
+  const [isCustom, setIsCustom] = (0, import_react48.useState)(isCustomSelected);
+  const [customWidth, setCustomWidth] = (0, import_react48.useState)(initialWidth);
+  const [customHeight, setCustomHeight] = (0, import_react48.useState)(initialHeight);
+  const [selectedValue, setSelectedValue] = (0, import_react48.useState)(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -5395,7 +5443,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 var React88 = __toESM(require("react"));
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_props35 = require("@elementor/editor-props");
 var import_ui70 = require("@elementor/ui");
@@ -5404,7 +5452,7 @@ var import_i18n38 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
 var React80 = __toESM(require("react"));
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_ui63 = require("@elementor/ui");
 var import_i18n31 = require("@wordpress/i18n");
 var ADMIN_TITLE_TEXT = (0, import_i18n31.__)("Enable Unfiltered Uploads", "elementor");
@@ -5420,7 +5468,7 @@ var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n31.__)(
 var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
-  const [isError, setIsError] = (0, import_react48.useState)(false);
+  const [isError, setIsError] = (0, import_react49.useState)(false);
   const onClose = (enabled) => {
     props.onClose(enabled);
     setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -5469,7 +5517,7 @@ function measureIconLibraryAnchor(container, buttonGroup) {
 
 // src/controls/icon-library/icon-library-popover.tsx
 var React85 = __toESM(require("react"));
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_icons23 = require("@elementor/icons");
 var import_session2 = require("@elementor/session");
@@ -5737,7 +5785,7 @@ var FontAwesomeGlyph = ({ icon, size, color, label }) => {
 
 // src/controls/icon-library/icon-library-filter.tsx
 var React82 = __toESM(require("react"));
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_icons21 = require("@elementor/icons");
 var import_ui64 = require("@elementor/ui");
 var import_i18n32 = require("@wordpress/i18n");
@@ -5772,7 +5820,7 @@ var LIBRARY_FILTER_CONFIG = {
   }
 };
 var IconLibraryFilter = ({ value, onChange }) => {
-  const popupId = (0, import_react49.useId)();
+  const popupId = (0, import_react50.useId)();
   const popupState = (0, import_ui64.usePopupState)({
     variant: "popover",
     popupId
@@ -5868,7 +5916,7 @@ var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ Rea
 
 // src/controls/icon-library/icon-library-grid.tsx
 var React83 = __toESM(require("react"));
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_ui65 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_i18n33 = require("@wordpress/i18n");
@@ -5906,12 +5954,12 @@ var IconLibraryGrid = ({
   noResultsComponent
 }) => {
   const theme = (0, import_ui65.useTheme)();
-  const containerRef = (0, import_react50.useRef)(null);
-  const cellRefs = (0, import_react50.useRef)(/* @__PURE__ */ new Map());
-  const shouldRestoreFocusRef = (0, import_react50.useRef)(false);
+  const containerRef = (0, import_react51.useRef)(null);
+  const cellRefs = (0, import_react51.useRef)(/* @__PURE__ */ new Map());
+  const shouldRestoreFocusRef = (0, import_react51.useRef)(false);
   const selectedIndex = items2.findIndex((item) => item.id === selectedValue);
-  const [focusedIndex, setFocusedIndex] = (0, import_react50.useState)(selectedIndex >= 0 ? selectedIndex : 0);
-  const [{ columnCount, cellSize }, setGridMetrics] = (0, import_react50.useState)(() => getGridMetrics(0, 0, 0));
+  const [focusedIndex, setFocusedIndex] = (0, import_react51.useState)(selectedIndex >= 0 ? selectedIndex : 0);
+  const [{ columnCount, cellSize }, setGridMetrics] = (0, import_react51.useState)(() => getGridMetrics(0, 0, 0));
   const rowCount = Math.ceil(items2.length / columnCount);
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     count: rowCount,
@@ -5921,7 +5969,7 @@ var IconLibraryGrid = ({
   });
   const focusedItem = items2[focusedIndex];
   const visibleRowIndexes = virtualizer.getVirtualIndexes().join(",");
-  (0, import_react50.useLayoutEffect)(() => {
+  (0, import_react51.useLayoutEffect)(() => {
     setFocusedIndex((current) => {
       if (items2.length === 0) {
         return 0;
@@ -5935,7 +5983,7 @@ var IconLibraryGrid = ({
       virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount));
     }
   }, [columnCount, items2, selectedIndex, selectedValue]);
-  (0, import_react50.useLayoutEffect)(() => {
+  (0, import_react51.useLayoutEffect)(() => {
     if (!shouldRestoreFocusRef.current || !focusedItem) {
       return;
     }
@@ -5946,7 +5994,7 @@ var IconLibraryGrid = ({
     cell.focus();
     shouldRestoreFocusRef.current = false;
   }, [focusedItem, visibleRowIndexes]);
-  (0, import_react50.useLayoutEffect)(() => {
+  (0, import_react51.useLayoutEffect)(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -5963,7 +6011,7 @@ var IconLibraryGrid = ({
       resizeObserver.disconnect();
     };
   }, [theme, items2.length]);
-  (0, import_react50.useLayoutEffect)(() => {
+  (0, import_react51.useLayoutEffect)(() => {
     virtualizer.measure();
   }, [cellSize, columnCount]);
   const isRtl = theme.direction === "rtl" || document.documentElement.dir === "rtl";
@@ -6160,13 +6208,13 @@ var IconLibraryGrid = ({
 
 // src/controls/icon-library/icon-library-view-toggle.tsx
 var React84 = __toESM(require("react"));
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_icons22 = require("@elementor/icons");
 var import_ui66 = require("@elementor/ui");
 var import_i18n34 = require("@wordpress/i18n");
 var VIEW_MENU_WIDTH = 122;
 var IconLibraryViewToggle = ({ value, onChange }) => {
-  const popupId = (0, import_react51.useId)();
+  const popupId = (0, import_react52.useId)();
   const popupState = (0, import_ui66.usePopupState)({
     variant: "popover",
     popupId
@@ -6277,18 +6325,18 @@ var IconLibraryPopover = ({
     handleChange: handleSearchChange,
     setImmediateValue: setSearchValue
   } = (0, import_utils6.useDebounceState)({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
-  const [activeLibraries, setActiveLibraries] = (0, import_react52.useState)([]);
+  const [activeLibraries, setActiveLibraries] = (0, import_react53.useState)([]);
   const [storedView, setStoredView] = (0, import_session2.useSessionStorage)(
     ICON_LIBRARY_VIEW_STORAGE_KEY,
     ICON_LIBRARY_VIEW_STORAGE_PREFIX
   );
   const view = isIconLibraryView(storedView) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
   const { data: icons = [], isLoading } = useFontAwesome7Catalog(open);
-  const items2 = (0, import_react52.useMemo)(
+  const items2 = (0, import_react53.useMemo)(
     () => createIconLibraryItems(icons, searchValue, activeLibraries),
     [activeLibraries, icons, searchValue]
   );
-  const selectedValue = (0, import_react52.useMemo)(
+  const selectedValue = (0, import_react53.useMemo)(
     () => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
     [icons, selectedIconClass, selectedIconLibrary]
   );
@@ -6634,11 +6682,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
   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_react53.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react54.useState)(false);
   const iconLibraryPopoverState = (0, import_ui70.usePopupState)({ variant: "popover" });
-  const controlContainerRef = (0, import_react53.useRef)(null);
-  const buttonGroupRef = (0, import_react53.useRef)(null);
-  const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react53.useState)(null);
+  const controlContainerRef = (0, import_react54.useRef)(null);
+  const buttonGroupRef = (0, import_react54.useRef)(null);
+  const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react54.useState)(null);
   const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
   const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
   const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
@@ -6690,7 +6738,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
     setIconLibraryAnchor(anchor);
     iconLibraryPopoverState.open(event);
   };
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!iconLibraryPopoverState.isOpen) {
       return;
     }
@@ -6992,7 +7040,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 var React92 = __toESM(require("react"));
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_editor_props38 = require("@elementor/editor-props");
 var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons27 = require("@elementor/icons");
@@ -7014,7 +7062,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = (0, import_react54.useRef)(null);
+  const rowRef = (0, import_react55.useRef)(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -7087,7 +7135,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 var React94 = __toESM(require("react"));
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_editor_props39 = require("@elementor/editor-props");
 var import_icons29 = require("@elementor/icons");
 var import_ui76 = require("@elementor/ui");
@@ -7122,7 +7170,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = (0, import_react55.useRef)(null);
+  const rowRef = (0, import_react56.useRef)(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -7157,7 +7205,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_editor_props40 = require("@elementor/editor-props");
 var import_ui77 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
@@ -7178,7 +7226,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui77.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react56.useRef)({
+  const valuesHistory = (0, import_react57.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -7425,7 +7473,7 @@ var BackgroundClipField = () => {
 
 // src/controls/repeatable-control.tsx
 var React97 = __toESM(require("react"));
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_editor_props43 = require("@elementor/editor-props");
 var import_ui80 = require("@elementor/ui");
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -7446,11 +7494,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = (0, import_react57.useMemo)(
+    const childArrayPropTypeUtil2 = (0, import_react58.useMemo)(
       () => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = (0, import_react57.useMemo)(
+    const contextValue = (0, import_react58.useMemo)(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -7582,7 +7630,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 var React98 = __toESM(require("react"));
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_editor_props44 = require("@elementor/editor-props");
 var import_ui81 = require("@elementor/ui");
 var import_i18n46 = require("@wordpress/i18n");
@@ -7609,9 +7657,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
-  const [keyError, setKeyError] = (0, import_react58.useState)("");
-  const [valueError, setValueError] = (0, import_react58.useState)("");
-  const [sessionState, setSessionState] = (0, import_react58.useState)({
+  const [keyError, setKeyError] = (0, import_react59.useState)("");
+  const [valueError, setValueError] = (0, import_react59.useState)("");
+  const [sessionState, setSessionState] = (0, import_react59.useState)({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -7621,7 +7669,7 @@ var KeyValueControl = createControl((props = {}) => {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = (0, import_react58.useMemo)(
+  const [keyRegex, valueRegex, errMsg] = (0, import_react59.useMemo)(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -7753,7 +7801,7 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 var React112 = __toESM(require("react"));
-var import_react66 = require("react");
+var import_react67 = require("react");
 var import_editor_props54 = require("@elementor/editor-props");
 var import_icons37 = require("@elementor/icons");
 var import_ui95 = require("@elementor/ui");
@@ -7812,7 +7860,7 @@ var import_i18n52 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/move.tsx
 var React101 = __toESM(require("react"));
-var import_react59 = require("react");
+var import_react60 = require("react");
 var import_editor_props47 = require("@elementor/editor-props");
 var import_icons31 = require("@elementor/icons");
 var import_ui84 = require("@elementor/ui");
@@ -7859,7 +7907,7 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
-  const rowRefs = [(0, import_react59.useRef)(null), (0, import_react59.useRef)(null), (0, import_react59.useRef)(null)];
+  const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
   return /* @__PURE__ */ React101.createElement(import_ui84.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React101.createElement(PropProvider, { ...context }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React101.createElement(
     AxisRow,
     {
@@ -7874,7 +7922,7 @@ var Move = () => {
 
 // src/controls/transform-control/functions/rotate.tsx
 var React102 = __toESM(require("react"));
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_editor_props48 = require("@elementor/editor-props");
 var import_icons32 = require("@elementor/icons");
 var import_ui85 = require("@elementor/ui");
@@ -7899,7 +7947,7 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
-  const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
+  const rowRefs = [(0, import_react61.useRef)(null), (0, import_react61.useRef)(null), (0, import_react61.useRef)(null)];
   return /* @__PURE__ */ React102.createElement(import_ui85.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
     AxisRow,
     {
@@ -7913,7 +7961,7 @@ var Rotate = () => {
 
 // src/controls/transform-control/functions/scale.tsx
 var React104 = __toESM(require("react"));
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_editor_props49 = require("@elementor/editor-props");
 var import_icons33 = require("@elementor/icons");
 var import_ui87 = require("@elementor/ui");
@@ -7946,13 +7994,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
-  const rowRefs = [(0, import_react61.useRef)(null), (0, import_react61.useRef)(null), (0, import_react61.useRef)(null)];
+  const rowRefs = [(0, import_react62.useRef)(null), (0, import_react62.useRef)(null), (0, import_react62.useRef)(null)];
   return /* @__PURE__ */ React104.createElement(import_ui87.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(PropProvider, { ...context }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React104.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
 var React105 = __toESM(require("react"));
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_editor_props50 = require("@elementor/editor-props");
 var import_icons34 = require("@elementor/icons");
 var import_ui88 = require("@elementor/ui");
@@ -7972,7 +8020,7 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
-  const rowRefs = [(0, import_react62.useRef)(null), (0, import_react62.useRef)(null), (0, import_react62.useRef)(null)];
+  const rowRefs = [(0, import_react63.useRef)(null), (0, import_react63.useRef)(null), (0, import_react63.useRef)(null)];
   return /* @__PURE__ */ React105.createElement(import_ui88.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(
     AxisRow,
     {
@@ -7985,7 +8033,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_editor_props51 = require("@elementor/editor-props");
 var import_ui89 = require("@elementor/ui");
 var useTransformTabsHistory = ({
@@ -8012,7 +8060,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui89.useTabs)(getCurrentTransformType());
-  const valuesHistory = (0, import_react63.useRef)({
+  const valuesHistory = (0, import_react64.useRef)({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -8156,7 +8204,7 @@ var import_i18n56 = require("@wordpress/i18n");
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 var React109 = __toESM(require("react"));
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_editor_props52 = require("@elementor/editor-props");
 var import_ui92 = require("@elementor/ui");
 var import_i18n54 = require("@wordpress/i18n");
@@ -8188,13 +8236,13 @@ var PerspectiveOriginControlProvider = () => {
   return /* @__PURE__ */ React109.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React109.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = (0, import_react64.useRef)(null);
+  const rowRef = (0, import_react65.useRef)(null);
   return /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React109.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React109.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
 var React110 = __toESM(require("react"));
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_editor_props53 = require("@elementor/editor-props");
 var import_ui93 = require("@elementor/ui");
 var import_i18n55 = require("@wordpress/i18n");
@@ -8222,7 +8270,7 @@ var TransformOriginControl = () => {
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
-  const rowRef = (0, import_react65.useRef)(null);
+  const rowRef = (0, import_react66.useRef)(null);
   return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
@@ -8270,7 +8318,7 @@ var SIZE11 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
-    const headerRef = (0, import_react66.useRef)(null);
+    const headerRef = (0, import_react67.useRef)(null);
     const popupState = (0, import_ui95.usePopupState)({ variant: "popover" });
     return /* @__PURE__ */ React112.createElement(PropProvider, { ...context }, /* @__PURE__ */ React112.createElement(
       TransformSettingsControl,
@@ -8350,7 +8398,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 var React115 = __toESM(require("react"));
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_editor_props57 = require("@elementor/editor-props");
 var import_icons39 = require("@elementor/icons");
 var import_ui98 = require("@elementor/ui");
@@ -8359,15 +8407,15 @@ var import_i18n60 = require("@wordpress/i18n");
 
 // src/controls/selection-size-control.tsx
 var React113 = __toESM(require("react"));
-var import_react67 = require("react");
+var import_react68 = require("react");
 var import_editor_props55 = require("@elementor/editor-props");
 var import_ui96 = require("@elementor/ui");
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
-    const rowRef = (0, import_react67.useRef)(null);
+    const rowRef = (0, import_react68.useRef)(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = (0, import_react67.useMemo)(() => {
+    const currentSizeConfig = (0, import_react68.useMemo)(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -8580,7 +8628,7 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 var React114 = __toESM(require("react"));
-var import_react68 = require("react");
+var import_react69 = require("react");
 var import_editor_props56 = require("@elementor/editor-props");
 var import_editor_ui15 = require("@elementor/editor-ui");
 var import_icons38 = require("@elementor/icons");
@@ -8666,9 +8714,9 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = (0, import_react68.useRef)(null);
+  const defaultRef = (0, import_react69.useRef)(null);
   const popoverState = (0, import_ui97.usePopupState)({ variant: "popover" });
-  const disabledCategories = (0, import_react68.useMemo)(() => {
+  const disabledCategories = (0, import_react69.useMemo)(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -8894,14 +8942,14 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = (0, import_react69.useState)([]);
+    const [recentlyUsedList, setRecentlyUsedList] = (0, import_react70.useState)([]);
     const proInstalled = (0, import_utils8.hasProInstalled)();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react69.useMemo)(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react70.useMemo)(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = (0, import_react69.useMemo)(() => {
+    const allowedTransitionSet = (0, import_react70.useMemo)(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -8912,7 +8960,7 @@ var TransitionRepeaterControl = createControl(
       });
       return set;
     }, [proInstalled]);
-    (0, import_react69.useEffect)(() => {
+    (0, import_react70.useEffect)(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -8924,10 +8972,10 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    (0, import_react69.useEffect)(() => {
+    (0, import_react70.useEffect)(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = (0, import_react69.useMemo)(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = (0, import_react70.useMemo)(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React115.createElement(
       RepeatableControl,
@@ -9210,13 +9258,13 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 
 // src/controls/inline-editing-control.tsx
 var React124 = __toESM(require("react"));
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_editor_props65 = require("@elementor/editor-props");
 var import_ui107 = require("@elementor/ui");
 
 // src/components/inline-editor.tsx
 var React121 = __toESM(require("react"));
-var import_react70 = require("react");
+var import_react71 = require("react");
 var import_ui104 = require("@elementor/ui");
 var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
 var import_extension_document = __toESM(require("@tiptap/extension-document"));
@@ -9230,7 +9278,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_react71 = require("@tiptap/react");
+var import_react72 = require("@tiptap/react");
 
 // src/utils/inline-editing.ts
 var import_editor_props64 = require("@elementor/editor-props");
@@ -9279,8 +9327,8 @@ var InlineEditor = React121.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = (0, import_react70.useRef)(null);
-  const onBlurRef = (0, import_react70.useRef)(onBlur);
+  const containerRef = (0, import_react71.useRef)(null);
+  const onBlurRef = (0, import_react71.useRef)(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -9302,7 +9350,7 @@ var InlineEditor = React121.forwardRef((props, ref) => {
     ...HTMLAttributes,
     class: elementClasses
   });
-  const editor = (0, import_react71.useEditor)({
+  const editor = (0, import_react72.useEditor)({
     ...mountElement ? { element: mountElement } : {},
     extensions: [
       import_extension_document.default.extend({
@@ -9375,11 +9423,11 @@ var InlineEditor = React121.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React121.createElement(import_ui104.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(import_react71.EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React121.createElement(import_ui104.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(import_react72.EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = (0, import_react70.useRef)(false);
-  (0, import_react70.useEffect)(() => {
+  const hasMounted = (0, import_react71.useRef)(false);
+  (0, import_react71.useEffect)(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -9390,16 +9438,16 @@ var useOnUpdate = (callback, dependencies) => {
 
 // src/components/inline-editor-toolbar.tsx
 var React123 = __toESM(require("react"));
-var import_react73 = require("react");
+var import_react74 = require("react");
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_icons41 = require("@elementor/icons");
 var import_ui106 = require("@elementor/ui");
-var import_react74 = require("@tiptap/react");
+var import_react75 = require("@tiptap/react");
 var import_i18n64 = require("@wordpress/i18n");
 
 // src/components/url-popover.tsx
 var React122 = __toESM(require("react"));
-var import_react72 = require("react");
+var import_react73 = require("react");
 var import_icons40 = require("@elementor/icons");
 var import_ui105 = require("@elementor/ui");
 var import_i18n63 = require("@wordpress/i18n");
@@ -9412,8 +9460,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = (0, import_react72.useRef)(null);
-  (0, import_react72.useEffect)(() => {
+  const inputRef = (0, import_react73.useRef)(null);
+  (0, import_react73.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -9468,16 +9516,16 @@ var InlineEditorToolbar = ({
   sx = {},
   inControlPanel = false
 }) => {
-  const [urlValue, setUrlValue] = (0, import_react73.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react73.useState)(false);
-  const toolbarRef = (0, import_react73.useRef)(null);
+  const [urlValue, setUrlValue] = (0, import_react74.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react74.useState)(false);
+  const toolbarRef = (0, import_react74.useRef)(null);
   const linkPopupState = (0, import_ui106.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = (0, import_react74.useEditorState)({
+  const editorState = (0, import_react75.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react73.useMemo)(() => {
+  const formatButtonsList = (0, import_react74.useMemo)(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -9514,7 +9562,7 @@ var InlineEditorToolbar = ({
     }
     linkPopupState.close();
   };
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     if (!inControlPanel) {
       editor?.commands?.focus();
     }
@@ -9695,8 +9743,8 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
   const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
   const { value: rawValue } = usePropKeyContext();
   const content = value ?? extractInlineHtmlContent(rawValue);
-  const [editor, setEditor] = (0, import_react75.useState)(null);
-  const handleChange = (0, import_react75.useCallback)(
+  const [editor, setEditor] = (0, import_react76.useState)(null);
+  const handleChange = (0, import_react76.useCallback)(
     (newValue) => {
       const html = newValue ?? "";
       setValue(html);
@@ -9878,7 +9926,7 @@ function useFormFieldSuggestions(options) {
 
 // src/controls/email-form-action-control/email-chips-field.tsx
 var React125 = __toESM(require("react"));
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_editor_props67 = require("@elementor/editor-props");
 var import_ui108 = require("@elementor/ui");
 
@@ -9916,10 +9964,10 @@ function resolveMention(raw, suggestions) {
 }
 var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
-  const [inputValue, setInputValue] = (0, import_react76.useState)("");
+  const [inputValue, setInputValue] = (0, import_react77.useState)("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
-  const suggestionOptions = (0, import_react76.useMemo)(
+  const suggestionOptions = (0, import_react77.useMemo)(
     () => suggestions.map((suggestion) => `[${suggestion.value}]`),
     [suggestions]
   );
@@ -10099,7 +10147,7 @@ var AttachmentTypeControl = createControl(({ label, options }) => {
 
 // src/controls/notice-control.tsx
 var React130 = __toESM(require("react"));
-var import_react77 = require("react");
+var import_react78 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_icons42 = require("@elementor/icons");
 var import_ui113 = require("@elementor/ui");
@@ -10117,7 +10165,7 @@ var markNoticeAsDismissedInSession = (dismissId) => {
 };
 var NoticeControl = createControl(
   ({ noticeType = "info", heading, content, dismissible, buttonText, buttonUrl }) => {
-    const [isDismissed, setIsDismissed] = (0, import_react77.useState)(false);
+    const [isDismissed, setIsDismissed] = (0, import_react78.useState)(false);
     if (isDismissed || !content) {
       return null;
     }
@@ -10200,24 +10248,24 @@ var GridSpanControl = createControl(
 
 // src/components/promotions/display-conditions-control.tsx
 var React133 = __toESM(require("react"));
-var import_react79 = require("react");
+var import_react80 = require("react");
 var import_icons43 = require("@elementor/icons");
 var import_ui116 = require("@elementor/ui");
 var import_i18n68 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
 var React132 = __toESM(require("react"));
-var import_react78 = require("react");
+var import_react79 = require("react");
 var import_editor_ui19 = require("@elementor/editor-ui");
 var import_ui115 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = (0, import_react78.forwardRef)(
+var PromotionTrigger = (0, import_react79.forwardRef)(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react78.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react79.useState)(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = (0, import_react78.useCallback)(() => {
+    const toggle = (0, import_react79.useCallback)(() => {
       setIsOpen((prev) => {
         if (!prev) {
           trackViewPromotion(trackingData);
@@ -10225,7 +10273,7 @@ var PromotionTrigger = (0, import_react78.forwardRef)(
         return !prev;
       });
     }, [trackingData]);
-    (0, import_react78.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
+    (0, import_react79.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     return /* @__PURE__ */ React132.createElement(React132.Fragment, null, promotion && /* @__PURE__ */ React132.createElement(
       import_editor_ui19.PromotionInfotip,
       {
@@ -10259,7 +10307,7 @@ var PromotionTrigger = (0, import_react78.forwardRef)(
 var ARIA_LABEL = (0, import_i18n68.__)("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = (0, import_react79.useRef)(null);
+  const triggerRef = (0, import_react80.useRef)(null);
   return /* @__PURE__ */ React133.createElement(
     import_ui116.Stack,
     {
@@ -10291,14 +10339,14 @@ var DisplayConditionsControl = createControl(() => {
 
 // src/components/promotions/attributes-control.tsx
 var React134 = __toESM(require("react"));
-var import_react80 = require("react");
+var import_react81 = require("react");
 var import_icons44 = require("@elementor/icons");
 var import_ui117 = require("@elementor/ui");
 var import_i18n69 = require("@wordpress/i18n");
 var ARIA_LABEL2 = (0, import_i18n69.__)("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = (0, import_react80.useRef)(null);
+  const triggerRef = (0, import_react81.useRef)(null);
   return /* @__PURE__ */ React134.createElement(
     import_ui117.Stack,
     {
@@ -10335,7 +10383,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 var React136 = __toESM(require("react"));
-var import_react81 = require("react");
+var import_react82 = require("react");
 var import_icons46 = require("@elementor/icons");
 var import_ui119 = require("@elementor/ui");
 var import_i18n70 = require("@wordpress/i18n");
@@ -10357,7 +10405,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = (0, import_react81.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react82.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -10533,10 +10581,10 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(import_ui119.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = (0, import_react81.useState)(null);
+  const [ref, setRef] = (0, import_react82.useState)(null);
   const popoverState = (0, import_ui119.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui119.bindPopover)(popoverState);
-  (0, import_react81.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -10599,7 +10647,7 @@ var differsFromExternal = (newState, externalState) => {
 
 // src/components/size/unit-select.tsx
 var React137 = __toESM(require("react"));
-var import_react82 = require("react");
+var import_react83 = require("react");
 var import_editor_ui20 = require("@elementor/editor-ui");
 var import_ui120 = require("@elementor/ui");
 var menuItemContentStyles2 = {
@@ -10610,7 +10658,7 @@ var menuItemContentStyles2 = {
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
   const popupState = (0, import_ui120.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react82.useId)()
+    popupId: (0, import_react83.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
@@ -10646,8 +10694,8 @@ var StyledButton3 = (0, import_ui120.styled)(import_ui120.Button, {
 
 // src/components/size/unstable-size-input.tsx
 var React138 = __toESM(require("react"));
-var import_react83 = require("react");
-var UnstableSizeInput = (0, import_react83.forwardRef)(
+var import_react84 = require("react");
+var UnstableSizeInput = (0, import_react84.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
     return /* @__PURE__ */ React138.createElement(
       NumberInput,
@@ -10715,7 +10763,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-var import_react84 = require("react");
+var import_react85 = require("react");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var getFontControlConfig = () => {
   const { controls } = (0, import_editor_v1_adapters4.getElementorConfig)();
@@ -10723,7 +10771,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return (0, import_react84.useMemo)(() => {
+  return (0, import_react85.useMemo)(() => {
     if (!groups || !options) {
       return [];
     }