@elementor/editor-controls 4.1.0-manual → 4.2.0-839

package/dist/index.mjs

@@ -351,7 +351,7 @@ var formatResponse = (response) => {
 
 // src/controls/image-media-control.tsx
 import * as React11 from "react";
-import { imageSrcPropTypeUtil } from "@elementor/editor-props";
+import { imageSrcPropTypeUtil, stringPropTypeUtil, urlPropTypeUtil } from "@elementor/editor-props";
 import { UploadIcon } from "@elementor/icons";
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack as Stack2 } from "@elementor/ui";
 import { useWpMediaAttachment, useWpMediaFrame } from "@elementor/wp-media";
@@ -392,10 +392,14 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
   const { data: attachment, isFetching } = useWpMediaAttachment(id?.value || null);
   const { data: placeholderAttachment } = useWpMediaAttachment(placeholder?.id?.value || null);
   const src = attachment?.url ?? url?.value ?? placeholderAttachment?.url ?? null;
+  const defaultUrl = imageSrcPropTypeUtil.extract(propType.default ?? null)?.url?.value;
+  const currentUrlForModal = url?.value && url.value !== defaultUrl ? url.value : void 0;
+  const currentAltForModal = value?.alt?.value;
   const { open } = useWpMediaFrame({
     mediaTypes,
     multiple: false,
     selected: id?.value || null,
+    allowUrlImport: true,
     onSelect: (selectedAttachment) => {
       setValue({
         id: {
@@ -404,6 +408,13 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
         },
         url: null
       });
+    },
+    onSelectUrl: (selectedUrl, alt) => {
+      setValue({
+        id: null,
+        url: urlPropTypeUtil.create(selectedUrl),
+        alt: alt ? stringPropTypeUtil.create(alt) : null
+      });
     }
   });
   return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React11.createElement(CardMedia, { image: src, sx: { height: propType.meta.isDynamic ? 134 : 150 } }, isFetching ? /* @__PURE__ */ React11.createElement(Stack2, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React11.createElement(CircularProgress, null)) : /* @__PURE__ */ React11.createElement(React11.Fragment, null)), /* @__PURE__ */ React11.createElement(CardOverlay, null, /* @__PURE__ */ React11.createElement(Stack2, { gap: 1 }, /* @__PURE__ */ React11.createElement(
@@ -425,12 +436,21 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
       onClick: () => open({ mode: "upload" })
     },
     __("Upload", "elementor")
+  ), /* @__PURE__ */ React11.createElement(
+    Button,
+    {
+      size: "tiny",
+      variant: "text",
+      color: "inherit",
+      onClick: () => open({ mode: "url", currentUrl: currentUrlForModal, currentAlt: currentAltForModal })
+    },
+    __("Insert from URL", "elementor")
   )))));
 });
 
 // src/controls/select-control.tsx
 import * as React12 from "react";
