@elementor/editor-controls 4.0.0-607 → 4.0.0-619

package/dist/index.mjs

@@ -531,17 +531,55 @@ var TextAreaControl = createControl(({ placeholder, ariaLabel }) => {
 
 // src/controls/size-control.tsx
 import * as React20 from "react";
-import { useEffect as useEffect3, useMemo as useMemo2 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { usePopupState as usePopupState2 } from "@elementor/ui";
 
 // src/components/size-control/size-input.tsx
 import * as React18 from "react";
-import { useRef } from "react";
 import { MathFunctionIcon } from "@elementor/icons";
 import { Box, InputAdornment as InputAdornment2 } from "@elementor/ui";
 
+// src/hooks/use-typing-buffer.ts
+import { useEffect, useRef } from "react";
+function useTypingBuffer(options = {}) {
+  const { limit = 3, timeout = 600 } = options;
+  const inputBufferRef = useRef("");
+  const timeoutRef = useRef(null);
+  const appendKey = (key) => {
+    inputBufferRef.current = (inputBufferRef.current + key).slice(-limit);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      inputBufferRef.current = "";
+      timeoutRef.current = null;
+    }, timeout);
+    return inputBufferRef.current;
+  };
+  const startsWith = (haystack, needle) => {
+    if (3 < haystack.length && 2 > needle.length) {
+      return false;
+    }
+    return haystack.startsWith(needle);
+  };
+  useEffect(() => {
+    return () => {
+      inputBufferRef.current = "";
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, []);
+  return {
+    buffer: inputBufferRef.current,
+    appendKey,
+    startsWith
+  };
+}
+
 // src/utils/size-control.ts
 var lengthUnits = ["px", "%", "em", "rem", "vw", "vh", "ch"];
 var angleUnits = ["deg", "rad", "grad", "turn"];
@@ -722,7 +760,6 @@ var StyledButton = styled(Button2, {
 }));
 
 // src/components/size-control/size-input.tsx
-var RESTRICTED_KEYBOARD_SHORTCUT_UNITS = ["auto"];
 var SizeInput = ({
   units: units2,
   handleUnitChange,
@@ -740,19 +777,28 @@ var SizeInput = ({
   id,
   ariaLabel
 }) => {
-  const unitInputBufferRef = useRef("");
+  const { appendKey, startsWith } = useTypingBuffer();
   const inputType = isUnitExtendedOption(unit) ? "text" : "number";
   const inputValue = !isUnitExtendedOption(unit) && Number.isNaN(size) ? "" : size ?? "";
-  const handleKeyUp = (event) => {
-    const { key } = event;
+  const handleKeyDown = (event) => {
+    const { key, altKey, ctrlKey, metaKey } = event;
+    if (altKey || ctrlKey || metaKey) {
+      return;
+    }
+    if (isUnitExtendedOption(unit) && !isNaN(Number(key))) {
+      const defaultUnit = units2?.[0];
+      if (defaultUnit) {
+        handleUnitChange(defaultUnit);
+      }
+      return;
+    }
     if (!/^[a-zA-Z%]$/.test(key)) {
       return;
     }
     event.preventDefault();
     const newChar = key.toLowerCase();
-    const updatedBuffer = (unitInputBufferRef.current + newChar).slice(-3);
-    unitInputBufferRef.current = updatedBuffer;
-    const matchedUnit = units2.find((u) => !RESTRICTED_KEYBOARD_SHORTCUT_UNITS.includes(u) && u.includes(updatedBuffer)) || units2.find((u) => !RESTRICTED_KEYBOARD_SHORTCUT_UNITS.includes(u) && u.startsWith(newChar)) || units2.find((u) => !RESTRICTED_KEYBOARD_SHORTCUT_UNITS.includes(u) && u.includes(newChar));
+    const updatedBuffer = appendKey(newChar);
+    const matchedUnit = units2.find((u) => startsWith(u, updatedBuffer));
     if (matchedUnit) {
       handleUnitChange(matchedUnit);
     }
@@ -794,7 +840,7 @@ var SizeInput = ({
       type: inputType,
       value: inputValue,
       onChange: handleSizeChange,
-      onKeyUp: handleKeyUp,
+      onKeyDown: handleKeyDown,
       onBlur,
       InputProps,
       inputProps: { min, step: "any", "aria-label": ariaLabel },
@@ -806,7 +852,7 @@ var SizeInput = ({
 
 // src/components/text-field-popover.tsx
 import * as React19 from "react";
-import { useEffect, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { MathFunctionIcon as MathFunctionIcon2 } from "@elementor/icons";
 import { bindPopover, Popover, TextField as TextField4 } from "@elementor/ui";
@@ -815,7 +861,7 @@ var SIZE = "tiny";
 var TextFieldPopover = (props) => {
   const { popupState, restoreValue, anchorRef, value, onChange } = props;
   const inputRef = useRef2(null);
-  useEffect(() => {
+  useEffect2(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => {
         if (inputRef.current) {
@@ -824,6 +870,11 @@ var TextFieldPopover = (props) => {
       });
     }
   }, [popupState.isOpen]);
+  const handleKeyPress = (event) => {
+    if (event.key.toLowerCase() === "enter") {
+      handleClose();
+    }
+  };
   const handleClose = () => {
     restoreValue();
     popupState.close();
@@ -858,6 +909,7 @@ var TextFieldPopover = (props) => {
       {
         value,
         onChange,
+        onKeyPress: handleKeyPress,
         size: "tiny",
         type: "text",
         fullWidth: true,
@@ -885,7 +937,7 @@ function useSizeExtendedOptions(options, disableCustom) {
 }
 
 // src/hooks/use-sync-external-state.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 var useSyncExternalState = ({
   external,
   setExternal,
@@ -905,7 +957,7 @@ var useSyncExternalState = ({
     return externalValue;
   }
   const [internal, setInternal] = useState3(toInternal(external, null));
-  useEffect2(() => {
+  useEffect3(() => {
     setInternal((prevInternal) => toInternal(external, prevInternal));
   }, [external]);
   const setInternalValue = (setter, options, meta) => {
@@ -1005,7 +1057,7 @@ var SizeControl = createControl(
         popupState.close();
       }
     }, [popupState]);
-    useEffect3(() => {
+    useEffect4(() => {
       maybeClosePopup();
     }, [activeBreakpoint]);
     return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
@@ -2148,7 +2200,7 @@ function ensureFilterConfig(name) {
 
 // src/controls/select-control-wrapper.tsx
 import * as React49 from "react";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect6, useState as useState5 } from "react";
 var getOffCanvasElements = () => {
   const extendedWindow = window;
   const documentId = extendedWindow.elementor.config.document.id;
@@ -2167,7 +2219,7 @@ var collectionMethods = {
 };
 var useDynamicOptions = (collectionId, initialOptions) => {
   const [options, setOptions] = useState5(initialOptions ?? []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!collectionId || !collectionMethods[collectionId]) {
       setOptions(initialOptions ?? []);
       return;
@@ -2223,7 +2275,7 @@ import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-pro
 
 // src/components/control-toggle-button-group.tsx
 import * as React52 from "react";
-import { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
@@ -2466,7 +2518,7 @@ var usePreviewButton = (items2, value) => {
   const [previewButton, setPreviewButton] = useState6(
     items2.find((item) => item.value === value) ?? items2[0]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     const selectedButton = items2.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -2550,6 +2602,12 @@ import * as React55 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
 import { InputAdornment as InputAdornment3 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
+var renderSuffix = (propType) => {
+  if (propType.meta?.suffix) {
+    return /* @__PURE__ */ React55.createElement(InputAdornment3, { position: "end" }, propType.meta.suffix);
+  }
+  return /* @__PURE__ */ React55.createElement(React55.Fragment, null);
+};
 var NumberControl = createControl(
   ({
     placeholder: labelPlaceholder,
@@ -2559,7 +2617,7 @@ var NumberControl = createControl(
     shouldForceInt = false,
     startIcon
   }) => {
-    const { value, setValue, placeholder, disabled, restoreValue } = useBoundProp(numberPropTypeUtil);
+    const { value, setValue, placeholder, disabled, restoreValue, propType } = useBoundProp(numberPropTypeUtil);
     const handleChange = (event) => {
       const {
         value: eventValue,
@@ -2590,7 +2648,8 @@ var NumberControl = createControl(
         placeholder: labelPlaceholder ?? (isEmptyOrNaN(placeholder) ? "" : String(placeholder)),
         inputProps: { step, min },
         InputProps: {
-          startAdornment: startIcon ? /* @__PURE__ */ React55.createElement(InputAdornment3, { position: "start", disabled }, startIcon) : void 0
+          startAdornment: startIcon ? /* @__PURE__ */ React55.createElement(InputAdornment3, { position: "start", disabled }, startIcon) : void 0,
+          endAdornment: renderSuffix(propType)
         }
       }
     ));
@@ -2892,7 +2951,7 @@ import { __ as __20 } from "@wordpress/i18n";
 
 // src/components/item-selector.tsx
 import * as React58 from "react";
-import { useCallback as useCallback2, useEffect as useEffect7, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect8, useState as useState8 } from "react";
 import { PopoverBody, PopoverHeader as PopoverHeader2, PopoverMenuList, SearchField } from "@elementor/editor-ui";
 import { Box as Box8, Divider as Divider2, Link, Stack as Stack9, Typography as Typography4 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
@@ -3046,7 +3105,7 @@ var ItemList = ({
 };
 var useDebounce = (fn, delay) => {
   const [debouncedFn] = useState8(() => debounce(fn, delay));
-  useEffect7(() => () => debouncedFn.cancel(), [debouncedFn]);
+  useEffect8(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -3147,7 +3206,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 import * as React65 from "react";
-import { useEffect as useEffect8, useMemo as useMemo8, useState as useState10 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo8, useState as useState10 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
@@ -3516,7 +3575,7 @@ var LinkControl = createControl((props) => {
     }, 300),
     [elementId, isActive, value]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     debouncedCheckRestriction();
     const handleInlineLinkChanged = (event) => {
       const customEvent = event;
@@ -3799,7 +3858,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 import * as React69 from "react";
-import { useEffect as useEffect9, useState as useState12 } from "react";
+import { useEffect as useEffect10, useState as useState12 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
@@ -3817,7 +3876,13 @@ var RATIO_OPTIONS = [
 ];
 var CUSTOM_RATIO = "custom";
 var AspectRatioControl = createControl(({ label }) => {
-  const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(stringPropTypeUtil9);
+  const {
+    value: currentPropValue,
+    setValue: setAspectRatioValue,
+    disabled,
+    placeholder: externalPlaceholder
+  } = useBoundProp(stringPropTypeUtil9);
+  const aspectRatioValue = currentPropValue ?? externalPlaceholder;
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
   const [isCustom, setIsCustom] = useState12(isCustomSelected);
@@ -3826,7 +3891,7 @@ var AspectRatioControl = createControl(({ label }) => {
   const [selectedValue, setSelectedValue] = useState12(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  useEffect9(() => {
+  useEffect10(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -3865,6 +3930,8 @@ var AspectRatioControl = createControl(({ label }) => {
       setAspectRatioValue(`${customWidth}/${newHeight}`);
     }
   };
+  const lookup = currentPropValue ?? externalPlaceholder;
+  const selectedOption = RATIO_OPTIONS.find((option) => option.value === lookup);
   return /* @__PURE__ */ React69.createElement(ControlActions, null, /* @__PURE__ */ React69.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React69.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React69.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ControlLabel, null, label)), /* @__PURE__ */ React69.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(
     Select3,
     {
@@ -3874,6 +3941,7 @@ var AspectRatioControl = createControl(({ label }) => {
       disabled,
       value: selectedValue,
       onChange: handleSelectChange,
+      renderValue: isCustomSelected ? void 0 : () => selectedOption?.label,
       fullWidth: true
     },
     [...RATIO_OPTIONS, { label: __26("Custom", "elementor"), value: CUSTOM_RATIO }].map(
@@ -4086,30 +4154,117 @@ var SvgMediaControl = createControl(() => {
   ))));
 });
 
+// src/controls/video-media-control.tsx
+import * as React72 from "react";
+import { videoSrcPropTypeUtil } from "@elementor/editor-props";
+import { UploadIcon as UploadIcon3 } from "@elementor/icons";
+import { Button as Button5, Card as Card3, CardMedia as CardMedia3, CardOverlay as CardOverlay3, CircularProgress as CircularProgress4, Stack as Stack14 } from "@elementor/ui";
+import { useWpMediaAttachment as useWpMediaAttachment3, useWpMediaFrame as useWpMediaFrame3 } from "@elementor/wp-media";
+import { __ as __29 } from "@wordpress/i18n";
+var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
+var VideoMediaControl = createControl(() => {
+  const { value, setValue } = useBoundProp(videoSrcPropTypeUtil);
+  const { id, url } = value ?? {};
+  const { data: attachment, isFetching } = useWpMediaAttachment3(id?.value || null);
+  const videoUrl = attachment?.url ?? url?.value ?? null;
+  const { open } = useWpMediaFrame3({
+    mediaTypes: ["video"],
+    multiple: false,
+    selected: id?.value || null,
+    onSelect: (selectedAttachment) => {
+      setValue({
+        id: {
+          $$type: "video-attachment-id",
+          value: selectedAttachment.id
+        },
+        url: null
+      });
+    }
+  });
+  return /* @__PURE__ */ React72.createElement(ControlActions, null, /* @__PURE__ */ React72.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React72.createElement(
+    CardMedia3,
+    {
+      sx: {
+        height: 140,
+        backgroundColor: "white",
+        backgroundSize: "8px 8px",
+        backgroundPosition: "0 0, 4px 4px",
+        backgroundRepeat: "repeat",
+        backgroundImage: `${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA}`,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      }
+    },
+    /* @__PURE__ */ React72.createElement(VideoPreview, { isFetching, videoUrl })
+  ), /* @__PURE__ */ React72.createElement(CardOverlay3, null, /* @__PURE__ */ React72.createElement(Stack14, { gap: 1 }, /* @__PURE__ */ React72.createElement(
+    Button5,
+    {
+      size: "tiny",
+      color: "inherit",
+      variant: "outlined",
+      onClick: () => open({ mode: "browse" })
+    },
+    __29("Select video", "elementor")
+  ), /* @__PURE__ */ React72.createElement(
+    Button5,
+    {
+      size: "tiny",
+      variant: "text",
+      color: "inherit",
+      startIcon: /* @__PURE__ */ React72.createElement(UploadIcon3, null),
+      onClick: () => open({ mode: "upload" })
+    },
+    __29("Upload", "elementor")
+  )))));
+});
+var VideoPreview = ({ isFetching = false, videoUrl }) => {
+  if (isFetching) {
+    return /* @__PURE__ */ React72.createElement(CircularProgress4, null);
+  }
+  if (videoUrl) {
+    return /* @__PURE__ */ React72.createElement(
+      "video",
+      {
+        src: videoUrl,
+        muted: true,
+        preload: "metadata",
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          pointerEvents: "none"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ React72.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
+};
+
 // src/controls/background-control/background-control.tsx
-import * as React78 from "react";
+import * as React79 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid17 } from "@elementor/ui";
-import { __ as __34 } from "@wordpress/i18n";
+import { __ as __35 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React77 from "react";
+import * as React78 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box13, CardMedia as CardMedia3, styled as styled8, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
-import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
-import { __ as __33 } from "@wordpress/i18n";
+import { Box as Box13, CardMedia as CardMedia4, styled as styled8, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
+import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
+import { __ as __34 } 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 React72 from "react";
+import * as React73 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
@@ -4156,7 +4311,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -4181,47 +4336,47 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React73 from "react";
+import * as React74 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
 import { Grid as Grid13 } from "@elementor/ui";
-import { __ as __29 } from "@wordpress/i18n";
+import { __ as __30 } from "@wordpress/i18n";
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: __29("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(PinIcon, { fontSize: size }),
+    label: __30("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: __29("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(PinnedOffIcon, { fontSize: size }),
+    label: __30("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React73.createElement(PopoverGridContainer, null, /* @__PURE__ */ React73.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(ControlFormLabel, null, __29("Attachment", "elementor"))), /* @__PURE__ */ React73.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React73.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React74.createElement(PopoverGridContainer, null, /* @__PURE__ */ React74.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React74.createElement(ControlFormLabel, null, __30("Attachment", "elementor"))), /* @__PURE__ */ React74.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React74.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React74 from "react";
+import * as React75 from "react";
 import { useRef as useRef11 } from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
 import { Grid as Grid14, Select as Select4 } from "@elementor/ui";
-import { __ as __30 } from "@wordpress/i18n";
+import { __ as __31 } from "@wordpress/i18n";
 var backgroundPositionOptions = [
-  { label: __30("Center center", "elementor"), value: "center center" },
-  { label: __30("Center left", "elementor"), value: "center left" },
-  { label: __30("Center right", "elementor"), value: "center right" },
-  { label: __30("Top center", "elementor"), value: "top center" },
-  { label: __30("Top left", "elementor"), value: "top left" },
-  { label: __30("Top right", "elementor"), value: "top right" },
-  { label: __30("Bottom center", "elementor"), value: "bottom center" },
-  { label: __30("Bottom left", "elementor"), value: "bottom left" },
-  { label: __30("Bottom right", "elementor"), value: "bottom right" },
-  { label: __30("Custom", "elementor"), value: "custom" }
+  { label: __31("Center center", "elementor"), value: "center center" },
+  { label: __31("Center left", "elementor"), value: "center left" },
+  { label: __31("Center right", "elementor"), value: "center right" },
+  { label: __31("Top center", "elementor"), value: "top center" },
+  { label: __31("Top left", "elementor"), value: "top left" },
+  { label: __31("Top right", "elementor"), value: "top right" },
+  { label: __31("Bottom center", "elementor"), value: "bottom center" },
+  { label: __31("Bottom left", "elementor"), value: "bottom left" },
+  { label: __31("Bottom right", "elementor"), value: "bottom right" },
+  { label: __31("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
@@ -4236,7 +4391,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React74.createElement(Grid14, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React74.createElement(PopoverGridContainer, null, /* @__PURE__ */ React74.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React74.createElement(ControlFormLabel, null, __30("Position", "elementor"))), /* @__PURE__ */ React74.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React74.createElement(ControlActions, null, /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React75.createElement(Grid14, { container: true, spacing: 1.5 }, /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(PopoverGridContainer, null, /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlFormLabel, null, __31("Position", "elementor"))), /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React75.createElement(ControlActions, null, /* @__PURE__ */ React75.createElement(
     Select4,
     {
       fullWidth: true,
@@ -4245,18 +4400,18 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React74.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
-  ))))), isCustom ? /* @__PURE__ */ React74.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React74.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React74.createElement(Grid14, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React74.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React74.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React75.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
+  ))))), isCustom ? /* @__PURE__ */ React75.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(Grid14, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React75.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React74.createElement(LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React75.createElement(LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React74.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React74.createElement(
+  ))), /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React75.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React74.createElement(LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React75.createElement(LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
@@ -4264,42 +4419,42 @@ var BackgroundImageOverlayPosition = () => {
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React75 from "react";
+import * as React76 from "react";
 import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
 import { Grid as Grid15 } from "@elementor/ui";
-import { __ as __31 } from "@wordpress/i18n";
+import { __ as __32 } from "@wordpress/i18n";
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: __31("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(GridDotsIcon, { fontSize: size }),
+    label: __32("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: __31("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(DotsHorizontalIcon, { fontSize: size }),
+    label: __32("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: __31("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(DotsVerticalIcon, { fontSize: size }),
+    label: __32("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: __31("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(XIcon3, { fontSize: size }),
+    label: __32("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(XIcon3, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React75.createElement(PopoverGridContainer, null, /* @__PURE__ */ React75.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlFormLabel, null, __31("Repeat", "elementor"))), /* @__PURE__ */ React75.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React75.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React76.createElement(PopoverGridContainer, null, /* @__PURE__ */ React76.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(ControlFormLabel, null, __32("Repeat", "elementor"))), /* @__PURE__ */ React76.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React76.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React76 from "react";
+import * as React77 from "react";
 import { useRef as useRef12 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
 import {
@@ -4311,30 +4466,30 @@ import {
   PencilIcon
 } from "@elementor/icons";
 import { Grid as Grid16 } from "@elementor/ui";
-import { __ as __32 } from "@wordpress/i18n";
+import { __ as __33 } from "@wordpress/i18n";
 var sizeControlOptions = [
   {
     value: "auto",
-    label: __32("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(LetterAIcon, { fontSize: size }),
+    label: __33("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: __32("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    label: __33("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: __32("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(ArrowBarBothIcon, { fontSize: size }),
+    label: __33("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: __32("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(PencilIcon, { fontSize: size }),
+    label: __33("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4350,7 +4505,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React76.createElement(Grid16, { container: true, spacing: 1.5 }, /* @__PURE__ */ React76.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React76.createElement(PopoverGridContainer, null, /* @__PURE__ */ React76.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(ControlFormLabel, null, __32("Size", "elementor"))), /* @__PURE__ */ React76.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(Grid16, { container: true, spacing: 1.5 }, /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, null, /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, __33("Size", "elementor"))), /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React77.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -4359,17 +4514,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React76.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React76.createElement(Grid16, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React76.createElement(PopoverGridContainer, null, /* @__PURE__ */ React76.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React76.createElement(
+  )))), isCustom ? /* @__PURE__ */ React77.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, null, /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React77.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React76.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React77.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React76.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React76.createElement(
+  ))), /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React77.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React76.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React77.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -4470,29 +4625,29 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { label: __33("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
-  { label: __33("Medium - 300 x 300", "elementor"), value: "medium" },
-  { label: __33("Large 1024 x 1024", "elementor"), value: "large" },
-  { label: __33("Full", "elementor"), value: "full" }
+  { label: __34("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: __34("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: __34("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: __34("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React77.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React78.createElement(
     ControlRepeater,
     {
       initial: getInitialBackgroundOverlay(),
       propTypeUtil: backgroundOverlayPropTypeUtil
     },
-    /* @__PURE__ */ React77.createElement(RepeaterHeader, { label: __33("Overlay", "elementor") }, /* @__PURE__ */ React77.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
-    /* @__PURE__ */ React77.createElement(ItemsContainer, null, /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React78.createElement(RepeaterHeader, { label: __34("Overlay", "elementor") }, /* @__PURE__ */ React78.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+    /* @__PURE__ */ React78.createElement(ItemsContainer, null, /* @__PURE__ */ React78.createElement(
       Item,
       {
         Icon: ItemIcon2,
         Label: ItemLabel2,
-        actions: /* @__PURE__ */ React77.createElement(React77.Fragment, null, /* @__PURE__ */ React77.createElement(DuplicateItemAction, null), /* @__PURE__ */ React77.createElement(DisableItemAction, null), /* @__PURE__ */ React77.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement(DuplicateItemAction, null), /* @__PURE__ */ React78.createElement(DisableItemAction, null), /* @__PURE__ */ React78.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React77.createElement(EditItemPopover, null, /* @__PURE__ */ React77.createElement(ItemContent, null))
+    /* @__PURE__ */ React78.createElement(EditItemPopover, null, /* @__PURE__ */ React78.createElement(ItemContent, null))
   ));
 });
 var ItemContent = () => {
@@ -4502,27 +4657,27 @@ var ItemContent = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React77.createElement(Box13, { sx: { width: "100%" } }, /* @__PURE__ */ React77.createElement(Box13, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(Box13, { sx: { width: "100%" } }, /* @__PURE__ */ React78.createElement(Box13, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React78.createElement(
     Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": __33("Background Overlay", "elementor")
+      "aria-label": __34("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React77.createElement(Tab, { label: __33("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React77.createElement(Tab, { label: __33("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React77.createElement(Tab, { label: __33("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React77.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React77.createElement(PopoverContent, null, /* @__PURE__ */ React77.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React77.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React77.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React77.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React77.createElement(PopoverContent, null, /* @__PURE__ */ React77.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
+    /* @__PURE__ */ React78.createElement(Tab, { label: __34("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React78.createElement(Tab, { label: __34("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React78.createElement(Tab, { label: __34("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React78.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React78.createElement(PopoverContent, null, /* @__PURE__ */ React78.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React78.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React78.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React78.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React78.createElement(PopoverContent, null, /* @__PURE__ */ React78.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React77.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React78.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React77.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React78.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React77.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React78.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -4535,12 +4690,12 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React77.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React78.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React77.createElement(
-    CardMedia3,
+  return /* @__PURE__ */ React78.createElement(
+    CardMedia4,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -4554,41 +4709,41 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React77.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React78.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React77.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React78.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React77.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React78.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React77.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React78.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React77.createElement("span", null, color);
+  return /* @__PURE__ */ React78.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React77.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React78.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React77.createElement("span", null, __33("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React78.createElement("span", null, __34("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React77.createElement("span", null, __33("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React78.createElement("span", null, __34("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React77.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React77.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React78.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React78.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React77.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React77.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React77.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React77.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React77.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React77.createElement(BackgroundImageOverlayAttachment, null)));
+  return /* @__PURE__ */ React78.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React78.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlayAttachment, null)));
 };
 var StyledUnstableColorIndicator3 = styled8(UnstableColorIndicator3)(({ theme }) => ({
   height: "1rem",
@@ -4598,7 +4753,7 @@ var StyledUnstableColorIndicator3 = styled8(UnstableColorIndicator3)(({ theme })
 var useImage = (image) => {
   let imageTitle, imageUrl = null;
   const imageSrc = image?.value.image.value?.src.value;
-  const { data: attachment } = useWpMediaAttachment3(imageSrc.id?.value || null);
+  const { data: attachment } = useWpMediaAttachment4(imageSrc.id?.value || null);
   if (imageSrc.id) {
     const imageFileTypeExtension = getFileExtensionFromFilename(attachment?.filename);
     imageTitle = `${attachment?.title}${imageFileTypeExtension}` || null;
@@ -4627,26 +4782,26 @@ var getGradientValue = (value) => {
 
 // src/controls/background-control/background-control.tsx
 var clipOptions = [
-  { label: __34("Full element", "elementor"), value: "border-box" },
-  { label: __34("Padding edges", "elementor"), value: "padding-box" },
-  { label: __34("Content edges", "elementor"), value: "content-box" },
-  { label: __34("Text", "elementor"), value: "text" }
+  { label: __35("Full element", "elementor"), value: "border-box" },
+  { label: __35("Padding edges", "elementor"), value: "padding-box" },
+  { label: __35("Content edges", "elementor"), value: "content-box" },
+  { label: __35("Text", "elementor"), value: "text" }
 ];
-var colorLabel = __34("Color", "elementor");
-var clipLabel = __34("Clipping", "elementor");
+var colorLabel = __35("Color", "elementor");
+var clipLabel = __35("Clipping", "elementor");
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  return /* @__PURE__ */ React78.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React78.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React78.createElement(BackgroundColorField, null), /* @__PURE__ */ React78.createElement(BackgroundClipField, null));
+  return /* @__PURE__ */ React79.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React79.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React79.createElement(BackgroundColorField, null), /* @__PURE__ */ React79.createElement(BackgroundClipField, null));
 });
 var BackgroundColorField = () => {
-  return /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React78.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React78.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React78.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(ColorControl, null))));
+  return /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React79.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React79.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React79.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ColorControl, null))));
 };
 var BackgroundClipField = () => {
-  return /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React78.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React78.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React78.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(SelectControl, { options: clipOptions }))));
+  return /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React79.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React79.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React79.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(SelectControl, { options: clipOptions }))));
 };
 
 // src/controls/repeatable-control.tsx
-import * as React79 from "react";
+import * as React80 from "react";
 import { useMemo as useMemo9 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
 import { Box as Box14 } from "@elementor/ui";
@@ -4680,14 +4835,14 @@ var RepeatableControl = createControl(
       [childControlConfig, placeholder, patternLabel]
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
-    return /* @__PURE__ */ React79.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React79.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React79.createElement(
+    return /* @__PURE__ */ React80.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React80.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React80.createElement(
       ControlRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil2,
         isItemDisabled: isItemDisabled2
       },
-      /* @__PURE__ */ React79.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React79.createElement(
+      /* @__PURE__ */ React80.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React80.createElement(
         TooltipAddItemAction,
         {
           ...addItemTooltipProps,
@@ -4695,22 +4850,22 @@ var RepeatableControl = createControl(
           ariaLabel: repeaterLabel
         }
       )),
-      /* @__PURE__ */ React79.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React79.createElement(
+      /* @__PURE__ */ React80.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React80.createElement(
         Item,
         {
           Icon: ItemIcon3,
           Label: ItemLabel3,
-          actions: /* @__PURE__ */ React79.createElement(React79.Fragment, null, showDuplicate && /* @__PURE__ */ React79.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React79.createElement(DisableItemAction, null), /* @__PURE__ */ React79.createElement(RemoveItemAction, null))
+          actions: /* @__PURE__ */ React80.createElement(React80.Fragment, null, showDuplicate && /* @__PURE__ */ React80.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React80.createElement(DisableItemAction, null), /* @__PURE__ */ React80.createElement(RemoveItemAction, null))
         }
       )),
-      /* @__PURE__ */ React79.createElement(EditItemPopover, null, /* @__PURE__ */ React79.createElement(Content2, null))
+      /* @__PURE__ */ React80.createElement(EditItemPopover, null, /* @__PURE__ */ React80.createElement(Content2, null))
     )));
   }
 );
-var ItemIcon3 = () => /* @__PURE__ */ React79.createElement(React79.Fragment, null);
+var ItemIcon3 = () => /* @__PURE__ */ React80.createElement(React80.Fragment, null);
 var Content2 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React79.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React79.createElement(PopoverGridContainer, null, /* @__PURE__ */ React79.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React80.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React80.createElement(PopoverGridContainer, null, /* @__PURE__ */ React80.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
@@ -4793,7 +4948,7 @@ var ItemLabel3 = ({ value }) => {
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const isReadOnly = !!childProps?.readOnly;
   const color = getTextColor(isReadOnly, showPlaceholder);
-  return /* @__PURE__ */ React79.createElement(Box14, { component: "span", color }, label);
+  return /* @__PURE__ */ React80.createElement(Box14, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -4801,7 +4956,7 @@ var getAllProperties = (pattern) => {
 };
 
 // src/controls/key-value-control.tsx
-import * as React80 from "react";
+import * as React81 from "react";
 import { useMemo as useMemo10, useState as useState15 } from "react";
 import {
   isTransformable,
@@ -4809,7 +4964,7 @@ import {
   stringPropTypeUtil as stringPropTypeUtil13
 } from "@elementor/editor-props";
 import { FormHelperText, FormLabel as FormLabel3, Grid as Grid18 } from "@elementor/ui";
-import { __ as __35 } from "@wordpress/i18n";
+import { __ as __36 } from "@wordpress/i18n";
 
 // src/utils/escape-html-attr.ts
 var escapeHtmlAttr = (value) => {
@@ -4839,8 +4994,8 @@ var KeyValueControl = createControl((props = {}) => {
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
-  const keyLabel = props.keyName || __35("Key", "elementor");
-  const valueLabel = props.valueName || __35("Value", "elementor");
+  const keyLabel = props.keyName || __36("Key", "elementor");
+  const valueLabel = props.valueName || __36("Value", "elementor");
   const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
     keyHelper: void 0,
     valueHelper: void 0
@@ -4849,7 +5004,7 @@ var KeyValueControl = createControl((props = {}) => {
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
-      props.validationErrorMessage || __35("Invalid Format", "elementor")
+      props.validationErrorMessage || __36("Invalid Format", "elementor")
     ],
     [props.regexKey, props.regexValue, props.validationErrorMessage]
   );
@@ -4898,14 +5053,14 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React80.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React80.createElement(Grid18, { container: true, gap: 1.5 }, /* @__PURE__ */ React80.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React80.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React80.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React81.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React81.createElement(Grid18, { container: true, gap: 1.5 }, /* @__PURE__ */ React81.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React81.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React81.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
       error: !!keyError,
       helperText: keyHelper
     }
-  )), !!keyError && /* @__PURE__ */ React80.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React80.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React80.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React80.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React80.createElement(
+  )), !!keyError && /* @__PURE__ */ React81.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React81.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React81.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React81.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
@@ -4913,27 +5068,27 @@ var KeyValueControl = createControl((props = {}) => {
       inputDisabled: !!keyError,
       helperText: valueHelper
     }
-  )), !!valueError && /* @__PURE__ */ React80.createElement(FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React81.createElement(FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-import * as React81 from "react";
+import * as React82 from "react";
 import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
 import { Grid as Grid19, Select as Select5 } from "@elementor/ui";
-import { __ as __36 } from "@wordpress/i18n";
+import { __ as __37 } from "@wordpress/i18n";
 var positionOptions = [
-  { label: __36("Center center", "elementor"), value: "center center" },
-  { label: __36("Center left", "elementor"), value: "center left" },
-  { label: __36("Center right", "elementor"), value: "center right" },
-  { label: __36("Top center", "elementor"), value: "top center" },
-  { label: __36("Top left", "elementor"), value: "top left" },
-  { label: __36("Top right", "elementor"), value: "top right" },
-  { label: __36("Bottom center", "elementor"), value: "bottom center" },
-  { label: __36("Bottom left", "elementor"), value: "bottom left" },
-  { label: __36("Bottom right", "elementor"), value: "bottom right" },
-  { label: __36("Custom", "elementor"), value: "custom" }
+  { label: __37("Center center", "elementor"), value: "center center" },
+  { label: __37("Center left", "elementor"), value: "center left" },
+  { label: __37("Center right", "elementor"), value: "center right" },
+  { label: __37("Top center", "elementor"), value: "top center" },
+  { label: __37("Top left", "elementor"), value: "top left" },
+  { label: __37("Top right", "elementor"), value: "top right" },
+  { label: __37("Bottom center", "elementor"), value: "bottom center" },
+  { label: __37("Bottom left", "elementor"), value: "bottom left" },
+  { label: __37("Bottom right", "elementor"), value: "bottom right" },
+  { label: __37("Custom", "elementor"), value: "custom" }
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
@@ -4947,7 +5102,7 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React81.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React81.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React81.createElement(Grid19, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React81.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React81.createElement(ControlFormLabel, null, __36("Object position", "elementor"))), /* @__PURE__ */ React81.createElement(Grid19, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(Grid19, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, __37("Object position", "elementor"))), /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React82.createElement(
     Select5,
     {
       size: "tiny",
@@ -4956,44 +5111,29 @@ var PositionControl = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    positionOptions.map(({ label, value }) => /* @__PURE__ */ React81.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React81.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React81.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React81.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React81.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React81.createElement(
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React82.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React82.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React82.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React81.createElement(LetterXIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React82.createElement(LetterXIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React81.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React81.createElement(
+  ))), /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React82.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React81.createElement(LetterYIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React82.createElement(LetterYIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
   )))))));
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-import * as React94 from "react";
+import * as React95 from "react";
 import { useRef as useRef21 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
 import { bindTrigger as bindTrigger4, Box as Box18, IconButton as IconButton7, Tooltip as Tooltip8, Typography as Typography6, usePopupState as usePopupState6 } from "@elementor/ui";
-import { __ as __46 } from "@wordpress/i18n";
-
-// src/hooks/use-element-can-have-children.ts
-import { useMemo as useMemo11 } from "react";
-import { getContainer, useSelectedElement } from "@elementor/editor-elements";
-var useElementCanHaveChildren = () => {
-  const { element } = useSelectedElement();
-  const elementId = element?.id || "";
-  return useMemo11(() => {
-    const container = getContainer(elementId);
-    if (!container) {
-      return false;
-    }
-    return container.model.get("elType") !== "widget";
-  }, [elementId]);
-};
+import { __ as __47 } from "@wordpress/i18n";
 
 // src/controls/transform-control/initial-values.ts
 import {
@@ -5047,24 +5187,24 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
 });
 
 // src/controls/transform-control/transform-content.tsx
-import * as React88 from "react";
+import * as React89 from "react";
 import { Box as Box15, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
-import { __ as __41 } from "@wordpress/i18n";
+import { __ as __42 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
-import * as React83 from "react";
+import * as React84 from "react";
 import { useRef as useRef14 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
 import { Grid as Grid21 } from "@elementor/ui";
-import { __ as __37 } from "@wordpress/i18n";
+import { __ as __38 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/axis-row.tsx
-import * as React82 from "react";
+import * as React83 from "react";
 import { Grid as Grid20 } from "@elementor/ui";
 var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
   const safeId = label.replace(/\s+/g, "-").toLowerCase();
-  return /* @__PURE__ */ React82.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React82.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React82.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React83.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React83.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React83.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React83.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React83.createElement(
     SizeControl,
     {
       anchorRef,
@@ -5080,28 +5220,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
 // src/controls/transform-control/functions/move.tsx
 var moveAxisControls = [
   {
-    label: __37("Move X", "elementor"),
+    label: __38("Move X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React83.createElement(ArrowRightIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React84.createElement(ArrowRightIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw"]
   },
   {
-    label: __37("Move Y", "elementor"),
+    label: __38("Move Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React83.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React84.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vh"]
   },
   {
-    label: __37("Move Z", "elementor"),
+    label: __38("Move Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React83.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React84.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw", "vh"]
   }
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
   const rowRefs = [useRef14(null), useRef14(null), useRef14(null)];
-  return /* @__PURE__ */ React83.createElement(Grid21, { container: true, spacing: 1.5 }, /* @__PURE__ */ React83.createElement(PropProvider, { ...context }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(Grid21, { container: true, spacing: 1.5 }, /* @__PURE__ */ React84.createElement(PropProvider, { ...context }, /* @__PURE__ */ React84.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React84.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -5114,34 +5254,34 @@ var Move = () => {
 };
 
 // src/controls/transform-control/functions/rotate.tsx
-import * as React84 from "react";
+import * as React85 from "react";
 import { useRef as useRef15 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
 import { Grid as Grid22 } from "@elementor/ui";
-import { __ as __38 } from "@wordpress/i18n";
+import { __ as __39 } from "@wordpress/i18n";
 var rotateAxisControls = [
   {
-    label: __38("Rotate X", "elementor"),
+    label: __39("Rotate X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React84.createElement(Arrow360Icon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React85.createElement(Arrow360Icon, { fontSize: "tiny" })
   },
   {
-    label: __38("Rotate Y", "elementor"),
+    label: __39("Rotate Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React84.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React85.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   },
   {
-    label: __38("Rotate Z", "elementor"),
+    label: __39("Rotate Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React84.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React85.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
   }
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
   const rowRefs = [useRef15(null), useRef15(null), useRef15(null)];
-  return /* @__PURE__ */ React84.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React84.createElement(PropProvider, { ...context }, /* @__PURE__ */ React84.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React85.createElement(PropProvider, { ...context }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React85.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -5153,68 +5293,68 @@ var Rotate = () => {
 };
 
 // src/controls/transform-control/functions/scale.tsx
-import * as React86 from "react";
+import * as React87 from "react";
 import { useRef as useRef16 } 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 Grid24 } from "@elementor/ui";
-import { __ as __39 } from "@wordpress/i18n";
+import { __ as __40 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/scale-axis-row.tsx
-import * as React85 from "react";
+import * as React86 from "react";
 import { Grid as Grid23 } from "@elementor/ui";
 var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React85.createElement(Grid23, { item: true, xs: 12 }, /* @__PURE__ */ React85.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React85.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(ControlLabel, null, label)), /* @__PURE__ */ React85.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React85.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+  return /* @__PURE__ */ React86.createElement(Grid23, { item: true, xs: 12 }, /* @__PURE__ */ React86.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React86.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React86.createElement(ControlLabel, null, label)), /* @__PURE__ */ React86.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React86.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React86.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
 var scaleAxisControls = [
   {
-    label: __39("Scale X", "elementor"),
+    label: __40("Scale X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React86.createElement(ArrowRightIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React87.createElement(ArrowRightIcon2, { fontSize: "tiny" })
   },
   {
-    label: __39("Scale Y", "elementor"),
+    label: __40("Scale Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React86.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React87.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
   },
   {
-    label: __39("Scale Z", "elementor"),
+    label: __40("Scale Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React86.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React87.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
   }
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
   const rowRefs = [useRef16(null), useRef16(null), useRef16(null)];
-  return /* @__PURE__ */ React86.createElement(Grid24, { container: true, spacing: 1.5 }, /* @__PURE__ */ React86.createElement(PropProvider, { ...context }, /* @__PURE__ */ React86.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React86.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
+  return /* @__PURE__ */ React87.createElement(Grid24, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(PropProvider, { ...context }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React87.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
-import * as React87 from "react";
+import * as React88 from "react";
 import { useRef as useRef17 } from "react";
 import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
 import { Grid as Grid25 } from "@elementor/ui";
-import { __ as __40 } from "@wordpress/i18n";
+import { __ as __41 } from "@wordpress/i18n";
 var skewAxisControls = [
   {
-    label: __40("Skew X", "elementor"),
+    label: __41("Skew X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React87.createElement(ArrowRightIcon3, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React88.createElement(ArrowRightIcon3, { fontSize: "tiny" })
   },
   {
-    label: __40("Skew Y", "elementor"),
+    label: __41("Skew Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React87.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React88.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   }
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
   const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
-  return /* @__PURE__ */ React87.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(PropProvider, { ...context }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React88.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React88.createElement(PropProvider, { ...context }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React88.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -5319,7 +5459,7 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(Box15, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box15, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React89.createElement(PopoverContent, null, /* @__PURE__ */ React89.createElement(Box15, { sx: { width: "100%" } }, /* @__PURE__ */ React89.createElement(Box15, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React89.createElement(
     Tabs2,
     {
       size: "small",
@@ -5330,37 +5470,37 @@ var TransformContent = () => {
         }
       },
       ...getTabsProps(),
-      "aria-label": __41("Transform", "elementor")
+      "aria-label": __42("Transform", "elementor")
     },
-    /* @__PURE__ */ React88.createElement(Tab2, { label: __41("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
-    /* @__PURE__ */ React88.createElement(Tab2, { label: __41("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
-    /* @__PURE__ */ React88.createElement(Tab2, { label: __41("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
-    /* @__PURE__ */ React88.createElement(Tab2, { label: __41("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
-  )), /* @__PURE__ */ React88.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React88.createElement(Move, null)), /* @__PURE__ */ React88.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React88.createElement(Scale, null)), /* @__PURE__ */ React88.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React88.createElement(Rotate, null)), /* @__PURE__ */ React88.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React88.createElement(Skew, null))));
+    /* @__PURE__ */ React89.createElement(Tab2, { label: __42("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
+    /* @__PURE__ */ React89.createElement(Tab2, { label: __42("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
+    /* @__PURE__ */ React89.createElement(Tab2, { label: __42("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
+    /* @__PURE__ */ React89.createElement(Tab2, { label: __42("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
+  )), /* @__PURE__ */ React89.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React89.createElement(Move, null)), /* @__PURE__ */ React89.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React89.createElement(Scale, null)), /* @__PURE__ */ React89.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React89.createElement(Rotate, null)), /* @__PURE__ */ React89.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React89.createElement(Skew, null))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
-import * as React89 from "react";
+import * as React90 from "react";
 import { ArrowAutofitHeightIcon, ArrowsMaximizeIcon as ArrowsMaximizeIcon2, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
 var TransformIcon = ({ value }) => {
   switch (value.$$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React89.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
+      return /* @__PURE__ */ React90.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React89.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React90.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React89.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React90.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React89.createElement(SkewXIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React90.createElement(SkewXIcon, { fontSize: "tiny" });
     default:
       return null;
   }
 };
 
 // src/controls/transform-control/transform-label.tsx
-import * as React90 from "react";
+import * as React91 from "react";
 import { Box as Box16 } from "@elementor/ui";
-import { __ as __42 } from "@wordpress/i18n";
+import { __ as __43 } from "@wordpress/i18n";
 var orderedAxis = ["x", "y", "z"];
 var formatLabel = (value, functionType) => {
   return orderedAxis.map((axisKey) => {
@@ -5378,96 +5518,96 @@ var TransformLabel = (props) => {
   const { $$type, value } = props.value;
   switch ($$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React90.createElement(Label2, { label: __42("Move", "elementor"), value: formatLabel(value, "move") });
+      return /* @__PURE__ */ React91.createElement(Label2, { label: __43("Move", "elementor"), value: formatLabel(value, "move") });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React90.createElement(Label2, { label: __42("Scale", "elementor"), value: formatLabel(value, "scale") });
+      return /* @__PURE__ */ React91.createElement(Label2, { label: __43("Scale", "elementor"), value: formatLabel(value, "scale") });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React90.createElement(Label2, { label: __42("Rotate", "elementor"), value: formatLabel(value, "rotate") });
+      return /* @__PURE__ */ React91.createElement(Label2, { label: __43("Rotate", "elementor"), value: formatLabel(value, "rotate") });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React90.createElement(Label2, { label: __42("Skew", "elementor"), value: formatLabel(value, "skew") });
+      return /* @__PURE__ */ React91.createElement(Label2, { label: __43("Skew", "elementor"), value: formatLabel(value, "skew") });
     default:
       return "";
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React90.createElement(Box16, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React91.createElement(Box16, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
-import * as React93 from "react";
+import * as React94 from "react";
 import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
 import { AdjustmentsIcon } from "@elementor/icons";
 import { bindPopover as bindPopover5, Box as Box17, Divider as Divider4, Popover as Popover5 } from "@elementor/ui";
-import { __ as __45 } from "@wordpress/i18n";
+import { __ as __46 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
-import * as React91 from "react";
+import * as React92 from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid26, Stack as Stack14 } from "@elementor/ui";
-import { __ as __43 } from "@wordpress/i18n";
+import { Grid as Grid26, Stack as Stack15 } from "@elementor/ui";
+import { __ as __44 } from "@wordpress/i18n";
 var ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var PERSPECTIVE_CONTROL_FIELD = {
-  label: __43("Perspective", "elementor"),
+  label: __44("Perspective", "elementor"),
   bind: "perspective",
   units: ["px", "em", "rem", "vw", "vh"]
 };
 var CHILDREN_PERSPECTIVE_FIELDS = [
   {
-    label: __43("Origin X", "elementor"),
+    label: __44("Origin X", "elementor"),
     bind: "x",
     units: ORIGIN_UNITS
   },
   {
-    label: __43("Origin Y", "elementor"),
+    label: __44("Origin Y", "elementor"),
     bind: "y",
     units: ORIGIN_UNITS
   }
 ];
 var ChildrenPerspectiveControl = () => {
-  return /* @__PURE__ */ React91.createElement(Stack14, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, __43("Children perspective", "elementor")), /* @__PURE__ */ React91.createElement(PerspectiveControl, null), /* @__PURE__ */ React91.createElement(PerspectiveOriginControl, null));
+  return /* @__PURE__ */ React92.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, __44("Children perspective", "elementor")), /* @__PURE__ */ React92.createElement(PerspectiveControl, null), /* @__PURE__ */ React92.createElement(PerspectiveOriginControl, null));
 };
-var PerspectiveControl = () => /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React91.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
-var PerspectiveOriginControl = () => /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React91.createElement(PerspectiveOriginControlProvider, null));
+var PerspectiveControl = () => /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React92.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
+var PerspectiveOriginControl = () => /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React92.createElement(PerspectiveOriginControlProvider, null));
 var PerspectiveOriginControlProvider = () => {
   const context = useBoundProp(perspectiveOriginPropTypeUtil);
-  return /* @__PURE__ */ React91.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React91.createElement(ControlFields, { control }))));
+  return /* @__PURE__ */ React92.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React92.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = React91.useRef(null);
-  return /* @__PURE__ */ React91.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React91.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React91.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
+  const rowRef = React92.useRef(null);
+  return /* @__PURE__ */ React92.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React92.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React92.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
-import * as React92 from "react";
+import * as React93 from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid27, Stack as Stack15 } from "@elementor/ui";
-import { __ as __44 } from "@wordpress/i18n";
+import { Grid as Grid27, Stack as Stack16 } from "@elementor/ui";
+import { __ as __45 } 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: __44("Origin X", "elementor"),
+    label: __45("Origin X", "elementor"),
     bind: "x",
     units: TRANSFORM_ORIGIN_UNITS
   },
   {
-    label: __44("Origin Y", "elementor"),
+    label: __45("Origin Y", "elementor"),
     bind: "y",
     units: TRANSFORM_ORIGIN_UNITS
   },
   {
-    label: __44("Origin Z", "elementor"),
+    label: __45("Origin Z", "elementor"),
     bind: "z",
     units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
   }
 ];
 var TransformOriginControl = () => {
-  return /* @__PURE__ */ React92.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, __44("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React92.createElement(ControlFields2, { control, key: control.bind })));
+  return /* @__PURE__ */ React93.createElement(Stack16, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, __45("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React93.createElement(ControlFields2, { control, key: control.bind })));
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
-  const rowRef = React92.useRef(null);
-  return /* @__PURE__ */ React92.createElement(PropProvider, { ...context }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React92.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React92.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
+  const rowRef = React93.useRef(null);
+  return /* @__PURE__ */ React93.createElement(PropProvider, { ...context }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React93.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React93.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React93.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
@@ -5481,7 +5621,7 @@ var TransformSettingsControl = ({
     ...popupState,
     anchorEl: anchorRef.current ?? void 0
   });
-  return /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React94.createElement(
     Popover5,
     {
       disablePortal: true,
@@ -5496,44 +5636,45 @@ var TransformSettingsControl = ({
       },
       ...popupProps
     },
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React94.createElement(
       PopoverHeader3,
       {
-        title: __45("Transform settings", "elementor"),
+        title: __46("Transform settings", "elementor"),
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React93.createElement(AdjustmentsIcon, { fontSize: SIZE8 })
+        icon: /* @__PURE__ */ React94.createElement(AdjustmentsIcon, { fontSize: SIZE8 })
       }
     ),
-    /* @__PURE__ */ React93.createElement(Divider4, null),
-    /* @__PURE__ */ React93.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React93.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(Box17, { sx: { my: 0.5 } }, /* @__PURE__ */ React93.createElement(Divider4, null)), /* @__PURE__ */ React93.createElement(ChildrenPerspectiveControl, null)))
+    /* @__PURE__ */ React94.createElement(Divider4, null),
+    /* @__PURE__ */ React94.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React94.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(Box17, { sx: { my: 0.5 } }, /* @__PURE__ */ React94.createElement(Divider4, null)), /* @__PURE__ */ React94.createElement(ChildrenPerspectiveControl, null)))
   );
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
 var SIZE9 = "tiny";
-var TransformRepeaterControl = createControl(() => {
-  const context = useBoundProp(transformPropTypeUtil);
-  const headerRef = useRef21(null);
-  const popupState = usePopupState6({ variant: "popover" });
-  const showChildrenPerspective = useElementCanHaveChildren();
-  return /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(
-    TransformSettingsControl,
-    {
-      popupState,
-      anchorRef: headerRef,
-      showChildrenPerspective
-    }
-  ), /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React94.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
-});
-var ToolTip = /* @__PURE__ */ React94.createElement(
+var TransformRepeaterControl = createControl(
+  ({ showChildrenPerspective }) => {
+    const context = useBoundProp(transformPropTypeUtil);
+    const headerRef = useRef21(null);
+    const popupState = usePopupState6({ variant: "popover" });
+    return /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(
+      TransformSettingsControl,
+      {
+        popupState,
+        anchorRef: headerRef,
+        showChildrenPerspective
+      }
+    ), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React95.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
+  }
+);
+var ToolTip = /* @__PURE__ */ React95.createElement(
   Box18,
   {
     component: "span",
     "aria-label": void 0,
     sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
   },
-  /* @__PURE__ */ React94.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
-  /* @__PURE__ */ React94.createElement(Typography6, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __46("You can use each kind of transform only once per element.", "elementor"))
+  /* @__PURE__ */ React95.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
+  /* @__PURE__ */ React95.createElement(Typography6, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __47("You can use each kind of transform only once per element.", "elementor"))
 );
 var Repeater2 = ({
   headerRef,
@@ -5547,21 +5688,21 @@ var Repeater2 = ({
     return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
   };
   const shouldDisableAddItem = !getInitialValue2();
-  return /* @__PURE__ */ React94.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React95.createElement(
     ControlRepeater,
     {
       initial: getInitialValue2() ?? initialTransformValue,
       propTypeUtil: transformFunctionsPropTypeUtil
     },
-    /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React95.createElement(
       RepeaterHeader,
       {
-        label: __46("Transform", "elementor"),
-        adornment: () => /* @__PURE__ */ React94.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
+        label: __47("Transform", "elementor"),
+        adornment: () => /* @__PURE__ */ React95.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
         ref: headerRef
       },
-      /* @__PURE__ */ React94.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
-      /* @__PURE__ */ React94.createElement(
+      /* @__PURE__ */ React95.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
+      /* @__PURE__ */ React95.createElement(
         TooltipAddItemAction,
         {
           disabled: shouldDisableAddItem,
@@ -5571,15 +5712,15 @@ var Repeater2 = ({
         }
       )
     ),
-    /* @__PURE__ */ React94.createElement(ItemsContainer, null, /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React95.createElement(ItemsContainer, null, /* @__PURE__ */ React95.createElement(
       Item,
       {
         Icon: TransformIcon,
         Label: TransformLabel,
-        actions: /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(DisableItemAction, null), /* @__PURE__ */ React94.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(DisableItemAction, null), /* @__PURE__ */ React95.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React94.createElement(EditItemPopover, null, /* @__PURE__ */ React94.createElement(TransformContent, null))
+    /* @__PURE__ */ React95.createElement(EditItemPopover, null, /* @__PURE__ */ React95.createElement(TransformContent, null))
   ));
 };
 var TransformBasePopoverTrigger = ({
@@ -5587,24 +5728,24 @@ var TransformBasePopoverTrigger = ({
   repeaterBindKey
 }) => {
   const { bind } = useBoundProp();
-  const titleLabel = __46("Transform settings", "elementor");
-  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React94.createElement(Tooltip8, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React94.createElement(IconButton7, { size: SIZE9, "aria-label": titleLabel, ...bindTrigger4(popupState) }, /* @__PURE__ */ React94.createElement(AdjustmentsIcon2, { fontSize: SIZE9 })));
+  const titleLabel = __47("Transform settings", "elementor");
+  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React95.createElement(Tooltip8, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React95.createElement(IconButton7, { size: SIZE9, "aria-label": titleLabel, ...bindTrigger4(popupState) }, /* @__PURE__ */ React95.createElement(AdjustmentsIcon2, { fontSize: SIZE9 })));
 };
 
 // src/controls/transition-control/transition-repeater-control.tsx
-import * as React97 from "react";
-import { useEffect as useEffect10, useMemo as useMemo14, useState as useState16 } from "react";
+import * as React98 from "react";
+import { useEffect as useEffect11, useMemo as useMemo13, useState as useState16 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils2,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
 import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box20, Typography as Typography7 } from "@elementor/ui";
-import { __ as __49 } from "@wordpress/i18n";
+import { __ as __50 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
-import * as React95 from "react";
-import { useMemo as useMemo12, useRef as useRef22 } from "react";
+import * as React96 from "react";
+import { useMemo as useMemo11, useRef as useRef22 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid28 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
@@ -5612,7 +5753,7 @@ var SelectionSizeControl = createControl(
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
     const rowRef = useRef22(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = useMemo12(() => {
+    const currentSizeConfig = useMemo11(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -5623,7 +5764,7 @@ var SelectionSizeControl = createControl(
       }
     }, [value, sizeConfigMap]);
     const SelectionComponent = selectionConfig.component;
-    return /* @__PURE__ */ React95.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React95.createElement(Grid28, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React95.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React95.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React95.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React95.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React95.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React95.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React95.createElement(
+    return /* @__PURE__ */ React96.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React96.createElement(Grid28, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React96.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React96.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React96.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React96.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React96.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React96.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React96.createElement(
       SizeControl,
       {
         anchorRef: rowRef,
@@ -5638,12 +5779,12 @@ var SelectionSizeControl = createControl(
 
 // src/controls/transition-control/data.ts
 import { isVersionGreaterOrEqual } from "@elementor/utils";
-import { __ as __47 } from "@wordpress/i18n";
+import { __ as __48 } from "@wordpress/i18n";
 var initialTransitionValue = {
   selection: {
     $$type: "key-value",
     value: {
-      key: { value: __47("All properties", "elementor"), $$type: "string" },
+      key: { value: __48("All properties", "elementor"), $$type: "string" },
       value: { value: "all", $$type: "string" }
     }
   },
@@ -5668,128 +5809,128 @@ var createTransitionPropertiesList = () => {
   const isSiteRtl = getIsSiteRtl();
   const baseProperties = [
     {
-      label: __47("Default", "elementor"),
+      label: __48("Default", "elementor"),
       type: "category",
-      properties: [{ label: __47("All properties", "elementor"), value: "all" }]
+      properties: [{ label: __48("All properties", "elementor"), value: "all" }]
     },
     {
-      label: __47("Margin", "elementor"),
+      label: __48("Margin", "elementor"),
       type: "category",
       properties: [
-        { label: __47("Margin (all)", "elementor"), value: "margin", isDisabled: true },
-        { label: __47("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
+        { label: __48("Margin (all)", "elementor"), value: "margin", isDisabled: true },
+        { label: __48("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
         {
-          label: isSiteRtl ? __47("Margin right", "elementor") : __47("Margin left", "elementor"),
+          label: isSiteRtl ? __48("Margin right", "elementor") : __48("Margin left", "elementor"),
           value: "margin-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? __47("Margin left", "elementor") : __47("Margin right", "elementor"),
+          label: isSiteRtl ? __48("Margin left", "elementor") : __48("Margin right", "elementor"),
           value: "margin-inline-end",
           isDisabled: true
         },
-        { label: __47("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
+        { label: __48("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
       ]
     },
     {
-      label: __47("Padding", "elementor"),
+      label: __48("Padding", "elementor"),
       type: "category",
       properties: [
-        { label: __47("Padding (all)", "elementor"), value: "padding", isDisabled: true },
-        { label: __47("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
+        { label: __48("Padding (all)", "elementor"), value: "padding", isDisabled: true },
+        { label: __48("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
         {
-          label: isSiteRtl ? __47("Padding right", "elementor") : __47("Padding left", "elementor"),
+          label: isSiteRtl ? __48("Padding right", "elementor") : __48("Padding left", "elementor"),
           value: "padding-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? __47("Padding left", "elementor") : __47("Padding right", "elementor"),
+          label: isSiteRtl ? __48("Padding left", "elementor") : __48("Padding right", "elementor"),
           value: "padding-inline-end",
           isDisabled: true
         },
-        { label: __47("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
+        { label: __48("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
       ]
     },
     {
-      label: __47("Flex", "elementor"),
+      label: __48("Flex", "elementor"),
       type: "category",
       properties: [
-        { label: __47("Flex (all)", "elementor"), value: "flex", isDisabled: true },
-        { label: __47("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
-        { label: __47("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
-        { label: __47("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
+        { label: __48("Flex (all)", "elementor"), value: "flex", isDisabled: true },
+        { label: __48("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
+        { label: __48("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
+        { label: __48("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
       ]
     },
     {
-      label: __47("Size", "elementor"),
+      label: __48("Size", "elementor"),
       type: "category",
       properties: [
-        { label: __47("Width", "elementor"), value: "width", isDisabled: true },
-        { label: __47("Height", "elementor"), value: "height", isDisabled: true },
-        { label: __47("Max height", "elementor"), value: "max-height", isDisabled: true },
-        { label: __47("Max width", "elementor"), value: "max-width", isDisabled: true },
-        { label: __47("Min height", "elementor"), value: "min-height", isDisabled: true },
-        { label: __47("Min width", "elementor"), value: "min-width", isDisabled: true }
+        { label: __48("Width", "elementor"), value: "width", isDisabled: true },
+        { label: __48("Height", "elementor"), value: "height", isDisabled: true },
+        { label: __48("Max height", "elementor"), value: "max-height", isDisabled: true },
+        { label: __48("Max width", "elementor"), value: "max-width", isDisabled: true },
+        { label: __48("Min height", "elementor"), value: "min-height", isDisabled: true },
+        { label: __48("Min width", "elementor"), value: "min-width", isDisabled: true }
       ]
     },
     {
-      label: __47("Position", "elementor"),
+      label: __48("Position", "elementor"),
       type: "category",
       properties: [
-        { label: __47("Top", "elementor"), value: "inset-block-start", isDisabled: true },
+        { label: __48("Top", "elementor"), value: "inset-block-start", isDisabled: true },
         {
-          label: isSiteRtl ? __47("Right", "elementor") : __47("Left", "elementor"),
+          label: isSiteRtl ? __48("Right", "elementor") : __48("Left", "elementor"),
           value: "inset-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? __47("Left", "elementor") : __47("Right", "elementor"),
+          label: isSiteRtl ? __48("Left", "elementor") : __48("Right", "elementor"),
           value: "inset-inline-end",
           isDisabled: true
         },
-        { label: __47("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
-        { label: __47("Z-index", "elementor"), value: "z-index", isDisabled: true }
+        { label: __48("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
+        { label: __48("Z-index", "elementor"), value: "z-index", isDisabled: true }
       ]
     },
     {
-      label: __47("Typography", "elementor"),
+      label: __48("Typography", "elementor"),
       type: "category",
       properties: [
-        { label: __47("Font color", "elementor"), value: "color", isDisabled: true },
-        { label: __47("Font size", "elementor"), value: "font-size", isDisabled: true },
-        { label: __47("Line height", "elementor"), value: "line-height", isDisabled: true },
-        { label: __47("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
-        { label: __47("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
-        { label: __47("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
-        { label: __47("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
+        { label: __48("Font color", "elementor"), value: "color", isDisabled: true },
+        { label: __48("Font size", "elementor"), value: "font-size", isDisabled: true },
+        { label: __48("Line height", "elementor"), value: "line-height", isDisabled: true },
+        { label: __48("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
+        { label: __48("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
+        { label: __48("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
+        { label: __48("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
       ]
     },
     {
-      label: __47("Background", "elementor"),
+      label: __48("Background", "elementor"),
       type: "category",
       properties: [
-        { label: __47("Background color", "elementor"), value: "background-color", isDisabled: true },
-        { label: __47("Background position", "elementor"), value: "background-position", isDisabled: true },
-        { label: __47("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
+        { label: __48("Background color", "elementor"), value: "background-color", isDisabled: true },
+        { label: __48("Background position", "elementor"), value: "background-position", isDisabled: true },
+        { label: __48("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
       ]
     },
     {
-      label: __47("Border", "elementor"),
+      label: __48("Border", "elementor"),
       type: "category",
       properties: [
-        { label: __47("Border (all)", "elementor"), value: "border", isDisabled: true },
-        { label: __47("Border radius", "elementor"), value: "border-radius", isDisabled: true },
-        { label: __47("Border color", "elementor"), value: "border-color", isDisabled: true },
-        { label: __47("Border width", "elementor"), value: "border-width", isDisabled: true }
+        { label: __48("Border (all)", "elementor"), value: "border", isDisabled: true },
+        { label: __48("Border radius", "elementor"), value: "border-radius", isDisabled: true },
+        { label: __48("Border color", "elementor"), value: "border-color", isDisabled: true },
+        { label: __48("Border width", "elementor"), value: "border-width", isDisabled: true }
       ]
     },
     {
-      label: __47("Effects", "elementor"),
+      label: __48("Effects", "elementor"),
       type: "category",
       properties: [
-        { label: __47("Opacity", "elementor"), value: "opacity", isDisabled: true },
-        { label: __47("Transform (all)", "elementor"), value: "transform", isDisabled: true },
-        { label: __47("Filter (all)", "elementor"), value: "filter", isDisabled: true }
+        { label: __48("Opacity", "elementor"), value: "opacity", isDisabled: true },
+        { label: __48("Transform (all)", "elementor"), value: "transform", isDisabled: true },
+        { label: __48("Filter (all)", "elementor"), value: "filter", isDisabled: true }
       ]
     }
   ];
@@ -5825,13 +5966,13 @@ function subscribeToTransitionEvent() {
 }
 
 // src/controls/transition-control/transition-selector.tsx
-import * as React96 from "react";
-import { useMemo as useMemo13, useRef as useRef23 } from "react";
+import * as React97 from "react";
+import { useMemo as useMemo12, useRef as useRef23 } 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 bindPopover6, bindTrigger as bindTrigger5, Box as Box19, Popover as Popover6, UnstableTag as UnstableTag3, usePopupState as usePopupState7 } from "@elementor/ui";
-import { __ as __48 } from "@wordpress/i18n";
+import { __ as __49 } from "@wordpress/i18n";
 var toTransitionSelectorValue = (label) => {
   for (const category of transitionProperties) {
     const property = category.properties.find((prop) => prop.label === label);
@@ -5874,7 +6015,7 @@ var TransitionSelector = ({
   } = value;
   const defaultRef = useRef23(null);
   const popoverState = usePopupState7({ variant: "popover" });
-  const disabledCategories = useMemo13(() => {
+  const disabledCategories = useMemo12(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -5894,7 +6035,7 @@ var TransitionSelector = ({
     return [
       first,
       {
-        label: __48("Recently Used", "elementor"),
+        label: __49("Recently Used", "elementor"),
         items: recentItems
       },
       ...rest
@@ -5918,16 +6059,16 @@ var TransitionSelector = ({
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React96.createElement(Box19, { ref: defaultRef }, /* @__PURE__ */ React96.createElement(ControlActions, null, /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React97.createElement(Box19, { ref: defaultRef }, /* @__PURE__ */ React97.createElement(ControlActions, null, /* @__PURE__ */ React97.createElement(
     UnstableTag3,
     {
       variant: "outlined",
       label: transitionLabel,
-      endIcon: /* @__PURE__ */ React96.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React97.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
       ...bindTrigger5(popoverState),
       fullWidth: true
     }
-  )), /* @__PURE__ */ React96.createElement(
+  )), /* @__PURE__ */ React97.createElement(
     Popover6,
     {
       disablePortal: true,
@@ -5938,7 +6079,7 @@ var TransitionSelector = ({
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "left" }
     },
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.createElement(
       ItemSelector,
       {
         itemsList: getItemList(),
@@ -5946,10 +6087,10 @@ var TransitionSelector = ({
         onItemChange: handleTransitionPropertyChange,
         onClose: popoverState.close,
         sectionWidth: 268,
-        title: __48("Transition Property", "elementor"),
+        title: __49("Transition Property", "elementor"),
         icon: VariationsIcon,
         disabledItems: includeCurrentValueInOptions(value, disabledItems),
-        categoryItemContentTemplate: (item) => /* @__PURE__ */ React96.createElement(
+        categoryItemContentTemplate: (item) => /* @__PURE__ */ React97.createElement(
           Box19,
           {
             sx: {
@@ -5959,13 +6100,13 @@ var TransitionSelector = ({
               width: "100%"
             }
           },
-          /* @__PURE__ */ React96.createElement("span", null, item.value),
-          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React96.createElement(PromotionChip, null)
+          /* @__PURE__ */ React97.createElement("span", null, item.value),
+          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React97.createElement(PromotionChip, null)
         ),
-        footer: showPromotion ? /* @__PURE__ */ React96.createElement(
+        footer: showPromotion ? /* @__PURE__ */ React97.createElement(
           PromotionAlert,
           {
-            message: __48(
+            message: __49(
               "Upgrade to customize transition properties and control effects.",
               "elementor"
             ),
@@ -6000,8 +6141,8 @@ var areAllPropertiesUsed = (value = []) => {
 };
 var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
   return {
-    selectionLabel: __49("Type", "elementor"),
-    sizeLabel: __49("Duration", "elementor"),
+    selectionLabel: __50("Type", "elementor"),
+    sizeLabel: __50("Duration", "elementor"),
     selectionConfig: {
       component: TransitionSelector,
       props: {
@@ -6077,7 +6218,7 @@ var getInitialValue = (values = []) => {
   }
   return initialTransitionValue;
 };
-var disableAddItemTooltipContent = /* @__PURE__ */ React97.createElement(
+var disableAddItemTooltipContent = /* @__PURE__ */ React98.createElement(
   Alert2,
   {
     sx: {
@@ -6085,10 +6226,10 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React97.createElement(
       gap: 0.5
     },
     color: "secondary",
-    icon: /* @__PURE__ */ React97.createElement(InfoCircleFilledIcon3, null)
+    icon: /* @__PURE__ */ React98.createElement(InfoCircleFilledIcon3, null)
   },
-  /* @__PURE__ */ React97.createElement(AlertTitle3, null, __49("Transitions", "elementor")),
-  /* @__PURE__ */ React97.createElement(Box20, { component: "span" }, /* @__PURE__ */ React97.createElement(Typography7, { variant: "body2" }, __49("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React98.createElement(AlertTitle3, null, __50("Transitions", "elementor")),
+  /* @__PURE__ */ React98.createElement(Box20, { component: "span" }, /* @__PURE__ */ React98.createElement(Typography7, { variant: "body2" }, __50("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -6098,18 +6239,18 @@ var TransitionRepeaterControl = createControl(
     const currentStyleIsNormal = currentStyleState === null;
     const [recentlyUsedList, setRecentlyUsedList] = useState16([]);
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo14(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo13(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = useMemo14(() => {
+    const allowedTransitionSet = useMemo13(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => set.add(prop.value));
       });
       return set;
     }, []);
-    useEffect10(() => {
+    useEffect11(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -6121,18 +6262,18 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    useEffect10(() => {
+    useEffect11(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = useMemo14(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = useMemo13(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
-    return /* @__PURE__ */ React97.createElement(
+    return /* @__PURE__ */ React98.createElement(
       RepeatableControl,
       {
-        label: __49("Transitions", "elementor"),
-        repeaterLabel: __49("Transitions", "elementor"),
+        label: __50("Transitions", "elementor"),
+        repeaterLabel: __50("Transitions", "elementor"),
         patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
-        placeholder: __49("Empty Transition", "elementor"),
+        placeholder: __50("Empty Transition", "elementor"),
         showDuplicate: false,
         showToggle: true,
         initialValues: getInitialValue(value),
@@ -6153,7 +6294,7 @@ var TransitionRepeaterControl = createControl(
 );
 
 // src/controls/date-time-control.tsx
-import * as React98 from "react";
+import * as React99 from "react";
 import * as dayjs from "dayjs";
 import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil15 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
@@ -6201,7 +6342,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
     const base = dayjs.default();
     return base.hour(h).minute(m).second(0).millisecond(0);
   };
-  return /* @__PURE__ */ React98.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React98.createElement(ControlActions, null, /* @__PURE__ */ React98.createElement(LocalizationProvider, null, /* @__PURE__ */ React98.createElement(Box21, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React99.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React99.createElement(ControlActions, null, /* @__PURE__ */ React99.createElement(LocalizationProvider, null, /* @__PURE__ */ React99.createElement(Box21, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React99.createElement(
     DatePicker,
     {
       value: parseDateValue(stringPropTypeUtil15.extract(value?.date)),
@@ -6213,7 +6354,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
         openPickerIcon: { fontSize: "tiny" }
       }
     }
-  )), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React98.createElement(
+  )), /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React99.createElement(
     TimePicker,
     {
       value: parseTimeValue(stringPropTypeUtil15.extract(value?.time)),
@@ -6229,16 +6370,16 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 });
 
 // src/controls/inline-editing-control.tsx
-import * as React100 from "react";
-import { useCallback as useCallback3, useEffect as useEffect12, useMemo as useMemo15 } from "react";
+import * as React101 from "react";
+import { useCallback as useCallback3, useEffect as useEffect13, useMemo as useMemo14 } from "react";
 import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
 import { Box as Box23 } from "@elementor/ui";
 import { debounce as debounce4 } from "@elementor/utils";
 
 // src/components/inline-editor.tsx
-import * as React99 from "react";
+import * as React100 from "react";
 import {
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useRef as useRef24
 } from "react";
 import { Box as Box22, ClickAwayListener } from "@elementor/ui";
@@ -6270,7 +6411,7 @@ function isEmpty(value = "") {
 var ITALIC_KEYBOARD_SHORTCUT = "i";
 var BOLD_KEYBOARD_SHORTCUT = "b";
 var UNDERLINE_KEYBOARD_SHORTCUT = "u";
-var InlineEditor = React99.forwardRef((props, ref) => {
+var InlineEditor = React100.forwardRef((props, ref) => {
   const {
     value,
     setValue,
@@ -6370,7 +6511,7 @@ var InlineEditor = React99.forwardRef((props, ref) => {
       editor.commands.setContent(value, { emitUpdate: false });
     }
   }, [editor, value]);
-  return /* @__PURE__ */ React99.createElement(React99.Fragment, null, /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
     Wrapper,
     {
       containerRef,
@@ -6379,12 +6520,12 @@ var InlineEditor = React99.forwardRef((props, ref) => {
       onBlur,
       className: wrapperClassName
     },
-    /* @__PURE__ */ React99.createElement(EditorContent, { ref, editor })
+    /* @__PURE__ */ React100.createElement(EditorContent, { ref, editor })
   ));
 });
 var Wrapper = ({ children, containerRef, editor, sx, onBlur, className }) => {
-  const wrappedChildren = /* @__PURE__ */ React99.createElement(Box22, { ref: containerRef, ...sx, className }, children);
-  return onBlur ? /* @__PURE__ */ React99.createElement(
+  const wrappedChildren = /* @__PURE__ */ React100.createElement(Box22, { ref: containerRef, ...sx, className }, children);
+  return onBlur ? /* @__PURE__ */ React100.createElement(
     ClickAwayListener,
     {
       onClickAway: (event) => {
@@ -6395,11 +6536,11 @@ var Wrapper = ({ children, containerRef, editor, sx, onBlur, className }) => {
       }
     },
     wrappedChildren
-  ) : /* @__PURE__ */ React99.createElement(React99.Fragment, null, wrappedChildren);
+  ) : /* @__PURE__ */ React100.createElement(React100.Fragment, null, wrappedChildren);
 };
 var useOnUpdate = (callback, dependencies) => {
   const hasMounted = useRef24(false);
-  useEffect11(() => {
+  useEffect12(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -6418,7 +6559,7 @@ var InlineEditingControl = createControl(
   }) => {
     const { value, setValue } = useBoundProp(htmlV3PropTypeUtil);
     const content = stringPropTypeUtil16.extract(value?.content ?? null) ?? "";
-    const debouncedParse = useMemo15(
+    const debouncedParse = useMemo14(
       () => debounce4((html) => {
         const parsed = parseHtmlChildren(html);
         setValue({
@@ -6439,8 +6580,8 @@ var InlineEditingControl = createControl(
       },
       [setValue, value?.children, debouncedParse]
     );
-    useEffect12(() => () => debouncedParse.cancel(), [debouncedParse]);
-    return /* @__PURE__ */ React100.createElement(ControlActions, null, /* @__PURE__ */ React100.createElement(
+    useEffect13(() => () => debouncedParse.cancel(), [debouncedParse]);
+    return /* @__PURE__ */ React101.createElement(ControlActions, null, /* @__PURE__ */ React101.createElement(
       Box23,
       {
         sx: {
@@ -6478,98 +6619,98 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React100.createElement(InlineEditor, { value: content, setValue: handleChange })
+      /* @__PURE__ */ React101.createElement(InlineEditor, { value: content, setValue: handleChange })
     ));
   }
 );
 
 // src/controls/email-form-action-control.tsx
-import * as React101 from "react";
+import * as React102 from "react";
 import { emailPropTypeUtil } from "@elementor/editor-props";
 import { CollapsibleContent } from "@elementor/editor-ui";
-import { Box as Box24, Divider as Divider5, Grid as Grid29, Stack as Stack16 } from "@elementor/ui";
-import { __ as __50 } from "@wordpress/i18n";
-var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React101.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React101.createElement(Grid29, { item: true }, /* @__PURE__ */ React101.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React101.createElement(Grid29, { item: true }, /* @__PURE__ */ React101.createElement(TextControl, { placeholder }))));
-var SendToField = () => /* @__PURE__ */ React101.createElement(
+import { Box as Box24, Divider as Divider5, Grid as Grid29, Stack as Stack17 } from "@elementor/ui";
+import { __ as __51 } from "@wordpress/i18n";
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React102.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(TextControl, { placeholder }))));
+var SendToField = () => /* @__PURE__ */ React102.createElement(
   EmailField,
   {
     bind: "to",
-    label: __50("Send To", "elementor"),
-    placeholder: __50("Where should we send new submissions?", "elementor")
+    label: __51("Send To", "elementor"),
+    placeholder: __51("Where should we send new submissions?", "elementor")
   }
 );
-var SubjectField = () => /* @__PURE__ */ React101.createElement(
+var SubjectField = () => /* @__PURE__ */ React102.createElement(
   EmailField,
   {
     bind: "subject",
-    label: __50("Email Subject", "elementor"),
-    placeholder: __50("New form submission", "elementor")
+    label: __51("Email Subject", "elementor"),
+    placeholder: __51("New form submission", "elementor")
   }
 );
-var MessageField = () => /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React101.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React101.createElement(Grid29, { item: true }, /* @__PURE__ */ React101.createElement(ControlFormLabel, null, __50("Message", "elementor"))), /* @__PURE__ */ React101.createElement(Grid29, { item: true }, /* @__PURE__ */ React101.createElement(
+var MessageField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React102.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, __51("Message", "elementor"))), /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(
   TextAreaControl,
   {
-    placeholder: __50(
+    placeholder: __51(
       "By default, all form fields are sent via [all-fields] shortcode.",
       "elementor"
     )
   }
 ))));
-var FromEmailField = () => /* @__PURE__ */ React101.createElement(
+var FromEmailField = () => /* @__PURE__ */ React102.createElement(
   EmailField,
   {
     bind: "from",
-    label: __50("From email", "elementor"),
-    placeholder: __50("What email address should appear as the sender?", "elementor")
+    label: __51("From email", "elementor"),
+    placeholder: __51("What email address should appear as the sender?", "elementor")
   }
 );
-var FromNameField = () => /* @__PURE__ */ React101.createElement(
+var FromNameField = () => /* @__PURE__ */ React102.createElement(
   EmailField,
   {
     bind: "from-name",
-    label: __50("From name", "elementor"),
-    placeholder: __50("What name should appear as the sender?", "elementor")
+    label: __51("From name", "elementor"),
+    placeholder: __51("What name should appear as the sender?", "elementor")
   }
 );
-var ReplyToField = () => /* @__PURE__ */ React101.createElement(EmailField, { bind: "reply-to", label: __50("Reply-to", "elementor") });
-var CcField = () => /* @__PURE__ */ React101.createElement(EmailField, { bind: "cc", label: __50("Cc", "elementor") });
-var BccField = () => /* @__PURE__ */ React101.createElement(EmailField, { bind: "bcc", label: __50("Bcc", "elementor") });
-var MetaDataField = () => /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React101.createElement(Stack16, { gap: 0.5 }, /* @__PURE__ */ React101.createElement(ControlLabel, null, __50("Meta data", "elementor")), /* @__PURE__ */ React101.createElement(
+var ReplyToField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "reply-to", label: __51("Reply-to", "elementor") });
+var CcField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "cc", label: __51("Cc", "elementor") });
+var BccField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "bcc", label: __51("Bcc", "elementor") });
+var MetaDataField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 0.5 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, __51("Meta data", "elementor")), /* @__PURE__ */ React102.createElement(
   ChipsControl,
   {
     options: [
-      { label: __50("Date", "elementor"), value: "date" },
-      { label: __50("Time", "elementor"), value: "time" },
-      { label: __50("Page URL", "elementor"), value: "page-url" },
-      { label: __50("User agent", "elementor"), value: "user-agent" },
-      { label: __50("Credit", "elementor"), value: "credit" }
+      { label: __51("Date", "elementor"), value: "date" },
+      { label: __51("Time", "elementor"), value: "time" },
+      { label: __51("Page URL", "elementor"), value: "page-url" },
+      { label: __51("User agent", "elementor"), value: "user-agent" },
+      { label: __51("Credit", "elementor"), value: "credit" }
     ]
   }
 )));
-var SendAsField = () => /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React101.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React101.createElement(Grid29, { item: true }, /* @__PURE__ */ React101.createElement(ControlFormLabel, null, __50("Send as", "elementor"))), /* @__PURE__ */ React101.createElement(Grid29, { item: true }, /* @__PURE__ */ React101.createElement(
+var SendAsField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React102.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, __51("Send as", "elementor"))), /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(
   SelectControl,
   {
     options: [
-      { label: __50("HTML", "elementor"), value: "html" },
-      { label: __50("Plain Text", "elementor"), value: "plain" }
+      { label: __51("HTML", "elementor"), value: "html" },
+      { label: __51("Plain Text", "elementor"), value: "plain" }
     ]
   }
 ))));
-var AdvancedSettings = () => /* @__PURE__ */ React101.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React101.createElement(Box24, { sx: { pt: 2 } }, /* @__PURE__ */ React101.createElement(Stack16, { gap: 2 }, /* @__PURE__ */ React101.createElement(FromNameField, null), /* @__PURE__ */ React101.createElement(ReplyToField, null), /* @__PURE__ */ React101.createElement(CcField, null), /* @__PURE__ */ React101.createElement(BccField, null), /* @__PURE__ */ React101.createElement(Divider5, null), /* @__PURE__ */ React101.createElement(MetaDataField, null), /* @__PURE__ */ React101.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React102.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React102.createElement(Box24, { sx: { pt: 2 } }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React102.createElement(FromNameField, null), /* @__PURE__ */ React102.createElement(ReplyToField, null), /* @__PURE__ */ React102.createElement(CcField, null), /* @__PURE__ */ React102.createElement(BccField, null), /* @__PURE__ */ React102.createElement(Divider5, null), /* @__PURE__ */ React102.createElement(MetaDataField, null), /* @__PURE__ */ React102.createElement(SendAsField, null))));
 var EmailFormActionControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(emailPropTypeUtil);
-  return /* @__PURE__ */ React101.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React101.createElement(Stack16, { gap: 2 }, /* @__PURE__ */ React101.createElement(ControlFormLabel, null, __50("Email settings", "elementor")), /* @__PURE__ */ React101.createElement(SendToField, null), /* @__PURE__ */ React101.createElement(SubjectField, null), /* @__PURE__ */ React101.createElement(MessageField, null), /* @__PURE__ */ React101.createElement(FromEmailField, null), /* @__PURE__ */ React101.createElement(AdvancedSettings, null)));
+  return /* @__PURE__ */ React102.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, __51("Email settings", "elementor")), /* @__PURE__ */ React102.createElement(SendToField, null), /* @__PURE__ */ React102.createElement(SubjectField, null), /* @__PURE__ */ React102.createElement(MessageField, null), /* @__PURE__ */ React102.createElement(FromEmailField, null), /* @__PURE__ */ React102.createElement(AdvancedSettings, null)));
 });
 
 // src/components/promotions/display-conditions-control.tsx
-import * as React103 from "react";
+import * as React104 from "react";
 import { useRef as useRef25 } from "react";
 import { SitemapIcon } from "@elementor/icons";
-import { IconButton as IconButton8, Stack as Stack17, Tooltip as Tooltip9 } from "@elementor/ui";
-import { __ as __51 } from "@wordpress/i18n";
+import { IconButton as IconButton8, Stack as Stack18, Tooltip as Tooltip9 } from "@elementor/ui";
+import { __ as __52 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
-import * as React102 from "react";
+import * as React103 from "react";
 import { forwardRef as forwardRef11, useImperativeHandle, useState as useState17 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box25 } from "@elementor/ui";
@@ -6582,7 +6723,7 @@ var PromotionTrigger = forwardRef11(
     const promotion = getV4Promotion(promotionKey);
     const toggle = () => setIsOpen((prev) => !prev);
     useImperativeHandle(ref, () => ({ toggle }), []);
-    return /* @__PURE__ */ React102.createElement(React102.Fragment, null, promotion && /* @__PURE__ */ React102.createElement(
+    return /* @__PURE__ */ React103.createElement(React103.Fragment, null, promotion && /* @__PURE__ */ React103.createElement(
       PromotionInfotip,
       {
         title: promotion.title,
@@ -6595,7 +6736,7 @@ var PromotionTrigger = forwardRef11(
           setIsOpen(false);
         }
       },
-      /* @__PURE__ */ React102.createElement(
+      /* @__PURE__ */ React103.createElement(
         Box25,
         {
           onClick: (e) => {
@@ -6604,18 +6745,18 @@ var PromotionTrigger = forwardRef11(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React102.createElement(PromotionChip2, null)
+        children ?? /* @__PURE__ */ React103.createElement(PromotionChip2, null)
       )
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var ARIA_LABEL = __51("Display Conditions", "elementor");
+var ARIA_LABEL = __52("Display Conditions", "elementor");
 var DisplayConditionsControl = createControl(() => {
   const triggerRef = useRef25(null);
-  return /* @__PURE__ */ React103.createElement(
-    Stack17,
+  return /* @__PURE__ */ React104.createElement(
+    Stack18,
     {
       direction: "row",
       spacing: 2,
@@ -6624,8 +6765,8 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React103.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions" }),
-    /* @__PURE__ */ React103.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React103.createElement(
+    /* @__PURE__ */ React104.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions" }),
+    /* @__PURE__ */ React104.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React104.createElement(
       IconButton8,
       {
         size: "tiny",
@@ -6638,22 +6779,22 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React103.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React104.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-import * as React104 from "react";
+import * as React105 from "react";
 import { useRef as useRef26 } from "react";
 import { PlusIcon as PlusIcon3 } from "@elementor/icons";
-import { Stack as Stack18, Tooltip as Tooltip10 } from "@elementor/ui";
-import { __ as __52 } from "@wordpress/i18n";
-var ARIA_LABEL2 = __52("Attributes", "elementor");
+import { Stack as Stack19, Tooltip as Tooltip10 } from "@elementor/ui";
+import { __ as __53 } from "@wordpress/i18n";
+var ARIA_LABEL2 = __53("Attributes", "elementor");
 var AttributesControl = createControl(() => {
   const triggerRef = useRef26(null);
-  return /* @__PURE__ */ React104.createElement(
-    Stack18,
+  return /* @__PURE__ */ React105.createElement(
+    Stack19,
     {
       direction: "row",
       spacing: 2,
@@ -6662,8 +6803,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React104.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes" }),
-    /* @__PURE__ */ React104.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React104.createElement(
+    /* @__PURE__ */ React105.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes" }),
+    /* @__PURE__ */ React105.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React105.createElement(
       PlusIcon3,
       {
         "aria-label": ARIA_LABEL2,
@@ -6677,18 +6818,18 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-import * as React105 from "react";
+import * as React106 from "react";
 import { BrushBigIcon } from "@elementor/icons";
 import { IconButton as IconButton9, styled as styled9, Tooltip as Tooltip11 } from "@elementor/ui";
 var CustomIconButton = styled9(IconButton9)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React105.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React105.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React105.createElement(BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React106.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React106.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React106.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-import * as React106 from "react";
-import { useEffect as useEffect13, useState as useState18 } from "react";
+import * as React107 from "react";
+import { useEffect as useEffect14, useState as useState18 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon4, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover7,
@@ -6699,7 +6840,7 @@ import {
   Tooltip as Tooltip12,
   usePopupState as usePopupState8
 } from "@elementor/ui";
-import { __ as __53 } from "@wordpress/i18n";
+import { __ as __54 } from "@wordpress/i18n";
 var SIZE10 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -6780,7 +6921,7 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React106.createElement(
+  const addButton = /* @__PURE__ */ React107.createElement(
     IconButton10,
     {
       size: SIZE10,
@@ -6789,11 +6930,11 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": __53("Add item", "elementor")
+      "aria-label": __54("Add item", "elementor")
     },
-    /* @__PURE__ */ React106.createElement(PlusIcon4, { fontSize: SIZE10 })
+    /* @__PURE__ */ React107.createElement(PlusIcon4, { fontSize: SIZE10 })
   );
-  return /* @__PURE__ */ React106.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React106.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React107.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React107.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React107.createElement(
     Infotip4,
     {
       placement: "right",
@@ -6801,20 +6942,20 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React106.createElement(Box26, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React106.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React107.createElement(Box26, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React107.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React106.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React106.createElement(
+    return /* @__PURE__ */ React107.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React107.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React106.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React106.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React106.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React106.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React107.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React107.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React107.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React107.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -6826,7 +6967,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React106.createElement(
+      (props) => /* @__PURE__ */ React107.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -6856,27 +6997,27 @@ var RepeaterItem = ({
   value
 }) => {
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = __53("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? __53("Show", "elementor") : __53("Hide", "elementor");
-  const removeLabel = __53("Remove", "elementor");
-  return /* @__PURE__ */ React106.createElement(React106.Fragment, null, /* @__PURE__ */ React106.createElement(
+  const duplicateLabel = __54("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? __54("Show", "elementor") : __54("Hide", "elementor");
+  const removeLabel = __54("Remove", "elementor");
+  return /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": __53("Open item", "elementor"),
+      "aria-label": __54("Open item", "elementor"),
       ...bindTrigger6(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React106.createElement(React106.Fragment, null, showDuplicate && /* @__PURE__ */ React106.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React106.createElement(IconButton10, { size: SIZE10, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React106.createElement(CopyIcon2, { fontSize: SIZE10 }))), showToggle && /* @__PURE__ */ React106.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React106.createElement(IconButton10, { size: SIZE10, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React106.createElement(EyeOffIcon2, { fontSize: SIZE10 }) : /* @__PURE__ */ React106.createElement(EyeIcon2, { fontSize: SIZE10 }))), actions?.(value), showRemove && /* @__PURE__ */ React106.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React106.createElement(IconButton10, { size: SIZE10, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React106.createElement(XIcon4, { fontSize: SIZE10 }))))
+      actions: /* @__PURE__ */ React107.createElement(React107.Fragment, null, showDuplicate && /* @__PURE__ */ React107.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(IconButton10, { size: SIZE10, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React107.createElement(CopyIcon2, { fontSize: SIZE10 }))), showToggle && /* @__PURE__ */ React107.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(IconButton10, { size: SIZE10, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React107.createElement(EyeOffIcon2, { fontSize: SIZE10 }) : /* @__PURE__ */ React107.createElement(EyeIcon2, { fontSize: SIZE10 }))), actions?.(value), showRemove && /* @__PURE__ */ React107.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(IconButton10, { size: SIZE10, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React107.createElement(XIcon4, { fontSize: SIZE10 }))))
     }
-  ), /* @__PURE__ */ React106.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React106.createElement(Box26, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React107.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React107.createElement(Box26, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
   const [ref, setRef] = useState18(null);
   const popoverState = usePopupState8({ variant: "popover" });
   const popoverProps = bindPopover7(popoverState);
-  useEffect13(() => {
+  useEffect14(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -6891,9 +7032,9 @@ var usePopover = (openOnMount, onOpen) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-import * as React108 from "react";
-import { useMemo as useMemo16, useRef as useRef28, useState as useState19 } from "react";
-import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
+import * as React109 from "react";
+import { useMemo as useMemo15, useRef as useRef28, useState as useState19 } from "react";
+import { getContainer, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
   ItalicIcon,
@@ -6914,14 +7055,14 @@ import {
   usePopupState as usePopupState9
 } from "@elementor/ui";
 import { useEditorState } from "@tiptap/react";
-import { __ as __55 } from "@wordpress/i18n";
+import { __ as __56 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
-import * as React107 from "react";
-import { useEffect as useEffect14, useRef as useRef27 } from "react";
+import * as React108 from "react";
+import { useEffect as useEffect15, useRef as useRef27 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
-import { bindPopover as bindPopover8, Popover as Popover7, Stack as Stack19, TextField as TextField9, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
-import { __ as __54 } from "@wordpress/i18n";
+import { bindPopover as bindPopover8, Popover as Popover7, Stack as Stack20, TextField as TextField9, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
+import { __ as __55 } from "@wordpress/i18n";
 var UrlPopover = ({
   popupState,
   restoreValue,
@@ -6932,7 +7073,7 @@ var UrlPopover = ({
   onToggleNewTab
 }) => {
   const inputRef = useRef27(null);
-  useEffect14(() => {
+  useEffect15(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -6941,7 +7082,7 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React108.createElement(
     Popover7,
     {
       slotProps: {
@@ -6952,30 +7093,30 @@ var UrlPopover = ({
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React107.createElement(Stack19, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React107.createElement(
+    /* @__PURE__ */ React108.createElement(Stack20, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React108.createElement(
       TextField9,
       {
         value,
         onChange,
         size: "tiny",
         fullWidth: true,
-        placeholder: __54("Type a URL", "elementor"),
+        placeholder: __55("Type a URL", "elementor"),
         inputProps: { ref: inputRef },
         color: "secondary",
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React107.createElement(Tooltip13, { title: __54("Open in a new tab", "elementor") }, /* @__PURE__ */ React107.createElement(
+    ), /* @__PURE__ */ React108.createElement(Tooltip13, { title: __55("Open in a new tab", "elementor") }, /* @__PURE__ */ React108.createElement(
       ToggleButton2,
       {
         size: "tiny",
         value: "newTab",
         selected: openInNewTab,
         onClick: onToggleNewTab,
-        "aria-label": __54("Open in a new tab", "elementor"),
+        "aria-label": __55("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React107.createElement(ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React108.createElement(ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
@@ -6991,7 +7132,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo16(() => {
+  const formatButtonsList = useMemo15(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -7028,10 +7169,10 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  React108.useEffect(() => {
+  React109.useEffect(() => {
     editor?.commands?.focus();
   }, [editor]);
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(
     Box27,
     {
       ref: toolbarRef,
@@ -7048,8 +7189,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         ...sx
       }
     },
-    /* @__PURE__ */ React108.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React108.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React108.createElement(
+    /* @__PURE__ */ React109.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React109.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React109.createElement(
       ToggleButtonGroup2,
       {
         value: editorState,
@@ -7071,7 +7212,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React108.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React108.createElement(
+      formatButtonsList.map((button) => /* @__PURE__ */ React109.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React109.createElement(
         ToggleButton3,
         {
           value: button.action,
@@ -7089,7 +7230,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         button.icon
       )))
     ),
-    /* @__PURE__ */ React108.createElement(
+    /* @__PURE__ */ React109.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -7104,7 +7245,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
   );
 };
 var checkIfElementIsClickable = (elementId) => {
-  const container = getContainer2(elementId);
+  const container = getContainer(elementId);
   const type = container?.model.get("widgetType");
   const isButton = type === "e-button";
   const hasLink = !!getElementSetting(elementId, "link")?.value?.destination;
@@ -7112,64 +7253,64 @@ var checkIfElementIsClickable = (elementId) => {
 };
 var toolbarButtons = {
   clear: {
-    label: __55("Clear", "elementor"),
-    icon: /* @__PURE__ */ React108.createElement(MinusIcon2, { fontSize: "tiny" }),
+    label: __56("Clear", "elementor"),
+    icon: /* @__PURE__ */ React109.createElement(MinusIcon2, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: __55("Bold", "elementor"),
-    icon: /* @__PURE__ */ React108.createElement(BoldIcon, { fontSize: "tiny" }),
+    label: __56("Bold", "elementor"),
+    icon: /* @__PURE__ */ React109.createElement(BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: __55("Italic", "elementor"),
-    icon: /* @__PURE__ */ React108.createElement(ItalicIcon, { fontSize: "tiny" }),
+    label: __56("Italic", "elementor"),
+    icon: /* @__PURE__ */ React109.createElement(ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: __55("Underline", "elementor"),
-    icon: /* @__PURE__ */ React108.createElement(UnderlineIcon, { fontSize: "tiny" }),
+    label: __56("Underline", "elementor"),
+    icon: /* @__PURE__ */ React109.createElement(UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: __55("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React108.createElement(StrikethroughIcon, { fontSize: "tiny" }),
+    label: __56("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React109.createElement(StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: __55("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React108.createElement(SuperscriptIcon, { fontSize: "tiny" }),
+    label: __56("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React109.createElement(SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: __55("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React108.createElement(SubscriptIcon, { fontSize: "tiny" }),
+    label: __56("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React109.createElement(SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
   },
   link: {
-    label: __55("Link", "elementor"),
-    icon: /* @__PURE__ */ React108.createElement(LinkIcon3, { fontSize: "tiny" }),
+    label: __56("Link", "elementor"),
+    icon: /* @__PURE__ */ React109.createElement(LinkIcon3, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -7178,7 +7319,7 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 
 // src/components/size/unstable-size-field.tsx
-import * as React111 from "react";
+import * as React112 from "react";
 import { InputAdornment as InputAdornment5 } from "@elementor/ui";
 
 // src/hooks/use-size-value.ts
@@ -7221,10 +7362,10 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-import * as React109 from "react";
+import * as React110 from "react";
 import { useId as useId3 } from "react";
 import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
-import { bindMenu as bindMenu2, bindTrigger as bindTrigger7, Button as Button5, Menu as Menu3, styled as styled10, usePopupState as usePopupState10 } from "@elementor/ui";
+import { bindMenu as bindMenu2, bindTrigger as bindTrigger7, Button as Button6, Menu as Menu3, styled as styled10, usePopupState as usePopupState10 } from "@elementor/ui";
 var menuItemContentStyles = {
   display: "flex",
   flexDirection: "column",
@@ -7239,7 +7380,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger7(popupState) }, value), /* @__PURE__ */ React109.createElement(Menu3, { MenuListProps: { dense: true }, ...bindMenu2(popupState) }, options.map((option, index) => /* @__PURE__ */ React109.createElement(
+  return /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger7(popupState) }, value), /* @__PURE__ */ React110.createElement(Menu3, { MenuListProps: { dense: true }, ...bindMenu2(popupState) }, options.map((option, index) => /* @__PURE__ */ React110.createElement(
     MenuListItem7,
     {
       key: option,
@@ -7258,7 +7399,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     option.toUpperCase()
   ))));
 };
-var StyledButton2 = styled10(Button5, {
+var StyledButton2 = styled10(Button6, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -7268,11 +7409,11 @@ var StyledButton2 = styled10(Button5, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-import * as React110 from "react";
+import * as React111 from "react";
 import { forwardRef as forwardRef12 } from "react";
 var UnstableSizeInput = forwardRef12(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React110.createElement(
+    return /* @__PURE__ */ React111.createElement(
       NumberInput,
       {
         ref,
@@ -7310,7 +7451,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React111.createElement(
+  return /* @__PURE__ */ React112.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -7319,8 +7460,8 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React111.createElement(InputAdornment5, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React111.createElement(InputAdornment5, { position: "end" }, /* @__PURE__ */ React111.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React112.createElement(InputAdornment5, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React112.createElement(InputAdornment5, { position: "end" }, /* @__PURE__ */ React112.createElement(
           UnitSelect,
           {
             options: units2,
@@ -7338,13 +7479,13 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo16 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
-import { __ as __56 } from "@wordpress/i18n";
+import { __ as __57 } from "@wordpress/i18n";
 var supportedCategories = {
-  system: __56("System", "elementor"),
-  custom: __56("Custom Fonts", "elementor"),
-  googlefonts: __56("Google Fonts", "elementor")
+  system: __57("System", "elementor"),
+  custom: __57("Custom Fonts", "elementor"),
+  googlefonts: __57("Google Fonts", "elementor")
 };
 var getFontFamilies = () => {
   const { controls } = getElementorConfig();
@@ -7356,7 +7497,7 @@ var getFontFamilies = () => {
 };
 var useFontFamilies = () => {
   const fontFamilies = getFontFamilies();
-  return useMemo17(() => {
+  return useMemo16(() => {
     const categoriesOrder = ["system", "custom", "googlefonts"];
     return Object.entries(fontFamilies || {}).reduce((acc, [font, category]) => {
       if (!supportedCategories[category]) {
@@ -7430,6 +7571,7 @@ export {
   TransitionRepeaterControl,
   UnstableSizeField,
   UrlControl,
+  VideoMediaControl,
   createControl,
   createControlReplacementsRegistry,
   enqueueFont,
@@ -7437,14 +7579,15 @@ export {
   injectIntoRepeaterItemActions,
   injectIntoRepeaterItemIcon,
   injectIntoRepeaterItemLabel,
+  isUnitExtendedOption,
   registerControlReplacement,
   transitionProperties,
   transitionsItemsList,
   useBoundProp,
   useControlActions,
   useControlReplacement,
-  useElementCanHaveChildren,
   useFontFamilies,
-  useSyncExternalState
+  useSyncExternalState,
+  useTypingBuffer
 };
 //# sourceMappingURL=index.mjs.map