@elementor/editor-controls 4.4.0-beta1 → 4.4.0-beta3

package/dist/index.mjs

@@ -1531,17 +1531,17 @@ var SizeControl = createControl(
     const actualUnits = resolveUnits(propType, enablePropTypeUnits, variant, units2, actualExtendedOptions);
     const popupState = usePopupState2({ variant: "popover" });
     const memorizedExternalState = useMemo2(
-      () => createStateFromSizeProp(sizeValue, actualDefaultUnit),
+      () => sizeValue ? createStateFromSizeProp(sizeValue, actualDefaultUnit) : null,
       [sizeValue, actualDefaultUnit]
     );
     const [state, setState] = useSyncExternalState({
       external: memorizedExternalState,
       setExternal: (newState, options, meta) => setSizeValue(extractValueFromState(newState), options, meta),
       persistWhen: (newState) => !!extractValueFromState(newState),
-      fallback: (newState) => ({
-        unit: newState?.unit ?? actualDefaultUnit,
-        numeric: newState?.numeric ?? DEFAULT_SIZE,
-        custom: newState?.custom ?? ""
+      fallback: (prevState) => ({
+        unit: prevState?.unit && !isUnitExtendedOption(prevState.unit) ? prevState.unit : actualDefaultUnit,
+        numeric: DEFAULT_SIZE,
+        custom: ""
       })
     });
     const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = actualDefaultUnit } = extractValueFromState(state, true) || {};
@@ -3566,6 +3566,13 @@ var createDefaultSizeValue = (units2, defaultUnit) => {
   }
   return { size: DEFAULT_SIZE2, unit };
 };
+var createEmptySizeValue = (previousValue, units2, defaultUnit) => {
+  const previousUnit = previousValue?.unit;
+  if (!previousUnit || isExtendedUnit(previousUnit) || !units2.includes(previousUnit)) {
+    return createDefaultSizeValue(units2, defaultUnit);
+  }
+  return { size: DEFAULT_SIZE2, unit: previousUnit };
+};
 var resolveFallbackUnit = (unit, units2, defaultUnit) => {
   if (units2.includes(unit)) {
     return unit;
@@ -3620,7 +3627,7 @@ var useSizeValue = ({
       }
     },
     persistWhen: (next) => hasChanged(next, resolvedValue),
-    fallback: () => createDefaultSizeValue(units2, defaultUnit)
+    fallback: (previousValue) => createEmptySizeValue(previousValue, units2, defaultUnit)
   });
   const [unit, setUnit] = useUnitSync({
     sizeValue,
@@ -4056,16 +4063,19 @@ var UnstableSizeControl = createControl(
       restoreValue
     } = useBoundProp(sizePropTypeUtil4);
     const lastNonAutoValue = useRef13(null);
-    const { sizeValue, placeholder } = resolveBoundPropValue(
+    const clearedUnit = useRef13(null);
+    const { sizeValue: resolvedSizeValue, placeholder } = resolveBoundPropValue(
       value ?? lastNonAutoValue.current,
       boundPropPlaceholder,
       propPlaceholder
     );
+    const sizeValue = applyClearedUnit(resolvedSizeValue, value, clearedUnit.current);
     const units2 = getSizeUnits(propType, variant);
     const defaultUnit = getDefaultUnit(propType);
     const handleBlur = () => {
       const isRequired = propType.settings.required;
       if (shouldNullifyValue(value) && !isRequired) {
+        clearedUnit.current = value?.unit ?? null;
         setValue(null);
       }
       if (isRequired) {
@@ -4073,6 +4083,7 @@ var UnstableSizeControl = createControl(
       }
     };
     const handleChange = (newValue, options, meta) => {
+      clearedUnit.current = null;
       if (isTransitioningFromExtendedUnit(newValue, value)) {
         lastNonAutoValue.current = newValue;
         setValue(null);
@@ -4106,6 +4117,12 @@ var UnstableSizeControl = createControl(
     );
   }
 );
+var applyClearedUnit = (resolvedValue, boundValue, clearedUnit) => {
+  if (boundValue || !resolvedValue || !clearedUnit) {
+    return resolvedValue;
+  }
+  return { ...resolvedValue, unit: clearedUnit };
+};
 var isTransitioningFromExtendedUnit = (nextValue, previousValue) => {
   return !isExtendedUnit(nextValue.unit) && isExtendedUnit(previousValue?.unit) && nextValue.size === "";
 };
@@ -4797,7 +4814,7 @@ function factoryFilter(newValue, options, minInputLength) {
 }
 
 // src/hooks/use-query-autocomplete.ts
-import { useEffect as useEffect14, useMemo as useMemo9, useState as useState14 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef15, useState as useState14 } from "react";
 import { numberPropTypeUtil as numberPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { debounce as debounce2 } from "@elementor/utils";
@@ -4821,13 +4838,16 @@ function useQueryAutocomplete({
     ),
     [url, excludeIdSet]
   );
+  const paramsKey = useMemo9(() => JSON.stringify(params), [params]);
+  const paramsRef = useRef15(params);
+  paramsRef.current = params;
   useEffect14(() => {
     if (minInputLength === 0 && url) {
-      fetchOptions(url, { ...params, term: "" }).then((newOptions) => {
+      fetchOptions(url, { ...paramsRef.current, term: "" }).then((newOptions) => {
         setOptions(formatOptions(filterExcludedOptions(newOptions, excludeIdSet)));
       });
     }
-  }, [url, minInputLength, excludeIdSet, params]);
+  }, [url, minInputLength, excludeIdSet, paramsKey]);
   const updateOptions = (term) => {
     const termStr = term ?? "";
     if (!url || termStr.length < minInputLength) {
@@ -5258,7 +5278,7 @@ function extractChips(value) {
 
 // src/controls/query-filter-repeater-control.tsx
 import * as React80 from "react";
-import { useMemo as useMemo11, useRef as useRef15 } from "react";
+import { useMemo as useMemo11, useRef as useRef16 } from "react";
 import { useSelectedElementSettings } from "@elementor/editor-elements";
 import {
   extractValue,
@@ -5360,7 +5380,7 @@ var ItemContent = ({
   chipsPlaceholder
 }) => {
   const propContext = useBoundProp(queryFilterPropTypeUtil);
-  const snapshotsByKeyRef = useRef15({});
+  const snapshotsByKeyRef = useRef16({});
   const handleValueChange = (nextValue, options, meta) => {
     if (meta?.bind !== "key") {
       propContext.setValue(nextValue, options, meta);
@@ -5430,9 +5450,85 @@ function getUsedKeys(items2) {
   return new Set(keys);
 }
 
-// src/controls/gap-control.tsx
+// src/controls/query-select-control.tsx
 import * as React81 from "react";
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef16, useState as useState16 } from "react";
+import { useMemo as useMemo12 } from "react";
+import { numberPropTypeUtil as numberPropTypeUtil5, queryPropTypeUtil as queryPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
+import { Autocomplete as Autocomplete4, TextField as TextField10 } from "@elementor/ui";
+import { __ as __31 } from "@wordpress/i18n";
+var SIZE10 = "tiny";
+var QuerySelectControl = createControl((props) => {
+  const { queryOptions, placeholder, minInputLength = 0, ariaLabel } = props;
+  const { value, setValue, disabled } = useBoundProp(queryPropTypeUtil3);
+  const selectedOption = useMemo12(() => extractFlatOptionFromQueryValue(value), [value]);
+  const { options, updateOptions } = useQueryAutocomplete({
+    url: queryOptions.url,
+    params: queryOptions.params,
+    minInputLength,
+    initialQueryValue: value
+  });
+  const optionsWithSelected = useMemo12(
+    () => withSelectedOption(options, selectedOption),
+    [options, selectedOption]
+  );
+  const handleChange = (_, newValue) => {
+    if (!newValue) {
+      setValue(null);
+      return;
+    }
+    setValue({
+      id: numberPropTypeUtil5.create(Number(newValue.id)),
+      label: stringPropTypeUtil13.create(newValue.label)
+    });
+  };
+  const handleInputChange = (_, term, reason) => {
+    if ("reset" === reason || "clear" === reason) {
+      updateOptions(null);
+      return;
+    }
+    if ("input" !== reason) {
+      return;
+    }
+    updateOptions(term || null);
+  };
+  return /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(
+    Autocomplete4,
+    {
+      fullWidth: true,
+      openOnFocus: true,
+      disabled,
+      size: SIZE10,
+      value: selectedOption,
+      options: optionsWithSelected,
+      onChange: handleChange,
+      onInputChange: handleInputChange,
+      getOptionLabel: (option) => option.label,
+      isOptionEqualToValue: (option, val) => option.id === val.id,
+      filterOptions: (opts) => opts,
+      renderInput: (params) => /* @__PURE__ */ React81.createElement(
+        TextField10,
+        {
+          ...params,
+          placeholder: placeholder ?? __31("Search", "elementor"),
+          inputProps: {
+            ...params.inputProps,
+            ...ariaLabel ? { "aria-label": ariaLabel } : {}
+          }
+        }
+      )
+    }
+  ));
+});
+function withSelectedOption(options, selectedOption) {
+  if (!selectedOption || options.some((option) => option.id === selectedOption.id)) {
+    return options;
+  }
+  return [selectedOption, ...options];
+}
+
+// src/controls/gap-control.tsx
+import * as React82 from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef17, useState as useState16 } from "react";
 import {
   layoutDirectionPropTypeUtil,
   sizePropTypeUtil as sizePropTypeUtil6
@@ -5440,9 +5536,9 @@ import {
 import { useActiveBreakpoint as useActiveBreakpoint5 } from "@elementor/editor-responsive";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid12, Stack as Stack13, Tooltip as Tooltip7 } from "@elementor/ui";
-import { __ as __31 } from "@wordpress/i18n";
+import { __ as __32 } from "@wordpress/i18n";
 var GapControl = ({ label }) => {
-  const stackRef = useRef16(null);
+  const stackRef = useRef17(null);
   const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil6);
   const {
     value: directionValue,
@@ -5488,8 +5584,8 @@ var GapControl = ({ label }) => {
   };
   const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
-  const linkedLabel = __31("Link %s", "elementor").replace("%s", tooltipLabel);
-  const unlinkedLabel = __31("Unlink %s", "elementor").replace("%s", tooltipLabel);
+  const linkedLabel = __32("Link %s", "elementor").replace("%s", tooltipLabel);
+  const unlinkedLabel = __32("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || directionDisabled;
   const propProviderProps = {
     propType,
@@ -5509,7 +5605,7 @@ var GapControl = ({ label }) => {
     }
     return sizePropTypeUtil6.extract(directionPlaceholder?.[bind]);
   };
-  return /* @__PURE__ */ React81.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React81.createElement(Stack13, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React81.createElement(ControlLabel, null, label), /* @__PURE__ */ React81.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React82.createElement(Stack13, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React82.createElement(ControlLabel, null, label), /* @__PURE__ */ React82.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React82.createElement(
     StyledToggleButton,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -5521,21 +5617,21 @@ var GapControl = ({ label }) => {
       disabled,
       isPlaceholder: hasPlaceholders
     },
-    /* @__PURE__ */ React81.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React81.createElement(Stack13, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React81.createElement(Grid12, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React81.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React81.createElement(ControlFormLabel, null, __31("Column", "elementor"))), /* @__PURE__ */ React81.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React82.createElement(Stack13, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React82.createElement(Grid12, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React82.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, __32("Column", "elementor"))), /* @__PURE__ */ React82.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(
     Control4,
     {
       bind: "column",
-      ariaLabel: __31("Column gap", "elementor"),
+      ariaLabel: __32("Column gap", "elementor"),
       isLinked,
       anchorRef: stackRef,
       placeholder: getEffectivePlaceholder("column") ?? void 0
     }
-  ))), /* @__PURE__ */ React81.createElement(Grid12, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React81.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React81.createElement(ControlFormLabel, null, __31("Row", "elementor"))), /* @__PURE__ */ React81.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React81.createElement(
+  ))), /* @__PURE__ */ React82.createElement(Grid12, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React82.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, __32("Row", "elementor"))), /* @__PURE__ */ React82.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(
     Control4,
     {
       bind: "row",
-      ariaLabel: __31("Row gap", "elementor"),
+      ariaLabel: __32("Row gap", "elementor"),
       isLinked,
       anchorRef: stackRef,
       placeholder: getEffectivePlaceholder("row") ?? void 0
@@ -5550,21 +5646,21 @@ var Control4 = ({
   placeholder
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React81.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel });
+    return /* @__PURE__ */ React82.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel });
   }
-  return /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React81.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel }));
+  return /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React82.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel }));
 };
 
 // src/controls/aspect-ratio-control.tsx
-import * as React82 from "react";
+import * as React83 from "react";
 import { useEffect as useEffect16, useState as useState17 } from "react";
-import { stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
-import { Grid as Grid13, Select as Select3, Stack as Stack14, TextField as TextField10 } from "@elementor/ui";
-import { __ as __32 } from "@wordpress/i18n";
+import { Grid as Grid13, Select as Select3, Stack as Stack14, TextField as TextField11 } from "@elementor/ui";
+import { __ as __33 } from "@wordpress/i18n";
 var RATIO_OPTIONS = [
-  { label: __32("Auto", "elementor"), value: "auto" },
+  { label: __33("Auto", "elementor"), value: "auto" },
   { label: "1/1", value: "1/1" },
   { label: "4/3", value: "4/3" },
   { label: "3/4", value: "3/4" },
@@ -5580,7 +5676,7 @@ var AspectRatioControl = createControl(({ label }) => {
     setValue: setAspectRatioValue,
     disabled,
     placeholder: externalPlaceholder
-  } = useBoundProp(stringPropTypeUtil13);
+  } = useBoundProp(stringPropTypeUtil14);
   const aspectRatioValue = currentPropValue ?? externalPlaceholder;
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
@@ -5631,7 +5727,7 @@ var AspectRatioControl = createControl(({ label }) => {
   };
   const lookup = currentPropValue ?? externalPlaceholder;
   const selectedOption = RATIO_OPTIONS.find((option) => option.value === lookup);
-  return /* @__PURE__ */ React82.createElement(ControlActions, null, /* @__PURE__ */ React82.createElement(Stack14, { direction: "column", gap: 2 }, /* @__PURE__ */ React82.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React82.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(ControlLabel, null, label)), /* @__PURE__ */ React82.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React83.createElement(ControlActions, null, /* @__PURE__ */ React83.createElement(Stack14, { direction: "column", gap: 2 }, /* @__PURE__ */ React83.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React83.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(ControlLabel, null, label)), /* @__PURE__ */ React83.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(
     Select3,
     {
       size: "tiny",
@@ -5643,11 +5739,11 @@ var AspectRatioControl = createControl(({ label }) => {
       renderValue: isCustomSelected ? void 0 : () => selectedOption?.label,
       fullWidth: true
     },
-    [...RATIO_OPTIONS, { label: __32("Custom", "elementor"), value: CUSTOM_RATIO }].map(
-      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React82.createElement(MenuListItem5, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
+    [...RATIO_OPTIONS, { label: __33("Custom", "elementor"), value: CUSTOM_RATIO }].map(
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React83.createElement(MenuListItem5, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
-  ))), isCustom && /* @__PURE__ */ React82.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React82.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(
-    TextField10,
+  ))), isCustom && /* @__PURE__ */ React83.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React83.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(
+    TextField11,
     {
       size: "tiny",
       type: "number",
@@ -5656,11 +5752,11 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customWidth,
       onChange: handleCustomWidthChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React82.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React83.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
       }
     }
-  )), /* @__PURE__ */ React82.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(
-    TextField10,
+  )), /* @__PURE__ */ React83.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(
+    TextField11,
     {
       size: "tiny",
       type: "number",
@@ -5669,23 +5765,23 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customHeight,
       onChange: handleCustomHeightChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React82.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React83.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
       }
     }
   )))));
 });
 
 // src/controls/svg-media-control.tsx
-import * as React93 from "react";
-import { useEffect as useEffect18, useRef as useRef21, useState as useState24 } from "react";
+import * as React94 from "react";
+import { useEffect as useEffect18, useRef as useRef23, useState as useState24 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
 import { Box as Box24, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack18, styled as styled12, usePopupState as usePopupState9 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
-import { __ as __41 } from "@wordpress/i18n";
+import { __ as __42 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
-import * as React83 from "react";
+import * as React84 from "react";
 import { useState as useState18 } from "react";
 import {
   Button as Button5,
@@ -5698,14 +5794,14 @@ import {
   DialogTitle,
   Divider as Divider3
 } from "@elementor/ui";
-import { __ as __33 } from "@wordpress/i18n";
-var ADMIN_TITLE_TEXT = __33("Enable Unfiltered Uploads", "elementor");
-var ADMIN_CONTENT_TEXT = __33(
+import { __ as __34 } from "@wordpress/i18n";
+var ADMIN_TITLE_TEXT = __34("Enable Unfiltered Uploads", "elementor");
+var ADMIN_CONTENT_TEXT = __34(
   "Before you enable unfiltered files upload, note that such files include a security risk. Elementor does run a process to remove possible malicious code, but there is still risk involved when using such files.",
   "elementor"
 );
-var ADMIN_FAILED_CONTENT_TEXT_PT1 = __33("Failed to enable unfiltered files upload.", "elementor");
-var ADMIN_FAILED_CONTENT_TEXT_PT2 = __33(
+var ADMIN_FAILED_CONTENT_TEXT_PT1 = __34("Failed to enable unfiltered files upload.", "elementor");
+var ADMIN_FAILED_CONTENT_TEXT_PT2 = __34(
   "You can try again, if the problem persists, please contact support.",
   "elementor"
 );
@@ -5730,9 +5826,9 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return /* @__PURE__ */ React83.createElement(AdminDialog, { ...dialogProps });
+  return /* @__PURE__ */ React84.createElement(AdminDialog, { ...dialogProps });
 };
-var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React83.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React83.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React83.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React83.createElement(Divider3, null), /* @__PURE__ */ React83.createElement(DialogContent, null, /* @__PURE__ */ React83.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React83.createElement(React83.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React83.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React83.createElement(DialogActions, null, /* @__PURE__ */ React83.createElement(Button5, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __33("Cancel", "elementor")), /* @__PURE__ */ React83.createElement(
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React84.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React84.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React84.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React84.createElement(Divider3, null), /* @__PURE__ */ React84.createElement(DialogContent, null, /* @__PURE__ */ React84.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React84.createElement(React84.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React84.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React84.createElement(DialogActions, null, /* @__PURE__ */ React84.createElement(Button5, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __34("Cancel", "elementor")), /* @__PURE__ */ React84.createElement(
   Button5,
   {
     size: "medium",
@@ -5741,7 +5837,7 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React83.createElement(CircularProgress2, { size: 24 }) : __33("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React84.createElement(CircularProgress2, { size: 24 }) : __34("Enable", "elementor")
 )));
 
 // src/controls/icon-library/get-icon-library-anchor.ts
@@ -5760,8 +5856,8 @@ function measureIconLibraryAnchor(container, buttonGroup) {
 }
 
 // src/controls/icon-library/icon-library-popover.tsx
-import * as React90 from "react";
-import { useMemo as useMemo12, useState as useState23 } from "react";
+import * as React91 from "react";
+import { useMemo as useMemo13, useRef as useRef22, useState as useState23 } from "react";
 import {
   PopoverBody as PopoverBody2,
   PopoverHeader as PopoverHeader4,
@@ -5773,7 +5869,7 @@ import { LibraryIcon as LibraryIcon2 } from "@elementor/icons";
 import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
 import { Box as Box21, CircularProgress as CircularProgress3, Divider as Divider5, Link as Link3, Stack as Stack16, styled as styled11, Typography as Typography10 } from "@elementor/ui";
 import { useDebounceState } from "@elementor/utils";
-import { __ as __38 } from "@wordpress/i18n";
+import { __ as __39 } from "@wordpress/i18n";
 
 // src/controls/icon-library/font-awesome-7-data.ts
 var FONT_AWESOME_7_LIBRARIES = [
@@ -6021,12 +6117,12 @@ function toCatalogIcon(icon, library) {
 }
 
 // src/controls/icon-library/font-awesome-glyph.tsx
-import * as React84 from "react";
-import { useEffect as useEffect17, useRef as useRef18, useState as useState20 } from "react";
+import * as React85 from "react";
+import { useEffect as useEffect17, useRef as useRef19, useState as useState20 } from "react";
 import { Box as Box17 } from "@elementor/ui";
 
 // src/controls/icon-library/icon-library-providers.ts
-import { useRef as useRef17, useState as useState19 } from "react";
+import { useRef as useRef18, useState as useState19 } from "react";
 import { useQuery as useQuery2 } from "@elementor/query";
 var PROVIDER_ICON_SVG_QUERY_KEY = "icon-library-provider-svg";
 var providers = /* @__PURE__ */ new Map();
@@ -6072,7 +6168,7 @@ async function resolveFromProviders(pickResolver, library, iconValue, signal) {
   return null;
 }
 function useStableConcat(lists) {
-  const previous = useRef17(null);
+  const previous = useRef18(null);
   if (!previous.current || !areSameLists(previous.current.lists, lists)) {
     previous.current = { lists, merged: lists.flatMap((list) => list ?? []) };
   }
@@ -6139,15 +6235,15 @@ function pruneNode(node) {
 var FontAwesomeGlyph = (props) => {
   const { icon } = props;
   if (icon.lazySvg && !icon.svgMarkup) {
-    return /* @__PURE__ */ React84.createElement(LazyProviderGlyph, { ...props });
+    return /* @__PURE__ */ React85.createElement(LazyProviderGlyph, { ...props });
   }
-  return /* @__PURE__ */ React84.createElement(ResolvedGlyph, { ...props });
+  return /* @__PURE__ */ React85.createElement(ResolvedGlyph, { ...props });
 };
 var LazyProviderGlyph = (props) => {
   const { icon, size } = props;
   const [resolved, setResolved] = useState20(null);
   const [isVisible, setIsVisible] = useState20(typeof IntersectionObserver === "undefined");
-  const placeholderRef = useRef18(null);
+  const placeholderRef = useRef19(null);
   const svgMarkup = resolved?.id === icon.id ? resolved.markup : null;
   useEffect17(() => {
     const element = placeholderRef.current;
@@ -6173,7 +6269,7 @@ var LazyProviderGlyph = (props) => {
     return () => controller.abort();
   }, [isVisible, icon.id, icon.library, icon.value]);
   if (!svgMarkup) {
-    return /* @__PURE__ */ React84.createElement(
+    return /* @__PURE__ */ React85.createElement(
       Box17,
       {
         component: "span",
@@ -6183,12 +6279,12 @@ var LazyProviderGlyph = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ React84.createElement(ResolvedGlyph, { ...props, icon: { ...icon, svgMarkup } });
+  return /* @__PURE__ */ React85.createElement(ResolvedGlyph, { ...props, icon: { ...icon, svgMarkup } });
 };
 var ResolvedGlyph = ({ icon, size, color, label }) => {
   const svgMarkup = sanitizeIconSvgMarkup(icon.svgMarkup);
   if (svgMarkup) {
-    return /* @__PURE__ */ React84.createElement(
+    return /* @__PURE__ */ React85.createElement(
       Box17,
       {
         component: "span",
@@ -6214,7 +6310,7 @@ var ResolvedGlyph = ({ icon, size, color, label }) => {
     );
   }
   if (icon.paths.length > 0) {
-    return /* @__PURE__ */ React84.createElement(
+    return /* @__PURE__ */ React85.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -6227,11 +6323,11 @@ var ResolvedGlyph = ({ icon, size, color, label }) => {
         "aria-label": label,
         role: label ? "img" : void 0
       },
-      icon.paths.map((path, index) => /* @__PURE__ */ React84.createElement("path", { key: `${index}-${path}`, d: path }))
+      icon.paths.map((path, index) => /* @__PURE__ */ React85.createElement("path", { key: `${index}-${path}`, d: path }))
     );
   }
   if (icon.glyphClass) {
-    return /* @__PURE__ */ React84.createElement(
+    return /* @__PURE__ */ React85.createElement(
       "i",
       {
         className: icon.glyphClass,
@@ -6245,7 +6341,7 @@ var ResolvedGlyph = ({ icon, size, color, label }) => {
 };
 
 // src/controls/icon-library/icon-library-filter.tsx
-import * as React85 from "react";
+import * as React86 from "react";
 import { useId as useId4 } from "react";
 import {
   CheckIcon,
@@ -6270,7 +6366,7 @@ import {
   Typography as Typography9,
   usePopupState as usePopupState8
 } from "@elementor/ui";
-import { __ as __34 } from "@wordpress/i18n";
+import { __ as __35 } from "@wordpress/i18n";
 
 // src/controls/icon-library/icon-library-tooltip.ts
 var ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY = 0;
@@ -6304,21 +6400,21 @@ var IconLibraryFilter = ({ value, onChange }) => {
   const entries = getFilterEntries();
   const selectableValues = entries.flatMap((entry) => entry.type === FILTER_TYPE_ITEM ? [entry.value] : []);
   const isFiltered = value.length > 0;
-  const filterButtonLabel = isFiltered ? __34("Filter by library, active", "elementor") : __34("Filter by library", "elementor");
+  const filterButtonLabel = isFiltered ? __35("Filter by library, active", "elementor") : __35("Filter by library", "elementor");
   const handleLibraryClick = (library) => {
     const nextValue = value.includes(library) ? value.filter((selectedLibrary) => selectedLibrary !== library) : [...value, library];
     onChange(nextValue.length === selectableValues.length ? [] : nextValue);
   };
-  return /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(
     Tooltip8,
     {
-      title: __34("Filter by library", "elementor"),
+      title: __35("Filter by library", "elementor"),
       placement: "top",
       enterDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
       enterNextDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
       disableInteractive: true
     },
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React86.createElement(
       ToggleButton2,
       {
         "aria-label": filterButtonLabel,
@@ -6329,8 +6425,8 @@ var IconLibraryFilter = ({ value, onChange }) => {
         ...bindToggle2(popupState),
         "aria-expanded": popupState.isOpen
       },
-      /* @__PURE__ */ React85.createElement(FilterIcon2, { fontSize: "tiny" }),
-      isFiltered ? /* @__PURE__ */ React85.createElement(
+      /* @__PURE__ */ React86.createElement(FilterIcon2, { fontSize: "tiny" }),
+      isFiltered ? /* @__PURE__ */ React86.createElement(
         Box18,
         {
           component: "span",
@@ -6347,14 +6443,14 @@ var IconLibraryFilter = ({ value, onChange }) => {
         }
       ) : null
     )
-  ), /* @__PURE__ */ React85.createElement(
+  ), /* @__PURE__ */ React86.createElement(
     Menu4,
     {
       ...bindMenu3(popupState),
       MenuListProps: {
         dense: true,
         autoFocusItem: true,
-        "aria-label": __34("Filter by library", "elementor")
+        "aria-label": __35("Filter by library", "elementor")
       },
       sx: { "& .MuiPaper-root": { minWidth: FILTER_MENU_WIDTH } }
     },
@@ -6366,13 +6462,13 @@ var IconLibraryFilter = ({ value, onChange }) => {
 var renderFilterEntry = (entry, index, selectedLibraries, isFiltered, onAllIconsClick, onLibraryClick) => {
   if (entry.type === FILTER_TYPE_GROUP) {
     return [
-      /* @__PURE__ */ React85.createElement(Divider4, { key: `divider-${index}` }),
-      /* @__PURE__ */ React85.createElement(ListSubheader, { key: `group-${index}`, disableSticky: true }, entry.label)
+      /* @__PURE__ */ React86.createElement(Divider4, { key: `divider-${index}` }),
+      /* @__PURE__ */ React86.createElement(ListSubheader, { key: `group-${index}`, disableSticky: true }, entry.label)
     ];
   }
   if (entry.type === FILTER_TYPE_ALL) {
     return [
-      /* @__PURE__ */ React85.createElement(
+      /* @__PURE__ */ React86.createElement(
         MenuItem2,
         {
           key: `all-${index}`,
@@ -6387,7 +6483,7 @@ var renderFilterEntry = (entry, index, selectedLibraries, isFiltered, onAllIcons
   }
   const isSelected = selectedLibraries.includes(entry.value);
   return [
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React86.createElement(
       MenuItem2,
       {
         key: entry.value,
@@ -6401,7 +6497,7 @@ var renderFilterEntry = (entry, index, selectedLibraries, isFiltered, onAllIcons
   ];
 };
 var getFilterIcon = (icon) => FILTER_ICONS[icon ?? ""] ?? LibraryIcon;
-var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React85.createElement(Stack15, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React85.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React85.createElement(Typography9, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React85.createElement(CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null);
+var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React86.createElement(Stack15, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React86.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React86.createElement(Typography9, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React86.createElement(CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null);
 function getFilterEntries() {
   const filter = window.elementorCommon?.config?.fontAwesome?.v7?.filter;
   if (!Array.isArray(filter)) {
@@ -6440,11 +6536,12 @@ function parseFilterEntry(value) {
 }
 
 // src/controls/icon-library/icon-library-grid.tsx
-import * as React86 from "react";
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef19, useState as useState21 } from "react";
+import * as React87 from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef20, useState as useState21 } from "react";
+import { useRovingFocus } from "@elementor/editor-ui";
 import { Box as Box19, Tooltip as Tooltip9, useTheme as useTheme4 } from "@elementor/ui";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { __ as __35 } from "@wordpress/i18n";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import { __ as __36 } from "@wordpress/i18n";
 var ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT = 4;
 var ICON_LIBRARY_GRID_MIN_CELL_SIZE = 52;
 var ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY = 1e3;
@@ -6480,9 +6577,7 @@ var IconLibraryGrid = ({
   noResultsComponent
 }) => {
   const theme = useTheme4();
-  const containerRef = useRef19(null);
-  const cellRefs = useRef19(/* @__PURE__ */ new Map());
-  const shouldRestoreFocusRef = useRef19(false);
+  const containerRef = useRef20(null);
   const selectedIndex = items2.findIndex((item) => item.id === selectedValue);
   const [focusedIndex, setFocusedIndex] = useState21(selectedIndex >= 0 ? selectedIndex : 0);
   const [{ columnCount, cellSize }, setGridMetrics] = useState21(() => getGridMetrics(0, 0, 0));
@@ -6496,7 +6591,15 @@ var IconLibraryGrid = ({
     gap: cellGap,
     paddingStart: verticalPadding,
     paddingEnd: verticalPadding,
-    overscan: GRID_OVERSCAN
+    overscan: GRID_OVERSCAN,
+    rangeExtractor: (range) => {
+      const rowIndexes = defaultRangeExtractor(range);
+      const focusedRow = Math.floor(focusedIndex / columnCount);
+      if (items2.length === 0 || rowIndexes.includes(focusedRow)) {
+        return rowIndexes;
+      }
+      return [...rowIndexes, focusedRow].sort((a, b) => a - b);
+    }
   });
   const focusedItem = items2[focusedIndex];
   const visibleRowIndexes = virtualizer.getVirtualIndexes().join(",");
@@ -6515,17 +6618,10 @@ var IconLibraryGrid = ({
       virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount), { align: "center" });
     }
   }, [cellSize, columnCount, items2, selectedIndex, selectedValue]);
-  useLayoutEffect3(() => {
-    if (!shouldRestoreFocusRef.current || !focusedItem) {
-      return;
-    }
-    const cell = cellRefs.current.get(focusedItem.id);
-    if (!cell) {
-      return;
-    }
-    cell.focus();
-    shouldRestoreFocusRef.current = false;
-  }, [focusedItem, visibleRowIndexes]);
+  const { registerRef, requestFocus } = useRovingFocus({
+    tabbableKey: focusedItem?.id,
+    mountedSignature: visibleRowIndexes
+  });
   useLayoutEffect3(() => {
     const container = containerRef.current;
     if (!container) {
@@ -6551,7 +6647,7 @@ var IconLibraryGrid = ({
     if (nextIndex < 0 || nextIndex >= items2.length) {
       return;
     }
-    shouldRestoreFocusRef.current = true;
+    requestFocus();
     setFocusedIndex(nextIndex);
     virtualizer.scrollToIndex(Math.floor(nextIndex / columnCount));
   };
@@ -6593,7 +6689,7 @@ var IconLibraryGrid = ({
       moveFocus(event.key === "Home" ? rowStart : rowEnd);
     }
   };
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React87.createElement(
     Box19,
     {
       ref: containerRef,
@@ -6605,11 +6701,11 @@ var IconLibraryGrid = ({
         overflowY: "auto"
       }
     },
-    items2.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React86.createElement(
+    items2.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React87.createElement(
       Box19,
       {
         role: "grid",
-        "aria-label": __35("Icons", "elementor"),
+        "aria-label": __36("Icons", "elementor"),
         "aria-rowcount": rowCount,
         "aria-colcount": columnCount,
         "data-testid": "icon-library-grid",
@@ -6623,7 +6719,7 @@ var IconLibraryGrid = ({
       virtualizer.getVirtualItems().map((virtualRow) => {
         const startIndex = virtualRow.index * columnCount;
         const rowItems = items2.slice(startIndex, startIndex + columnCount);
-        return /* @__PURE__ */ React86.createElement(
+        return /* @__PURE__ */ React87.createElement(
           Box19,
           {
             key: virtualRow.key,
@@ -6647,14 +6743,14 @@ var IconLibraryGrid = ({
             const index = startIndex + columnIndex;
             const isSelected = selectedValue === item.id;
             const tabIndex = focusedIndex === index ? 0 : -1;
-            return /* @__PURE__ */ React86.createElement(
+            return /* @__PURE__ */ React87.createElement(
               Box19,
               {
                 key: item.id,
                 role: "presentation",
                 sx: { minWidth: 0, minHeight: 0, width: "100%", height: "100%" }
               },
-              /* @__PURE__ */ React86.createElement(
+              /* @__PURE__ */ React87.createElement(
                 Tooltip9,
                 {
                   title: item.label,
@@ -6664,7 +6760,7 @@ var IconLibraryGrid = ({
                   disableInteractive: true,
                   disableFocusListener: true
                 },
-                /* @__PURE__ */ React86.createElement(
+                /* @__PURE__ */ React87.createElement(
                   Box19,
                   {
                     component: "button",
@@ -6674,13 +6770,7 @@ var IconLibraryGrid = ({
                     "aria-label": item.label,
                     "aria-selected": isSelected,
                     tabIndex,
-                    ref: (node) => {
-                      if (node) {
-                        cellRefs.current.set(item.id, node);
-                      } else {
-                        cellRefs.current.delete(item.id);
-                      }
-                    },
+                    ref: registerRef(item.id),
                     onClick: () => {
                       onSelect(item.id);
                       onClose();
@@ -6719,7 +6809,7 @@ var IconLibraryGrid = ({
                       }
                     }
                   },
-                  /* @__PURE__ */ React86.createElement(
+                  /* @__PURE__ */ React87.createElement(
                     FontAwesomeGlyph,
                     {
                       icon: { ...item, value: item.iconValue ?? item.value },
@@ -6738,13 +6828,13 @@ var IconLibraryGrid = ({
 };
 
 // src/controls/icon-library/icon-library-upload-action.tsx
-import * as React87 from "react";
-import { forwardRef as forwardRef11, useRef as useRef20, useState as useState22 } from "react";
+import * as React88 from "react";
+import { forwardRef as forwardRef11, useRef as useRef21, useState as useState22 } from "react";
 import { PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
 import { createReplaceableLocation as createReplaceableLocation2 } from "@elementor/locations";
 import { Box as Box20, IconButton as IconButton8, Tooltip as Tooltip10 } from "@elementor/ui";
-import { __ as __36 } from "@wordpress/i18n";
+import { __ as __37 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
 import { getSelectedElements } from "@elementor/editor-elements";
@@ -6790,18 +6880,18 @@ var TRACKING_DATA = { target_name: "icon_library_upload", location_l2: "general"
 var { Slot: IconLibraryUploadActionSlot, inject: injectIntoIconLibraryUploadAction } = createReplaceableLocation2();
 var IconLibraryUploadButton = forwardRef11(
   (props, ref) => {
-    const label = __36("Upload library", "elementor");
-    return /* @__PURE__ */ React87.createElement(Tooltip10, { title: label, placement: "top" }, /* @__PURE__ */ React87.createElement(IconButton8, { ref, size: "tiny", "aria-label": label, ...props }, /* @__PURE__ */ React87.createElement(UploadIcon2, { fontSize: "tiny" })));
+    const label = __37("Upload library", "elementor");
+    return /* @__PURE__ */ React88.createElement(Tooltip10, { title: label, placement: "top" }, /* @__PURE__ */ React88.createElement(IconButton8, { ref, size: "tiny", "aria-label": label, ...props }, /* @__PURE__ */ React88.createElement(UploadIcon2, { fontSize: "tiny" })));
   }
 );
 var IconLibraryUploadPromotion = ({
   ctaUrl = ICON_LIBRARY_UPLOAD_UPGRADE_URL,
-  ctaText = __36("Upgrade now", "elementor"),
-  title = __36("Upload custom icons", "elementor"),
-  content = __36("Add your own icon font library to use across your site.", "elementor")
+  ctaText = __37("Upgrade now", "elementor"),
+  title = __37("Upload custom icons", "elementor"),
+  content = __37("Add your own icon font library to use across your site.", "elementor")
 }) => {
   const [isOpen, setIsOpen] = useState22(false);
-  const triggerRef = useRef20(null);
+  const triggerRef = useRef21(null);
   const canSeePromotions = !!window.elementor?.config?.v4Promotions;
   const close = () => {
     setIsOpen(false);
@@ -6817,7 +6907,7 @@ var IconLibraryUploadPromotion = ({
   if (!canSeePromotions) {
     return null;
   }
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React88.createElement(
     PromotionPopover,
     {
       open: isOpen,
@@ -6833,7 +6923,7 @@ var IconLibraryUploadPromotion = ({
       },
       onCtaClick: () => trackUpgradePromotionClick(TRACKING_DATA)
     },
-    /* @__PURE__ */ React87.createElement(Box20, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.createElement(Box20, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React88.createElement(
       IconLibraryUploadButton,
       {
         ref: triggerRef,
@@ -6848,22 +6938,22 @@ var IconLibraryUploadAction = () => {
   if (window.elementorPro) {
     return null;
   }
-  return /* @__PURE__ */ React87.createElement(IconLibraryUploadPromotion, null);
+  return /* @__PURE__ */ React88.createElement(IconLibraryUploadPromotion, null);
 };
 
 // src/controls/icon-library/icon-library-view-toggle.tsx
-import * as React88 from "react";
+import * as React89 from "react";
 import { ListIcon, WidgetsIcon } from "@elementor/icons";
 import { IconButton as IconButton9, Tooltip as Tooltip11 } from "@elementor/ui";
-import { __ as __37 } from "@wordpress/i18n";
+import { __ as __38 } from "@wordpress/i18n";
 var HEADER_ACTION_GAP = 0.5;
 var IconLibraryViewToggle = ({ value, onChange }) => {
   const isGrid = value === "grid";
   const nextView = isGrid ? "list" : "grid";
   const ViewIcon = isGrid ? WidgetsIcon : ListIcon;
-  const viewButtonLabel = isGrid ? __37("Grid view", "elementor") : __37("List view", "elementor");
-  const viewButtonAction = isGrid ? __37("Switch to list view", "elementor") : __37("Switch to grid view", "elementor");
-  return /* @__PURE__ */ React88.createElement(
+  const viewButtonLabel = isGrid ? __38("Grid view", "elementor") : __38("List view", "elementor");
+  const viewButtonAction = isGrid ? __38("Switch to list view", "elementor") : __38("Switch to grid view", "elementor");
+  return /* @__PURE__ */ React89.createElement(
     Tooltip11,
     {
       title: viewButtonLabel,
@@ -6872,7 +6962,7 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
       enterNextDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
       disableInteractive: true
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.createElement(
       IconButton9,
       {
         "aria-label": viewButtonAction,
@@ -6880,7 +6970,7 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
         onClick: () => onChange(nextView),
         sx: { flexShrink: 0, mr: HEADER_ACTION_GAP }
       },
-      /* @__PURE__ */ React88.createElement(ViewIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React89.createElement(ViewIcon, { fontSize: "tiny" })
     )
   );
 };
@@ -6901,11 +6991,11 @@ function mergeIconsById(primary, secondary) {
 }
 
 // src/controls/icon-library/svg-element-icon.tsx
-import * as React89 from "react";
+import * as React90 from "react";
 import { SvgIcon } from "@elementor/ui";
 var SVG_ELEMENT_ICON_PATH = "M502 772c10 0 19-6 24-14l201-351c4-9 4-19 0-27-5-9-14-14-24-14h-401c-10 0-19 5-24 14-4 8-5 18 0 27l201 351c5 8 14 14 23 14z m0-82l-154-270h309l-154 270z m-323-471c-6 0-12-2-16-7-4-4-7-10-7-16v-201c0-6 3-12 7-16 4-5 10-7 16-7h201c6 0 12 2 16 7 5 4 7 10 7 16v201c0 6-2 12-7 16-4 5-10 7-16 7h-201z m-54 32c14 14 34 22 54 22h201c20 0 40-8 55-22 14-15 22-35 22-55v-201c0-20-8-40-22-54-15-15-35-23-55-23h-201c-20 0-40 8-54 23-15 14-23 34-23 54v201c0 20 8 40 23 55z m480-30c34 33 79 52 126 52s92-19 125-52c34-33 52-78 52-125s-18-93-52-126c-33-33-78-52-125-52s-92 19-126 52c-33 33-52 78-52 126s19 92 52 125z m126-2c-33 0-64-13-87-36-24-23-37-55-37-87s13-65 37-88c23-23 54-36 87-36s64 13 87 36c23 23 36 55 36 88s-13 64-36 87c-23 23-54 36-87 36z";
-var SvgElementIcon = React89.forwardRef(
-  (props, ref) => /* @__PURE__ */ React89.createElement(SvgIcon, { viewBox: "0 0 1000 1000", ...props, ref }, /* @__PURE__ */ React89.createElement("g", { transform: "translate(0, 850) scale(1, -1)" }, /* @__PURE__ */ React89.createElement("path", { d: SVG_ELEMENT_ICON_PATH })))
+var SvgElementIcon = React90.forwardRef(
+  (props, ref) => /* @__PURE__ */ React90.createElement(SvgIcon, { viewBox: "0 0 1000 1000", ...props, ref }, /* @__PURE__ */ React90.createElement("g", { transform: "translate(0, 850) scale(1, -1)" }, /* @__PURE__ */ React90.createElement("path", { d: SVG_ELEMENT_ICON_PATH })))
 );
 
 // src/controls/icon-library/use-font-awesome-7-catalog.ts
@@ -6964,19 +7054,20 @@ var IconLibraryPopover = ({
   const view = isIconLibraryView(storedView) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
   const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog(open);
   const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(open);
-  const icons = useMemo12(
+  const icons = useMemo13(
     () => mergeIconsById(fontAwesomeIcons, providerIcons),
     [providerIcons, fontAwesomeIcons]
   );
-  const items2 = useMemo12(
+  const items2 = useMemo13(
     () => createIconLibraryItems(icons, searchValue, activeLibraries),
     [activeLibraries, icons, searchValue]
   );
   const isLoading = isFontAwesomeLoading || isProviderLoading && items2.length === 0;
-  const selectedValue = useMemo12(
+  const selectedValue = useMemo13(
     () => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
     [icons, selectedIconClass, selectedIconLibrary]
   );
+  const contentRef = useRef22(null);
   const handleClose = () => {
     setSearchValue("");
     setActiveLibraries([]);
@@ -6992,18 +7083,28 @@ var IconLibraryPopover = ({
       library: icon.library
     });
   };
+  const handleSearchKeyDown = (event) => {
+    if (event.key !== "ArrowDown" || view !== "list") {
+      return;
+    }
+    const option = contentRef.current?.querySelector('[role="option"][tabindex="0"]');
+    if (option) {
+      event.preventDefault();
+      option.focus();
+    }
+  };
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React90.createElement(PopoverBody2, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React91.createElement(PopoverBody2, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React91.createElement(
     PopoverHeader4,
     {
-      title: __38("Icon library", "elementor"),
+      title: __39("Icon library", "elementor"),
       onClose: handleClose,
-      icon: /* @__PURE__ */ React90.createElement(LibraryIcon2, { fontSize: "tiny" }),
+      icon: /* @__PURE__ */ React91.createElement(LibraryIcon2, { fontSize: "tiny" }),
       actions: [
-        /* @__PURE__ */ React90.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView }),
-        /* @__PURE__ */ React90.createElement(IconLibraryUploadActionSlot, { key: "upload" }, /* @__PURE__ */ React90.createElement(IconLibraryUploadAction, null))
+        /* @__PURE__ */ React91.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView }),
+        /* @__PURE__ */ React91.createElement(IconLibraryUploadActionSlot, { key: "upload" }, /* @__PURE__ */ React91.createElement(IconLibraryUploadAction, null))
       ],
       sx: {
         pl: ICON_LIBRARY_INLINE_SPACING,
@@ -7011,7 +7112,7 @@ var IconLibraryPopover = ({
         "& .MuiTypography-subtitle2": { fontSize: ICON_LIBRARY_TITLE_SIZE }
       }
     }
-  ), /* @__PURE__ */ React90.createElement(
+  ), /* @__PURE__ */ React91.createElement(
     Stack16,
     {
       direction: "row",
@@ -7019,18 +7120,18 @@ var IconLibraryPopover = ({
       gap: 1,
       sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM }
     },
-    /* @__PURE__ */ React90.createElement(
+    /* @__PURE__ */ React91.createElement(Box21, { onKeyDown: handleSearchKeyDown, sx: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React91.createElement(
       SearchField2,
       {
         value: searchInputValue,
         onSearch: handleSearchChange,
-        placeholder: __38("Search", "elementor"),
+        placeholder: __39("Search", "elementor"),
         id: "icon-library-search",
-        sx: { flex: 1, px: 0, pb: 0 }
+        sx: { width: "100%", px: 0, pb: 0 }
       }
-    ),
-    /* @__PURE__ */ React90.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })
-  ), /* @__PURE__ */ React90.createElement(Divider5, null), /* @__PURE__ */ React90.createElement(Box21, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React90.createElement(
+    )),
+    /* @__PURE__ */ React91.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })
+  ), /* @__PURE__ */ React91.createElement(Divider5, null), /* @__PURE__ */ React91.createElement(Box21, { ref: contentRef, sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React91.createElement(
     IconLibraryContent,
     {
       isLoading,
@@ -7057,9 +7158,9 @@ var IconLibraryContent = ({
   onClearSearch
 }) => {
   if (isLoading) {
-    return /* @__PURE__ */ React90.createElement(IconLibraryLoadingState, null);
+    return /* @__PURE__ */ React91.createElement(IconLibraryLoadingState, null);
   }
-  const emptyState = /* @__PURE__ */ React90.createElement(
+  const emptyState = /* @__PURE__ */ React91.createElement(
     IconLibraryEmptyState,
     {
       searchValue,
@@ -7068,7 +7169,7 @@ var IconLibraryContent = ({
     }
   );
   if (view === "grid") {
-    return /* @__PURE__ */ React90.createElement(Box21, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React90.createElement(
+    return /* @__PURE__ */ React91.createElement(Box21, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React91.createElement(
       IconLibraryGrid,
       {
         items: items2,
@@ -7079,7 +7180,7 @@ var IconLibraryContent = ({
       }
     ));
   }
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React91.createElement(
     PopoverMenuList2,
     {
       items: items2,
@@ -7089,25 +7190,26 @@ var IconLibraryContent = ({
       onClose,
       itemHeight: ICON_LIBRARY_ROW_HEIGHT,
       menuItemContentTemplate: IconLibraryRow,
+      rovingFocus: true,
       noResultsComponent: emptyState,
       "data-testid": "icon-library-list"
     }
   );
 };
-var IconLibraryLoadingState = () => /* @__PURE__ */ React90.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React90.createElement(CircularProgress3, { role: "progressbar", size: 24, "aria-label": __38("Loading icons", "elementor") }));
+var IconLibraryLoadingState = () => /* @__PURE__ */ React91.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React91.createElement(CircularProgress3, { role: "progressbar", size: 24, "aria-label": __39("Loading icons", "elementor") }));
 var IconLibraryEmptyState = ({
   searchValue,
   isCatalogAvailable,
   onClear
 }) => {
   if (!isCatalogAvailable) {
-    return /* @__PURE__ */ React90.createElement(CatalogUnavailable, null);
+    return /* @__PURE__ */ React91.createElement(CatalogUnavailable, null);
   }
-  return /* @__PURE__ */ React90.createElement(NoResults, { searchValue, onClear });
+  return /* @__PURE__ */ React91.createElement(NoResults, { searchValue, onClear });
 };
 var IconLibraryRow = (item) => {
   const icon = item;
-  return /* @__PURE__ */ React90.createElement(Stack16, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React91.createElement(Stack16, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React91.createElement(
     Box21,
     {
       sx: {
@@ -7123,7 +7225,7 @@ var IconLibraryRow = (item) => {
         flexShrink: 0
       }
     },
-    /* @__PURE__ */ React90.createElement(
+    /* @__PURE__ */ React91.createElement(
       FontAwesomeGlyph,
       {
         icon: { ...icon, value: icon.iconValue },
@@ -7131,10 +7233,10 @@ var IconLibraryRow = (item) => {
         color: "currentColor"
       }
     )
-  ), /* @__PURE__ */ React90.createElement(Typography10, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
+  ), /* @__PURE__ */ React91.createElement(Typography10, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
 };
-var CatalogUnavailable = () => /* @__PURE__ */ React90.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React90.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React90.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary" }, __38("Icons couldn't be loaded.", "elementor")));
-var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React90.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React90.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary" }, __38("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React90.createElement(Link3, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, __38("Clear & try again", "elementor"))) : null);
+var CatalogUnavailable = () => /* @__PURE__ */ React91.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React91.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React91.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary" }, __39("Icons couldn't be loaded.", "elementor")));
+var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React91.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React91.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React91.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary" }, __39("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React91.createElement(Link3, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, __39("Clear & try again", "elementor"))) : null);
 var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
   ...icon,
   type: "item",
@@ -7143,23 +7245,23 @@ var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesom
 }));
 
 // src/controls/open-icon-library.ts
-import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil15 } from "@elementor/editor-props";
 function enqueueIconFonts(library) {
   window.elementor?.helpers?.enqueueIconFonts?.(library);
 }
 function createIconPropValue(icon, library) {
   return {
-    value: stringPropTypeUtil14.create(icon),
-    library: stringPropTypeUtil14.create(library)
+    value: stringPropTypeUtil15.create(icon),
+    library: stringPropTypeUtil15.create(library)
   };
 }
 
 // src/controls/svg-media-overlay.tsx
-import * as React91 from "react";
+import * as React92 from "react";
 import { ThemeProvider } from "@elementor/editor-ui";
 import { LibraryIcon as LibraryIcon3 } from "@elementor/icons";
 import { Box as Box22, Button as Button6, Stack as Stack17, Typography as Typography11 } from "@elementor/ui";
-import { __ as __39 } from "@wordpress/i18n";
+import { __ as __40 } from "@wordpress/i18n";
 var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
 var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
 var ICON_LIBRARY_PADDING = 0.625;
@@ -7172,31 +7274,31 @@ var SvgMediaOverlay = ({
   onOpenIconLibrary,
   infotipTitle,
   infotipDescription
-}) => /* @__PURE__ */ React91.createElement(Stack17, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React91.createElement(
+}) => /* @__PURE__ */ React92.createElement(Stack17, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React92.createElement(
   MediaActionGroup,
   {
     label,
     onSelect: onSelectSvg,
     groupRef: buttonGroupRef,
     testId: SVG_MEDIA_ACTION_GROUP_TEST_ID,
-    uploadSlot: /* @__PURE__ */ React91.createElement(
+    uploadSlot: /* @__PURE__ */ React92.createElement(
       ConditionalControlInfotip,
       {
         title: infotipTitle,
         description: infotipDescription,
         isEnabled: !isAdmin
       },
-      /* @__PURE__ */ React91.createElement(Box22, { component: "span", sx: { display: "flex", width: "100%" } }, /* @__PURE__ */ React91.createElement(UploadControl, { isAdmin, onUpload }))
+      /* @__PURE__ */ React92.createElement(Box22, { component: "span", sx: { display: "flex", width: "100%" } }, /* @__PURE__ */ React92.createElement(UploadControl, { isAdmin, onUpload }))
     )
   }
-), /* @__PURE__ */ React91.createElement(
+), /* @__PURE__ */ React92.createElement(
   Button6,
   {
     size: "tiny",
     color: "inherit",
     variant: "text",
-    startIcon: /* @__PURE__ */ React91.createElement(LibraryIcon3, { sx: { height: "18px", width: "16px" } }),
-    "aria-label": __39("Icon library", "elementor"),
+    startIcon: /* @__PURE__ */ React92.createElement(LibraryIcon3, { sx: { height: "18px", width: "16px" } }),
+    "aria-label": __40("Icon library", "elementor"),
     onClick: onOpenIconLibrary,
     sx: {
       height: "28px",
@@ -7204,20 +7306,20 @@ var SvgMediaOverlay = ({
       ".MuiButton-icon": { ml: 0 }
     }
   },
-  /* @__PURE__ */ React91.createElement(Typography11, null, __39("Icon library", "elementor"))
+  /* @__PURE__ */ React92.createElement(Typography11, null, __40("Icon library", "elementor"))
 ));
 var UploadControl = ({ isAdmin, onUpload }) => {
   if (isAdmin) {
-    return /* @__PURE__ */ React91.createElement(MediaUploadButton, { onClick: onUpload });
+    return /* @__PURE__ */ React92.createElement(MediaUploadButton, { onClick: onUpload });
   }
-  return /* @__PURE__ */ React91.createElement(ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React91.createElement(MediaUploadButton, { disabled: true }));
+  return /* @__PURE__ */ React92.createElement(ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React92.createElement(MediaUploadButton, { disabled: true }));
 };
 
 // src/controls/svg-media-preview.tsx
-import * as React92 from "react";
-import { useMemo as useMemo13 } from "react";
+import * as React93 from "react";
+import { useMemo as useMemo14 } from "react";
 import { Box as Box23, CardMedia as CardMedia2, CircularProgress as CircularProgress4 } from "@elementor/ui";
-import { __ as __40 } from "@wordpress/i18n";
+import { __ as __41 } from "@wordpress/i18n";
 var ICON_PREVIEW_SIZE = 50;
 var ICON_PREVIEW_COLOR = "#000000";
 var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
@@ -7227,7 +7329,7 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
   const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(
     shouldLoadIconCatalog && !isFontAwesomeLibrary
   );
-  const icons = useMemo13(
+  const icons = useMemo14(
     () => mergeIconsById(fontAwesomeIcons, providerIcons),
     [fontAwesomeIcons, providerIcons]
   );
@@ -7239,21 +7341,21 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
     shouldLoadIconCatalog && !isLoadingCatalog && !selectedIcon && !isFontAwesomeLibrary
   );
   if (isFetching || isLoadingCatalog || isSavedIconLoading) {
-    return /* @__PURE__ */ React92.createElement(CircularProgress4, { role: "progressbar", "aria-label": __40("Loading icon", "elementor") });
+    return /* @__PURE__ */ React93.createElement(CircularProgress4, { role: "progressbar", "aria-label": __41("Loading icon", "elementor") });
   }
   if (selectedIcon) {
-    return /* @__PURE__ */ React92.createElement(IconPreview, { icon: selectedIcon });
+    return /* @__PURE__ */ React93.createElement(IconPreview, { icon: selectedIcon });
   }
   if (shouldLoadIconCatalog && iconClassName && iconLibrary && isFontAwesomeLibrary) {
-    return /* @__PURE__ */ React92.createElement(IconPreview, { icon: createLazyIcon(iconLibrary, iconClassName) });
+    return /* @__PURE__ */ React93.createElement(IconPreview, { icon: createLazyIcon(iconLibrary, iconClassName) });
   }
   if (savedIconSvg) {
-    return /* @__PURE__ */ React92.createElement(IconPreview, { icon: toSvgMarkupIcon(savedIconSvg, iconLibrary, iconClassName) });
+    return /* @__PURE__ */ React93.createElement(IconPreview, { icon: toSvgMarkupIcon(savedIconSvg, iconLibrary, iconClassName) });
   }
   if (shouldLoadIconCatalog) {
-    return /* @__PURE__ */ React92.createElement(IconPreviewPlaceholder, null);
+    return /* @__PURE__ */ React93.createElement(IconPreviewPlaceholder, null);
   }
-  return /* @__PURE__ */ React92.createElement(SvgPreview, { src });
+  return /* @__PURE__ */ React93.createElement(SvgPreview, { src });
 };
 var createLazyIcon = (library, value) => ({
   id: `${library}:${value}`,
@@ -7279,16 +7381,16 @@ var toSvgMarkupIcon = (svgMarkup, library, value) => ({
   paths: [],
   svgMarkup
 });
-var IconPreview = ({ icon }) => /* @__PURE__ */ React92.createElement(Box23, { sx: { color: ICON_PREVIEW_COLOR, minWidth: ICON_PREVIEW_SIZE, minHeight: ICON_PREVIEW_SIZE } }, /* @__PURE__ */ React92.createElement(
+var IconPreview = ({ icon }) => /* @__PURE__ */ React93.createElement(Box23, { sx: { color: ICON_PREVIEW_COLOR, minWidth: ICON_PREVIEW_SIZE, minHeight: ICON_PREVIEW_SIZE } }, /* @__PURE__ */ React93.createElement(
   FontAwesomeGlyph,
   {
     icon,
     size: ICON_PREVIEW_SIZE,
     color: ICON_PREVIEW_COLOR,
-    label: __40("Preview icon", "elementor")
+    label: __41("Preview icon", "elementor")
   }
 ));
-var IconPreviewPlaceholder = () => /* @__PURE__ */ React92.createElement(
+var IconPreviewPlaceholder = () => /* @__PURE__ */ React93.createElement(
   Box23,
   {
     "aria-hidden": true,
@@ -7299,12 +7401,12 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React92.createElement(
     }
   }
 );
-var SvgPreview = ({ src }) => /* @__PURE__ */ React92.createElement(
+var SvgPreview = ({ src }) => /* @__PURE__ */ React93.createElement(
   CardMedia2,
   {
     component: "img",
     image: src,
-    alt: __40("Preview SVG", "elementor"),
+    alt: __41("Preview SVG", "elementor"),
     sx: { maxHeight: "140px", width: `${ICON_PREVIEW_SIZE}px`, color: ICON_PREVIEW_COLOR }
   }
 );
@@ -7338,7 +7440,7 @@ var StyledCardMediaContainer = styled12(Stack18)`
 var MODE_BROWSE = { mode: "browse" };
 var MODE_UPLOAD = { mode: "upload" };
 var SvgMediaControl = createControl(({ label }) => {
-  const groupLabel = label ?? __41("SVG", "elementor");
+  const groupLabel = label ?? __42("SVG", "elementor");
   const { value: svgValue, setValue: setSvgValue, placeholder: svgPlaceholder } = useBoundProp(svgSrcPropTypeUtil);
   const { value: iconValue, setValue: setIconValue, placeholder: iconPlaceholder } = useBoundProp(iconPropTypeUtil);
   const id = svgValue?.id;
@@ -7350,8 +7452,8 @@ var SvgMediaControl = createControl(({ label }) => {
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState24(false);
   const iconLibraryPopoverState = usePopupState9({ variant: "popover" });
-  const controlContainerRef = useRef21(null);
-  const buttonGroupRef = useRef21(null);
+  const controlContainerRef = useRef23(null);
+  const buttonGroupRef = useRef23(null);
   const [iconLibraryAnchor, setIconLibraryAnchor] = useState24(null);
   const { isAdmin } = useCurrentUserCapabilities();
   const selectedIconClass = typeof previewIconValue?.value?.value === "string" ? previewIconValue.value.value : null;
@@ -7420,7 +7522,7 @@ var SvgMediaControl = createControl(({ label }) => {
     };
   }, [iconLibraryPopoverState.isOpen]);
   const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
-  return /* @__PURE__ */ React93.createElement(Stack18, { gap: 1, "aria-label": __41("SVG control", "elementor") }, /* @__PURE__ */ React93.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), iconLibraryAnchor ? /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React94.createElement(Stack18, { gap: 1, "aria-label": __42("SVG control", "elementor") }, /* @__PURE__ */ React94.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), iconLibraryAnchor ? /* @__PURE__ */ React94.createElement(
     Popover6,
     {
       disableScrollLock: true,
@@ -7440,7 +7542,7 @@ var SvgMediaControl = createControl(({ label }) => {
         }
       }
     },
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React94.createElement(
       IconLibraryPopover,
       {
         open: iconLibraryPopoverState.isOpen,
@@ -7451,14 +7553,14 @@ var SvgMediaControl = createControl(({ label }) => {
         width: iconLibraryWidth
       }
     )
-  ) : null, /* @__PURE__ */ React93.createElement(
+  ) : null, /* @__PURE__ */ React94.createElement(
     Box24,
     {
       ref: controlContainerRef,
       "data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
       sx: { width: "100%" }
     },
-    /* @__PURE__ */ React93.createElement(ControlActions, null, /* @__PURE__ */ React93.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React93.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React94.createElement(ControlActions, null, /* @__PURE__ */ React94.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React94.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React94.createElement(
       SvgMediaPreview,
       {
         isFetching,
@@ -7466,7 +7568,7 @@ var SvgMediaControl = createControl(({ label }) => {
         iconClassName: selectedIconClass,
         iconLibrary: selectedIconLibrary
       }
-    )), /* @__PURE__ */ React93.createElement(
+    )), /* @__PURE__ */ React94.createElement(
       CardOverlay2,
       {
         sx: {
@@ -7475,7 +7577,7 @@ var SvgMediaControl = createControl(({ label }) => {
           }
         }
       },
-      /* @__PURE__ */ React93.createElement(
+      /* @__PURE__ */ React94.createElement(
         SvgMediaOverlay,
         {
           label: groupLabel,
@@ -7484,23 +7586,23 @@ var SvgMediaControl = createControl(({ label }) => {
           onSelectSvg: handleSelectSvg,
           onUpload: handleUpload,
           onOpenIconLibrary: handleOpenIconLibrary,
-          infotipTitle: __41("Sorry, you can't upload that file yet.", "elementor"),
-          infotipDescription: /* @__PURE__ */ React93.createElement(UnfilteredUploadInfotipDescription, null)
+          infotipTitle: __42("Sorry, you can't upload that file yet.", "elementor"),
+          infotipDescription: /* @__PURE__ */ React94.createElement(UnfilteredUploadInfotipDescription, null)
         }
       )
     )))
   ));
 });
-var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, __41("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React93.createElement("br", null), __41("file uploads.", "elementor"));
+var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React94.createElement(React94.Fragment, null, __42("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React94.createElement("br", null), __42("file uploads.", "elementor"));
 
 // src/controls/video-media-control.tsx
-import * as React94 from "react";
+import * as React95 from "react";
 import { urlPropTypeUtil as urlPropTypeUtil5, videoSrcPropTypeUtil } from "@elementor/editor-props";
 import { Card as Card3, CardMedia as CardMedia3, CardOverlay as CardOverlay3, CircularProgress as CircularProgress5 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3, useWpMediaFrame as useWpMediaFrame3 } from "@elementor/wp-media";
-import { __ as __42 } from "@wordpress/i18n";
+import { __ as __43 } from "@wordpress/i18n";
 var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
-var VideoMediaControl = createControl(({ label = __42("Video", "elementor") }) => {
+var VideoMediaControl = createControl(({ label = __43("Video", "elementor") }) => {
   const { value, setValue, propType } = useBoundProp(videoSrcPropTypeUtil);
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = useWpMediaAttachment3(id?.value || null);
@@ -7528,7 +7630,7 @@ var VideoMediaControl = createControl(({ label = __42("Video", "elementor") }) =
       });
     }
   });
-  return /* @__PURE__ */ React94.createElement(ControlActions, null, /* @__PURE__ */ React94.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(ControlActions, null, /* @__PURE__ */ React95.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React95.createElement(
     CardMedia3,
     {
       sx: {
@@ -7543,8 +7645,8 @@ var VideoMediaControl = createControl(({ label = __42("Video", "elementor") }) =
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React94.createElement(VideoPreview, { isFetching, videoUrl })
-  ), /* @__PURE__ */ React94.createElement(CardOverlay3, null, /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React95.createElement(VideoPreview, { isFetching, videoUrl })
+  ), /* @__PURE__ */ React95.createElement(CardOverlay3, null, /* @__PURE__ */ React95.createElement(
     MediaSelectActions,
     {
       label,
@@ -7556,13 +7658,13 @@ var VideoMediaControl = createControl(({ label = __42("Video", "elementor") }) =
 });
 var VideoPreview = ({ isFetching = false, videoUrl }) => {
   if (isFetching) {
-    return /* @__PURE__ */ React94.createElement(CircularProgress5, null);
+    return /* @__PURE__ */ React95.createElement(CircularProgress5, null);
   }
   if (videoUrl) {
-    return /* @__PURE__ */ React94.createElement(
+    return /* @__PURE__ */ React95.createElement(
       "video",
       {
-        "aria-label": __42("Video preview", "elementor"),
+        "aria-label": __43("Video preview", "elementor"),
         src: videoUrl,
         muted: true,
         preload: "metadata",
@@ -7575,17 +7677,17 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ React94.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
+  return /* @__PURE__ */ React95.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
 };
 
 // src/controls/background-control/background-control.tsx
-import * as React101 from "react";
+import * as React102 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid18 } from "@elementor/ui";
-import { __ as __48 } from "@wordpress/i18n";
+import { __ as __49 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React100 from "react";
+import * as React101 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
@@ -7594,21 +7696,21 @@ import {
 } from "@elementor/editor-props";
 import { Box as Box25, CardMedia as CardMedia4, styled as styled13, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
-import { __ as __47 } from "@wordpress/i18n";
+import { __ as __48 } from "@wordpress/i18n";
 
 // src/env.ts
 import { parseEnv } from "@elementor/env";
 var { env } = parseEnv("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-import * as React95 from "react";
+import * as React96 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
   colorStopPropTypeUtil,
   gradientColorStopPropTypeUtil,
-  numberPropTypeUtil as numberPropTypeUtil5,
-  stringPropTypeUtil as stringPropTypeUtil15
+  numberPropTypeUtil as numberPropTypeUtil6,
+  stringPropTypeUtil as stringPropTypeUtil16
 } from "@elementor/editor-props";
 import { UnstableGradientBox } from "@elementor/ui";
 var BackgroundGradientColorControl = createControl(() => {
@@ -7616,19 +7718,19 @@ var BackgroundGradientColorControl = createControl(() => {
   const handleChange = (newValue) => {
     const transformedValue = createTransformableValue(newValue);
     if (transformedValue.positions) {
-      transformedValue.positions = stringPropTypeUtil15.create(newValue.positions.join(" "));
+      transformedValue.positions = stringPropTypeUtil16.create(newValue.positions.join(" "));
     }
     setValue(transformedValue);
   };
   const createTransformableValue = (newValue) => ({
     ...newValue,
-    type: stringPropTypeUtil15.create(newValue.type),
-    angle: numberPropTypeUtil5.create(newValue.angle),
+    type: stringPropTypeUtil16.create(newValue.type),
+    angle: numberPropTypeUtil6.create(newValue.angle),
     stops: gradientColorStopPropTypeUtil.create(
       newValue.stops.map(
         ({ color, offset }) => colorStopPropTypeUtil.create({
           color: colorPropTypeUtil2.create(color),
-          offset: numberPropTypeUtil5.create(offset)
+          offset: numberPropTypeUtil6.create(offset)
         })
       )
     )
@@ -7648,7 +7750,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -7658,68 +7760,68 @@ var BackgroundGradientColorControl = createControl(() => {
   );
 });
 var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
-  type: stringPropTypeUtil15.create("linear"),
-  angle: numberPropTypeUtil5.create(180),
+  type: stringPropTypeUtil16.create("linear"),
+  angle: numberPropTypeUtil6.create(180),
   stops: gradientColorStopPropTypeUtil.create([
     colorStopPropTypeUtil.create({
       color: colorPropTypeUtil2.create("rgb(0,0,0)"),
-      offset: numberPropTypeUtil5.create(0)
+      offset: numberPropTypeUtil6.create(0)
     }),
     colorStopPropTypeUtil.create({
       color: colorPropTypeUtil2.create("rgb(255,255,255)"),
-      offset: numberPropTypeUtil5.create(100)
+      offset: numberPropTypeUtil6.create(100)
     })
   ])
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React96 from "react";
+import * as React97 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
 import { Grid as Grid14 } from "@elementor/ui";
-import { __ as __43 } from "@wordpress/i18n";
+import { __ as __44 } from "@wordpress/i18n";
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: __43("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React96.createElement(PinIcon, { fontSize: size }),
+    label: __44("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React97.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: __43("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React96.createElement(PinnedOffIcon, { fontSize: size }),
+    label: __44("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React97.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React96.createElement(PopoverGridContainer, null, /* @__PURE__ */ React96.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlFormLabel, null, __43("Attachment", "elementor"))), /* @__PURE__ */ React96.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React96.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React97.createElement(PopoverGridContainer, null, /* @__PURE__ */ React97.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlFormLabel, null, __44("Attachment", "elementor"))), /* @__PURE__ */ React97.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React97.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React97 from "react";
-import { useRef as useRef22 } from "react";
-import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
+import * as React98 from "react";
+import { useRef as useRef24 } from "react";
+import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
 import { Grid as Grid15, Select as Select4 } from "@elementor/ui";
-import { __ as __44 } from "@wordpress/i18n";
+import { __ as __45 } from "@wordpress/i18n";
 var backgroundPositionOptions = [
-  { label: __44("Center center", "elementor"), value: "center center" },
-  { label: __44("Center left", "elementor"), value: "center left" },
-  { label: __44("Center right", "elementor"), value: "center right" },
-  { label: __44("Top center", "elementor"), value: "top center" },
-  { label: __44("Top left", "elementor"), value: "top left" },
-  { label: __44("Top right", "elementor"), value: "top right" },
-  { label: __44("Bottom center", "elementor"), value: "bottom center" },
-  { label: __44("Bottom left", "elementor"), value: "bottom left" },
-  { label: __44("Bottom right", "elementor"), value: "bottom right" },
-  { label: __44("Custom", "elementor"), value: "custom" }
+  { label: __45("Center center", "elementor"), value: "center center" },
+  { label: __45("Center left", "elementor"), value: "center left" },
+  { label: __45("Center right", "elementor"), value: "center right" },
+  { label: __45("Top center", "elementor"), value: "top center" },
+  { label: __45("Top left", "elementor"), value: "top left" },
+  { label: __45("Top right", "elementor"), value: "top right" },
+  { label: __45("Bottom center", "elementor"), value: "bottom center" },
+  { label: __45("Bottom left", "elementor"), value: "bottom left" },
+  { label: __45("Bottom right", "elementor"), value: "bottom right" },
+  { label: __45("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil16);
+  const stringPropContext = useBoundProp(stringPropTypeUtil17);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef22(null);
+  const rowRef = useRef24(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -7728,7 +7830,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React97.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(PopoverGridContainer, null, /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlFormLabel, null, __44("Position", "elementor"))), /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React97.createElement(ControlActions, null, /* @__PURE__ */ React97.createElement(
+  return /* @__PURE__ */ React98.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React98.createElement(PopoverGridContainer, null, /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(ControlFormLabel, null, __45("Position", "elementor"))), /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React98.createElement(ControlActions, null, /* @__PURE__ */ React98.createElement(
     Select4,
     {
       fullWidth: true,
@@ -7737,18 +7839,18 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React97.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
-  ))))), isCustom ? /* @__PURE__ */ React97.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React97.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React98.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
+  ))))), isCustom ? /* @__PURE__ */ React98.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React98.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React98.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React97.createElement(LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React98.createElement(LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React97.createElement(
+  ))), /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React98.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React97.createElement(LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React98.createElement(LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
@@ -7756,44 +7858,44 @@ var BackgroundImageOverlayPosition = () => {
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React98 from "react";
+import * as React99 from "react";
 import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
 import { Grid as Grid16 } from "@elementor/ui";
-import { __ as __45 } from "@wordpress/i18n";
+import { __ as __46 } from "@wordpress/i18n";
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: __45("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(GridDotsIcon, { fontSize: size }),
+    label: __46("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: __45("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(DotsHorizontalIcon, { fontSize: size }),
+    label: __46("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: __45("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(DotsVerticalIcon, { fontSize: size }),
+    label: __46("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: __45("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(XIcon3, { fontSize: size }),
+    label: __46("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(XIcon3, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React98.createElement(PopoverGridContainer, null, /* @__PURE__ */ React98.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(ControlFormLabel, null, __45("Repeat", "elementor"))), /* @__PURE__ */ React98.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React98.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React99.createElement(PopoverGridContainer, null, /* @__PURE__ */ React99.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, __46("Repeat", "elementor"))), /* @__PURE__ */ React99.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React99.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React99 from "react";
-import { useRef as useRef23 } from "react";
-import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
+import * as React100 from "react";
+import { useRef as useRef25 } from "react";
+import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil18 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
   ArrowsMaximizeIcon,
@@ -7803,38 +7905,38 @@ import {
   PencilIcon
 } from "@elementor/icons";
 import { Grid as Grid17 } from "@elementor/ui";
-import { __ as __46 } from "@wordpress/i18n";
+import { __ as __47 } from "@wordpress/i18n";
 var sizeControlOptions = [
   {
     value: "auto",
-    label: __46("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(LetterAIcon, { fontSize: size }),
+    label: __47("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React100.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: __46("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    label: __47("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React100.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: __46("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(ArrowBarBothIcon, { fontSize: size }),
+    label: __47("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React100.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: __46("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(PencilIcon, { fontSize: size }),
+    label: __47("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React100.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil17);
+  const stringPropContext = useBoundProp(stringPropTypeUtil18);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef23(null);
+  const rowRef = useRef25(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -7842,7 +7944,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React99.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(PopoverGridContainer, null, /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, __46("Size", "elementor"))), /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React100.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, null, /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlFormLabel, null, __47("Size", "elementor"))), /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React100.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -7851,17 +7953,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React99.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React99.createElement(PopoverGridContainer, null, /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React99.createElement(
+  )))), isCustom ? /* @__PURE__ */ React100.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, null, /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React100.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React99.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React100.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React99.createElement(
+  ))), /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React100.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React99.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React100.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -7869,7 +7971,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef24 } from "react";
+import { useRef as useRef26 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -7894,7 +7996,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef24({
+  const valuesHistory = useRef26({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -7962,29 +8064,29 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { label: __47("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
-  { label: __47("Medium - 300 x 300", "elementor"), value: "medium" },
-  { label: __47("Large 1024 x 1024", "elementor"), value: "large" },
-  { label: __47("Full", "elementor"), value: "full" }
+  { label: __48("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: __48("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: __48("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: __48("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React100.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React101.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React101.createElement(
     ControlRepeater,
     {
       initial: getInitialBackgroundOverlay(),
       propTypeUtil: backgroundOverlayPropTypeUtil
     },
-    /* @__PURE__ */ React100.createElement(RepeaterHeader, { label: __47("Overlay", "elementor") }, /* @__PURE__ */ React100.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
-    /* @__PURE__ */ React100.createElement(ItemsContainer, null, /* @__PURE__ */ React100.createElement(
+    /* @__PURE__ */ React101.createElement(RepeaterHeader, { label: __48("Overlay", "elementor") }, /* @__PURE__ */ React101.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+    /* @__PURE__ */ React101.createElement(ItemsContainer, null, /* @__PURE__ */ React101.createElement(
       Item,
       {
         Icon: ItemIcon2,
         Label: ItemLabel3,
-        actions: /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(DuplicateItemAction, null), /* @__PURE__ */ React100.createElement(DisableItemAction, null), /* @__PURE__ */ React100.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(DuplicateItemAction, null), /* @__PURE__ */ React101.createElement(DisableItemAction, null), /* @__PURE__ */ React101.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React100.createElement(EditItemPopover, null, /* @__PURE__ */ React100.createElement(ItemContent2, null))
+    /* @__PURE__ */ React101.createElement(EditItemPopover, null, /* @__PURE__ */ React101.createElement(ItemContent2, null))
   ));
 });
 var ItemContent2 = () => {
@@ -7994,27 +8096,27 @@ var ItemContent2 = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React100.createElement(Box25, { sx: { width: "100%" } }, /* @__PURE__ */ React100.createElement(Box25, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React101.createElement(Box25, { sx: { width: "100%" } }, /* @__PURE__ */ React101.createElement(Box25, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React101.createElement(
     Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": __47("Background Overlay", "elementor")
+      "aria-label": __48("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React100.createElement(Tab, { label: __47("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React100.createElement(Tab, { label: __47("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React100.createElement(Tab, { label: __47("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React100.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React100.createElement(PopoverContent, null, /* @__PURE__ */ React100.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React100.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React100.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React100.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React100.createElement(PopoverContent, null, /* @__PURE__ */ React100.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
+    /* @__PURE__ */ React101.createElement(Tab, { label: __48("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React101.createElement(Tab, { label: __48("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React101.createElement(Tab, { label: __48("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React101.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React101.createElement(PopoverContent, null, /* @__PURE__ */ React101.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React101.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React101.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React101.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React101.createElement(PopoverContent, null, /* @__PURE__ */ React101.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React100.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React101.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React100.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React101.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React100.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React101.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -8027,11 +8129,11 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React100.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React101.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React101.createElement(
     CardMedia4,
     {
       image: imageUrl,
@@ -8046,41 +8148,41 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React100.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React101.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React100.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React101.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React100.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React101.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React100.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React101.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React100.createElement("span", null, color);
+  return /* @__PURE__ */ React101.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React100.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React101.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React100.createElement("span", null, __47("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React101.createElement("span", null, __48("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React100.createElement("span", null, __47("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React101.createElement("span", null, __48("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React100.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React100.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React101.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React101.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React100.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React100.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React100.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React100.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React100.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React100.createElement(BackgroundImageOverlayAttachment, null)));
+  return /* @__PURE__ */ React101.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React101.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React101.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React101.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React101.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React101.createElement(BackgroundImageOverlayAttachment, null)));
 };
 var StyledUnstableColorIndicator3 = styled13(UnstableColorIndicator3)(({ theme }) => ({
   height: "1rem",
@@ -8125,27 +8227,27 @@ var getGradientValue = (value) => {
 
 // src/controls/background-control/background-control.tsx
 var clipOptions = [
-  { label: __48("Full element", "elementor"), value: "border-box" },
-  { label: __48("Padding edges", "elementor"), value: "padding-box" },
-  { label: __48("Content edges", "elementor"), value: "content-box" },
-  { label: __48("Text", "elementor"), value: "text" }
+  { label: __49("Full element", "elementor"), value: "border-box" },
+  { label: __49("Padding edges", "elementor"), value: "padding-box" },
+  { label: __49("Content edges", "elementor"), value: "content-box" },
+  { label: __49("Text", "elementor"), value: "text" }
 ];
-var colorLabel = __48("Color", "elementor");
-var clipLabel = __48("Clipping", "elementor");
+var colorLabel = __49("Color", "elementor");
+var clipLabel = __49("Clipping", "elementor");
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  return /* @__PURE__ */ React101.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React101.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React101.createElement(BackgroundColorField, null), /* @__PURE__ */ React101.createElement(BackgroundClipField, null));
+  return /* @__PURE__ */ React102.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React102.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React102.createElement(BackgroundColorField, null), /* @__PURE__ */ React102.createElement(BackgroundClipField, null));
 });
 var BackgroundColorField = () => {
-  return /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React101.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React101.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React101.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ColorControl, null))));
+  return /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React102.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React102.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React102.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(ColorControl, null))));
 };
 var BackgroundClipField = () => {
-  return /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React101.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React101.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React101.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(SelectControl, { options: clipOptions }))));
+  return /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React102.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React102.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React102.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(SelectControl, { options: clipOptions }))));
 };
 
 // src/controls/repeatable-control.tsx
-import * as React102 from "react";
-import { useMemo as useMemo14 } from "react";
+import * as React103 from "react";
+import { useMemo as useMemo15 } from "react";
 import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
 import { Box as Box26 } from "@elementor/ui";
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -8166,11 +8268,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = useMemo14(
+    const childArrayPropTypeUtil2 = useMemo15(
       () => createArrayPropUtils2(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = useMemo14(
+    const contextValue = useMemo15(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -8180,14 +8282,14 @@ var RepeatableControl = createControl(
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
     const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
-    return /* @__PURE__ */ React102.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React102.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React102.createElement(
+    return /* @__PURE__ */ React103.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React103.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React103.createElement(
       ControlRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil2,
         isItemDisabled: isItemDisabled2
       },
-      /* @__PURE__ */ React102.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React102.createElement(
+      /* @__PURE__ */ React103.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React103.createElement(
         TooltipAddItemAction,
         {
           ...addItemTooltipProps,
@@ -8195,22 +8297,22 @@ var RepeatableControl = createControl(
           ariaLabel: repeaterLabel
         }
       )),
-      /* @__PURE__ */ React102.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React102.createElement(
+      /* @__PURE__ */ React103.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React103.createElement(
         Item,
         {
           Icon: ItemIcon3,
           Label: ItemLabel4,
-          actions: /* @__PURE__ */ React102.createElement(React102.Fragment, null, showDuplicate && /* @__PURE__ */ React102.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React102.createElement(DisableItemAction, null), /* @__PURE__ */ React102.createElement(RemoveItemAction, null))
+          actions: /* @__PURE__ */ React103.createElement(React103.Fragment, null, showDuplicate && /* @__PURE__ */ React103.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React103.createElement(DisableItemAction, null), /* @__PURE__ */ React103.createElement(RemoveItemAction, null))
         }
       )),
-      /* @__PURE__ */ React102.createElement(EditItemPopover, null, /* @__PURE__ */ React102.createElement(Content2, null))
+      /* @__PURE__ */ React103.createElement(EditItemPopover, null, /* @__PURE__ */ React103.createElement(Content2, null))
     )));
   }
 );
-var ItemIcon3 = () => /* @__PURE__ */ React102.createElement(React102.Fragment, null);
+var ItemIcon3 = () => /* @__PURE__ */ React103.createElement(React103.Fragment, null);
 var Content2 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React102.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React102.createElement(PopoverGridContainer, null, /* @__PURE__ */ React102.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React103.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, null, /* @__PURE__ */ React103.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
@@ -8293,7 +8395,7 @@ var ItemLabel4 = ({ value }) => {
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const isReadOnly = !!childProps?.readOnly;
   const color = getTextColor(isReadOnly, showPlaceholder);
-  return /* @__PURE__ */ React102.createElement(Box26, { component: "span", color }, label);
+  return /* @__PURE__ */ React103.createElement(Box26, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -8301,15 +8403,15 @@ var getAllProperties = (pattern) => {
 };
 
 // src/controls/key-value-control.tsx
-import * as React103 from "react";
-import { useMemo as useMemo15, useState as useState25 } from "react";
+import * as React104 from "react";
+import { useMemo as useMemo16, useState as useState25 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
-  stringPropTypeUtil as stringPropTypeUtil18
+  stringPropTypeUtil as stringPropTypeUtil19
 } from "@elementor/editor-props";
 import { FormHelperText, FormLabel as FormLabel3, Grid as Grid19 } from "@elementor/ui";
-import { __ as __49 } from "@wordpress/i18n";
+import { __ as __50 } from "@wordpress/i18n";
 
 // src/utils/escape-html-attr.ts
 var escapeHtmlAttr = (value) => {
@@ -8339,17 +8441,17 @@ var KeyValueControl = createControl((props = {}) => {
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
-  const keyLabel = props.keyName || __49("Key", "elementor");
-  const valueLabel = props.valueName || __49("Value", "elementor");
+  const keyLabel = props.keyName || __50("Key", "elementor");
+  const valueLabel = props.valueName || __50("Value", "elementor");
   const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = useMemo15(
+  const [keyRegex, valueRegex, errMsg] = useMemo16(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
-      props.validationErrorMessage || __49("Invalid Format", "elementor")
+      props.validationErrorMessage || __50("Invalid Format", "elementor")
     ],
     [props.regexKey, props.regexValue, props.validationErrorMessage]
   );
@@ -8378,7 +8480,7 @@ var KeyValueControl = createControl((props = {}) => {
       });
       return;
     }
-    const extractedValue = stringPropTypeUtil18.extract(newChangedValue);
+    const extractedValue = stringPropTypeUtil19.extract(newChangedValue);
     setSessionState((prev) => ({
       ...prev,
       [fieldType]: extractedValue
@@ -8398,14 +8500,14 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React103.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React103.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React103.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React103.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React104.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React104.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React104.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React104.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React104.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
       error: !!keyError,
       helperText: keyHelper
     }
-  )), !!keyError && /* @__PURE__ */ React103.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React103.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React103.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React103.createElement(
+  )), !!keyError && /* @__PURE__ */ React104.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React104.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React104.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React104.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
@@ -8413,31 +8515,31 @@ var KeyValueControl = createControl((props = {}) => {
       inputDisabled: !!keyError,
       helperText: valueHelper
     }
-  )), !!valueError && /* @__PURE__ */ React103.createElement(FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React104.createElement(FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-import * as React104 from "react";
-import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil19 } from "@elementor/editor-props";
+import * as React105 from "react";
+import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
 import { Grid as Grid20, Select as Select5 } from "@elementor/ui";
-import { __ as __50 } from "@wordpress/i18n";
+import { __ as __51 } from "@wordpress/i18n";
 var positionOptions = [
-  { label: __50("Center center", "elementor"), value: "center center" },
-  { label: __50("Center left", "elementor"), value: "center left" },
-  { label: __50("Center right", "elementor"), value: "center right" },
-  { label: __50("Top center", "elementor"), value: "top center" },
-  { label: __50("Top left", "elementor"), value: "top left" },
-  { label: __50("Top right", "elementor"), value: "top right" },
-  { label: __50("Bottom center", "elementor"), value: "bottom center" },
-  { label: __50("Bottom left", "elementor"), value: "bottom left" },
-  { label: __50("Bottom right", "elementor"), value: "bottom right" },
-  { label: __50("Custom", "elementor"), value: "custom" }
+  { label: __51("Center center", "elementor"), value: "center center" },
+  { label: __51("Center left", "elementor"), value: "center left" },
+  { label: __51("Center right", "elementor"), value: "center right" },
+  { label: __51("Top center", "elementor"), value: "top center" },
+  { label: __51("Top left", "elementor"), value: "top left" },
+  { label: __51("Top right", "elementor"), value: "top right" },
+  { label: __51("Bottom center", "elementor"), value: "bottom center" },
+  { label: __51("Bottom left", "elementor"), value: "bottom left" },
+  { label: __51("Bottom right", "elementor"), value: "bottom right" },
+  { label: __51("Custom", "elementor"), value: "custom" }
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil19);
+  const stringPropContext = useBoundProp(stringPropTypeUtil20);
   const isCustom = !!positionContext.value;
   const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
   const handlePositionChange = (event) => {
@@ -8448,7 +8550,7 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React104.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React104.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(ControlFormLabel, null, __50("Object position", "elementor"))), /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React105.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React105.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(ControlFormLabel, null, __51("Object position", "elementor"))), /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React105.createElement(
     Select5,
     {
       size: "tiny",
@@ -8459,33 +8561,33 @@ var PositionControl = () => {
       renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
       fullWidth: true
     },
-    positionOptions.map(({ label, value }) => /* @__PURE__ */ React104.createElement(MenuListItem7, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React104.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React104.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React104.createElement(
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React105.createElement(MenuListItem7, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React105.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React105.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React105.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React104.createElement(LetterXIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React105.createElement(LetterXIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React104.createElement(
+  ))), /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React105.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React104.createElement(LetterYIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React105.createElement(LetterYIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
   )))))));
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-import * as React117 from "react";
-import { useRef as useRef32 } from "react";
+import * as React118 from "react";
+import { useRef as useRef34 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
 import { bindTrigger as bindTrigger5, Box as Box30, IconButton as IconButton10, Tooltip as Tooltip12, Typography as Typography12, usePopupState as usePopupState10 } from "@elementor/ui";
-import { __ as __60 } from "@wordpress/i18n";
+import { __ as __61 } from "@wordpress/i18n";
 
 // src/controls/transform-control/initial-values.ts
 import {
-  numberPropTypeUtil as numberPropTypeUtil6,
+  numberPropTypeUtil as numberPropTypeUtil7,
   rotateTransformPropTypeUtil,
   scaleTransformPropTypeUtil,
   skewTransformPropTypeUtil
@@ -8520,9 +8622,9 @@ var initialTransformValue = {
   }
 };
 var initialScaleValue = scaleTransformPropTypeUtil.create({
-  x: numberPropTypeUtil6.create(defaultValues.scale),
-  y: numberPropTypeUtil6.create(defaultValues.scale),
-  z: numberPropTypeUtil6.create(defaultValues.scale)
+  x: numberPropTypeUtil7.create(defaultValues.scale),
+  y: numberPropTypeUtil7.create(defaultValues.scale),
+  z: numberPropTypeUtil7.create(defaultValues.scale)
 });
 var initialRotateValue = rotateTransformPropTypeUtil.create({
   x: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
@@ -8535,24 +8637,24 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
 });
 
 // src/controls/transform-control/transform-content.tsx
-import * as React111 from "react";
+import * as React112 from "react";
 import { Box as Box27, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
-import { __ as __55 } from "@wordpress/i18n";
+import { __ as __56 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
-import * as React106 from "react";
-import { useRef as useRef25 } from "react";
+import * as React107 from "react";
+import { useRef as useRef27 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
 import { Grid as Grid22 } from "@elementor/ui";
-import { __ as __51 } from "@wordpress/i18n";
+import { __ as __52 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/axis-row.tsx
-import * as React105 from "react";
+import * as React106 from "react";
 import { Grid as Grid21 } from "@elementor/ui";
 var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
   const safeId = label.replace(/\s+/g, "-").toLowerCase();
-  return /* @__PURE__ */ React105.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React105.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React105.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React105.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React106.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React106.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React106.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React106.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React106.createElement(
     SizeControl,
     {
       anchorRef,
@@ -8568,28 +8670,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
 // src/controls/transform-control/functions/move.tsx
 var moveAxisControls = [
   {
-    label: __51("Move X", "elementor"),
+    label: __52("Move X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React106.createElement(ArrowRightIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React107.createElement(ArrowRightIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw"]
   },
   {
-    label: __51("Move Y", "elementor"),
+    label: __52("Move Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React106.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React107.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vh"]
   },
   {
-    label: __51("Move Z", "elementor"),
+    label: __52("Move Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React106.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React107.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw", "vh"]
   }
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
-  const rowRefs = [useRef25(null), useRef25(null), useRef25(null)];
-  return /* @__PURE__ */ React106.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React106.createElement(PropProvider, { ...context }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React106.createElement(
+  const rowRefs = [useRef27(null), useRef27(null), useRef27(null)];
+  return /* @__PURE__ */ React107.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React107.createElement(PropProvider, { ...context }, /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React107.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -8602,34 +8704,34 @@ var Move = () => {
 };
 
 // src/controls/transform-control/functions/rotate.tsx
-import * as React107 from "react";
-import { useRef as useRef26 } from "react";
+import * as React108 from "react";
+import { useRef as useRef28 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
 import { Grid as Grid23 } from "@elementor/ui";
-import { __ as __52 } from "@wordpress/i18n";
+import { __ as __53 } from "@wordpress/i18n";
 var rotateAxisControls = [
   {
-    label: __52("Rotate X", "elementor"),
+    label: __53("Rotate X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React107.createElement(Arrow360Icon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React108.createElement(Arrow360Icon, { fontSize: "tiny" })
   },
   {
-    label: __52("Rotate Y", "elementor"),
+    label: __53("Rotate Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React107.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React108.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   },
   {
-    label: __52("Rotate Z", "elementor"),
+    label: __53("Rotate Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React107.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React108.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
   }
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
-  const rowRefs = [useRef26(null), useRef26(null), useRef26(null)];
-  return /* @__PURE__ */ React107.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React107.createElement(PropProvider, { ...context }, /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React107.createElement(
+  const rowRefs = [useRef28(null), useRef28(null), useRef28(null)];
+  return /* @__PURE__ */ React108.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React108.createElement(PropProvider, { ...context }, /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React108.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -8641,68 +8743,68 @@ var Rotate = () => {
 };
 
 // src/controls/transform-control/functions/scale.tsx
-import * as React109 from "react";
-import { useRef as useRef27 } from "react";
+import * as React110 from "react";
+import { useRef as useRef29 } from "react";
 import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
 import { Grid as Grid25 } from "@elementor/ui";
-import { __ as __53 } from "@wordpress/i18n";
+import { __ as __54 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/scale-axis-row.tsx
-import * as React108 from "react";
+import * as React109 from "react";
 import { Grid as Grid24 } from "@elementor/ui";
 var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React108.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React108.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React108.createElement(ControlLabel, null, label)), /* @__PURE__ */ React108.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React108.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+  return /* @__PURE__ */ React109.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React109.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlLabel, null, label)), /* @__PURE__ */ React109.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React109.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
 var scaleAxisControls = [
   {
-    label: __53("Scale X", "elementor"),
+    label: __54("Scale X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React109.createElement(ArrowRightIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React110.createElement(ArrowRightIcon2, { fontSize: "tiny" })
   },
   {
-    label: __53("Scale Y", "elementor"),
+    label: __54("Scale Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React109.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React110.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
   },
   {
-    label: __53("Scale Z", "elementor"),
+    label: __54("Scale Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React109.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React110.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
   }
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
-  const rowRefs = [useRef27(null), useRef27(null), useRef27(null)];
-  return /* @__PURE__ */ React109.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React109.createElement(PropProvider, { ...context }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React109.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
+  const rowRefs = [useRef29(null), useRef29(null), useRef29(null)];
+  return /* @__PURE__ */ React110.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React110.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
-import * as React110 from "react";
-import { useRef as useRef28 } from "react";
+import * as React111 from "react";
+import { useRef as useRef30 } from "react";
 import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
 import { Grid as Grid26 } from "@elementor/ui";
-import { __ as __54 } from "@wordpress/i18n";
+import { __ as __55 } from "@wordpress/i18n";
 var skewAxisControls = [
   {
-    label: __54("Skew X", "elementor"),
+    label: __55("Skew X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React110.createElement(ArrowRightIcon3, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React111.createElement(ArrowRightIcon3, { fontSize: "tiny" })
   },
   {
-    label: __54("Skew Y", "elementor"),
+    label: __55("Skew Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React110.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React111.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   }
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
-  const rowRefs = [useRef28(null), useRef28(null), useRef28(null)];
-  return /* @__PURE__ */ React110.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React110.createElement(
+  const rowRefs = [useRef30(null), useRef30(null), useRef30(null)];
+  return /* @__PURE__ */ React111.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React111.createElement(PropProvider, { ...context }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React111.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -8714,7 +8816,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-import { useRef as useRef29 } from "react";
+import { useRef as useRef31 } from "react";
 import {
   moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
   rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
@@ -8746,7 +8848,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
-  const valuesHistory = useRef29({
+  const valuesHistory = useRef31({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -8807,7 +8909,7 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React111.createElement(PopoverContent, null, /* @__PURE__ */ React111.createElement(Box27, { sx: { width: "100%" } }, /* @__PURE__ */ React111.createElement(Box27, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React111.createElement(
+  return /* @__PURE__ */ React112.createElement(PopoverContent, null, /* @__PURE__ */ React112.createElement(Box27, { sx: { width: "100%" } }, /* @__PURE__ */ React112.createElement(Box27, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React112.createElement(
     Tabs2,
     {
       size: "small",
@@ -8818,37 +8920,37 @@ var TransformContent = () => {
         }
       },
       ...getTabsProps(),
-      "aria-label": __55("Transform", "elementor")
+      "aria-label": __56("Transform", "elementor")
     },
-    /* @__PURE__ */ React111.createElement(Tab2, { label: __55("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
-    /* @__PURE__ */ React111.createElement(Tab2, { label: __55("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
-    /* @__PURE__ */ React111.createElement(Tab2, { label: __55("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
-    /* @__PURE__ */ React111.createElement(Tab2, { label: __55("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
-  )), /* @__PURE__ */ React111.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React111.createElement(Move, null)), /* @__PURE__ */ React111.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React111.createElement(Scale, null)), /* @__PURE__ */ React111.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React111.createElement(Rotate, null)), /* @__PURE__ */ React111.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React111.createElement(Skew, null))));
+    /* @__PURE__ */ React112.createElement(Tab2, { label: __56("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
+    /* @__PURE__ */ React112.createElement(Tab2, { label: __56("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
+    /* @__PURE__ */ React112.createElement(Tab2, { label: __56("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
+    /* @__PURE__ */ React112.createElement(Tab2, { label: __56("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
+  )), /* @__PURE__ */ React112.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React112.createElement(Move, null)), /* @__PURE__ */ React112.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React112.createElement(Scale, null)), /* @__PURE__ */ React112.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React112.createElement(Rotate, null)), /* @__PURE__ */ React112.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React112.createElement(Skew, null))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
-import * as React112 from "react";
+import * as React113 from "react";
 import { ArrowAutofitHeightIcon, ArrowsMaximizeIcon as ArrowsMaximizeIcon2, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
 var TransformIcon = ({ value }) => {
   switch (value.$$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React112.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
+      return /* @__PURE__ */ React113.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React112.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React113.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React112.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React113.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React112.createElement(SkewXIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React113.createElement(SkewXIcon, { fontSize: "tiny" });
     default:
       return null;
   }
 };
 
 // src/controls/transform-control/transform-label.tsx
-import * as React113 from "react";
+import * as React114 from "react";
 import { Box as Box28 } from "@elementor/ui";
-import { __ as __56 } from "@wordpress/i18n";
+import { __ as __57 } from "@wordpress/i18n";
 var orderedAxis = ["x", "y", "z"];
 var formatLabel = (value, functionType) => {
   return orderedAxis.map((axisKey) => {
@@ -8866,102 +8968,102 @@ var TransformLabel = (props) => {
   const { $$type, value } = props.value;
   switch ($$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React113.createElement(Label2, { label: __56("Move", "elementor"), value: formatLabel(value, "move") });
+      return /* @__PURE__ */ React114.createElement(Label2, { label: __57("Move", "elementor"), value: formatLabel(value, "move") });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React113.createElement(Label2, { label: __56("Scale", "elementor"), value: formatLabel(value, "scale") });
+      return /* @__PURE__ */ React114.createElement(Label2, { label: __57("Scale", "elementor"), value: formatLabel(value, "scale") });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React113.createElement(Label2, { label: __56("Rotate", "elementor"), value: formatLabel(value, "rotate") });
+      return /* @__PURE__ */ React114.createElement(Label2, { label: __57("Rotate", "elementor"), value: formatLabel(value, "rotate") });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React113.createElement(Label2, { label: __56("Skew", "elementor"), value: formatLabel(value, "skew") });
+      return /* @__PURE__ */ React114.createElement(Label2, { label: __57("Skew", "elementor"), value: formatLabel(value, "skew") });
     default:
       return "";
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React113.createElement(Box28, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React114.createElement(Box28, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
-import * as React116 from "react";
+import * as React117 from "react";
 import { PopoverHeader as PopoverHeader5 } from "@elementor/editor-ui";
 import { AdjustmentsIcon } from "@elementor/icons";
 import { bindPopover as bindPopover6, Box as Box29, Divider as Divider6, Popover as Popover7 } from "@elementor/ui";
-import { __ as __59 } from "@wordpress/i18n";
+import { __ as __60 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
-import * as React114 from "react";
-import { useRef as useRef30 } from "react";
+import * as React115 from "react";
+import { useRef as useRef32 } from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid27, Stack as Stack19 } from "@elementor/ui";
-import { __ as __57 } from "@wordpress/i18n";
+import { __ as __58 } from "@wordpress/i18n";
 var ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var PERSPECTIVE_CONTROL_FIELD = {
-  label: __57("Perspective", "elementor"),
+  label: __58("Perspective", "elementor"),
   bind: "perspective",
   units: ["px", "em", "rem", "vw", "vh"]
 };
 var CHILDREN_PERSPECTIVE_FIELDS = [
   {
-    label: __57("Origin X", "elementor"),
+    label: __58("Origin X", "elementor"),
     bind: "x",
     units: ORIGIN_UNITS
   },
   {
-    label: __57("Origin Y", "elementor"),
+    label: __58("Origin Y", "elementor"),
     bind: "y",
     units: ORIGIN_UNITS
   }
 ];
 var ChildrenPerspectiveControl = () => {
-  return /* @__PURE__ */ React114.createElement(Stack19, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, __57("Children perspective", "elementor")), /* @__PURE__ */ React114.createElement(PerspectiveControl, null), /* @__PURE__ */ React114.createElement(PerspectiveOriginControl, null));
+  return /* @__PURE__ */ React115.createElement(Stack19, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, __58("Children perspective", "elementor")), /* @__PURE__ */ React115.createElement(PerspectiveControl, null), /* @__PURE__ */ React115.createElement(PerspectiveOriginControl, null));
 };
-var PerspectiveControl = () => /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React114.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
-var PerspectiveOriginControl = () => /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React114.createElement(PerspectiveOriginControlProvider, null));
+var PerspectiveControl = () => /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React115.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
+var PerspectiveOriginControl = () => /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React115.createElement(PerspectiveOriginControlProvider, null));
 var PerspectiveOriginControlProvider = () => {
   const context = useBoundProp(perspectiveOriginPropTypeUtil);
-  return /* @__PURE__ */ React114.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React114.createElement(ControlFields, { control }))));
+  return /* @__PURE__ */ React115.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React115.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = useRef30(null);
-  return /* @__PURE__ */ React114.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React114.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React114.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
+  const rowRef = useRef32(null);
+  return /* @__PURE__ */ React115.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React115.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React115.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
-import * as React115 from "react";
-import { useRef as useRef31 } from "react";
+import * as React116 from "react";
+import { useRef as useRef33 } from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid28, Stack as Stack20 } from "@elementor/ui";
-import { __ as __58 } from "@wordpress/i18n";
+import { __ as __59 } from "@wordpress/i18n";
 var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
 var TRANSFORM_ORIGIN_FIELDS = [
   {
-    label: __58("Origin X", "elementor"),
+    label: __59("Origin X", "elementor"),
     bind: "x",
     units: TRANSFORM_ORIGIN_UNITS
   },
   {
-    label: __58("Origin Y", "elementor"),
+    label: __59("Origin Y", "elementor"),
     bind: "y",
     units: TRANSFORM_ORIGIN_UNITS
   },
   {
-    label: __58("Origin Z", "elementor"),
+    label: __59("Origin Z", "elementor"),
     bind: "z",
     units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
   }
 ];
 var TransformOriginControl = () => {
-  return /* @__PURE__ */ React115.createElement(Stack20, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, __58("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React115.createElement(ControlFields2, { control, key: control.bind })));
+  return /* @__PURE__ */ React116.createElement(Stack20, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, __59("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React116.createElement(ControlFields2, { control, key: control.bind })));
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
-  const rowRef = useRef31(null);
-  return /* @__PURE__ */ React115.createElement(PropProvider, { ...context }, /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React115.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React115.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React115.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
+  const rowRef = useRef33(null);
+  return /* @__PURE__ */ React116.createElement(PropProvider, { ...context }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React116.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React116.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React116.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React116.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
-var SIZE10 = "tiny";
+var SIZE11 = "tiny";
 var TransformSettingsControl = ({
   popupState,
   anchorRef,
@@ -8971,7 +9073,7 @@ var TransformSettingsControl = ({
     ...popupState,
     anchorEl: anchorRef.current ?? void 0
   });
-  return /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React117.createElement(
     Popover7,
     {
       disablePortal: true,
@@ -8986,45 +9088,45 @@ var TransformSettingsControl = ({
       },
       ...popupProps
     },
-    /* @__PURE__ */ React116.createElement(
+    /* @__PURE__ */ React117.createElement(
       PopoverHeader5,
       {
-        title: __59("Transform settings", "elementor"),
+        title: __60("Transform settings", "elementor"),
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React116.createElement(AdjustmentsIcon, { fontSize: SIZE10 })
+        icon: /* @__PURE__ */ React117.createElement(AdjustmentsIcon, { fontSize: SIZE11 })
       }
     ),
-    /* @__PURE__ */ React116.createElement(Divider6, null),
-    /* @__PURE__ */ React116.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React116.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement(Box29, { sx: { my: 0.5 } }, /* @__PURE__ */ React116.createElement(Divider6, null)), /* @__PURE__ */ React116.createElement(ChildrenPerspectiveControl, null)))
+    /* @__PURE__ */ React117.createElement(Divider6, null),
+    /* @__PURE__ */ React117.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React117.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement(Box29, { sx: { my: 0.5 } }, /* @__PURE__ */ React117.createElement(Divider6, null)), /* @__PURE__ */ React117.createElement(ChildrenPerspectiveControl, null)))
   );
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-var SIZE11 = "tiny";
+var SIZE12 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(transformPropTypeUtil);
-    const headerRef = useRef32(null);
+    const headerRef = useRef34(null);
     const popupState = usePopupState10({ variant: "popover" });
-    return /* @__PURE__ */ React117.createElement(PropProvider, { ...context }, /* @__PURE__ */ React117.createElement(
+    return /* @__PURE__ */ React118.createElement(PropProvider, { ...context }, /* @__PURE__ */ React118.createElement(
       TransformSettingsControl,
       {
         popupState,
         anchorRef: headerRef,
         showChildrenPerspective
       }
-    ), /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React117.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
+    ), /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React118.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
   }
 );
-var ToolTip = /* @__PURE__ */ React117.createElement(
+var ToolTip = /* @__PURE__ */ React118.createElement(
   Box30,
   {
     component: "span",
     "aria-label": void 0,
     sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
   },
-  /* @__PURE__ */ React117.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
-  /* @__PURE__ */ React117.createElement(Typography12, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __60("You can use each kind of transform only once per element.", "elementor"))
+  /* @__PURE__ */ React118.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
+  /* @__PURE__ */ React118.createElement(Typography12, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __61("You can use each kind of transform only once per element.", "elementor"))
 );
 var Repeater2 = ({
   headerRef,
@@ -9038,21 +9140,21 @@ var Repeater2 = ({
     return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
   };
   const shouldDisableAddItem = !getInitialValue2();
-  return /* @__PURE__ */ React117.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React117.createElement(
+  return /* @__PURE__ */ React118.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React118.createElement(
     ControlRepeater,
     {
       initial: getInitialValue2() ?? initialTransformValue,
       propTypeUtil: transformFunctionsPropTypeUtil
     },
-    /* @__PURE__ */ React117.createElement(
+    /* @__PURE__ */ React118.createElement(
       RepeaterHeader,
       {
-        label: __60("Transform", "elementor"),
-        adornment: () => /* @__PURE__ */ React117.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
+        label: __61("Transform", "elementor"),
+        adornment: () => /* @__PURE__ */ React118.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
         ref: headerRef
       },
-      /* @__PURE__ */ React117.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
-      /* @__PURE__ */ React117.createElement(
+      /* @__PURE__ */ React118.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
+      /* @__PURE__ */ React118.createElement(
         TooltipAddItemAction,
         {
           disabled: shouldDisableAddItem,
@@ -9062,15 +9164,15 @@ var Repeater2 = ({
         }
       )
     ),
-    /* @__PURE__ */ React117.createElement(ItemsContainer, null, /* @__PURE__ */ React117.createElement(
+    /* @__PURE__ */ React118.createElement(ItemsContainer, null, /* @__PURE__ */ React118.createElement(
       Item,
       {
         Icon: TransformIcon,
         Label: TransformLabel,
-        actions: /* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement(DisableItemAction, null), /* @__PURE__ */ React117.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React118.createElement(React118.Fragment, null, /* @__PURE__ */ React118.createElement(DisableItemAction, null), /* @__PURE__ */ React118.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React117.createElement(EditItemPopover, null, /* @__PURE__ */ React117.createElement(TransformContent, null))
+    /* @__PURE__ */ React118.createElement(EditItemPopover, null, /* @__PURE__ */ React118.createElement(TransformContent, null))
   ));
 };
 var TransformBasePopoverTrigger = ({
@@ -9078,13 +9180,13 @@ var TransformBasePopoverTrigger = ({
   repeaterBindKey
 }) => {
   const { bind } = useBoundProp();
-  const titleLabel = __60("Transform settings", "elementor");
-  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React117.createElement(Tooltip12, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React117.createElement(IconButton10, { size: SIZE11, "aria-label": titleLabel, ...bindTrigger5(popupState) }, /* @__PURE__ */ React117.createElement(AdjustmentsIcon2, { fontSize: SIZE11 })));
+  const titleLabel = __61("Transform settings", "elementor");
+  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React118.createElement(Tooltip12, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React118.createElement(IconButton10, { size: SIZE12, "aria-label": titleLabel, ...bindTrigger5(popupState) }, /* @__PURE__ */ React118.createElement(AdjustmentsIcon2, { fontSize: SIZE12 })));
 };
 
 // src/controls/transition-control/transition-repeater-control.tsx
-import * as React120 from "react";
-import { useEffect as useEffect19, useMemo as useMemo18, useState as useState26 } from "react";
+import * as React121 from "react";
+import { useEffect as useEffect19, useMemo as useMemo19, useState as useState26 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils3,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -9092,19 +9194,19 @@ import {
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
 import { Alert as Alert3, AlertTitle as AlertTitle4, Box as Box32, Typography as Typography13 } from "@elementor/ui";
 import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
-import { __ as __63 } from "@wordpress/i18n";
+import { __ as __64 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
-import * as React118 from "react";
-import { useMemo as useMemo16, useRef as useRef33 } from "react";
+import * as React119 from "react";
+import { useMemo as useMemo17, useRef as useRef35 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid29 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
-    const rowRef = useRef33(null);
+    const rowRef = useRef35(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = useMemo16(() => {
+    const currentSizeConfig = useMemo17(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -9115,7 +9217,7 @@ var SelectionSizeControl = createControl(
       }
     }, [value, sizeConfigMap]);
     const SelectionComponent = selectionConfig.component;
-    return /* @__PURE__ */ React118.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React118.createElement(Grid29, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React118.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React118.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React118.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React118.createElement(React118.Fragment, null, /* @__PURE__ */ React118.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React118.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React118.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React118.createElement(
+    return /* @__PURE__ */ React119.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React119.createElement(Grid29, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React119.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React119.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React119.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React119.createElement(React119.Fragment, null, /* @__PURE__ */ React119.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React119.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React119.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React119.createElement(
       SizeControl,
       {
         anchorRef: rowRef,
@@ -9130,12 +9232,12 @@ var SelectionSizeControl = createControl(
 
 // src/controls/transition-control/data.ts
 import { hasProInstalled, isVersionGreaterOrEqual } from "@elementor/utils";
-import { __ as __61 } from "@wordpress/i18n";
+import { __ as __62 } from "@wordpress/i18n";
 var initialTransitionValue = {
   selection: {
     $$type: "key-value",
     value: {
-      key: { value: __61("All properties", "elementor"), $$type: "string" },
+      key: { value: __62("All properties", "elementor"), $$type: "string" },
       value: { value: "all", $$type: "string" }
     }
   },
@@ -9159,128 +9261,128 @@ var createTransitionPropertiesList = () => {
   const isSiteRtl = getIsSiteRtl();
   const baseProperties = [
     {
-      label: __61("Default", "elementor"),
+      label: __62("Default", "elementor"),
       type: "category",
-      properties: [{ label: __61("All properties", "elementor"), value: "all" }]
+      properties: [{ label: __62("All properties", "elementor"), value: "all" }]
     },
     {
-      label: __61("Margin", "elementor"),
+      label: __62("Margin", "elementor"),
       type: "category",
       properties: [
-        { label: __61("Margin (all)", "elementor"), value: "margin", isDisabled: true },
-        { label: __61("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
+        { label: __62("Margin (all)", "elementor"), value: "margin", isDisabled: true },
+        { label: __62("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
         {
-          label: isSiteRtl ? __61("Margin right", "elementor") : __61("Margin left", "elementor"),
+          label: isSiteRtl ? __62("Margin right", "elementor") : __62("Margin left", "elementor"),
           value: "margin-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? __61("Margin left", "elementor") : __61("Margin right", "elementor"),
+          label: isSiteRtl ? __62("Margin left", "elementor") : __62("Margin right", "elementor"),
           value: "margin-inline-end",
           isDisabled: true
         },
-        { label: __61("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
+        { label: __62("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
       ]
     },
     {
-      label: __61("Padding", "elementor"),
+      label: __62("Padding", "elementor"),
       type: "category",
       properties: [
-        { label: __61("Padding (all)", "elementor"), value: "padding", isDisabled: true },
-        { label: __61("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
+        { label: __62("Padding (all)", "elementor"), value: "padding", isDisabled: true },
+        { label: __62("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
         {
-          label: isSiteRtl ? __61("Padding right", "elementor") : __61("Padding left", "elementor"),
+          label: isSiteRtl ? __62("Padding right", "elementor") : __62("Padding left", "elementor"),
           value: "padding-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? __61("Padding left", "elementor") : __61("Padding right", "elementor"),
+          label: isSiteRtl ? __62("Padding left", "elementor") : __62("Padding right", "elementor"),
           value: "padding-inline-end",
           isDisabled: true
         },
-        { label: __61("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
+        { label: __62("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
       ]
     },
     {
-      label: __61("Flex", "elementor"),
+      label: __62("Flex", "elementor"),
       type: "category",
       properties: [
-        { label: __61("Flex (all)", "elementor"), value: "flex", isDisabled: true },
-        { label: __61("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
-        { label: __61("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
-        { label: __61("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
+        { label: __62("Flex (all)", "elementor"), value: "flex", isDisabled: true },
+        { label: __62("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
+        { label: __62("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
+        { label: __62("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
       ]
     },
     {
-      label: __61("Size", "elementor"),
+      label: __62("Size", "elementor"),
       type: "category",
       properties: [
-        { label: __61("Width", "elementor"), value: "width", isDisabled: true },
-        { label: __61("Height", "elementor"), value: "height", isDisabled: true },
-        { label: __61("Max height", "elementor"), value: "max-height", isDisabled: true },
-        { label: __61("Max width", "elementor"), value: "max-width", isDisabled: true },
-        { label: __61("Min height", "elementor"), value: "min-height", isDisabled: true },
-        { label: __61("Min width", "elementor"), value: "min-width", isDisabled: true }
+        { label: __62("Width", "elementor"), value: "width", isDisabled: true },
+        { label: __62("Height", "elementor"), value: "height", isDisabled: true },
+        { label: __62("Max height", "elementor"), value: "max-height", isDisabled: true },
+        { label: __62("Max width", "elementor"), value: "max-width", isDisabled: true },
+        { label: __62("Min height", "elementor"), value: "min-height", isDisabled: true },
+        { label: __62("Min width", "elementor"), value: "min-width", isDisabled: true }
       ]
     },
     {
-      label: __61("Position", "elementor"),
+      label: __62("Position", "elementor"),
       type: "category",
       properties: [
-        { label: __61("Top", "elementor"), value: "inset-block-start", isDisabled: true },
+        { label: __62("Top", "elementor"), value: "inset-block-start", isDisabled: true },
         {
-          label: isSiteRtl ? __61("Right", "elementor") : __61("Left", "elementor"),
+          label: isSiteRtl ? __62("Right", "elementor") : __62("Left", "elementor"),
           value: "inset-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? __61("Left", "elementor") : __61("Right", "elementor"),
+          label: isSiteRtl ? __62("Left", "elementor") : __62("Right", "elementor"),
           value: "inset-inline-end",
           isDisabled: true
         },
-        { label: __61("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
-        { label: __61("Z-index", "elementor"), value: "z-index", isDisabled: true }
+        { label: __62("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
+        { label: __62("Z-index", "elementor"), value: "z-index", isDisabled: true }
       ]
     },
     {
-      label: __61("Typography", "elementor"),
+      label: __62("Typography", "elementor"),
       type: "category",
       properties: [
-        { label: __61("Font color", "elementor"), value: "color", isDisabled: true },
-        { label: __61("Font size", "elementor"), value: "font-size", isDisabled: true },
-        { label: __61("Line height", "elementor"), value: "line-height", isDisabled: true },
-        { label: __61("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
-        { label: __61("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
-        { label: __61("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
-        { label: __61("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
+        { label: __62("Font color", "elementor"), value: "color", isDisabled: true },
+        { label: __62("Font size", "elementor"), value: "font-size", isDisabled: true },
+        { label: __62("Line height", "elementor"), value: "line-height", isDisabled: true },
+        { label: __62("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
+        { label: __62("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
+        { label: __62("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
+        { label: __62("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
       ]
     },
     {
-      label: __61("Background", "elementor"),
+      label: __62("Background", "elementor"),
       type: "category",
       properties: [
-        { label: __61("Background color", "elementor"), value: "background-color", isDisabled: true },
-        { label: __61("Background position", "elementor"), value: "background-position", isDisabled: true },
-        { label: __61("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
+        { label: __62("Background color", "elementor"), value: "background-color", isDisabled: true },
+        { label: __62("Background position", "elementor"), value: "background-position", isDisabled: true },
+        { label: __62("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
       ]
     },
     {
-      label: __61("Border", "elementor"),
+      label: __62("Border", "elementor"),
       type: "category",
       properties: [
-        { label: __61("Border (all)", "elementor"), value: "border", isDisabled: true },
-        { label: __61("Border radius", "elementor"), value: "border-radius", isDisabled: true },
-        { label: __61("Border color", "elementor"), value: "border-color", isDisabled: true },
-        { label: __61("Border width", "elementor"), value: "border-width", isDisabled: true }
+        { label: __62("Border (all)", "elementor"), value: "border", isDisabled: true },
+        { label: __62("Border radius", "elementor"), value: "border-radius", isDisabled: true },
+        { label: __62("Border color", "elementor"), value: "border-color", isDisabled: true },
+        { label: __62("Border width", "elementor"), value: "border-width", isDisabled: true }
       ]
     },
     {
-      label: __61("Effects", "elementor"),
+      label: __62("Effects", "elementor"),
       type: "category",
       properties: [
-        { label: __61("Opacity", "elementor"), value: "opacity", isDisabled: true },
-        { label: __61("Transform (all)", "elementor"), value: "transform", isDisabled: true },
-        { label: __61("Filter (all)", "elementor"), value: "filter", isDisabled: true }
+        { label: __62("Opacity", "elementor"), value: "opacity", isDisabled: true },
+        { label: __62("Transform (all)", "elementor"), value: "transform", isDisabled: true },
+        { label: __62("Filter (all)", "elementor"), value: "filter", isDisabled: true }
       ]
     }
   ];
@@ -9316,13 +9418,13 @@ function subscribeToTransitionEvent() {
 }
 
 // src/controls/transition-control/transition-selector.tsx
-import * as React119 from "react";
-import { useMemo as useMemo17, useRef as useRef34 } from "react";
+import * as React120 from "react";
+import { useMemo as useMemo18, useRef as useRef36 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
 import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box31, Popover as Popover8, UnstableTag as UnstableTag3, usePopupState as usePopupState11 } from "@elementor/ui";
-import { __ as __62 } from "@wordpress/i18n";
+import { __ as __63 } from "@wordpress/i18n";
 var toTransitionSelectorValue = (label) => {
   for (const category of transitionProperties) {
     const property = category.properties.find((prop) => prop.label === label);
@@ -9363,9 +9465,9 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = useRef34(null);
+  const defaultRef = useRef36(null);
   const popoverState = usePopupState11({ variant: "popover" });
-  const disabledCategories = useMemo17(() => {
+  const disabledCategories = useMemo18(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -9385,7 +9487,7 @@ var TransitionSelector = ({
     return [
       first,
       {
-        label: __62("Recently Used", "elementor"),
+        label: __63("Recently Used", "elementor"),
         items: recentItems
       },
       ...rest
@@ -9409,16 +9511,16 @@ var TransitionSelector = ({
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React119.createElement(Box31, { ref: defaultRef }, /* @__PURE__ */ React119.createElement(ControlActions, null, /* @__PURE__ */ React119.createElement(
+  return /* @__PURE__ */ React120.createElement(Box31, { ref: defaultRef }, /* @__PURE__ */ React120.createElement(ControlActions, null, /* @__PURE__ */ React120.createElement(
     UnstableTag3,
     {
       variant: "outlined",
       label: transitionLabel,
-      endIcon: /* @__PURE__ */ React119.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React120.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
       ...bindTrigger6(popoverState),
       fullWidth: true
     }
-  )), /* @__PURE__ */ React119.createElement(
+  )), /* @__PURE__ */ React120.createElement(
     Popover8,
     {
       disablePortal: true,
@@ -9429,7 +9531,7 @@ var TransitionSelector = ({
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "left" }
     },
-    /* @__PURE__ */ React119.createElement(
+    /* @__PURE__ */ React120.createElement(
       ItemSelector,
       {
         itemsList: getItemList(),
@@ -9437,10 +9539,10 @@ var TransitionSelector = ({
         onItemChange: handleTransitionPropertyChange,
         onClose: popoverState.close,
         sectionWidth: 268,
-        title: __62("Transition Property", "elementor"),
+        title: __63("Transition Property", "elementor"),
         icon: VariationsIcon,
         disabledItems: includeCurrentValueInOptions(value, disabledItems),
-        categoryItemContentTemplate: (item) => /* @__PURE__ */ React119.createElement(
+        categoryItemContentTemplate: (item) => /* @__PURE__ */ React120.createElement(
           Box31,
           {
             sx: {
@@ -9450,13 +9552,13 @@ var TransitionSelector = ({
               width: "100%"
             }
           },
-          /* @__PURE__ */ React119.createElement("span", null, item.value),
-          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React119.createElement(PromotionChip, null)
+          /* @__PURE__ */ React120.createElement("span", null, item.value),
+          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React120.createElement(PromotionChip, null)
         ),
-        footer: showPromotion ? /* @__PURE__ */ React119.createElement(
+        footer: showPromotion ? /* @__PURE__ */ React120.createElement(
           PromotionAlert,
           {
-            message: __62(
+            message: __63(
               "Upgrade to customize transition properties and control effects.",
               "elementor"
             ),
@@ -9495,8 +9597,8 @@ var areAllPropertiesUsed = (value = []) => {
 };
 var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
   return {
-    selectionLabel: __63("Type", "elementor"),
-    sizeLabel: __63("Duration", "elementor"),
+    selectionLabel: __64("Type", "elementor"),
+    sizeLabel: __64("Duration", "elementor"),
     selectionConfig: {
       component: TransitionSelector,
       props: {
@@ -9572,7 +9674,7 @@ var getInitialValue = (values = []) => {
   }
   return initialTransitionValue;
 };
-var disableAddItemTooltipContent = /* @__PURE__ */ React120.createElement(
+var disableAddItemTooltipContent = /* @__PURE__ */ React121.createElement(
   Alert3,
   {
     sx: {
@@ -9580,10 +9682,10 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React120.createElement(
       gap: 0.5
     },
     color: "secondary",
-    icon: /* @__PURE__ */ React120.createElement(InfoCircleFilledIcon3, null)
+    icon: /* @__PURE__ */ React121.createElement(InfoCircleFilledIcon3, null)
   },
-  /* @__PURE__ */ React120.createElement(AlertTitle4, null, __63("Transitions", "elementor")),
-  /* @__PURE__ */ React120.createElement(Box32, { component: "span" }, /* @__PURE__ */ React120.createElement(Typography13, { variant: "body2" }, __63("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React121.createElement(AlertTitle4, null, __64("Transitions", "elementor")),
+  /* @__PURE__ */ React121.createElement(Box32, { component: "span" }, /* @__PURE__ */ React121.createElement(Typography13, { variant: "body2" }, __64("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -9594,11 +9696,11 @@ var TransitionRepeaterControl = createControl(
     const [recentlyUsedList, setRecentlyUsedList] = useState26([]);
     const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo18(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo19(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = useMemo18(() => {
+    const allowedTransitionSet = useMemo19(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -9624,15 +9726,15 @@ var TransitionRepeaterControl = createControl(
     useEffect19(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = useMemo18(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = useMemo19(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
-    return /* @__PURE__ */ React120.createElement(
+    return /* @__PURE__ */ React121.createElement(
       RepeatableControl,
       {
-        label: __63("Transitions", "elementor"),
-        repeaterLabel: __63("Transitions", "elementor"),
+        label: __64("Transitions", "elementor"),
+        repeaterLabel: __64("Transitions", "elementor"),
         patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
-        placeholder: __63("Empty Transition", "elementor"),
+        placeholder: __64("Empty Transition", "elementor"),
         showDuplicate: false,
         showToggle: true,
         initialValues: getInitialValue(value),
@@ -9653,9 +9755,9 @@ var TransitionRepeaterControl = createControl(
 );
 
 // src/controls/date-time-control.tsx
-import * as React121 from "react";
+import * as React122 from "react";
 import * as dayjs from "dayjs";
-import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
+import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
 import { Box as Box33, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
 var DATE_FORMAT = "YYYY-MM-DD";
@@ -9701,10 +9803,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
     const base = dayjs.default();
     return base.hour(h).minute(m).second(0).millisecond(0);
   };
-  return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(ControlActions, null, /* @__PURE__ */ React121.createElement(LocalizationProvider, null, /* @__PURE__ */ React121.createElement(Box33, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React121.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React121.createElement(
+  return /* @__PURE__ */ React122.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React122.createElement(ControlActions, null, /* @__PURE__ */ React122.createElement(LocalizationProvider, null, /* @__PURE__ */ React122.createElement(Box33, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React122.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React122.createElement(
     DatePicker,
     {
-      value: parseDateValue(stringPropTypeUtil20.extract(value?.date)),
+      value: parseDateValue(stringPropTypeUtil21.extract(value?.date)),
       onChange: (v) => handleChange({ date: v }, { bind: "date" }),
       disabled: inputDisabled,
       slotProps: {
@@ -9713,10 +9815,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
         openPickerIcon: { fontSize: "tiny" }
       }
     }
-  )), /* @__PURE__ */ React121.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React121.createElement(
+  )), /* @__PURE__ */ React122.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React122.createElement(
     TimePicker,
     {
-      value: parseTimeValue(stringPropTypeUtil20.extract(value?.time)),
+      value: parseTimeValue(stringPropTypeUtil21.extract(value?.time)),
       onChange: (v) => handleChange({ time: v }, { bind: "time" }),
       disabled: inputDisabled,
       slotProps: {
@@ -9729,13 +9831,13 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 });
 
 // src/controls/date-range-control.tsx
-import * as React123 from "react";
+import * as React124 from "react";
 import { dateRangePropTypeUtil, dateStringPropTypeUtil as dateStringPropTypeUtil2 } from "@elementor/editor-props";
 import { FormHelperText as FormHelperText2, Grid as Grid30, Stack as Stack21 } from "@elementor/ui";
-import { __ as __64 } from "@wordpress/i18n";
+import { __ as __65 } from "@wordpress/i18n";
 
 // src/controls/date-string-control.tsx
-import * as React122 from "react";
+import * as React123 from "react";
 import { dateStringPropTypeUtil } from "@elementor/editor-props";
 import { DatePicker as DatePicker2, LocalizationProvider as LocalizationProvider2 } from "@elementor/ui";
 
@@ -9794,7 +9896,7 @@ var DateStringControl = createControl(
       }
       setValue(newValue.format(format));
     };
-    return /* @__PURE__ */ React122.createElement(LocalizationProvider2, null, /* @__PURE__ */ React122.createElement(ControlActions, null, /* @__PURE__ */ React122.createElement(
+    return /* @__PURE__ */ React123.createElement(LocalizationProvider2, null, /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
       DatePicker2,
       {
         value: parseDateString(value ?? ""),
@@ -9808,8 +9910,8 @@ var DateStringControl = createControl(
 
 // src/controls/date-range-control.tsx
 var RANGE_LABELS = {
-  min: __64("Min date", "elementor"),
-  max: __64("Max date", "elementor")
+  min: __65("Min date", "elementor"),
+  max: __65("Max date", "elementor")
 };
 var isMaxBeforeMin = (minIso, maxIso) => {
   if (!minIso || !maxIso) {
@@ -9817,38 +9919,38 @@ var isMaxBeforeMin = (minIso, maxIso) => {
   }
   return maxIso < minIso;
 };
-var RANGE_ERROR_MESSAGE = __64("Max date must be on or after Min date", "elementor");
+var RANGE_ERROR_MESSAGE = __65("Max date must be on or after Min date", "elementor");
 var DateRangeControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(dateRangePropTypeUtil);
   const minString = dateStringPropTypeUtil2.extract(value?.min);
   const maxString = dateStringPropTypeUtil2.extract(value?.max);
   const hasInvalidRange = isMaxBeforeMin(minString, maxString);
-  return /* @__PURE__ */ React123.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React123.createElement(Stack21, { gap: 0.75 }, /* @__PURE__ */ React123.createElement(Stack21, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React123.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React123.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React123.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(
+  return /* @__PURE__ */ React124.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React124.createElement(Stack21, { gap: 0.75 }, /* @__PURE__ */ React124.createElement(Stack21, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React124.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React124.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React124.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React124.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React124.createElement(
     BoundDateStringControl,
     {
       bind: "min",
       ariaLabel: RANGE_LABELS.min,
       error: hasInvalidRange
     }
-  ))), /* @__PURE__ */ React123.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React123.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React123.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(
+  ))), /* @__PURE__ */ React124.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React124.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React124.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React124.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React124.createElement(
     BoundDateStringControl,
     {
       bind: "max",
       ariaLabel: RANGE_LABELS.max,
       error: hasInvalidRange
     }
-  )))), hasInvalidRange && /* @__PURE__ */ React123.createElement(FormHelperText2, { error: true }, RANGE_ERROR_MESSAGE)));
+  )))), hasInvalidRange && /* @__PURE__ */ React124.createElement(FormHelperText2, { error: true }, RANGE_ERROR_MESSAGE)));
 });
 var BoundDateStringControl = ({
   bind,
   ariaLabel,
   error
 }) => {
-  return /* @__PURE__ */ React123.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React123.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
+  return /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React124.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
 };
 
 // src/controls/time-string-control.tsx
-import * as React124 from "react";
+import * as React125 from "react";
 import { timeStringPropTypeUtil } from "@elementor/editor-props";
 import { LocalizationProvider as LocalizationProvider3, TimePicker as TimePicker2 } from "@elementor/ui";
 var TimeStringControl = createControl(
@@ -9876,7 +9978,7 @@ var TimeStringControl = createControl(
       }
       setValue(newValue.format(format));
     };
-    return /* @__PURE__ */ React124.createElement(LocalizationProvider3, null, /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(
+    return /* @__PURE__ */ React125.createElement(LocalizationProvider3, null, /* @__PURE__ */ React125.createElement(ControlActions, null, /* @__PURE__ */ React125.createElement(
       TimePicker2,
       {
         value: parseTimeString(value ?? ""),
@@ -9889,31 +9991,31 @@ var TimeStringControl = createControl(
 );
 
 // src/controls/time-range-control.tsx
-import * as React125 from "react";
+import * as React126 from "react";
 import { timeRangePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid31, Stack as Stack22 } from "@elementor/ui";
-import { __ as __65 } from "@wordpress/i18n";
+import { __ as __66 } from "@wordpress/i18n";
 var RANGE_LABELS2 = {
-  min: __65("Start time", "elementor"),
-  max: __65("End time", "elementor")
+  min: __66("Start time", "elementor"),
+  max: __66("End time", "elementor")
 };
 var TimeRangeControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(timeRangePropTypeUtil);
-  return /* @__PURE__ */ React125.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React125.createElement(Stack22, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React125.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React125.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React125.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React125.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React125.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React125.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
+  return /* @__PURE__ */ React126.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React126.createElement(Stack22, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React126.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React126.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React126.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React126.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React126.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React126.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React126.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React126.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
 });
 var BoundTimeStringControl = ({ bind, ariaLabel }) => {
-  return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React125.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
+  return /* @__PURE__ */ React126.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React126.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
 };
 
 // src/controls/inline-editing-control.tsx
-import * as React129 from "react";
+import * as React130 from "react";
 import { useCallback as useCallback4, useState as useState28 } from "react";
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
 import { Box as Box36, Stack as Stack24 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
-import * as React126 from "react";
-import { useEffect as useEffect20, useRef as useRef35 } from "react";
+import * as React127 from "react";
+import { useEffect as useEffect20, useRef as useRef37 } from "react";
 import { Box as Box34 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
@@ -9930,7 +10032,7 @@ import Underline from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
 
 // src/utils/inline-editing.ts
-import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
+import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
 function isEmpty(value = "") {
   if (!value) {
     return true;
@@ -9952,14 +10054,14 @@ function extractInlineHtmlContent(propValue) {
     return escapedHtmlPropTypeUtil.extract(propValue) ?? "";
   }
   const htmlV3 = htmlV3PropTypeUtil.extract(propValue);
-  return stringPropTypeUtil21.extract(htmlV3?.content ?? null) ?? "";
+  return stringPropTypeUtil22.extract(htmlV3?.content ?? null) ?? "";
 }
 
 // src/components/inline-editor.tsx
 var ITALIC_KEYBOARD_SHORTCUT = "i";
 var BOLD_KEYBOARD_SHORTCUT = "b";
 var UNDERLINE_KEYBOARD_SHORTCUT = "u";
-var InlineEditor = React126.forwardRef((props, ref) => {
+var InlineEditor = React127.forwardRef((props, ref) => {
   const {
     value,
     setValue,
@@ -9976,8 +10078,8 @@ var InlineEditor = React126.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = useRef35(null);
-  const onBlurRef = useRef35(onBlur);
+  const containerRef = useRef37(null);
+  const onBlurRef = useRef37(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -10072,10 +10174,10 @@ var InlineEditor = React126.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React126.createElement(Box34, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React126.createElement(EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React127.createElement(Box34, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React127.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = useRef35(false);
+  const hasMounted = useRef37(false);
   useEffect20(() => {
     if (hasMounted.current) {
       callback();
@@ -10086,8 +10188,8 @@ var useOnUpdate = (callback, dependencies) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-import * as React128 from "react";
-import { useEffect as useEffect22, useMemo as useMemo19, useRef as useRef37, useState as useState27 } from "react";
+import * as React129 from "react";
+import { useEffect as useEffect22, useMemo as useMemo20, useRef as useRef39, useState as useState27 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -10109,14 +10211,14 @@ import {
   usePopupState as usePopupState12
 } from "@elementor/ui";
 import { useEditorState } from "@tiptap/react";
-import { __ as __67 } from "@wordpress/i18n";
+import { __ as __68 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
-import * as React127 from "react";
-import { useEffect as useEffect21, useRef as useRef36 } from "react";
+import * as React128 from "react";
+import { useEffect as useEffect21, useRef as useRef38 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
-import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack23, TextField as TextField11, ToggleButton as ToggleButton3, Tooltip as Tooltip13 } from "@elementor/ui";
-import { __ as __66 } from "@wordpress/i18n";
+import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack23, TextField as TextField12, ToggleButton as ToggleButton3, Tooltip as Tooltip13 } from "@elementor/ui";
+import { __ as __67 } from "@wordpress/i18n";
 var UrlPopover = ({
   popupState,
   restoreValue,
@@ -10126,7 +10228,7 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = useRef36(null);
+  const inputRef = useRef38(null);
   useEffect21(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -10136,7 +10238,7 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React127.createElement(
+  return /* @__PURE__ */ React128.createElement(
     Popover9,
     {
       slotProps: {
@@ -10147,30 +10249,30 @@ var UrlPopover = ({
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React127.createElement(Stack23, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React127.createElement(
-      TextField11,
+    /* @__PURE__ */ React128.createElement(Stack23, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React128.createElement(
+      TextField12,
       {
         value,
         onChange,
         size: "tiny",
         fullWidth: true,
-        placeholder: __66("Type a URL", "elementor"),
+        placeholder: __67("Type a URL", "elementor"),
         inputProps: { ref: inputRef },
         color: "secondary",
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React127.createElement(Tooltip13, { title: __66("Open in a new tab", "elementor") }, /* @__PURE__ */ React127.createElement(
+    ), /* @__PURE__ */ React128.createElement(Tooltip13, { title: __67("Open in a new tab", "elementor") }, /* @__PURE__ */ React128.createElement(
       ToggleButton3,
       {
         size: "tiny",
         value: "newTab",
         selected: openInNewTab,
         onClick: onToggleNewTab,
-        "aria-label": __66("Open in a new tab", "elementor"),
+        "aria-label": __67("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React127.createElement(ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React128.createElement(ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
@@ -10184,14 +10286,14 @@ var InlineEditorToolbar = ({
 }) => {
   const [urlValue, setUrlValue] = useState27("");
   const [openInNewTab, setOpenInNewTab] = useState27(false);
-  const toolbarRef = useRef37(null);
+  const toolbarRef = useRef39(null);
   const linkPopupState = usePopupState12({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = useEditorState({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo19(() => {
+  const formatButtonsList = useMemo20(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -10233,7 +10335,7 @@ var InlineEditorToolbar = ({
       editor?.commands?.focus();
     }
   }, [editor, inControlPanel]);
-  return /* @__PURE__ */ React128.createElement(
+  return /* @__PURE__ */ React129.createElement(
     Box35,
     {
       ref: toolbarRef,
@@ -10267,8 +10369,8 @@ var InlineEditorToolbar = ({
         }
       }
     },
-    /* @__PURE__ */ React128.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React128.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React128.createElement(
+    /* @__PURE__ */ React129.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React129.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React129.createElement(
       ToggleButtonGroup2,
       {
         value: editorState,
@@ -10298,7 +10400,7 @@ var InlineEditorToolbar = ({
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React128.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React128.createElement(
+      formatButtonsList.map((button) => /* @__PURE__ */ React129.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React129.createElement(
         ToggleButton4,
         {
           value: button.action,
@@ -10316,7 +10418,7 @@ var InlineEditorToolbar = ({
         button.icon
       )))
     ),
-    /* @__PURE__ */ React128.createElement(
+    /* @__PURE__ */ React129.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -10339,64 +10441,64 @@ var checkIfElementIsClickable = (elementId) => {
 };
 var toolbarButtons = {
   clear: {
-    label: __67("Clear", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(MinusIcon2, { fontSize: "tiny" }),
+    label: __68("Clear", "elementor"),
+    icon: /* @__PURE__ */ React129.createElement(MinusIcon2, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: __67("Bold", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(BoldIcon, { fontSize: "tiny" }),
+    label: __68("Bold", "elementor"),
+    icon: /* @__PURE__ */ React129.createElement(BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: __67("Italic", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(ItalicIcon, { fontSize: "tiny" }),
+    label: __68("Italic", "elementor"),
+    icon: /* @__PURE__ */ React129.createElement(ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: __67("Underline", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(UnderlineIcon, { fontSize: "tiny" }),
+    label: __68("Underline", "elementor"),
+    icon: /* @__PURE__ */ React129.createElement(UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: __67("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(StrikethroughIcon, { fontSize: "tiny" }),
+    label: __68("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React129.createElement(StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: __67("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(SuperscriptIcon, { fontSize: "tiny" }),
+    label: __68("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React129.createElement(SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: __67("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(SubscriptIcon, { fontSize: "tiny" }),
+    label: __68("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React129.createElement(SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
   },
   link: {
-    label: __67("Link", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(LinkIcon3, { fontSize: "tiny" }),
+    label: __68("Link", "elementor"),
+    icon: /* @__PURE__ */ React129.createElement(LinkIcon3, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -10418,7 +10520,7 @@ var InlineEditingControl = createControl(
       },
       [setValue]
     );
-    const editorField = /* @__PURE__ */ React129.createElement(ControlActions, null, /* @__PURE__ */ React129.createElement(Box36, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React129.createElement(
+    const editorField = /* @__PURE__ */ React130.createElement(ControlActions, null, /* @__PURE__ */ React130.createElement(Box36, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React130.createElement(
       InlineEditorToolbar,
       {
         editor,
@@ -10431,7 +10533,7 @@ var InlineEditingControl = createControl(
         }),
         inControlPanel: true
       }
-    ), /* @__PURE__ */ React129.createElement(
+    ), /* @__PURE__ */ React130.createElement(
       Box36,
       {
         sx: (theme) => ({
@@ -10476,7 +10578,7 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React129.createElement(
+      /* @__PURE__ */ React130.createElement(
         InlineEditor,
         {
           value: content,
@@ -10493,22 +10595,22 @@ var InlineEditingControl = createControl(
     if (!promotion) {
       return editorField;
     }
-    return /* @__PURE__ */ React129.createElement(Stack24, { gap: 1 }, /* @__PURE__ */ React129.createElement(Stack24, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React129.createElement(ControlLabel, null, label), /* @__PURE__ */ React129.createElement(ImageOptimizeTrigger, { promotion })), editorField);
+    return /* @__PURE__ */ React130.createElement(Stack24, { gap: 1 }, /* @__PURE__ */ React130.createElement(Stack24, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React130.createElement(ControlLabel, null, label), /* @__PURE__ */ React130.createElement(ImageOptimizeTrigger, { promotion })), editorField);
   }
 );
 
 // src/controls/email-form-action-control/index.tsx
-import * as React133 from "react";
+import * as React134 from "react";
 import { emailsPropTypeUtil } from "@elementor/editor-props";
 import { CollapsibleContent } from "@elementor/editor-ui";
 import { Box as Box37, Divider as Divider7, Stack as Stack26 } from "@elementor/ui";
-import { __ as __69 } from "@wordpress/i18n";
+import { __ as __70 } from "@wordpress/i18n";
 
 // src/controls/email-form-action-control/fields.tsx
-import * as React132 from "react";
+import * as React133 from "react";
 import { InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
 import { Grid as Grid34, Stack as Stack25 } from "@elementor/ui";
-import { __ as __68 } from "@wordpress/i18n";
+import { __ as __69 } from "@wordpress/i18n";
 
 // src/hooks/use-form-field-suggestions.ts
 import {
@@ -10517,7 +10619,7 @@ import {
   getSelectedElements as getSelectedElements3,
   getWidgetsCache
 } from "@elementor/editor-elements";
-import { stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
 import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 var FORM_FIELD_WIDGET_TYPES = [
   "e-form-input",
@@ -10534,7 +10636,7 @@ function isFormFieldWidgetType(widgetType) {
   return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
 }
 function extractStringPropValue(value) {
-  return stringPropTypeUtil22.extract(value);
+  return stringPropTypeUtil23.extract(value);
 }
 function getSettingWithDefault(child, widgetType, key) {
   const fromGet = child.settings.get(key);
@@ -10598,10 +10700,10 @@ function useFormFieldSuggestions(options) {
 }
 
 // src/controls/email-form-action-control/email-chips-field.tsx
-import * as React130 from "react";
-import { useMemo as useMemo20, useState as useState29 } from "react";
-import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
-import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField12 } from "@elementor/ui";
+import * as React131 from "react";
+import { useMemo as useMemo21, useState as useState29 } from "react";
+import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil24 } from "@elementor/editor-props";
+import { Autocomplete as Autocomplete5, Grid as Grid32, TextField as TextField13 } from "@elementor/ui";
 
 // src/controls/email-form-action-control/utils.ts
 import { z } from "@elementor/schema";
@@ -10639,8 +10741,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
   const [inputValue, setInputValue] = useState29("");
   const items2 = value || [];
-  const selectedValues = items2.map((item) => stringPropTypeUtil23.extract(item)).filter((val) => val !== null);
-  const suggestionOptions = useMemo20(
+  const selectedValues = items2.map((item) => stringPropTypeUtil24.extract(item)).filter((val) => val !== null);
+  const suggestionOptions = useMemo21(
     () => suggestions.map((suggestion) => `[${suggestion.value}]`),
     [suggestions]
   );
@@ -10649,7 +10751,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
     if (!address || selectedValues.includes(address) || !isValidRecipient(address)) {
       return;
     }
-    setValue([...items2, stringPropTypeUtil23.create(address)]);
+    setValue([...items2, stringPropTypeUtil24.create(address)]);
     setInputValue("");
   };
   const handleChange = (_, newValue) => {
@@ -10659,7 +10761,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       if (!address || !isValidRecipient(address)) {
         continue;
       }
-      updated.push(stringPropTypeUtil23.create(address));
+      updated.push(stringPropTypeUtil24.create(address));
     }
     setValue(updated);
     setInputValue("");
@@ -10675,8 +10777,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       tryAddChip(inputValue);
     }
   };
-  return /* @__PURE__ */ React130.createElement(ControlActions, null, /* @__PURE__ */ React130.createElement(
-    Autocomplete4,
+  return /* @__PURE__ */ React131.createElement(ControlActions, null, /* @__PURE__ */ React131.createElement(
+    Autocomplete5,
     {
       fullWidth: true,
       multiple: true,
@@ -10700,17 +10802,17 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       onBlur: handleBlur,
       getOptionLabel: (option) => option,
       isOptionEqualToValue: (option, val) => option === val,
-      renderInput: (params) => /* @__PURE__ */ React130.createElement(TextField12, { ...params, placeholder, onKeyDown: handleKeyDown }),
-      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React130.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
+      renderInput: (params) => /* @__PURE__ */ React131.createElement(TextField13, { ...params, placeholder, onKeyDown: handleKeyDown }),
+      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React131.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
     }
   ));
 });
-var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React130.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React130.createElement(Grid32, { item: true }, /* @__PURE__ */ React130.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React130.createElement(Grid32, { item: true }, /* @__PURE__ */ React130.createElement(EmailChipsControl, { placeholder, suggestions })));
+var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React131.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React131.createElement(Grid32, { item: true }, /* @__PURE__ */ React131.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React131.createElement(Grid32, { item: true }, /* @__PURE__ */ React131.createElement(EmailChipsControl, { placeholder, suggestions })));
 
 // src/controls/email-form-action-control/email-field.tsx
-import * as React131 from "react";
+import * as React132 from "react";
 import { Grid as Grid33 } from "@elementor/ui";
-var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React131.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React131.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React131.createElement(Grid33, { item: true }, /* @__PURE__ */ React131.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React131.createElement(Grid33, { item: true }, /* @__PURE__ */ React131.createElement(TextControl, { placeholder }))));
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React132.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(Grid33, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React132.createElement(Grid33, { item: true }, /* @__PURE__ */ React132.createElement(TextControl, { placeholder }))));
 
 // src/controls/email-form-action-control/fields.tsx
 var FieldValueMentionField = ({
@@ -10719,88 +10821,88 @@ var FieldValueMentionField = ({
   placeholder
 }) => {
   const suggestions = useFormFieldSuggestions();
-  return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React132.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(MentionTextAreaControl, { suggestions, rows: 1, placeholder }))));
+  return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React133.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(MentionTextAreaControl, { suggestions, rows: 1, placeholder }))));
 };
 var SendToField = ({ placeholder }) => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React132.createElement(Stack25, { gap: 0.5 }, /* @__PURE__ */ React132.createElement(
+  return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React133.createElement(Stack25, { gap: 0.5 }, /* @__PURE__ */ React133.createElement(
     EmailChipsField,
     {
-      fieldLabel: __68("Send to", "elementor"),
+      fieldLabel: __69("Send to", "elementor"),
       placeholder,
       suggestions
     }
-  ), shouldShowMentionsInfo() && /* @__PURE__ */ React132.createElement(InfoAlert2, null, __68("Type @ or an email field name to insert its submitted value.", "elementor"))));
+  ), shouldShowMentionsInfo() && /* @__PURE__ */ React133.createElement(InfoAlert2, null, __69("Type @ or an email field name to insert its submitted value.", "elementor"))));
 };
-var SubjectField = () => /* @__PURE__ */ React132.createElement(
+var SubjectField = () => /* @__PURE__ */ React133.createElement(
   FieldValueMentionField,
   {
     bind: "subject",
-    label: __68("Email subject", "elementor"),
-    placeholder: __68("New form submission", "elementor")
+    label: __69("Email subject", "elementor"),
+    placeholder: __69("New form submission", "elementor")
   }
 );
 var MessageField = () => {
   const suggestions = useFormFieldSuggestions();
-  return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React132.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, __68("Message", "elementor"))), /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __68(
+  return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React133.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(ControlFormLabel, null, __69("Message", "elementor"))), /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __69(
     "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
     "elementor"
-  ) : __68("[all-fields] shortcode sends all fields.", "elementor")))));
+  ) : __69("[all-fields] shortcode sends all fields.", "elementor")))));
 };
-var FromEmailField = () => /* @__PURE__ */ React132.createElement(
+var FromEmailField = () => /* @__PURE__ */ React133.createElement(
   EmailField,
   {
     bind: "from",
-    label: __68("From email", "elementor"),
-    placeholder: __68("What email should appear as the sender?", "elementor")
+    label: __69("From email", "elementor"),
+    placeholder: __69("What email should appear as the sender?", "elementor")
   }
 );
-var FromNameField = () => /* @__PURE__ */ React132.createElement(
+var FromNameField = () => /* @__PURE__ */ React133.createElement(
   FieldValueMentionField,
   {
     bind: "from-name",
-    label: __68("From name", "elementor"),
-    placeholder: __68("What name should appear as the sender?", "elementor")
+    label: __69("From name", "elementor"),
+    placeholder: __69("What name should appear as the sender?", "elementor")
   }
 );
 var ReplyToField = () => {
   const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React132.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, __68("Reply-to", "elementor"))), /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(
+  return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React133.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(ControlFormLabel, null, __69("Reply-to", "elementor"))), /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(
     MentionTextAreaControl,
     {
       suggestions: emailSuggestions,
       rows: 1,
       triggerPosition: "start",
-      placeholder: __68("You can type @ to insert an email field", "elementor")
+      placeholder: __69("You can type @ to insert an email field", "elementor")
     }
   ))));
 };
 var CcField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React132.createElement(EmailChipsField, { fieldLabel: __68("Cc", "elementor"), suggestions }));
+  return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React133.createElement(EmailChipsField, { fieldLabel: __69("Cc", "elementor"), suggestions }));
 };
 var BccField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React132.createElement(EmailChipsField, { fieldLabel: __68("Bcc", "elementor"), suggestions }));
+  return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React133.createElement(EmailChipsField, { fieldLabel: __69("Bcc", "elementor"), suggestions }));
 };
-var MetaDataField = () => /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React132.createElement(Stack25, { gap: 0.5 }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, __68("Metadata", "elementor")), /* @__PURE__ */ React132.createElement(
+var MetaDataField = () => /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React133.createElement(Stack25, { gap: 0.5 }, /* @__PURE__ */ React133.createElement(ControlFormLabel, null, __69("Metadata", "elementor")), /* @__PURE__ */ React133.createElement(
   ChipsControl,
   {
     options: [
-      { label: __68("Date", "elementor"), value: "date" },
-      { label: __68("Time", "elementor"), value: "time" },
-      { label: __68("Page URL", "elementor"), value: "page-url" },
-      { label: __68("User agent", "elementor"), value: "user-agent" },
-      { label: __68("Credit", "elementor"), value: "credit" }
+      { label: __69("Date", "elementor"), value: "date" },
+      { label: __69("Time", "elementor"), value: "time" },
+      { label: __69("Page URL", "elementor"), value: "page-url" },
+      { label: __69("User agent", "elementor"), value: "user-agent" },
+      { label: __69("Credit", "elementor"), value: "credit" }
     ]
   }
 )));
-var SendAsField = () => /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React132.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, __68("Send as", "elementor"))), /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(
+var SendAsField = () => /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React133.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(ControlFormLabel, null, __69("Send as", "elementor"))), /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(
   SelectControl,
   {
     options: [
-      { label: __68("HTML", "elementor"), value: "html" },
-      { label: __68("Plain Text", "elementor"), value: "plain" }
+      { label: __69("HTML", "elementor"), value: "html" },
+      { label: __69("Plain Text", "elementor"), value: "plain" }
     ]
   }
 ))));
@@ -10809,27 +10911,27 @@ var SendAsField = () => /* @__PURE__ */ React132.createElement(PropKeyProvider,
 var EmailFormActionControl = createControl(
   ({ toPlaceholder, label }) => {
     const { value, setValue, ...propContext } = useBoundProp(emailsPropTypeUtil);
-    return /* @__PURE__ */ React133.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React133.createElement(Stack26, { gap: 2 }, /* @__PURE__ */ React133.createElement(ControlLabel, null, label ? label + " " + __69("settings", "elementor") : __69("Email settings", "elementor")), /* @__PURE__ */ React133.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React133.createElement(SubjectField, null), /* @__PURE__ */ React133.createElement(MessageField, null), /* @__PURE__ */ React133.createElement(FromEmailField, null), /* @__PURE__ */ React133.createElement(AdvancedSettings, null)));
+    return /* @__PURE__ */ React134.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React134.createElement(Stack26, { gap: 2 }, /* @__PURE__ */ React134.createElement(ControlLabel, null, label ? label + " " + __70("settings", "elementor") : __70("Email settings", "elementor")), /* @__PURE__ */ React134.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React134.createElement(SubjectField, null), /* @__PURE__ */ React134.createElement(MessageField, null), /* @__PURE__ */ React134.createElement(FromEmailField, null), /* @__PURE__ */ React134.createElement(AdvancedSettings, null)));
   }
 );
-var AdvancedSettings = () => /* @__PURE__ */ React133.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React133.createElement(Box37, { sx: { pt: 2 } }, /* @__PURE__ */ React133.createElement(Stack26, { gap: 2 }, /* @__PURE__ */ React133.createElement(FromNameField, null), /* @__PURE__ */ React133.createElement(ReplyToField, null), /* @__PURE__ */ React133.createElement(CcField, null), /* @__PURE__ */ React133.createElement(BccField, null), /* @__PURE__ */ React133.createElement(Divider7, null), /* @__PURE__ */ React133.createElement(MetaDataField, null), /* @__PURE__ */ React133.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React134.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React134.createElement(Box37, { sx: { pt: 2 } }, /* @__PURE__ */ React134.createElement(Stack26, { gap: 2 }, /* @__PURE__ */ React134.createElement(FromNameField, null), /* @__PURE__ */ React134.createElement(ReplyToField, null), /* @__PURE__ */ React134.createElement(CcField, null), /* @__PURE__ */ React134.createElement(BccField, null), /* @__PURE__ */ React134.createElement(Divider7, null), /* @__PURE__ */ React134.createElement(MetaDataField, null), /* @__PURE__ */ React134.createElement(SendAsField, null))));
 
 // src/controls/attachment-type-control.tsx
-import * as React134 from "react";
+import * as React135 from "react";
 import { InfoAlert as InfoAlert3 } from "@elementor/editor-ui";
 import { Grid as Grid35 } from "@elementor/ui";
-import { __ as __70 } from "@wordpress/i18n";
+import { __ as __71 } from "@wordpress/i18n";
 var AttachmentTypeControl = createControl(({ label, options }) => {
-  return /* @__PURE__ */ React134.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React134.createElement(Grid35, { item: true }, /* @__PURE__ */ React134.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React134.createElement(Grid35, { item: true }, /* @__PURE__ */ React134.createElement(SelectControl, { options })), /* @__PURE__ */ React134.createElement(Grid35, { item: true }, /* @__PURE__ */ React134.createElement(InfoAlert3, null, __70(
+  return /* @__PURE__ */ React135.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React135.createElement(Grid35, { item: true }, /* @__PURE__ */ React135.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React135.createElement(Grid35, { item: true }, /* @__PURE__ */ React135.createElement(SelectControl, { options })), /* @__PURE__ */ React135.createElement(Grid35, { item: true }, /* @__PURE__ */ React135.createElement(InfoAlert3, null, __71(
     "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
     "elementor"
   ))));
 });
 
 // src/controls/grid-span-control.tsx
-import * as React135 from "react";
+import * as React136 from "react";
 import { spanPropTypeUtil } from "@elementor/editor-props";
-import { TextField as TextField13 } from "@elementor/ui";
+import { TextField as TextField14 } from "@elementor/ui";
 var GridSpanControl = createControl(
   ({
     placeholder: propPlaceholder,
@@ -10846,8 +10948,8 @@ var GridSpanControl = createControl(
       setValue(next === "" ? null : next);
     };
     const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
-    return /* @__PURE__ */ React135.createElement(ControlActions, null, /* @__PURE__ */ React135.createElement(
-      TextField13,
+    return /* @__PURE__ */ React136.createElement(ControlActions, null, /* @__PURE__ */ React136.createElement(
+      TextField14,
       {
         size: "tiny",
         fullWidth: true,
@@ -10867,14 +10969,14 @@ var GridSpanControl = createControl(
 );
 
 // src/components/promotions/display-conditions-control.tsx
-import * as React137 from "react";
-import { useRef as useRef38 } from "react";
+import * as React138 from "react";
+import { useRef as useRef40 } from "react";
 import { SitemapIcon } from "@elementor/icons";
 import { IconButton as IconButton12, Stack as Stack27, Tooltip as Tooltip15 } from "@elementor/ui";
-import { __ as __71 } from "@wordpress/i18n";
+import { __ as __72 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
-import * as React136 from "react";
+import * as React137 from "react";
 import { forwardRef as forwardRef14, useCallback as useCallback5, useImperativeHandle, useState as useState30 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box38 } from "@elementor/ui";
@@ -10894,7 +10996,7 @@ var PromotionTrigger = forwardRef14(
       });
     }, [trackingData]);
     useImperativeHandle(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React136.createElement(React136.Fragment, null, promotion && /* @__PURE__ */ React136.createElement(
+    return /* @__PURE__ */ React137.createElement(React137.Fragment, null, promotion && /* @__PURE__ */ React137.createElement(
       PromotionInfotip,
       {
         title: promotion.title,
@@ -10908,7 +11010,7 @@ var PromotionTrigger = forwardRef14(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React136.createElement(
+      /* @__PURE__ */ React137.createElement(
         Box38,
         {
           onClick: (e) => {
@@ -10917,18 +11019,18 @@ var PromotionTrigger = forwardRef14(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React136.createElement(PromotionChip2, null)
+        children ?? /* @__PURE__ */ React137.createElement(PromotionChip2, null)
       )
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var ARIA_LABEL = __71("Display Conditions", "elementor");
+var ARIA_LABEL = __72("Display Conditions", "elementor");
 var TRACKING_DATA2 = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = useRef38(null);
-  return /* @__PURE__ */ React137.createElement(
+  const triggerRef = useRef40(null);
+  return /* @__PURE__ */ React138.createElement(
     Stack27,
     {
       direction: "row",
@@ -10938,8 +11040,8 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React137.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React137.createElement(Tooltip15, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React137.createElement(
+    /* @__PURE__ */ React138.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React138.createElement(Tooltip15, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React138.createElement(
       IconButton12,
       {
         size: "tiny",
@@ -10952,22 +11054,22 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React137.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React138.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-import * as React138 from "react";
-import { useRef as useRef39 } from "react";
+import * as React139 from "react";
+import { useRef as useRef41 } from "react";
 import { PlusIcon as PlusIcon4 } from "@elementor/icons";
 import { Stack as Stack28, Tooltip as Tooltip16 } from "@elementor/ui";
-import { __ as __72 } from "@wordpress/i18n";
-var ARIA_LABEL2 = __72("Attributes", "elementor");
+import { __ as __73 } from "@wordpress/i18n";
+var ARIA_LABEL2 = __73("Attributes", "elementor");
 var TRACKING_DATA3 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = useRef39(null);
-  return /* @__PURE__ */ React138.createElement(
+  const triggerRef = useRef41(null);
+  return /* @__PURE__ */ React139.createElement(
     Stack28,
     {
       direction: "row",
@@ -10977,8 +11079,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React138.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA3 }),
-    /* @__PURE__ */ React138.createElement(Tooltip16, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React138.createElement(
+    /* @__PURE__ */ React139.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA3 }),
+    /* @__PURE__ */ React139.createElement(Tooltip16, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React139.createElement(
       PlusIcon4,
       {
         "aria-label": ARIA_LABEL2,
@@ -10992,17 +11094,17 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-import * as React139 from "react";
+import * as React140 from "react";
 import { BrushBigIcon } from "@elementor/icons";
 import { IconButton as IconButton13, styled as styled14, Tooltip as Tooltip17 } from "@elementor/ui";
 var CustomIconButton = styled14(IconButton13)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React139.createElement(Tooltip17, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React139.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React139.createElement(BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React140.createElement(Tooltip17, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React140.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React140.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-import * as React140 from "react";
+import * as React141 from "react";
 import { useEffect as useEffect23, useState as useState31 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
 import {
@@ -11014,8 +11116,8 @@ import {
   Tooltip as Tooltip18,
   usePopupState as usePopupState13
 } from "@elementor/ui";
-import { __ as __73 } from "@wordpress/i18n";
-var SIZE12 = "tiny";
+import { __ as __74 } from "@wordpress/i18n";
+var SIZE13 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
   label,
@@ -11096,20 +11198,20 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React140.createElement(
+  const addButton = /* @__PURE__ */ React141.createElement(
     IconButton14,
     {
-      size: SIZE12,
+      size: SIZE13,
       sx: {
         ml: "auto"
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": __73("Add item", "elementor")
+      "aria-label": __74("Add item", "elementor")
     },
-    /* @__PURE__ */ React140.createElement(PlusIcon5, { fontSize: SIZE12 })
+    /* @__PURE__ */ React141.createElement(PlusIcon5, { fontSize: SIZE13 })
   );
-  return /* @__PURE__ */ React140.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React140.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React140.createElement(
+  return /* @__PURE__ */ React141.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React141.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React141.createElement(
     Infotip5,
     {
       placement: "right",
@@ -11117,20 +11219,20 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React140.createElement(Box39, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React140.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React141.createElement(Box39, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React141.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React140.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React140.createElement(
+    return /* @__PURE__ */ React141.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React141.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React140.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React140.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React140.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React140.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React141.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React141.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React141.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React141.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -11144,7 +11246,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React140.createElement(
+      (props) => /* @__PURE__ */ React141.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -11186,16 +11288,16 @@ var RepeaterItem = ({
   );
   const triggerProps = bindTrigger7(popoverState);
   usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
-  const duplicateLabel = __73("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? __73("Show", "elementor") : __73("Hide", "elementor");
-  const removeLabel = __73("Remove", "elementor");
-  return /* @__PURE__ */ React140.createElement(Box39, { sx: { display: "contents" } }, /* @__PURE__ */ React140.createElement(
+  const duplicateLabel = __74("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? __74("Show", "elementor") : __74("Hide", "elementor");
+  const removeLabel = __74("Remove", "elementor");
+  return /* @__PURE__ */ React141.createElement(Box39, { sx: { display: "contents" } }, /* @__PURE__ */ React141.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": __73("Open item", "elementor"),
+      "aria-label": __74("Open item", "elementor"),
       ...triggerProps,
       onClick: (e) => {
         triggerProps.onClick(e);
@@ -11204,9 +11306,9 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React140.createElement(React140.Fragment, null, showDuplicate && /* @__PURE__ */ React140.createElement(Tooltip18, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React140.createElement(IconButton14, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React140.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React140.createElement(Tooltip18, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React140.createElement(IconButton14, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React140.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React140.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React140.createElement(Tooltip18, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React140.createElement(IconButton14, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React140.createElement(XIcon4, { fontSize: SIZE12 }))))
+      actions: /* @__PURE__ */ React141.createElement(React141.Fragment, null, showDuplicate && /* @__PURE__ */ React141.createElement(Tooltip18, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React141.createElement(IconButton14, { size: SIZE13, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React141.createElement(CopyIcon2, { fontSize: SIZE13 }))), showToggle && /* @__PURE__ */ React141.createElement(Tooltip18, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React141.createElement(IconButton14, { size: SIZE13, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React141.createElement(EyeOffIcon2, { fontSize: SIZE13 }) : /* @__PURE__ */ React141.createElement(EyeIcon2, { fontSize: SIZE13 }))), actions?.(value), showRemove && /* @__PURE__ */ React141.createElement(Tooltip18, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React141.createElement(IconButton14, { size: SIZE13, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React141.createElement(XIcon4, { fontSize: SIZE13 }))))
     }
-  ), /* @__PURE__ */ React140.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React140.createElement(Box39, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React141.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React141.createElement(Box39, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   const [ref, setRef] = useState31(null);
@@ -11231,7 +11333,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 };
 
 // src/components/size/unstable-size-field.tsx
-import * as React143 from "react";
+import * as React144 from "react";
 import { InputAdornment as InputAdornment6 } from "@elementor/ui";
 
 // src/hooks/use-size-value.ts
@@ -11274,7 +11376,7 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-import * as React141 from "react";
+import * as React142 from "react";
 import { useId as useId5 } from "react";
 import { MenuListItem as MenuListItem8 } from "@elementor/editor-ui";
 import { bindMenu as bindMenu4, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu5, styled as styled15, usePopupState as usePopupState14 } from "@elementor/ui";
@@ -11292,7 +11394,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React141.createElement(React141.Fragment, null, /* @__PURE__ */ React141.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React141.createElement(Menu5, { MenuListProps: { dense: true }, ...bindMenu4(popupState) }, options.map((option, index) => /* @__PURE__ */ React141.createElement(
+  return /* @__PURE__ */ React142.createElement(React142.Fragment, null, /* @__PURE__ */ React142.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React142.createElement(Menu5, { MenuListProps: { dense: true }, ...bindMenu4(popupState) }, options.map((option, index) => /* @__PURE__ */ React142.createElement(
     MenuListItem8,
     {
       key: option,
@@ -11321,11 +11423,11 @@ var StyledButton3 = styled15(Button7, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-import * as React142 from "react";
+import * as React143 from "react";
 import { forwardRef as forwardRef15 } from "react";
 var UnstableSizeInput = forwardRef15(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React142.createElement(
+    return /* @__PURE__ */ React143.createElement(
       NumberInput,
       {
         ref,
@@ -11363,7 +11465,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit2 = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React143.createElement(
+  return /* @__PURE__ */ React144.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -11372,8 +11474,8 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React143.createElement(InputAdornment6, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React143.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React143.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React144.createElement(InputAdornment6, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React144.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React144.createElement(
           UnitSelect,
           {
             options: units2,
@@ -11391,7 +11493,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo21 } from "react";
+import { useMemo as useMemo22 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 var getFontControlConfig = () => {
   const { controls } = getElementorConfig();
@@ -11399,7 +11501,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return useMemo21(() => {
+  return useMemo22(() => {
     if (!groups || !options) {
       return [];
     }
@@ -11470,6 +11572,7 @@ export {
   QueryChipsControl,
   QueryControl,
   QueryFilterRepeaterControl,
+  QuerySelectControl,
   RepeatableControl,
   Repeater3 as Repeater,
   SelectControl,