-import { stringPropTypeUtil } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
 import { MenuListItem } from "@elementor/editor-ui";
 import { Select, Typography } from "@elementor/ui";
 var DEFAULT_MENU_PROPS = {
@@ -442,7 +462,7 @@ var DEFAULT_MENU_PROPS = {
 };
 var SelectControl = createControl(
   ({ options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
-    const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil);
+    const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil2);
     const handleChange = (event) => {
       const newValue = event.target.value || null;
       onChange?.(newValue, value);
@@ -498,7 +518,7 @@ var ImageSizeControl = ({ sizes }) => {
 
 // src/controls/text-control.tsx
 import * as React14 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
 import { TextField } from "@elementor/ui";
 var TextControl = createControl(
   ({
@@ -510,7 +530,7 @@ var TextControl = createControl(
     sx,
     ariaLabel
   }) => {
-    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(stringPropTypeUtil2);
+    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(stringPropTypeUtil3);
     const handleChange = (event) => setValue(event.target.value);
     const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
     return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
@@ -535,10 +555,10 @@ var TextControl = createControl(
 
 // src/controls/text-area-control.tsx
 import * as React15 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
 import { TextField as TextField2 } from "@elementor/ui";
 var TextAreaControl = createControl(({ placeholder: propPlaceholder, ariaLabel }) => {
-  const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(stringPropTypeUtil3);
+  const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(stringPropTypeUtil4);
   const handleChange = (event) => {
     setValue(event.target.value);
   };
@@ -565,7 +585,7 @@ var TextAreaControl = createControl(({ placeholder: propPlaceholder, ariaLabel }
 import * as React16 from "react";
 import { useCallback, useState as useState2 } from "react";
 import { Mention } from "primereact/mention";
-import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
 import { styled } from "@elementor/ui";
 var MentionWrapper = styled("div")(({ theme }) => ({
   position: "relative",
@@ -633,25 +653,30 @@ var MentionWrapper = styled("div")(({ theme }) => ({
     "&.p-highlight": {
       backgroundColor: theme.palette.action.selected
     }
+  },
+  '&[data-single-line="true"] textarea': {
+    resize: "none"
   }
 }));
+function createMentionPattern(value, triggerPosition) {
+  const escaped = value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const prefix = "start" === triggerPosition ? "^" : "";
+  return new RegExp(`${prefix}@${escaped}(?=\\s|$|[^a-zA-Z0-9_-])`, "g");
+}
 var MentionTextAreaControl = createControl(
-  ({ placeholder, ariaLabel, suggestions: allSuggestions }) => {
-    const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil4);
+  ({ placeholder, ariaLabel, suggestions: allSuggestions, rows = 5, triggerPosition = "auto" }) => {
+    const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil5);
     const [filteredSuggestions, setFilteredSuggestions] = useState2([]);
     const transformMentionsToShortcodes = useCallback(
       (text) => {
         let result = text;
         for (const suggestion of allSuggestions) {
-          const mentionPattern = new RegExp(
-            `@${suggestion.value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?=\\s|$|[^a-zA-Z0-9_-])`,
-            "g"
-          );
-          result = result.replace(mentionPattern, `[${suggestion.value}]`);
+          const pattern = createMentionPattern(suggestion.value, triggerPosition);
+          result = result.replace(pattern, `[${suggestion.value}]`);
         }
         return result;
       },
-      [allSuggestions]
+      [allSuggestions, triggerPosition]
     );
     const handleChange = useCallback(
       (e) => {
@@ -663,15 +688,23 @@ var MentionTextAreaControl = createControl(
     );
     const handleSearch = useCallback(
       (event) => {
+        if ("start" === triggerPosition) {
+          const target = event.originalEvent.target;
+          const triggerIndex = target.selectionStart - event.query.length - event.trigger.length;
+          if (triggerIndex !== 0) {
+            setFilteredSuggestions([]);
+            return;
+          }
+        }
         const query = event.query.toLowerCase();
         const filtered = allSuggestions.filter(
           (item) => item.label.toLowerCase().includes(query) || item.value.toLowerCase().includes(query)
         );
         setFilteredSuggestions(filtered);
       },
-      [allSuggestions]
+      [allSuggestions, triggerPosition]
     );
-    return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(MentionWrapper, null, /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(MentionWrapper, { "data-single-line": rows === 1 ? "true" : void 0 }, /* @__PURE__ */ React16.createElement(
       Mention,
       {
         value: value ?? "",
@@ -680,7 +713,7 @@ var MentionTextAreaControl = createControl(
         onSearch: handleSearch,
         field: "value",
         trigger: "@",
-        rows: 5,
+        rows,
         disabled,
         placeholder,
         itemTemplate: SuggestionItem,
@@ -1370,7 +1403,7 @@ var Control = forwardRef3(({ bind, label, children }, ref) => /* @__PURE__ */ Re
 
 // src/controls/box-shadow-repeater-control.tsx
 import * as React40 from "react";
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import { boxShadowPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 import { FormLabel as FormLabel2, Grid as Grid4, styled as styled4, UnstableColorIndicator } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
@@ -1383,9 +1416,53 @@ import { __ as __5, sprintf } from "@wordpress/i18n";
 
 // src/components/control-repeater/context/repeater-context.tsx
 import * as React25 from "react";
-import { createContext as createContext7, useContext as useContext6, useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
+import { createContext as createContext7, useContext as useContext6, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
 import { usePopupState as usePopupState3 } from "@elementor/ui";
 
+// src/hooks/use-repeater-popover-dismiss.ts
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { useActiveBreakpoint as useActiveBreakpoint2, useBreakpoints } from "@elementor/editor-responsive";
+var serializeBreakpoints = (breakpoints) => breakpoints.map((b) => [b.id, b.width ?? "", b.type ?? ""].join(":")).join("|");
+var usePopoverDismiss = ({ isOpen, onClose }) => {
+  const onCloseRef = useRef4(onClose);
+  onCloseRef.current = onClose;
+  const activeBreakpoint = useActiveBreakpoint2();
+  const breakpoints = useBreakpoints();
+  const breakpointsSignature = useMemo3(() => serializeBreakpoints(breakpoints), [breakpoints]);
+  const prevActiveBreakpointRef = useRef4(void 0);
+  const prevBreakpointsSignatureRef = useRef4(null);
+  useEffect5(() => {
+    if (!isOpen) {
+      prevActiveBreakpointRef.current = activeBreakpoint;
+      prevBreakpointsSignatureRef.current = breakpointsSignature;
+      return;
+    }
+    const previousBreakpoint = prevActiveBreakpointRef.current;
+    const previousSignature = prevBreakpointsSignatureRef.current;
+    const breakpointChanged = previousBreakpoint !== void 0 && previousBreakpoint !== activeBreakpoint;
+    const breakpointsChanged = previousSignature !== null && previousSignature !== breakpointsSignature;
+    if (breakpointChanged || breakpointsChanged) {
+      onCloseRef.current();
+    }
+    prevActiveBreakpointRef.current = activeBreakpoint;
+    prevBreakpointsSignatureRef.current = breakpointsSignature;
+  }, [activeBreakpoint, breakpointsSignature, isOpen]);
+  useEffect5(() => {
+    if (!isOpen) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" && !event.defaultPrevented) {
+        onCloseRef.current();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen]);
+};
+
 // src/services/event-bus.ts
 var EventBus = class {
   listeners = /* @__PURE__ */ new Map();
@@ -1454,7 +1531,7 @@ var RepeaterContextProvider = ({
   const [uniqueKeys, setUniqueKeys] = useState5(() => {
     return items2?.map(() => generateUniqueKey()) ?? [];
   });
-  useEffect5(() => {
+  useEffect6(() => {
     const nextLength = items2?.length ?? 0;
     setUniqueKeys((prev) => {
       const prevLength = prev.length;
@@ -1467,7 +1544,7 @@ var RepeaterContextProvider = ({
       return [...prev, ...Array.from({ length: nextLength - prevLength }, generateUniqueKey)];
     });
   }, [items2?.length]);
-  const itemsWithKeys = useMemo3(
+  const itemsWithKeys = useMemo4(
     () => uniqueKeys.map((key, index) => ({
       key,
       item: items2[index]
@@ -1507,6 +1584,15 @@ var RepeaterContextProvider = ({
     const newItems = [...items2.slice(0, index), updatedItem, ...items2.slice(index + 1)];
     setItems(newItems);
   };
+  const closePopover = () => {
+    if (!isOpen) {
+      return;
+    }
+    setOpenItemIndex(EMPTY_OPEN_ITEM);
+    setRowRef(null);
+    popoverState.close();
+  };
+  usePopoverDismiss({ isOpen, onClose: closePopover });
   return /* @__PURE__ */ React25.createElement(
     RepeaterContext.Provider,
     {
@@ -1956,7 +2042,7 @@ var StyledUnstableColorIndicator = styled4(UnstableColorIndicator)(({ theme }) =
 var ItemIcon = ({ value }) => /* @__PURE__ */ React40.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
 var Content = () => {
   const context = useBoundProp(shadowPropTypeUtil);
-  const rowRef = [useRef4(null), useRef4(null)];
+  const rowRef = [useRef5(null), useRef5(null)];
   const { rowRef: anchorEl } = useRepeaterContext();
   return /* @__PURE__ */ React40.createElement(PropProvider, { ...context }, /* @__PURE__ */ React40.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React40.createElement(PopoverGridContainer, null, /* @__PURE__ */ React40.createElement(Control2, { bind: "color", label: __11("Color", "elementor") }, /* @__PURE__ */ React40.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React40.createElement(Control2, { bind: "position", label: __11("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(
     SelectControl,
@@ -2031,7 +2117,7 @@ import { __ as __17 } from "@wordpress/i18n";
 
 // src/controls/filter-control/context/filter-config-context.tsx
 import * as React41 from "react";
-import { createContext as createContext9, useContext as useContext9, useMemo as useMemo4 } from "react";
+import { createContext as createContext9, useContext as useContext9, useMemo as useMemo5 } from "react";
 import { cssFilterFunctionPropUtil } from "@elementor/editor-props";
 
 // src/controls/filter-control/utils.ts
@@ -2133,7 +2219,7 @@ function extractPropType(propType, filterFunctionGroup) {
 var FilterConfigContext = createContext9(null);
 function FilterConfigProvider({ children }) {
   const propContext = useBoundProp(cssFilterFunctionPropUtil);
-  const contextValue = useMemo4(() => {
+  const contextValue = useMemo5(() => {
     const config = buildFilterConfig(propContext.propType.item_prop_type);
     const filterOptions = Object.entries(config).map(([key, conf]) => ({
       value: key,
@@ -2166,7 +2252,7 @@ import { __ as __15 } from "@wordpress/i18n";
 
 // src/controls/filter-control/drop-shadow/drop-shadow-item-content.tsx
 import * as React42 from "react";
-import { useRef as useRef5 } from "react";
+import { useRef as useRef6 } from "react";
 import { dropShadowFilterPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid5 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
@@ -2194,7 +2280,7 @@ var items = [
 ];
 var DropShadowItemContent = ({ anchorEl }) => {
   const context = useBoundProp(dropShadowFilterPropTypeUtil);
-  const rowRefs = [useRef5(null), useRef5(null)];
+  const rowRefs = [useRef6(null), useRef6(null)];
   return /* @__PURE__ */ React42.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React42.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React42.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React42.createElement(Grid5, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React42.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React42.createElement(
     SizeControl,
     {
@@ -2207,7 +2293,7 @@ var DropShadowItemContent = ({ anchorEl }) => {
 };
 
 // src/controls/filter-control/single-size/single-size-item-content.tsx
-import { useRef as useRef6 } from "react";
+import { useRef as useRef7 } from "react";
 import * as React43 from "react";
 import {
   blurFilterPropTypeUtil,
@@ -2223,7 +2309,7 @@ var propTypeMap = {
   "color-tone": colorToneFilterPropTypeUtil
 };
 var SingleSizeItemContent = ({ filterFunc }) => {
-  const rowRef = useRef6(null);
+  const rowRef = useRef7(null);
   const { getFilterFunctionConfig } = useFilterConfig();
   const { valueName, filterFunctionGroup } = getFilterFunctionConfig(filterFunc);
   const context = useBoundProp(propTypeMap[filterFunctionGroup]);
@@ -2364,7 +2450,7 @@ function ensureFilterConfig(name) {
 
 // src/controls/select-control-wrapper.tsx
 import * as React50 from "react";
-import { useEffect as useEffect6, useState as useState6 } from "react";
+import { useEffect as useEffect7, useState as useState6 } from "react";
 var getOffCanvasElements = () => {
   const extendedWindow = window;
   const documentId = extendedWindow.elementor.config.document.id;
@@ -2401,7 +2487,7 @@ var collectionMethods = {
 };
 var useDynamicOptions = (collectionId, initialOptions) => {
   const [options, setOptions] = useState6(initialOptions ?? []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!collectionId || !collectionMethods[collectionId]) {
       setOptions(initialOptions ?? []);
       return;
@@ -2419,15 +2505,15 @@ var SelectControlWrapper = createControl(
 
 // src/controls/chips-control.tsx
 import * as React51 from "react";
-import { stringArrayPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
+import { stringArrayPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
 import { Autocomplete, Chip, TextField as TextField5 } from "@elementor/ui";
 var SIZE6 = "tiny";
 var ChipsControl = createControl(({ options }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil);
-  const selectedValues = (value || []).map((item) => stringPropTypeUtil5.extract(item)).filter((val) => val !== null);
+  const selectedValues = (value || []).map((item) => stringPropTypeUtil6.extract(item)).filter((val) => val !== null);
   const selectedOptions = selectedValues.map((val) => options.find((opt) => opt.value === val)).filter((opt) => opt !== void 0);
   const handleChange = (_, newValue) => {
-    const values = newValue.map((option) => stringPropTypeUtil5.create(option.value));
+    const values = newValue.map((option) => stringPropTypeUtil6.create(option.value));
     setValue(values);
   };
   return /* @__PURE__ */ React51.createElement(ControlActions, null, /* @__PURE__ */ React51.createElement(
@@ -2453,11 +2539,11 @@ var ChipsControl = createControl(({ options }) => {
 
 // src/controls/toggle-control.tsx
 import * as React55 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
 import * as React53 from "react";
-import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef7, useState as useState7 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef8, useState as useState7 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
@@ -2530,7 +2616,7 @@ var ToggleButtonGroupUi = React53.forwardRef(
     const handleChange = (_, newValue) => {
       onChange(newValue);
     };
-    const getGridTemplateColumns = useMemo5(() => {
+    const getGridTemplateColumns = useMemo6(() => {
       const isOffLimits = menuItems?.length;
       const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
       const templateColumnsSuffix = isOffLimits ? "auto" : "";
@@ -2629,7 +2715,7 @@ var SplitButtonGroup = ({
 }) => {
   const previewButton = usePreviewButton(items2, value);
   const [isMenuOpen, setIsMenuOpen] = useState7(false);
-  const menuButtonRef = useRef7(null);
+  const menuButtonRef = useRef8(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -2700,7 +2786,7 @@ var usePreviewButton = (items2, value) => {
   const [previewButton, setPreviewButton] = useState7(
     items2.find((item) => item.value === value) ?? items2[0]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     const selectedButton = items2.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -2741,7 +2827,7 @@ var ToggleControl = createControl(
     maxItems,
     convertOptions = false
   }) => {
-    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil6);
+    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil7);
     const processedOptions = convertOptions ? convertToggleOptionsToAtomic(options) : options;
     const exclusiveValues = processedOptions.filter((option) => option.exclusive).map((option) => option.value);
     const handleNonExclusiveToggle = (selectedValues) => {
@@ -2797,7 +2883,8 @@ var NumberControl = createControl(
     min = -Number.MAX_SAFE_INTEGER,
     step = 1,
     shouldForceInt = false,
-    startIcon
+    startIcon,
+    disabled: inputDisabled
   }) => {
     const { value, setValue, placeholder, disabled, restoreValue, propType } = useBoundProp(numberPropTypeUtil);
     const handleChange = (event) => {
@@ -2823,14 +2910,14 @@ var NumberControl = createControl(
         size: "tiny",
         type: "number",
         fullWidth: true,
-        disabled,
+        disabled: inputDisabled ?? disabled,
         value: isEmptyOrNaN(value) ? "" : value,
         onInput: handleChange,
         onBlur: restoreValue,
         placeholder: labelPlaceholder ?? (isEmptyOrNaN(placeholder) ? "" : String(placeholder)),
         inputProps: { step, min },
         InputProps: {
-          startAdornment: startIcon ? /* @__PURE__ */ React56.createElement(InputAdornment3, { position: "start", disabled }, startIcon) : void 0,
+          startAdornment: startIcon ? /* @__PURE__ */ React56.createElement(InputAdornment3, { position: "start", disabled: inputDisabled ?? disabled }, startIcon) : void 0,
           endAdornment: renderSuffix(propType)
         }
       }
@@ -2840,7 +2927,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 import * as React57 from "react";
-import { useId as useId2, useRef as useRef8 } from "react";
+import { useId as useId2, useRef as useRef9 } from "react";
 import { bindPopover as bindPopover3, bindToggle, Box as Box7, Grid as Grid8, Popover as Popover3, Stack as Stack7, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
 function EqualUnequalSizesControl({
@@ -2852,7 +2939,7 @@ function EqualUnequalSizesControl({
 }) {
   const popupId = useId2();
   const popupState = usePopupState4({ variant: "popover", popupId });
-  const rowRefs = [useRef8(null), useRef8(null)];
+  const rowRefs = [useRef9(null), useRef9(null)];
   const { propType: multiSizePropType, disabled: multiSizeDisabled } = useBoundProp(multiSizePropTypeUtil);
   const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
   const getMultiSizeValues = (sourceValue) => {
@@ -2947,25 +3034,25 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
 
 // src/controls/linked-dimensions-control.tsx
 import * as React64 from "react";
-import { useLayoutEffect, useRef as useRef11, useState as useState9 } from "react";
+import { useLayoutEffect, useRef as useRef12, useState as useState9 } from "react";
 import {
   dimensionsPropTypeUtil,
   sizePropTypeUtil as sizePropTypeUtil5
 } from "@elementor/editor-props";
-import { useActiveBreakpoint as useActiveBreakpoint3 } from "@elementor/editor-responsive";
+import { useActiveBreakpoint as useActiveBreakpoint4 } from "@elementor/editor-responsive";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
 import { Grid as Grid9, Stack as Stack8, Tooltip as Tooltip6 } from "@elementor/ui";
 import { __ as __20, sprintf as sprintf2 } from "@wordpress/i18n";
 
 // src/controls/size-control/unstable-size-control.tsx
 import * as React63 from "react";
-import { useRef as useRef10 } from "react";
+import { useRef as useRef11 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 
 // src/controls/size-control/size-component.tsx
 import * as React62 from "react";
-import { useEffect as useEffect10 } from "react";
-import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
+import { useEffect as useEffect11 } from "react";
+import { useActiveBreakpoint as useActiveBreakpoint3 } from "@elementor/editor-responsive";
 import { Box as Box8, usePopupState as usePopupState6 } from "@elementor/ui";
 
 // src/controls/size-control/size-field.tsx
@@ -3034,7 +3121,7 @@ var isNumericValue = (value) => {
 };
 
 // src/controls/size-control/hooks/use-size-value.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 
 // src/controls/size-control/utils/resolve-size-value.ts
 var DEFAULT_SIZE2 = "";
@@ -3086,10 +3173,10 @@ var sanitizeSize = (size) => {
 };
 
 // src/controls/size-control/hooks/use-unit-sync.ts
-import { useEffect as useEffect8, useState as useState8 } from "react";
+import { useEffect as useEffect9, useState as useState8 } from "react";
 var useUnitSync = ({ sizeValue, setUnit, persistWhen }) => {
   const [state, setState] = useState8(sizeValue.unit);
-  useEffect8(() => {
+  useEffect9(() => {
     if (sizeValue.unit !== state) {
       setState(sizeValue.unit);
     }
@@ -3110,7 +3197,7 @@ var useSizeValue = ({
   units: units2,
   defaultUnit
 }) => {
-  const resolvedValue = useMemo6(
+  const resolvedValue = useMemo7(
     () => resolveSizeValue(value, { units: units2, defaultUnit }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [value?.size, value?.unit, defaultUnit]
@@ -3335,7 +3422,7 @@ var SizeField = ({
           }
         ))
       },
-      inputProps: { min, step: "any", "arial-label": ariaLabel }
+      inputProps: { min, step: "any", "aria-label": ariaLabel }
     }
   );
 };
@@ -3351,15 +3438,15 @@ var shouldHighlightUnit = (value) => {
 
 // src/controls/size-control/ui/text-field-popover.tsx
 import * as React61 from "react";
-import { useEffect as useEffect9, useRef as useRef9 } from "react";
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
 import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
 import { MathFunctionIcon as MathFunctionIcon4 } from "@elementor/icons";
 import { bindPopover as bindPopover4, Popover as Popover4, TextField as TextField6 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 var SIZE7 = "tiny";
 var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) => {
-  const inputRef = useRef9(null);
-  useEffect9(() => {
+  const inputRef = useRef10(null);
+  useEffect10(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => {
         if (inputRef.current) {
@@ -3423,10 +3510,10 @@ var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) =>
 // src/controls/size-control/size-component.tsx
 var SizeComponent = ({ anchorRef, SizeFieldWrapper = React62.Fragment, ...sizeFieldProps }) => {
   const popupState = usePopupState6({ variant: "popover" });
-  const activeBreakpoint = useActiveBreakpoint2();
+  const activeBreakpoint = useActiveBreakpoint3();
   const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
   const hasCustomUnitOption = sizeFieldProps.units.includes(EXTENDED_UNITS.custom);
-  useEffect10(() => {
+  useEffect11(() => {
     if (popupState && popupState.isOpen) {
       popupState.close();
     }
@@ -3563,7 +3650,7 @@ var UnstableSizeControl = createControl(
       placeholder: boundPropPlaceholder,
       restoreValue
     } = useBoundProp(sizePropTypeUtil4);
-    const lastNonAutoValue = useRef10(null);
+    const lastNonAutoValue = useRef11(null);
     const { sizeValue, placeholder } = resolveBoundPropValue(
       value ?? lastNonAutoValue.current,
       boundPropPlaceholder,
@@ -3620,7 +3707,7 @@ var isTransitioningFromExtendedUnit = (nextValue, previousValue) => {
 
 // src/controls/linked-dimensions-control.tsx
 var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
-  const gridRowRefs = [useRef11(null), useRef11(null)];
+  const gridRowRefs = [useRef12(null), useRef12(null)];
   const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil5);
   const {
     value: dimensionsValue,
@@ -3640,7 +3727,7 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, min }) => {
     return true;
   };
   const [isLinked, setIsLinked] = useState9(() => inferIsLinked());
-  const activeBreakpoint = useActiveBreakpoint3();
+  const activeBreakpoint = useActiveBreakpoint4();
   const isCurrentlyDimensions = dimensionsPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
   useLayoutEffect(() => {
     setIsLinked(inferIsLinked);
@@ -3813,15 +3900,15 @@ function getCssDimensionProps(label, isSiteRtl) {
 
 // src/controls/font-family-control/font-family-control.tsx
 import * as React66 from "react";
-import { useMemo as useMemo7 } from "react";
-import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
+import { useMemo as useMemo8 } from "react";
+import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon2, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover5, bindTrigger as bindTrigger4, Popover as Popover5, UnstableTag as UnstableTag2, usePopupState as usePopupState7 } from "@elementor/ui";
 import { __ as __22 } from "@wordpress/i18n";
 
 // src/components/item-selector.tsx
 import * as React65 from "react";
-import { useCallback as useCallback3, useEffect as useEffect11, useState as useState10 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect12, useState as useState10 } from "react";
 import { PopoverBody, PopoverHeader as PopoverHeader3, PopoverMenuList, SearchField } from "@elementor/editor-ui";
 import { Box as Box9, Divider as Divider2, Link, Stack as Stack9, Typography as Typography5 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
@@ -3975,7 +4062,7 @@ var ItemList = ({
 };
 var useDebounce = (fn, delay) => {
   const [debouncedFn] = useState10(() => debounce(fn, delay));
-  useEffect11(() => () => debouncedFn.cancel(), [debouncedFn]);
+  useEffect12(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -3993,10 +4080,10 @@ var FontFamilyControl = createControl(
       setValue: setFontFamily,
       disabled,
       placeholder
-    } = useBoundProp(stringPropTypeUtil7);
+    } = useBoundProp(stringPropTypeUtil8);
     const popoverState = usePopupState7({ variant: "popover" });
     const isShowingPlaceholder = !fontFamily && placeholder;
-    const mapFontSubs = useMemo7(() => {
+    const mapFontSubs = useMemo8(() => {
       return fontFamilies.map(({ label, fonts }) => ({
         label,
         items: fonts
@@ -4051,11 +4138,11 @@ var FontFamilyControl = createControl(
 
 // src/controls/url-control.tsx
 import * as React67 from "react";
-import { urlPropTypeUtil } from "@elementor/editor-props";
+import { urlPropTypeUtil as urlPropTypeUtil2 } from "@elementor/editor-props";
 import { TextField as TextField7 } from "@elementor/ui";
 var UrlControl = createControl(
   ({ placeholder: propPlaceholder, ariaLabel }) => {
-    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(urlPropTypeUtil);
+    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(urlPropTypeUtil2);
     const handleChange = (event) => setValue(event.target.value);
     const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
     return /* @__PURE__ */ React67.createElement(ControlActions, null, /* @__PURE__ */ React67.createElement(
@@ -4077,7 +4164,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 import * as React72 from "react";
-import { useEffect as useEffect12, useMemo as useMemo9, useState as useState12 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo10, useState as useState12 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
@@ -4151,12 +4238,12 @@ var RestrictedLinkInfotip = ({
 
 // src/controls/query-control.tsx
 import * as React70 from "react";
-import { useMemo as useMemo8, useState as useState11 } from "react";
+import { useMemo as useMemo9, useState as useState11 } from "react";
 import {
   numberPropTypeUtil as numberPropTypeUtil2,
   queryPropTypeUtil,
-  stringPropTypeUtil as stringPropTypeUtil8,
-  urlPropTypeUtil as urlPropTypeUtil2
+  stringPropTypeUtil as stringPropTypeUtil9,
+  urlPropTypeUtil as urlPropTypeUtil3
 } from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { SearchIcon } from "@elementor/icons";
@@ -4297,7 +4384,7 @@ function factoryFilter(newValue, options, minInputLength) {
 // src/controls/query-control.tsx
 var QueryControl = createControl((props) => {
   const { value: queryValue, setValue: setQueryValue } = useBoundProp(queryPropTypeUtil);
-  const { value: urlValue, setValue: setUrlValue, placeholder: urlPlaceholder } = useBoundProp(urlPropTypeUtil2);
+  const { value: urlValue, setValue: setUrlValue, placeholder: urlPlaceholder } = useBoundProp(urlPropTypeUtil3);
   const {
     allowCustomValues = true,
     queryOptions: { url, params = {} },
@@ -4317,7 +4404,7 @@ var QueryControl = createControl((props) => {
     }
     const newQueryValue = {
       id: numberPropTypeUtil2.create(newValue),
-      label: stringPropTypeUtil8.create(findMatchingOption(options, newValue)?.label || null)
+      label: stringPropTypeUtil9.create(findMatchingOption(options, newValue)?.label || null)
     };
     setQueryValue(newQueryValue);
     onSetValue?.(queryPropTypeUtil.create(newQueryValue));
@@ -4330,7 +4417,7 @@ var QueryControl = createControl((props) => {
       return;
     }
     setUrlValue(trimmedValue);
-    onSetValue?.(urlPropTypeUtil2.create(trimmedValue));
+    onSetValue?.(urlPropTypeUtil3.create(trimmedValue));
     updateOptions(newValue);
   };
   const updateOptions = (newValue) => {
@@ -4340,7 +4427,7 @@ var QueryControl = createControl((props) => {
     }
     debounceFetch({ ...params, term: newValue });
   };
-  const debounceFetch = useMemo8(
+  const debounceFetch = useMemo9(
     () => debounce2(
       (queryParams) => fetchOptions(url, queryParams).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -4438,7 +4525,7 @@ var LinkControl = createControl((props) => {
     getLinkInLinkRestriction(elementId, value ?? linkPlaceholder)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
-  const debouncedCheckRestriction = useMemo9(
+  const debouncedCheckRestriction = useMemo10(
     () => debounce3(() => {
       const newRestriction = getLinkInLinkRestriction(elementId, value ?? linkPlaceholder);
       if (newRestriction.shouldRestrict && isActive && !linkPlaceholder) {
@@ -4448,7 +4535,7 @@ var LinkControl = createControl((props) => {
     }, 300),
     [elementId, isActive, value, linkPlaceholder]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     debouncedCheckRestriction();
     const handleInlineLinkChanged = (event) => {
       const customEvent = event;
@@ -4524,7 +4611,7 @@ var LinkControl = createControl((props) => {
 // src/controls/html-tag-control.tsx
 import * as React74 from "react";
 import { getElementLabel } from "@elementor/editor-elements";
-import { stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { Select as Select2, styled as styled8, Typography as Typography6 } from "@elementor/ui";
 import { __ as __26 } from "@wordpress/i18n";
@@ -4582,7 +4669,7 @@ var HtmlTagControl = createControl((props) => {
     fallbackLabels = {},
     context: { elementId }
   } = props;
-  const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil9);
+  const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil10);
   const handleChange = (event) => {
     const newValue = event.target.value || null;
     onChange?.(newValue, value);
@@ -4628,17 +4715,17 @@ var HtmlTagControl = createControl((props) => {
 
 // src/controls/gap-control.tsx
 import * as React75 from "react";
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef12, useState as useState13 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef13, useState as useState13 } from "react";
 import {
   layoutDirectionPropTypeUtil,
   sizePropTypeUtil as sizePropTypeUtil6
 } from "@elementor/editor-props";
-import { useActiveBreakpoint as useActiveBreakpoint4 } from "@elementor/editor-responsive";
+import { useActiveBreakpoint as useActiveBreakpoint5 } from "@elementor/editor-responsive";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid11, Stack as Stack11, Tooltip as Tooltip7 } from "@elementor/ui";
 import { __ as __27 } from "@wordpress/i18n";
 var GapControl = ({ label }) => {
-  const stackRef = useRef12(null);
+  const stackRef = useRef13(null);
   const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil6);
   const {
     value: directionValue,
@@ -4659,7 +4746,7 @@ var GapControl = ({ label }) => {
   };
   const [isLinked, setIsLinked] = useState13(() => inferIsLinked());
   const isCurrentlyDirection = layoutDirectionPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
-  const activeBreakpoint = useActiveBreakpoint4();
+  const activeBreakpoint = useActiveBreakpoint5();
   useLayoutEffect2(() => {
     setIsLinked(inferIsLinked());
   }, [activeBreakpoint, isCurrentlyDirection]);
@@ -4753,8 +4840,8 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 import * as React76 from "react";
-import { useEffect as useEffect13, useState as useState14 } from "react";
-import { stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
+import { useEffect as useEffect14, useState as useState14 } from "react";
+import { stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
 import { Grid as Grid12, Select as Select3, Stack as Stack12, TextField as TextField9 } from "@elementor/ui";
@@ -4776,7 +4863,7 @@ var AspectRatioControl = createControl(({ label }) => {
     setValue: setAspectRatioValue,
     disabled,
     placeholder: externalPlaceholder
-  } = useBoundProp(stringPropTypeUtil10);
+  } = useBoundProp(stringPropTypeUtil11);
   const aspectRatioValue = currentPropValue ?? externalPlaceholder;
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
@@ -4786,7 +4873,7 @@ var AspectRatioControl = createControl(({ label }) => {
   const [selectedValue, setSelectedValue] = useState14(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  useEffect13(() => {
+  useEffect14(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -4875,7 +4962,7 @@ var AspectRatioControl = createControl(({ label }) => {
 import * as React78 from "react";
 import { useState as useState16 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
-import { svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil3 } from "@elementor/editor-props";
+import { svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
 import { Button as Button5, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled9, ThemeProvider } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
@@ -4985,7 +5072,7 @@ var SvgMediaControl = createControl(() => {
           $$type: "image-attachment-id",
           value: selectedAttachment.id
         },
-        url: urlPropTypeUtil3.create(selectedAttachment.url)
+        url: urlPropTypeUtil4.create(selectedAttachment.url)
       });
     }
   });
@@ -5167,7 +5254,7 @@ import {
   colorStopPropTypeUtil,
   gradientColorStopPropTypeUtil,
   numberPropTypeUtil as numberPropTypeUtil3,
-  stringPropTypeUtil as stringPropTypeUtil11
+  stringPropTypeUtil as stringPropTypeUtil12
 } from "@elementor/editor-props";
 import { UnstableGradientBox } from "@elementor/ui";
 var BackgroundGradientColorControl = createControl(() => {
@@ -5175,13 +5262,13 @@ var BackgroundGradientColorControl = createControl(() => {
   const handleChange = (newValue) => {
     const transformedValue = createTransformableValue(newValue);
     if (transformedValue.positions) {
-      transformedValue.positions = stringPropTypeUtil11.create(newValue.positions.join(" "));
+      transformedValue.positions = stringPropTypeUtil12.create(newValue.positions.join(" "));
     }
     setValue(transformedValue);
   };
   const createTransformableValue = (newValue) => ({
     ...newValue,
-    type: stringPropTypeUtil11.create(newValue.type),
+    type: stringPropTypeUtil12.create(newValue.type),
     angle: numberPropTypeUtil3.create(newValue.angle),
     stops: gradientColorStopPropTypeUtil.create(
       newValue.stops.map(
@@ -5217,7 +5304,7 @@ var BackgroundGradientColorControl = createControl(() => {
   );
 });
 var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
-  type: stringPropTypeUtil11.create("linear"),
+  type: stringPropTypeUtil12.create("linear"),
   angle: numberPropTypeUtil3.create(180),
   stops: gradientColorStopPropTypeUtil.create([
     colorStopPropTypeUtil.create({
@@ -5256,8 +5343,8 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 import * as React82 from "react";
-import { useRef as useRef13 } from "react";
-import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
+import { useRef as useRef14 } from "react";
+import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
 import { Grid as Grid14, Select as Select4 } from "@elementor/ui";
@@ -5276,9 +5363,9 @@ var backgroundPositionOptions = [
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil12);
+  const stringPropContext = useBoundProp(stringPropTypeUtil13);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef13(null);
+  const rowRef = useRef14(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -5351,8 +5438,8 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 import * as React84 from "react";
-import { useRef as useRef14 } from "react";
-import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
+import { useRef as useRef15 } from "react";
+import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
   ArrowsMaximizeIcon,
@@ -5391,9 +5478,9 @@ var sizeControlOptions = [
 ];
 var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil13);
+  const stringPropContext = useBoundProp(stringPropTypeUtil14);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef14(null);
+  const rowRef = useRef15(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -5428,7 +5515,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -5453,7 +5540,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef15({
+  const valuesHistory = useRef16({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -5698,7 +5785,7 @@ var BackgroundClipField = () => {
 
 // src/controls/repeatable-control.tsx
 import * as React87 from "react";
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
 import { Box as Box15 } from "@elementor/ui";
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -5719,11 +5806,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = useMemo10(
+    const childArrayPropTypeUtil2 = useMemo11(
       () => createArrayPropUtils(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = useMemo10(
+    const contextValue = useMemo11(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -5855,11 +5942,11 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React88 from "react";
-import { useMemo as useMemo11, useState as useState17 } from "react";
+import { useMemo as useMemo12, useState as useState17 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
-  stringPropTypeUtil as stringPropTypeUtil14
+  stringPropTypeUtil as stringPropTypeUtil15
 } from "@elementor/editor-props";
 import { FormHelperText, FormLabel as FormLabel3, Grid as Grid18 } from "@elementor/ui";
 import { __ as __38 } from "@wordpress/i18n";
@@ -5898,7 +5985,7 @@ var KeyValueControl = createControl((props = {}) => {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = useMemo11(
+  const [keyRegex, valueRegex, errMsg] = useMemo12(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -5931,7 +6018,7 @@ var KeyValueControl = createControl((props = {}) => {
       });
       return;
     }
-    const extractedValue = stringPropTypeUtil14.extract(newChangedValue);
+    const extractedValue = stringPropTypeUtil15.extract(newChangedValue);
     setSessionState((prev) => ({
       ...prev,
       [fieldType]: extractedValue
@@ -5971,7 +6058,7 @@ var KeyValueControl = createControl((props = {}) => {
 
 // src/controls/position-control.tsx
 import * as React89 from "react";
-import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil15 } from "@elementor/editor-props";
+import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
 import { Grid as Grid19, Select as Select5 } from "@elementor/ui";
@@ -5990,8 +6077,9 @@ var positionOptions = [
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil15);
+  const stringPropContext = useBoundProp(stringPropTypeUtil16);
   const isCustom = !!positionContext.value;
+  const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -6004,9 +6092,11 @@ var PositionControl = () => {
     Select5,
     {
       size: "tiny",
+      displayEmpty: true,
       disabled: stringPropContext.disabled,
       value: (positionContext.value ? "custom" : stringPropContext.value) ?? "",
       onChange: handlePositionChange,
+      renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
       fullWidth: true
     },
     positionOptions.map(({ label, value }) => /* @__PURE__ */ React89.createElement(MenuListItem7, { key: value, value: value ?? "" }, label))
@@ -6027,7 +6117,7 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 import * as React102 from "react";
-import { useRef as useRef23 } from "react";
+import { useRef as useRef24 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
 import { bindTrigger as bindTrigger5, Box as Box19, IconButton as IconButton7, Tooltip as Tooltip8, Typography as Typography7, usePopupState as usePopupState8 } from "@elementor/ui";
@@ -6091,7 +6181,7 @@ import { __ as __44 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
 import * as React91 from "react";
-import { useRef as useRef16 } from "react";
+import { useRef as useRef17 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
 import { Grid as Grid21 } from "@elementor/ui";
@@ -6138,7 +6228,7 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
-  const rowRefs = [useRef16(null), useRef16(null), useRef16(null)];
+  const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
   return /* @__PURE__ */ React91.createElement(Grid21, { container: true, spacing: 1.5 }, /* @__PURE__ */ React91.createElement(PropProvider, { ...context }, /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React91.createElement(
     AxisRow,
     {
@@ -6153,7 +6243,7 @@ var Move = () => {
 
 // src/controls/transform-control/functions/rotate.tsx
 import * as React92 from "react";
-import { useRef as useRef17 } from "react";
+import { useRef as useRef18 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
 import { Grid as Grid22 } from "@elementor/ui";
@@ -6178,7 +6268,7 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
-  const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
+  const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
   return /* @__PURE__ */ React92.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(PropProvider, { ...context }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React92.createElement(
     AxisRow,
     {
@@ -6192,7 +6282,7 @@ var Rotate = () => {
 
 // src/controls/transform-control/functions/scale.tsx
 import * as React94 from "react";
-import { useRef as useRef18 } from "react";
+import { useRef as useRef19 } 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";
@@ -6225,13 +6315,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
-  const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
+  const rowRefs = [useRef19(null), useRef19(null), useRef19(null)];
   return /* @__PURE__ */ React94.createElement(Grid24, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React94.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
 import * as React95 from "react";
-import { useRef as useRef19 } from "react";
+import { useRef as useRef20 } 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";
@@ -6251,7 +6341,7 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
-  const rowRefs = [useRef19(null), useRef19(null), useRef19(null)];
+  const rowRefs = [useRef20(null), useRef20(null), useRef20(null)];
   return /* @__PURE__ */ React95.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React95.createElement(
     AxisRow,
     {
@@ -6264,7 +6354,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-import { useRef as useRef20 } from "react";
+import { useRef as useRef21 } from "react";
 import {
   moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
   rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
@@ -6296,7 +6386,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
-  const valuesHistory = useRef20({
+  const valuesHistory = useRef21({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -6440,7 +6530,7 @@ import { __ as __48 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 import * as React99 from "react";
-import { useRef as useRef21 } from "react";
+import { useRef as useRef22 } from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid26, Stack as Stack15 } from "@elementor/ui";
 import { __ as __46 } from "@wordpress/i18n";
@@ -6472,13 +6562,13 @@ var PerspectiveOriginControlProvider = () => {
   return /* @__PURE__ */ React99.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React99.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = useRef21(null);
+  const rowRef = useRef22(null);
   return /* @__PURE__ */ React99.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React99.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React99.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
 import * as React100 from "react";
-import { useRef as useRef22 } from "react";
+import { useRef as useRef23 } from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid27, Stack as Stack16 } from "@elementor/ui";
 import { __ as __47 } from "@wordpress/i18n";
@@ -6506,8 +6596,8 @@ var TransformOriginControl = () => {
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
-  const rowRef = useRef22(null);
-  return /* @__PURE__ */ React100.createElement(PropProvider, { ...context }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React100.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React100.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
+  const rowRef = useRef23(null);
+  return /* @__PURE__ */ React100.createElement(PropProvider, { ...context }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React100.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React100.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
@@ -6554,7 +6644,7 @@ var SIZE10 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(transformPropTypeUtil);
-    const headerRef = useRef23(null);
+    const headerRef = useRef24(null);
     const popupState = usePopupState8({ variant: "popover" });
     return /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(
       TransformSettingsControl,
@@ -6634,7 +6724,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React105 from "react";
-import { useEffect as useEffect14, useMemo as useMemo14, useState as useState18 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo15, useState as useState18 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils2,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -6646,15 +6736,15 @@ import { __ as __52 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
 import * as React103 from "react";
-import { useMemo as useMemo12, useRef as useRef24 } from "react";
+import { useMemo as useMemo13, useRef as useRef25 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid28 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
-    const rowRef = useRef24(null);
+    const rowRef = useRef25(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = useMemo12(() => {
+    const currentSizeConfig = useMemo13(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -6867,7 +6957,7 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 import * as React104 from "react";
-import { useMemo as useMemo13, useRef as useRef25 } from "react";
+import { useMemo as useMemo14, useRef as useRef26 } 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";
@@ -6954,9 +7044,9 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = useRef25(null);
+  const defaultRef = useRef26(null);
   const popoverState = usePopupState9({ variant: "popover" });
-  const disabledCategories = useMemo13(() => {
+  const disabledCategories = useMemo14(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -7185,11 +7275,11 @@ var TransitionRepeaterControl = createControl(
     const [recentlyUsedList, setRecentlyUsedList] = useState18([]);
     const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo14(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo15(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = useMemo14(() => {
+    const allowedTransitionSet = useMemo15(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -7200,7 +7290,7 @@ var TransitionRepeaterControl = createControl(
       });
       return set;
     }, [proInstalled]);
-    useEffect14(() => {
+    useEffect15(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -7212,10 +7302,10 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    useEffect14(() => {
+    useEffect15(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = useMemo14(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = useMemo15(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React105.createElement(
       RepeatableControl,
@@ -7246,7 +7336,7 @@ var TransitionRepeaterControl = createControl(
 // src/controls/date-time-control.tsx
 import * as React106 from "react";
 import * as dayjs from "dayjs";
-import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
+import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
 import { Box as Box22, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
 var DATE_FORMAT = "YYYY-MM-DD";
@@ -7295,7 +7385,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
   return /* @__PURE__ */ React106.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React106.createElement(ControlActions, null, /* @__PURE__ */ React106.createElement(LocalizationProvider, null, /* @__PURE__ */ React106.createElement(Box22, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React106.createElement(
     DatePicker,
     {
-      value: parseDateValue(stringPropTypeUtil16.extract(value?.date)),
+      value: parseDateValue(stringPropTypeUtil17.extract(value?.date)),
       onChange: (v) => handleChange({ date: v }, { bind: "date" }),
       disabled: inputDisabled,
       slotProps: {
@@ -7307,7 +7397,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
   )), /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React106.createElement(
     TimePicker,
     {
-      value: parseTimeValue(stringPropTypeUtil16.extract(value?.time)),
+      value: parseTimeValue(stringPropTypeUtil17.extract(value?.time)),
       onChange: (v) => handleChange({ time: v }, { bind: "time" }),
       disabled: inputDisabled,
       slotProps: {
@@ -7319,16 +7409,193 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
   ))))));
 });
 
-// src/controls/inline-editing-control.tsx
+// src/controls/date-range-control.tsx
 import * as React108 from "react";
-import { useCallback as useCallback4, useEffect as useEffect16, useMemo as useMemo15 } from "react";
-import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
+import { dateRangePropTypeUtil, dateStringPropTypeUtil as dateStringPropTypeUtil2 } from "@elementor/editor-props";
+import { FormHelperText as FormHelperText2, Grid as Grid29, Stack as Stack17 } from "@elementor/ui";
+import { __ as __53 } from "@wordpress/i18n";
+
+// src/controls/date-string-control.tsx
+import * as React107 from "react";
+import { dateStringPropTypeUtil } from "@elementor/editor-props";
+import { DatePicker as DatePicker2, LocalizationProvider as LocalizationProvider2 } from "@elementor/ui";
+
+// src/utils/date-time.ts
+import * as dayjs2 from "dayjs";
+var DATE_FORMAT2 = "YYYY-MM-DD";
+var TIME_FORMAT2 = "HH:mm";
+function isValidDayjs(value) {
+  return !!value && typeof value.isValid === "function" && value.isValid();
+}
+function parseDateString(raw) {
+  if (!raw) {
+    return null;
+  }
+  const parsed = dayjs2.default(raw);
+  return isValidDayjs(parsed) ? parsed : null;
+}
+function parseTimeString(raw) {
+  if (!raw) {
+    return null;
+  }
+  const [hours, minutes, seconds] = raw.split(":");
+  const h = Number.parseInt(hours ?? "", 10);
+  const m = Number.parseInt(minutes ?? "", 10);
+  const s = Number.parseInt(seconds ?? "0", 10);
+  if (Number.isNaN(h) || Number.isNaN(m)) {
+    return null;
+  }
+  const base = dayjs2.default();
+  return base.hour(h).minute(m).second(Number.isNaN(s) ? 0 : s).millisecond(0);
+}
+
+// src/controls/date-string-control.tsx
+var DateStringControl = createControl(
+  ({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
+    const { value, setValue, disabled } = useBoundProp(dateStringPropTypeUtil);
+    const isDisabled = inputDisabled ?? disabled;
+    const slotProps = {
+      textField: {
+        size: "tiny",
+        fullWidth: true,
+        error,
+        inputProps: ariaLabel ? { "aria-label": ariaLabel } : void 0
+      },
+      openPickerButton: { size: "tiny" },
+      openPickerIcon: { fontSize: "tiny" }
+    };
+    const handleChange = (newValue, format) => {
+      if (!newValue) {
+        setValue(null);
+        return;
+      }
+      if (coerceInvalidToNull && !isValidDayjs(newValue)) {
+        setValue(null);
+        return;
+      }
+      setValue(newValue.format(format));
+    };
+    return /* @__PURE__ */ React107.createElement(LocalizationProvider2, null, /* @__PURE__ */ React107.createElement(ControlActions, null, /* @__PURE__ */ React107.createElement(
+      DatePicker2,
+      {
+        value: parseDateString(value ?? ""),
+        onChange: (newValue) => handleChange(newValue, DATE_FORMAT2),
+        disabled: isDisabled,
+        slotProps
+      }
+    )));
+  }
+);
+
+// src/controls/date-range-control.tsx
+var RANGE_LABELS = {
+  min: __53("Min date", "elementor"),
+  max: __53("Max date", "elementor")
+};
+var isMaxBeforeMin = (minIso, maxIso) => {
+  if (!minIso || !maxIso) {
+    return false;
+  }
+  return maxIso < minIso;
+};
+var RANGE_ERROR_MESSAGE = __53("Max date must be on or after Min date", "elementor");
+var DateRangeControl = createControl(() => {
+  const { value, setValue, ...propContext } = useBoundProp(dateRangePropTypeUtil);
+  const minString = dateStringPropTypeUtil2.extract(value?.min);
+  const maxString = dateStringPropTypeUtil2.extract(value?.max);
+  const hasInvalidRange = isMaxBeforeMin(minString, maxString);
+  return /* @__PURE__ */ React108.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React108.createElement(Stack17, { gap: 0.75 }, /* @__PURE__ */ React108.createElement(Stack17, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React108.createElement(Grid29, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React108.createElement(Grid29, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React108.createElement(Grid29, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(
+    BoundDateStringControl,
+    {
+      bind: "min",
+      ariaLabel: RANGE_LABELS.min,
+      error: hasInvalidRange
+    }
+  ))), /* @__PURE__ */ React108.createElement(Grid29, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React108.createElement(Grid29, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React108.createElement(Grid29, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(
+    BoundDateStringControl,
+    {
+      bind: "max",
+      ariaLabel: RANGE_LABELS.max,
+      error: hasInvalidRange
+    }
+  )))), hasInvalidRange && /* @__PURE__ */ React108.createElement(FormHelperText2, { error: true }, RANGE_ERROR_MESSAGE)));
+});
+var BoundDateStringControl = ({
+  bind,
+  ariaLabel,
+  error
+}) => {
+  return /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React108.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
+};
+
+// src/controls/time-string-control.tsx
+import * as React109 from "react";
+import { timeStringPropTypeUtil } from "@elementor/editor-props";
+import { LocalizationProvider as LocalizationProvider3, TimePicker as TimePicker2 } from "@elementor/ui";
+var TimeStringControl = createControl(
+  ({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
+    const { value, setValue, disabled } = useBoundProp(timeStringPropTypeUtil);
+    const isDisabled = inputDisabled ?? disabled;
+    const slotProps = {
+      textField: {
+        size: "tiny",
+        fullWidth: true,
+        error,
+        inputProps: ariaLabel ? { "aria-label": ariaLabel } : void 0
+      },
+      openPickerButton: { size: "tiny" },
+      openPickerIcon: { fontSize: "tiny" }
+    };
+    const handleChange = (newValue, format) => {
+      if (!newValue) {
+        setValue(null);
+        return;
+      }
+      if (coerceInvalidToNull && !isValidDayjs(newValue)) {
+        setValue(null);
+        return;
+      }
+      setValue(newValue.format(format));
+    };
+    return /* @__PURE__ */ React109.createElement(LocalizationProvider3, null, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(
+      TimePicker2,
+      {
+        value: parseTimeString(value ?? ""),
+        onChange: (newValue) => handleChange(newValue, TIME_FORMAT2),
+        disabled: isDisabled,
+        slotProps
+      }
+    )));
+  }
+);
+
+// src/controls/time-range-control.tsx
+import * as React110 from "react";
+import { timeRangePropTypeUtil } from "@elementor/editor-props";
+import { Grid as Grid30, Stack as Stack18 } from "@elementor/ui";
+import { __ as __54 } from "@wordpress/i18n";
+var RANGE_LABELS2 = {
+  min: __54("Start time", "elementor"),
+  max: __54("End time", "elementor")
+};
+var TimeRangeControl = createControl(() => {
+  const { value, setValue, ...propContext } = useBoundProp(timeRangePropTypeUtil);
+  return /* @__PURE__ */ React110.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React110.createElement(Stack18, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React110.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React110.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React110.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React110.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React110.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React110.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React110.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React110.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
+});
+var BoundTimeStringControl = ({ bind, ariaLabel }) => {
+  return /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React110.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
+};
+
+// src/controls/inline-editing-control.tsx
+import * as React112 from "react";
+import { useCallback as useCallback4, useEffect as useEffect17, useMemo as useMemo16 } from "react";
+import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil18 } from "@elementor/editor-props";
 import { Box as Box24 } from "@elementor/ui";
 import { debounce as debounce4 } from "@elementor/utils";
 
 // src/components/inline-editor.tsx
-import * as React107 from "react";
-import { useEffect as useEffect15, useRef as useRef26 } from "react";
+import * as React111 from "react";
+import { useEffect as useEffect16, useRef as useRef27 } from "react";
 import { Box as Box23 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
@@ -7366,7 +7633,7 @@ function htmlToPlainText(html) {
 var ITALIC_KEYBOARD_SHORTCUT = "i";
 var BOLD_KEYBOARD_SHORTCUT = "b";
 var UNDERLINE_KEYBOARD_SHORTCUT = "u";
-var InlineEditor = React107.forwardRef((props, ref) => {
+var InlineEditor = React111.forwardRef((props, ref) => {
   const {
     value,
     setValue,
@@ -7382,8 +7649,8 @@ var InlineEditor = React107.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = useRef26(null);
-  const onBlurRef = useRef26(onBlur);
+  const containerRef = useRef27(null);
+  const onBlurRef = useRef27(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -7477,11 +7744,11 @@ var InlineEditor = React107.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React107.createElement(Box23, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React107.createElement(EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React111.createElement(Box23, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React111.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = useRef26(false);
-  useEffect15(() => {
+  const hasMounted = useRef27(false);
+  useEffect16(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -7499,12 +7766,12 @@ var InlineEditingControl = createControl(
     props
   }) => {
     const { value, setValue, placeholder } = useBoundProp(htmlV3PropTypeUtil);
-    const content = stringPropTypeUtil17.extract(value?.content ?? null) ?? "";
-    const debouncedParse = useMemo15(
+    const content = stringPropTypeUtil18.extract(value?.content ?? null) ?? "";
+    const debouncedParse = useMemo16(
       () => debounce4((html) => {
         const parsed = parseHtmlChildren(html);
         setValue({
-          content: parsed.content ? stringPropTypeUtil17.create(parsed.content) : null,
+          content: parsed.content ? stringPropTypeUtil18.create(parsed.content) : null,
           children: parsed.children
         });
       }, CHILDREN_PARSE_DEBOUNCE_MS),
@@ -7514,15 +7781,15 @@ var InlineEditingControl = createControl(
       (newValue) => {
         const html = newValue ?? "";
         setValue({
-          content: html ? stringPropTypeUtil17.create(html) : null,
+          content: html ? stringPropTypeUtil18.create(html) : null,
           children: value?.children ?? []
         });
         debouncedParse(html);
       },
       [setValue, value?.children, debouncedParse]
     );
-    useEffect16(() => () => debouncedParse.cancel(), [debouncedParse]);
-    return /* @__PURE__ */ React108.createElement(ControlActions, null, /* @__PURE__ */ React108.createElement(
+    useEffect17(() => () => debouncedParse.cancel(), [debouncedParse]);
+    return /* @__PURE__ */ React112.createElement(ControlActions, null, /* @__PURE__ */ React112.createElement(
       Box24,
       {
         sx: {
@@ -7567,7 +7834,7 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React108.createElement(
+      /* @__PURE__ */ React112.createElement(
         InlineEditor,
         {
           value: content,
@@ -7580,19 +7847,27 @@ var InlineEditingControl = createControl(
 );
 
 // src/controls/email-form-action-control.tsx
-import * as React109 from "react";
+import * as React113 from "react";
 import { emailPropTypeUtil } from "@elementor/editor-props";
 import { CollapsibleContent, InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
-import { Box as Box25, Divider as Divider5, Grid as Grid29, Stack as Stack17 } from "@elementor/ui";
+import { Box as Box25, Divider as Divider5, Grid as Grid31, Stack as Stack19 } from "@elementor/ui";
 import { hasProInstalled as hasProInstalled3, isVersionGreaterOrEqual as isVersionGreaterOrEqual2 } from "@elementor/utils";
-import { __ as __53 } from "@wordpress/i18n";
+import { __ as __55 } from "@wordpress/i18n";
 
 // src/hooks/use-form-field-suggestions.ts
 import { getContainer, getSelectedElements as getSelectedElements3 } from "@elementor/editor-elements";
 import { isTransformable as isTransformable3 } from "@elementor/editor-props";
 import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from "@elementor/editor-v1-adapters";
-var FORM_FIELD_WIDGET_TYPES = ["e-form-input", "e-form-textarea", "e-form-checkbox"];
-function useFormFieldSuggestions() {
+var FORM_FIELD_WIDGET_TYPES = [
+  "e-form-input",
+  "e-form-textarea",
+  "e-form-checkbox",
+  "e-form-radio-button",
+  "e-form-select",
+  "e-form-date-picker",
+  "e-form-time-picker"
+];
+function useFormFieldSuggestions(options) {
   return useListenTo(
     [
       v1ReadyEvent(),
@@ -7616,6 +7891,13 @@ function useFormFieldSuggestions() {
         if (!widgetType || !FORM_FIELD_WIDGET_TYPES.includes(widgetType)) {
           return;
         }
+        if (options?.inputType) {
+          const typeProp = child.settings.get("type");
+          const typeValue = isTransformable3(typeProp) ? typeProp.value : typeProp;
+          if (typeValue !== options.inputType) {
+            return;
+          }
+        }
         const cssIdProp = child.settings.get("_cssid");
         const fieldId = isTransformable3(cssIdProp) ? cssIdProp.value : cssIdProp;
         if (fieldId && typeof fieldId === "string") {
@@ -7629,14 +7911,14 @@ function useFormFieldSuggestions() {
 }
 
 // src/controls/email-form-action-control.tsx
-var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React109.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React109.createElement(Grid29, { item: true }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React109.createElement(Grid29, { item: true }, /* @__PURE__ */ React109.createElement(TextControl, { placeholder }))));
-var SendToField = ({ placeholder }) => /* @__PURE__ */ React109.createElement(EmailField, { bind: "to", label: __53("Send to", "elementor"), placeholder });
-var SubjectField = () => /* @__PURE__ */ React109.createElement(
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React113.createElement(Grid31, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React113.createElement(Grid31, { item: true }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React113.createElement(Grid31, { item: true }, /* @__PURE__ */ React113.createElement(TextControl, { placeholder }))));
+var SendToField = ({ placeholder }) => /* @__PURE__ */ React113.createElement(EmailField, { bind: "to", label: __55("Send to", "elementor"), placeholder });
+var SubjectField = () => /* @__PURE__ */ React113.createElement(
   EmailField,
   {
     bind: "subject",
-    label: __53("Email subject", "elementor"),
-    placeholder: __53("New form submission", "elementor")
+    label: __55("Email subject", "elementor"),
+    placeholder: __55("New form submission", "elementor")
   }
 );
 var MIN_PRO_VERSION_FOR_MENTIONS = "4.1.0";
@@ -7652,66 +7934,89 @@ var shouldShowMentionsInfo = () => {
 };
 var MessageField = () => {
   const suggestions = useFormFieldSuggestions();
-  return /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React109.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React109.createElement(Grid29, { item: true }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, __53("Message", "elementor"))), /* @__PURE__ */ React109.createElement(Grid29, { item: true }, /* @__PURE__ */ React109.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React109.createElement(Grid29, { item: true }, /* @__PURE__ */ React109.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __53(
+  return /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React113.createElement(Grid31, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React113.createElement(Grid31, { item: true }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, __55("Message", "elementor"))), /* @__PURE__ */ React113.createElement(Grid31, { item: true }, /* @__PURE__ */ React113.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React113.createElement(Grid31, { item: true }, /* @__PURE__ */ React113.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __55(
     "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
     "elementor"
-  ) : __53("[all-fields] shortcode sends all fields.", "elementor")))));
+  ) : __55("[all-fields] shortcode sends all fields.", "elementor")))));
 };
-var FromEmailField = () => /* @__PURE__ */ React109.createElement(
+var FromEmailField = () => /* @__PURE__ */ React113.createElement(
   EmailField,
   {
     bind: "from",
-    label: __53("From email", "elementor"),
-    placeholder: __53("What email should appear as the sender?", "elementor")
+    label: __55("From email", "elementor"),
+    placeholder: __55("What email should appear as the sender?", "elementor")
   }
 );
-var FromNameField = () => /* @__PURE__ */ React109.createElement(
+var FromNameField = () => /* @__PURE__ */ React113.createElement(
   EmailField,
   {
     bind: "from-name",
-    label: __53("From name", "elementor"),
-    placeholder: __53("What name should appear as the sender?", "elementor")
+    label: __55("From name", "elementor"),
+    placeholder: __55("What name should appear as the sender?", "elementor")
   }
 );
-var ReplyToField = () => /* @__PURE__ */ React109.createElement(EmailField, { bind: "reply-to", label: __53("Reply-to", "elementor") });
-var CcField = () => /* @__PURE__ */ React109.createElement(EmailField, { bind: "cc", label: __53("Cc", "elementor") });
-var BccField = () => /* @__PURE__ */ React109.createElement(EmailField, { bind: "bcc", label: __53("Bcc", "elementor") });
-var MetaDataField = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React109.createElement(Stack17, { gap: 0.5 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, __53("Metadata", "elementor")), /* @__PURE__ */ React109.createElement(
+var ReplyToField = () => {
+  const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React113.createElement(Grid31, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React113.createElement(Grid31, { item: true }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, __55("Reply-to", "elementor"))), /* @__PURE__ */ React113.createElement(Grid31, { item: true }, /* @__PURE__ */ React113.createElement(
+    MentionTextAreaControl,
+    {
+      suggestions: emailSuggestions,
+      rows: 1,
+      triggerPosition: "start",
+      placeholder: __55("You can type @ to insert an email field", "elementor")
+    }
+  ))));
+};
+var CcField = () => /* @__PURE__ */ React113.createElement(EmailField, { bind: "cc", label: __55("Cc", "elementor") });
+var BccField = () => /* @__PURE__ */ React113.createElement(EmailField, { bind: "bcc", label: __55("Bcc", "elementor") });
+var MetaDataField = () => /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React113.createElement(Stack19, { gap: 0.5 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, __55("Metadata", "elementor")), /* @__PURE__ */ React113.createElement(
   ChipsControl,
   {
     options: [
-      { label: __53("Date", "elementor"), value: "date" },
-      { label: __53("Time", "elementor"), value: "time" },
-      { label: __53("Page URL", "elementor"), value: "page-url" },
-      { label: __53("User agent", "elementor"), value: "user-agent" },
-      { label: __53("Credit", "elementor"), value: "credit" }
+      { label: __55("Date", "elementor"), value: "date" },
+      { label: __55("Time", "elementor"), value: "time" },
+      { label: __55("Page URL", "elementor"), value: "page-url" },
+      { label: __55("User agent", "elementor"), value: "user-agent" },
+      { label: __55("Credit", "elementor"), value: "credit" }
     ]
   }
 )));
-var SendAsField = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React109.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React109.createElement(Grid29, { item: true }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, __53("Send as", "elementor"))), /* @__PURE__ */ React109.createElement(Grid29, { item: true }, /* @__PURE__ */ React109.createElement(
+var SendAsField = () => /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React113.createElement(Grid31, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React113.createElement(Grid31, { item: true }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, __55("Send as", "elementor"))), /* @__PURE__ */ React113.createElement(Grid31, { item: true }, /* @__PURE__ */ React113.createElement(
   SelectControl,
   {
     options: [
-      { label: __53("HTML", "elementor"), value: "html" },
-      { label: __53("Plain Text", "elementor"), value: "plain" }
+      { label: __55("HTML", "elementor"), value: "html" },
+      { label: __55("Plain Text", "elementor"), value: "plain" }
     ]
   }
 ))));
-var AdvancedSettings = () => /* @__PURE__ */ React109.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React109.createElement(Box25, { sx: { pt: 2 } }, /* @__PURE__ */ React109.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React109.createElement(FromNameField, null), /* @__PURE__ */ React109.createElement(ReplyToField, null), /* @__PURE__ */ React109.createElement(CcField, null), /* @__PURE__ */ React109.createElement(BccField, null), /* @__PURE__ */ React109.createElement(Divider5, null), /* @__PURE__ */ React109.createElement(MetaDataField, null), /* @__PURE__ */ React109.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React113.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React113.createElement(Box25, { sx: { pt: 2 } }, /* @__PURE__ */ React113.createElement(Stack19, { gap: 2 }, /* @__PURE__ */ React113.createElement(FromNameField, null), /* @__PURE__ */ React113.createElement(ReplyToField, null), /* @__PURE__ */ React113.createElement(CcField, null), /* @__PURE__ */ React113.createElement(BccField, null), /* @__PURE__ */ React113.createElement(Divider5, null), /* @__PURE__ */ React113.createElement(MetaDataField, null), /* @__PURE__ */ React113.createElement(SendAsField, null))));
 var EmailFormActionControl = createControl(({ toPlaceholder }) => {
   const { value, setValue, ...propContext } = useBoundProp(emailPropTypeUtil);
-  return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React109.createElement(ControlLabel, null, __53("Email settings", "elementor")), /* @__PURE__ */ React109.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React109.createElement(SubjectField, null), /* @__PURE__ */ React109.createElement(MessageField, null), /* @__PURE__ */ React109.createElement(FromEmailField, null), /* @__PURE__ */ React109.createElement(AdvancedSettings, null)));
+  return /* @__PURE__ */ React113.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React113.createElement(Stack19, { gap: 2 }, /* @__PURE__ */ React113.createElement(ControlLabel, null, __55("Email settings", "elementor")), /* @__PURE__ */ React113.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React113.createElement(SubjectField, null), /* @__PURE__ */ React113.createElement(MessageField, null), /* @__PURE__ */ React113.createElement(FromEmailField, null), /* @__PURE__ */ React113.createElement(AdvancedSettings, null)));
+});
+
+// src/controls/attachment-type-control.tsx
+import * as React114 from "react";
+import { InfoAlert as InfoAlert3 } from "@elementor/editor-ui";
+import { Grid as Grid32 } from "@elementor/ui";
+import { __ as __56 } from "@wordpress/i18n";
+var AttachmentTypeControl = createControl(({ label, options }) => {
+  return /* @__PURE__ */ React114.createElement(Grid32, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React114.createElement(Grid32, { item: true }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React114.createElement(Grid32, { item: true }, /* @__PURE__ */ React114.createElement(SelectControl, { options })), /* @__PURE__ */ React114.createElement(Grid32, { item: true }, /* @__PURE__ */ React114.createElement(InfoAlert3, null, __56(
+    "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
+    "elementor"
+  ))));
 });
 
 // src/components/promotions/display-conditions-control.tsx
-import * as React111 from "react";
-import { useRef as useRef27 } from "react";
+import * as React116 from "react";
+import { useRef as useRef28 } from "react";
 import { SitemapIcon } from "@elementor/icons";
-import { IconButton as IconButton8, Stack as Stack18, Tooltip as Tooltip9 } from "@elementor/ui";
-import { __ as __54 } from "@wordpress/i18n";
+import { IconButton as IconButton8, Stack as Stack20, Tooltip as Tooltip9 } from "@elementor/ui";
+import { __ as __57 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
-import * as React110 from "react";
+import * as React115 from "react";
 import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState19 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box26 } from "@elementor/ui";
@@ -7731,7 +8036,7 @@ var PromotionTrigger = forwardRef12(
       });
     }, [trackingData]);
     useImperativeHandle(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React110.createElement(React110.Fragment, null, promotion && /* @__PURE__ */ React110.createElement(
+    return /* @__PURE__ */ React115.createElement(React115.Fragment, null, promotion && /* @__PURE__ */ React115.createElement(
       PromotionInfotip,
       {
         title: promotion.title,
@@ -7745,7 +8050,7 @@ var PromotionTrigger = forwardRef12(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React110.createElement(
+      /* @__PURE__ */ React115.createElement(
         Box26,
         {
           onClick: (e) => {
@@ -7754,19 +8059,19 @@ var PromotionTrigger = forwardRef12(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React110.createElement(PromotionChip2, null)
+        children ?? /* @__PURE__ */ React115.createElement(PromotionChip2, null)
       )
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var ARIA_LABEL = __54("Display Conditions", "elementor");
+var ARIA_LABEL = __57("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = useRef27(null);
-  return /* @__PURE__ */ React111.createElement(
-    Stack18,
+  const triggerRef = useRef28(null);
+  return /* @__PURE__ */ React116.createElement(
+    Stack20,
     {
       direction: "row",
       spacing: 2,
@@ -7775,8 +8080,8 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React111.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React111.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React111.createElement(
+    /* @__PURE__ */ React116.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React116.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React116.createElement(
       IconButton8,
       {
         size: "tiny",
@@ -7789,23 +8094,23 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React111.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React116.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-import * as React112 from "react";
-import { useRef as useRef28 } from "react";
+import * as React117 from "react";
+import { useRef as useRef29 } from "react";
 import { PlusIcon as PlusIcon3 } from "@elementor/icons";
-import { Stack as Stack19, Tooltip as Tooltip10 } from "@elementor/ui";
-import { __ as __55 } from "@wordpress/i18n";
-var ARIA_LABEL2 = __55("Attributes", "elementor");
+import { Stack as Stack21, Tooltip as Tooltip10 } from "@elementor/ui";
+import { __ as __58 } from "@wordpress/i18n";
+var ARIA_LABEL2 = __58("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = useRef28(null);
-  return /* @__PURE__ */ React112.createElement(
-    Stack19,
+  const triggerRef = useRef29(null);
+  return /* @__PURE__ */ React117.createElement(
+    Stack21,
     {
       direction: "row",
       spacing: 2,
@@ -7814,8 +8119,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React112.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React112.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React117.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React117.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React117.createElement(
       PlusIcon3,
       {
         "aria-label": ARIA_LABEL2,
@@ -7829,30 +8134,29 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-import * as React113 from "react";
+import * as React118 from "react";
 import { BrushBigIcon } from "@elementor/icons";
 import { IconButton as IconButton9, styled as styled11, Tooltip as Tooltip11 } from "@elementor/ui";
 var CustomIconButton = styled11(IconButton9)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React113.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React113.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React113.createElement(BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React118.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React118.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React118.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-import * as React114 from "react";
-import { useEffect as useEffect17, useState as useState20 } from "react";
+import * as React119 from "react";
+import { useEffect as useEffect18, useState as useState20 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon4, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover8,
   bindTrigger as bindTrigger7,
   Box as Box27,
-  ClickAwayListener,
   IconButton as IconButton10,
   Infotip as Infotip4,
   Tooltip as Tooltip12,
   usePopupState as usePopupState10
 } from "@elementor/ui";
-import { __ as __56 } from "@wordpress/i18n";
+import { __ as __59 } from "@wordpress/i18n";
 var SIZE11 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -7933,7 +8237,7 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React114.createElement(
+  const addButton = /* @__PURE__ */ React119.createElement(
     IconButton10,
     {
       size: SIZE11,
@@ -7942,11 +8246,11 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": __56("Add item", "elementor")
+      "aria-label": __59("Add item", "elementor")
     },
-    /* @__PURE__ */ React114.createElement(PlusIcon4, { fontSize: SIZE11 })
+    /* @__PURE__ */ React119.createElement(PlusIcon4, { fontSize: SIZE11 })
   );
-  return /* @__PURE__ */ React114.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React114.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React114.createElement(
+  return /* @__PURE__ */ React119.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React119.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React119.createElement(
     Infotip4,
     {
       placement: "right",
@@ -7954,20 +8258,20 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React114.createElement(Box27, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React114.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React119.createElement(Box27, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React119.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React114.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React114.createElement(
+    return /* @__PURE__ */ React119.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React119.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React114.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React114.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React114.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React114.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React119.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React119.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React119.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React119.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -7981,7 +8285,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React114.createElement(
+      (props) => /* @__PURE__ */ React119.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -8022,16 +8326,17 @@ var RepeaterItem = ({
     wrappedOnPopoverClose
   );
   const triggerProps = bindTrigger7(popoverState);
-  const duplicateLabel = __56("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? __56("Show", "elementor") : __56("Hide", "elementor");
-  const removeLabel = __56("Remove", "elementor");
-  return /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(
+  usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
+  const duplicateLabel = __59("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? __59("Show", "elementor") : __59("Hide", "elementor");
+  const removeLabel = __59("Remove", "elementor");
+  return /* @__PURE__ */ React119.createElement(Box27, { sx: { display: "contents" } }, /* @__PURE__ */ React119.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": __56("Open item", "elementor"),
+      "aria-label": __59("Open item", "elementor"),
       ...triggerProps,
       onClick: (e) => {
         triggerProps.onClick(e);
@@ -8040,23 +8345,15 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React114.createElement(React114.Fragment, null, showDuplicate && /* @__PURE__ */ React114.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(IconButton10, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React114.createElement(CopyIcon2, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React114.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(IconButton10, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React114.createElement(EyeOffIcon2, { fontSize: SIZE11 }) : /* @__PURE__ */ React114.createElement(EyeIcon2, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React114.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(IconButton10, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React114.createElement(XIcon4, { fontSize: SIZE11 }))))
+      actions: /* @__PURE__ */ React119.createElement(React119.Fragment, null, showDuplicate && /* @__PURE__ */ React119.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React119.createElement(IconButton10, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React119.createElement(CopyIcon2, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React119.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React119.createElement(IconButton10, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React119.createElement(EyeOffIcon2, { fontSize: SIZE11 }) : /* @__PURE__ */ React119.createElement(EyeIcon2, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React119.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React119.createElement(IconButton10, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React119.createElement(XIcon4, { fontSize: SIZE11 }))))
     }
-  ), /* @__PURE__ */ React114.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React114.createElement(
-    ClickAwayListener,
-    {
-      mouseEvent: "onMouseDown",
-      touchEvent: "onTouchStart",
-      onClickAway: popoverProps.onClose
-    },
-    /* @__PURE__ */ React114.createElement(Box27, null, children({ anchorEl: ref }))
-  )));
+  ), /* @__PURE__ */ React119.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React119.createElement(Box27, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   const [ref, setRef] = useState20(null);
   const popoverState = usePopupState10({ variant: "popover" });
   const popoverProps = bindPopover8(popoverState);
-  useEffect17(() => {
+  useEffect18(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -8075,8 +8372,8 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-import * as React116 from "react";
-import { useEffect as useEffect19, useMemo as useMemo16, useRef as useRef30, useState as useState21 } from "react";
+import * as React121 from "react";
+import { useEffect as useEffect20, useMemo as useMemo17, useRef as useRef31, useState as useState21 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -8098,14 +8395,14 @@ import {
   usePopupState as usePopupState11
 } from "@elementor/ui";
 import { useEditorState } from "@tiptap/react";
-import { __ as __58 } from "@wordpress/i18n";
+import { __ as __61 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
-import * as React115 from "react";
-import { useEffect as useEffect18, useRef as useRef29 } from "react";
+import * as React120 from "react";
+import { useEffect as useEffect19, useRef as useRef30 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
-import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack20, TextField as TextField10, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
-import { __ as __57 } from "@wordpress/i18n";
+import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack22, TextField as TextField10, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
+import { __ as __60 } from "@wordpress/i18n";
 var UrlPopover = ({
   popupState,
   restoreValue,
@@ -8115,8 +8412,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = useRef29(null);
-  useEffect18(() => {
+  const inputRef = useRef30(null);
+  useEffect19(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -8125,7 +8422,7 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React115.createElement(
+  return /* @__PURE__ */ React120.createElement(
     Popover8,
     {
       slotProps: {
@@ -8136,30 +8433,30 @@ var UrlPopover = ({
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React115.createElement(Stack20, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React115.createElement(
+    /* @__PURE__ */ React120.createElement(Stack22, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React120.createElement(
       TextField10,
       {
         value,
         onChange,
         size: "tiny",
         fullWidth: true,
-        placeholder: __57("Type a URL", "elementor"),
+        placeholder: __60("Type a URL", "elementor"),
         inputProps: { ref: inputRef },
         color: "secondary",
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React115.createElement(Tooltip13, { title: __57("Open in a new tab", "elementor") }, /* @__PURE__ */ React115.createElement(
+    ), /* @__PURE__ */ React120.createElement(Tooltip13, { title: __60("Open in a new tab", "elementor") }, /* @__PURE__ */ React120.createElement(
       ToggleButton2,
       {
         size: "tiny",
         value: "newTab",
         selected: openInNewTab,
         onClick: onToggleNewTab,
-        "aria-label": __57("Open in a new tab", "elementor"),
+        "aria-label": __60("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React115.createElement(ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React120.createElement(ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
@@ -8168,14 +8465,14 @@ var UrlPopover = ({
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
   const [urlValue, setUrlValue] = useState21("");
   const [openInNewTab, setOpenInNewTab] = useState21(false);
-  const toolbarRef = useRef30(null);
+  const toolbarRef = useRef31(null);
   const linkPopupState = usePopupState11({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = useEditorState({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo16(() => {
+  const formatButtonsList = useMemo17(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -8212,10 +8509,10 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  useEffect19(() => {
+  useEffect20(() => {
     editor?.commands?.focus();
   }, [editor]);
-  return /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React121.createElement(
     Box28,
     {
       ref: toolbarRef,
@@ -8232,8 +8529,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         ...sx
       }
     },
-    /* @__PURE__ */ React116.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React116.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React116.createElement(
+    /* @__PURE__ */ React121.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React121.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React121.createElement(
       ToggleButtonGroup2,
       {
         value: editorState,
@@ -8255,7 +8552,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React116.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React116.createElement(
+      formatButtonsList.map((button) => /* @__PURE__ */ React121.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React121.createElement(
         ToggleButton3,
         {
           value: button.action,
@@ -8273,7 +8570,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         button.icon
       )))
     ),
-    /* @__PURE__ */ React116.createElement(
+    /* @__PURE__ */ React121.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -8296,64 +8593,64 @@ var checkIfElementIsClickable = (elementId) => {
 };
 var toolbarButtons = {
   clear: {
-    label: __58("Clear", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(MinusIcon2, { fontSize: "tiny" }),
+    label: __61("Clear", "elementor"),
+    icon: /* @__PURE__ */ React121.createElement(MinusIcon2, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: __58("Bold", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(BoldIcon, { fontSize: "tiny" }),
+    label: __61("Bold", "elementor"),
+    icon: /* @__PURE__ */ React121.createElement(BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: __58("Italic", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(ItalicIcon, { fontSize: "tiny" }),
+    label: __61("Italic", "elementor"),
+    icon: /* @__PURE__ */ React121.createElement(ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: __58("Underline", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(UnderlineIcon, { fontSize: "tiny" }),
+    label: __61("Underline", "elementor"),
+    icon: /* @__PURE__ */ React121.createElement(UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: __58("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(StrikethroughIcon, { fontSize: "tiny" }),
+    label: __61("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React121.createElement(StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: __58("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(SuperscriptIcon, { fontSize: "tiny" }),
+    label: __61("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React121.createElement(SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: __58("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(SubscriptIcon, { fontSize: "tiny" }),
+    label: __61("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React121.createElement(SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
   },
   link: {
-    label: __58("Link", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(LinkIcon3, { fontSize: "tiny" }),
+    label: __61("Link", "elementor"),
+    icon: /* @__PURE__ */ React121.createElement(LinkIcon3, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -8362,7 +8659,7 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 
 // src/components/size/unstable-size-field.tsx
-import * as React119 from "react";
+import * as React124 from "react";
 import { InputAdornment as InputAdornment6 } from "@elementor/ui";
 
 // src/hooks/use-size-value.ts
@@ -8405,7 +8702,7 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-import * as React117 from "react";
+import * as React122 from "react";
 import { useId as useId4 } from "react";
 import { MenuListItem as MenuListItem8 } from "@elementor/editor-ui";
 import { bindMenu as bindMenu3, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu4, styled as styled12, usePopupState as usePopupState12 } from "@elementor/ui";
@@ -8423,7 +8720,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React117.createElement(Menu4, { MenuListProps: { dense: true }, ...bindMenu3(popupState) }, options.map((option, index) => /* @__PURE__ */ React117.createElement(
+  return /* @__PURE__ */ React122.createElement(React122.Fragment, null, /* @__PURE__ */ React122.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React122.createElement(Menu4, { MenuListProps: { dense: true }, ...bindMenu3(popupState) }, options.map((option, index) => /* @__PURE__ */ React122.createElement(
     MenuListItem8,
     {
       key: option,
@@ -8452,11 +8749,11 @@ var StyledButton3 = styled12(Button7, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-import * as React118 from "react";
+import * as React123 from "react";
 import { forwardRef as forwardRef13 } from "react";
 var UnstableSizeInput = forwardRef13(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React118.createElement(
+    return /* @__PURE__ */ React123.createElement(
       NumberInput,
       {
         ref,
@@ -8494,7 +8791,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit2 = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React119.createElement(
+  return /* @__PURE__ */ React124.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -8503,8 +8800,8 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React119.createElement(InputAdornment6, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React119.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React119.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React124.createElement(InputAdornment6, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React124.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React124.createElement(
           UnitSelect,
           {
             options: units2,
@@ -8522,7 +8819,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo18 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 var getFontControlConfig = () => {
   const { controls } = getElementorConfig();
@@ -8530,7 +8827,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return useMemo17(() => {
+  return useMemo18(() => {
     if (!groups || !options) {
       return [];
     }
@@ -8554,6 +8851,7 @@ var useFontFamilies = () => {
 };
 export {
   AspectRatioControl,
+  AttachmentTypeControl,
   AttributesControl,
   BackgroundControl,
   BoxShadowRepeaterControl,
@@ -8566,6 +8864,7 @@ export {
   ControlFormLabel,
   ControlReplacementsProvider,
   ControlToggleButtonGroup,
+  DateRangeControl,
   DateTimeControl,
   DisplayConditionsControl,
   EmailFormActionControl,
@@ -8605,6 +8904,8 @@ export {
   SwitchControl,
   TextAreaControl,
   TextControl,
+  TimeRangeControl,
+  TimeStringControl,
   ToggleButtonGroupUi,
   ToggleControl,
   TransformRepeaterControl,