@elementor/editor-controls 4.3.0-998 → 4.3.0-beta1

package/dist/index.js

@@ -584,14 +584,15 @@ var DEFAULT_MENU_PROPS = {
   }
 };
 var SelectControl = createControl(
-  ({ options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
+  ({ options = [], groups = [], onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
     const { value, setValue, disabled, placeholder } = useBoundProp(import_editor_props2.stringPropTypeUtil);
     const handleChange = (event) => {
       const newValue = event.target.value || null;
       onChange?.(newValue, value);
       setValue(newValue);
     };
-    const isDisabled = disabled || options.length === 0;
+    const flatOptions = flattenGroupedOptions(options, groups);
+    const isDisabled = disabled || flatOptions.length === 0;
     return /* @__PURE__ */ React12.createElement(ControlActions, null, /* @__PURE__ */ React12.createElement(
       import_ui5.Select,
       {
@@ -600,16 +601,41 @@ var SelectControl = createControl(
         size: "tiny",
         MenuProps,
         "aria-label": ariaLabel || placeholder,
-        renderValue: (selectedValue) => getSelectRenderValue(options, placeholder, selectedValue),
+        renderValue: (selectedValue) => getSelectRenderValue(flatOptions, placeholder, selectedValue),
         value: value ?? "",
         onChange: handleChange,
         disabled: isDisabled,
         fullWidth: true
       },
-      options.map(({ label, ...props }) => /* @__PURE__ */ React12.createElement(import_editor_ui2.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
+      groups.length ? groups.flatMap((group) => renderGroup(group)) : options.map((option) => renderOption(option))
     ));
   }
 );
+var GROUPED_OPTION_INDENT = 3.5;
+function renderGroup(group) {
+  return [
+    /* @__PURE__ */ React12.createElement(import_ui5.MenuSubheader, { key: `group-${group.label}`, sx: { fontWeight: 400, color: "text.tertiary" } }, group.label),
+    ...group.options.map((option) => renderOption(option, true))
+  ];
+}
+function renderOption({ label, ...props }, isGrouped = false) {
+  return /* @__PURE__ */ React12.createElement(
+    import_editor_ui2.MenuListItem,
+    {
+      key: props.value,
+      ...props,
+      value: props.value ?? "",
+      sx: isGrouped ? { pl: GROUPED_OPTION_INDENT } : void 0
+    },
+    label
+  );
+}
+function flattenGroupedOptions(options, groups) {
+  if (!groups.length) {
+    return options;
+  }
+  return groups.flatMap((group) => group.options);
+}
 function getSelectRenderValue(options, placeholder, selectedValue) {
   const optionWithValue = (v) => options.find(({ value }) => value === v);
   if (!isUnsetSelectValue(selectedValue)) {
@@ -5268,8 +5294,8 @@ var AspectRatioControl = createControl(({ label }) => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
-      setCustomWidth(width || "");
-      setCustomHeight(height || "");
+      setCustomWidth(width.trim() || "");
+      setCustomHeight(height.trim() || "");
       setSelectedValue(CUSTOM_RATIO);
       setIsCustom(true);
     } else {
@@ -5353,7 +5379,7 @@ var AspectRatioControl = createControl(({ label }) => {
 var React81 = __toESM(require("react"));
 var import_react49 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
-var import_editor_props34 = require("@elementor/editor-props");
+var import_editor_props35 = require("@elementor/editor-props");
 var import_icons21 = require("@elementor/icons");
 var import_ui64 = require("@elementor/ui");
 var import_wp_media2 = require("@elementor/wp-media");
@@ -5409,10 +5435,49 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
   isPending ? /* @__PURE__ */ React80.createElement(import_ui63.CircularProgress, { size: 24 }) : (0, import_i18n31.__)("Enable", "elementor")
 )));
 
+// src/controls/open-icon-library.ts
+var import_editor_props34 = require("@elementor/editor-props");
+var SVG_ICON_LIBRARY = "svg";
+function isSvgLibrarySelection(icon) {
+  return icon.library === SVG_ICON_LIBRARY && typeof icon.value === "object" && icon.value !== null;
+}
+function openIconLibrary({ selected, onSelect } = {}) {
+  const iconManager = window.elementor?.iconManager;
+  if (!iconManager) {
+    return;
+  }
+  iconManager.loadIconLibraries();
+  iconManager.show({
+    view: createIconManagerControlView(selected, onSelect)
+  });
+}
+function enqueueIconFonts(library) {
+  window.elementor?.helpers?.enqueueIconFonts?.(library);
+}
+function createIconManagerControlView(selected, onSelect) {
+  return {
+    model: {
+      get: () => false
+    },
+    getControlValue: () => selected ?? { value: "", library: "" },
+    setValue: (icon) => {
+      onSelect?.(icon);
+    },
+    applySavedValue: () => void 0
+  };
+}
+function createIconPropValue(icon, library) {
+  return {
+    value: import_editor_props34.stringPropTypeUtil.create(icon),
+    library: import_editor_props34.stringPropTypeUtil.create(library)
+  };
+}
+
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
+var ICON_PREVIEW_FONT_SIZE = 50;
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
 var StyledCard = (0, import_ui64.styled)(import_ui64.Card)`
 	background-color: white;
@@ -5434,26 +5499,29 @@ var StyledCardMediaContainer = (0, import_ui64.styled)(import_ui64.Stack)`
 `;
 var MODE_BROWSE = { mode: "browse" };
 var MODE_UPLOAD = { mode: "upload" };
-var SvgMediaControl = createControl(() => {
-  const { value, setValue } = useBoundProp(import_editor_props34.svgSrcPropTypeUtil);
-  const id = value?.id;
-  const url = value?.url;
+var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
+  const { value: svgValue, setValue: setSvgValue } = useBoundProp(import_editor_props35.svgSrcPropTypeUtil);
+  const { value: iconValue, setValue: setIconValue } = useBoundProp(import_editor_props35.iconPropTypeUtil);
+  const id = svgValue?.id;
+  const url = svgValue?.url;
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react49.useState)(false);
   const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
+  const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
+  const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
     mediaTypes: ["svg"],
     multiple: false,
     selected: id?.value || null,
     onSelect: (selectedAttachment) => {
-      setValue({
+      setSvgValue({
         id: {
           $$type: "image-attachment-id",
           value: selectedAttachment.id
         },
-        url: import_editor_props34.urlPropTypeUtil.create(selectedAttachment.url)
+        url: import_editor_props35.urlPropTypeUtil.create(selectedAttachment.url)
       });
     }
   });
@@ -5470,18 +5538,36 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
+  const handleIconLibrarySelect = (icon) => {
+    if (!showIconLibrary) {
+      return;
+    }
+    if (isSvgLibrarySelection(icon)) {
+      setSvgValue({
+        id: icon.value.id ? {
+          $$type: "image-attachment-id",
+          value: icon.value.id
+        } : null,
+        url: icon.value.url ? import_editor_props35.urlPropTypeUtil.create(icon.value.url) : null
+      });
+      return;
+    }
+    if (typeof icon.value === "string") {
+      setIconValue(createIconPropValue(icon.value, icon.library));
+    }
+  };
   const infotipProps = {
     title: (0, import_i18n32.__)("Sorry, you can't upload that file yet.", "elementor"),
     description: /* @__PURE__ */ React81.createElement(React81.Fragment, null, (0, import_i18n32.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React81.createElement("br", null), (0, import_i18n32.__)("file uploads.", "elementor")),
     isEnabled: !isAdmin
   };
-  return /* @__PURE__ */ React81.createElement(import_ui64.Stack, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React81.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React81.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React81.createElement(import_ui64.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React81.createElement(
-    import_ui64.CardMedia,
+  return /* @__PURE__ */ React81.createElement(import_ui64.Stack, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React81.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React81.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React81.createElement(
+    SvgMediaPreview,
     {
-      component: "img",
-      image: src,
-      alt: (0, import_i18n32.__)("Preview SVG", "elementor"),
-      sx: { maxHeight: "140px", width: "50px" }
+      isFetching,
+      src,
+      iconClassName: selectedIconClass,
+      iconLibrary: selectedIconLibrary
     }
   )), /* @__PURE__ */ React81.createElement(
     import_ui64.CardOverlay,
@@ -5502,7 +5588,20 @@ var SvgMediaControl = createControl(() => {
         "aria-label": "Select SVG"
       },
       (0, import_i18n32.__)("Select SVG", "elementor")
-    ), /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(import_ui64.ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
+    ), showIconLibrary ? /* @__PURE__ */ React81.createElement(
+      import_ui64.Button,
+      {
+        size: "tiny",
+        variant: "text",
+        color: "inherit",
+        onClick: () => openIconLibrary({
+          selected: selectedIconClass && selectedIconLibrary ? { value: selectedIconClass, library: selectedIconLibrary } : void 0,
+          onSelect: handleIconLibrarySelect
+        }),
+        "aria-label": (0, import_i18n32.__)("Icon library", "elementor")
+      },
+      (0, import_i18n32.__)("Icon library", "elementor")
+    ) : null, /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(import_ui64.ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
       import_ui64.Button,
       {
         size: "tiny",
@@ -5517,24 +5616,62 @@ var SvgMediaControl = createControl(() => {
     )))))
   ))));
 });
+function SvgMediaPreview({
+  isFetching,
+  src,
+  iconClassName,
+  iconLibrary
+}) {
+  (0, import_react49.useEffect)(() => {
+    if (iconLibrary) {
+      enqueueIconFonts(iconLibrary);
+    }
+  }, [iconLibrary]);
+  if (isFetching) {
+    return /* @__PURE__ */ React81.createElement(import_ui64.CircularProgress, { role: "progressbar" });
+  }
+  if (iconClassName) {
+    return /* @__PURE__ */ React81.createElement(
+      import_ui64.Box,
+      {
+        component: "i",
+        className: iconClassName,
+        "aria-label": (0, import_i18n32.__)("Preview icon", "elementor"),
+        sx: { fontSize: ICON_PREVIEW_FONT_SIZE }
+      }
+    );
+  }
+  return /* @__PURE__ */ React81.createElement(
+    import_ui64.CardMedia,
+    {
+      component: "img",
+      image: src,
+      alt: (0, import_i18n32.__)("Preview SVG", "elementor"),
+      sx: { maxHeight: "140px", width: `${ICON_PREVIEW_FONT_SIZE}px` }
+    }
+  );
+}
 
 // src/controls/video-media-control.tsx
 var React82 = __toESM(require("react"));
-var import_editor_props35 = require("@elementor/editor-props");
+var import_editor_props36 = require("@elementor/editor-props");
 var import_icons22 = require("@elementor/icons");
 var import_ui65 = require("@elementor/ui");
 var import_wp_media3 = require("@elementor/wp-media");
 var import_i18n33 = require("@wordpress/i18n");
 var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
 var VideoMediaControl = createControl(() => {
-  const { value, setValue } = useBoundProp(import_editor_props35.videoSrcPropTypeUtil);
+  const { value, setValue, propType } = useBoundProp(import_editor_props36.videoSrcPropTypeUtil);
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = (0, import_wp_media3.useWpMediaAttachment)(id?.value || null);
   const videoUrl = attachment?.url ?? url?.value ?? null;
+  const defaultUrl = import_editor_props36.videoSrcPropTypeUtil.extract(propType.default ?? null)?.url?.value;
+  const currentUrlForModal = url?.value && url.value !== defaultUrl ? url.value : void 0;
   const { open } = (0, import_wp_media3.useWpMediaFrame)({
     mediaTypes: ["video"],
     multiple: false,
     selected: id?.value || null,
+    allowUrlImport: true,
     onSelect: (selectedAttachment) => {
       setValue({
         id: {
@@ -5543,6 +5680,12 @@ var VideoMediaControl = createControl(() => {
         },
         url: null
       });
+    },
+    onSelectUrl: (selectedUrl) => {
+      setValue({
+        id: null,
+        url: import_editor_props36.urlPropTypeUtil.create(selectedUrl)
+      });
     }
   });
   return /* @__PURE__ */ React82.createElement(ControlActions, null, /* @__PURE__ */ React82.createElement(import_ui65.Card, { variant: "outlined" }, /* @__PURE__ */ React82.createElement(
@@ -5580,6 +5723,15 @@ var VideoMediaControl = createControl(() => {
       onClick: () => open({ mode: "upload" })
     },
     (0, import_i18n33.__)("Upload", "elementor")
+  ), /* @__PURE__ */ React82.createElement(
+    import_ui65.Button,
+    {
+      size: "tiny",
+      variant: "text",
+      color: "inherit",
+      onClick: () => open({ mode: "url", currentUrl: currentUrlForModal })
+    },
+    (0, import_i18n33.__)("Insert from URL", "elementor")
   )))));
 });
 var VideoPreview = ({ isFetching = false, videoUrl }) => {
@@ -5590,6 +5742,7 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
     return /* @__PURE__ */ React82.createElement(
       "video",
       {
+        "aria-label": (0, import_i18n33.__)("Video preview", "elementor"),
         src: videoUrl,
         muted: true,
         preload: "metadata",
@@ -5607,13 +5760,13 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
 
 // src/controls/background-control/background-control.tsx
 var React89 = __toESM(require("react"));
-var import_editor_props41 = require("@elementor/editor-props");
+var import_editor_props42 = require("@elementor/editor-props");
 var import_ui73 = require("@elementor/ui");
 var import_i18n39 = require("@wordpress/i18n");
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
 var React88 = __toESM(require("react"));
-var import_editor_props40 = require("@elementor/editor-props");
+var import_editor_props41 = require("@elementor/editor-props");
 var import_ui72 = require("@elementor/ui");
 var import_wp_media4 = require("@elementor/wp-media");
 var import_i18n38 = require("@wordpress/i18n");
@@ -5624,26 +5777,26 @@ var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
 var React83 = __toESM(require("react"));
-var import_editor_props36 = require("@elementor/editor-props");
+var import_editor_props37 = require("@elementor/editor-props");
 var import_ui66 = require("@elementor/ui");
 var BackgroundGradientColorControl = createControl(() => {
-  const { value, setValue } = useBoundProp(import_editor_props36.backgroundGradientOverlayPropTypeUtil);
+  const { value, setValue } = useBoundProp(import_editor_props37.backgroundGradientOverlayPropTypeUtil);
   const handleChange = (newValue) => {
     const transformedValue = createTransformableValue(newValue);
     if (transformedValue.positions) {
-      transformedValue.positions = import_editor_props36.stringPropTypeUtil.create(newValue.positions.join(" "));
+      transformedValue.positions = import_editor_props37.stringPropTypeUtil.create(newValue.positions.join(" "));
     }
     setValue(transformedValue);
   };
   const createTransformableValue = (newValue) => ({
     ...newValue,
-    type: import_editor_props36.stringPropTypeUtil.create(newValue.type),
-    angle: import_editor_props36.numberPropTypeUtil.create(newValue.angle),
-    stops: import_editor_props36.gradientColorStopPropTypeUtil.create(
+    type: import_editor_props37.stringPropTypeUtil.create(newValue.type),
+    angle: import_editor_props37.numberPropTypeUtil.create(newValue.angle),
+    stops: import_editor_props37.gradientColorStopPropTypeUtil.create(
       newValue.stops.map(
-        ({ color, offset }) => import_editor_props36.colorStopPropTypeUtil.create({
-          color: import_editor_props36.colorPropTypeUtil.create(color),
-          offset: import_editor_props36.numberPropTypeUtil.create(offset)
+        ({ color, offset }) => import_editor_props37.colorStopPropTypeUtil.create({
+          color: import_editor_props37.colorPropTypeUtil.create(color),
+          offset: import_editor_props37.numberPropTypeUtil.create(offset)
         })
       )
     )
@@ -5656,9 +5809,9 @@ var BackgroundGradientColorControl = createControl(() => {
     return {
       type: type.value,
       angle: angle?.value || 0,
-      stops: stops.value.map(({ value: { color, offset } }) => ({
+      stops: stops.value.map(({ value: { color, offset } }, index, arr) => ({
         color: color.value,
-        offset: offset.value
+        offset: offset?.value ?? (arr.length > 1 ? index / (arr.length - 1) * 100 : 0)
       })),
       positions: positions?.value.split(" ")
     };
@@ -5672,17 +5825,17 @@ var BackgroundGradientColorControl = createControl(() => {
     }
   );
 });
-var initialBackgroundGradientOverlay = import_editor_props36.backgroundGradientOverlayPropTypeUtil.create({
-  type: import_editor_props36.stringPropTypeUtil.create("linear"),
-  angle: import_editor_props36.numberPropTypeUtil.create(180),
-  stops: import_editor_props36.gradientColorStopPropTypeUtil.create([
-    import_editor_props36.colorStopPropTypeUtil.create({
-      color: import_editor_props36.colorPropTypeUtil.create("rgb(0,0,0)"),
-      offset: import_editor_props36.numberPropTypeUtil.create(0)
+var initialBackgroundGradientOverlay = import_editor_props37.backgroundGradientOverlayPropTypeUtil.create({
+  type: import_editor_props37.stringPropTypeUtil.create("linear"),
+  angle: import_editor_props37.numberPropTypeUtil.create(180),
+  stops: import_editor_props37.gradientColorStopPropTypeUtil.create([
+    import_editor_props37.colorStopPropTypeUtil.create({
+      color: import_editor_props37.colorPropTypeUtil.create("rgb(0,0,0)"),
+      offset: import_editor_props37.numberPropTypeUtil.create(0)
     }),
-    import_editor_props36.colorStopPropTypeUtil.create({
-      color: import_editor_props36.colorPropTypeUtil.create("rgb(255,255,255)"),
-      offset: import_editor_props36.numberPropTypeUtil.create(100)
+    import_editor_props37.colorStopPropTypeUtil.create({
+      color: import_editor_props37.colorPropTypeUtil.create("rgb(255,255,255)"),
+      offset: import_editor_props37.numberPropTypeUtil.create(100)
     })
   ])
 });
@@ -5713,7 +5866,7 @@ var BackgroundImageOverlayAttachment = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 var React85 = __toESM(require("react"));
 var import_react50 = require("react");
-var import_editor_props37 = require("@elementor/editor-props");
+var import_editor_props38 = require("@elementor/editor-props");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_icons24 = require("@elementor/icons");
 var import_ui68 = require("@elementor/ui");
@@ -5731,8 +5884,8 @@ var backgroundPositionOptions = [
   { label: (0, import_i18n35.__)("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
-  const backgroundImageOffsetContext = useBoundProp(import_editor_props37.backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(import_editor_props37.stringPropTypeUtil);
+  const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
   const rowRef = (0, import_react50.useRef)(null);
   const handlePositionChange = (event) => {
@@ -5808,7 +5961,7 @@ var BackgroundImageOverlayRepeat = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 var React87 = __toESM(require("react"));
 var import_react51 = require("react");
-var import_editor_props38 = require("@elementor/editor-props");
+var import_editor_props39 = require("@elementor/editor-props");
 var import_icons26 = require("@elementor/icons");
 var import_ui70 = require("@elementor/ui");
 var import_i18n37 = require("@wordpress/i18n");
@@ -5839,8 +5992,8 @@ var sizeControlOptions = [
   }
 ];
 var BackgroundImageOverlaySize = () => {
-  const backgroundImageScaleContext = useBoundProp(import_editor_props38.backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
+  const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
   const rowRef = (0, import_react51.useRef)(null);
   const handleSizeChange = (size) => {
@@ -5878,16 +6031,16 @@ var BackgroundImageOverlaySize = () => {
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
 var import_react52 = require("react");
-var import_editor_props39 = require("@elementor/editor-props");
+var import_editor_props40 = require("@elementor/editor-props");
 var import_ui71 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
   color: initialBackgroundColorOverlay2,
   image: initialBackgroundImageOverlay,
   gradient: initialBackgroundGradientOverlay2
 }) => {
-  const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props39.backgroundImageOverlayPropTypeUtil);
-  const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props39.backgroundColorOverlayPropTypeUtil);
-  const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props39.backgroundGradientOverlayPropTypeUtil);
+  const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props40.backgroundImageOverlayPropTypeUtil);
+  const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props40.backgroundColorOverlayPropTypeUtil);
+  const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props40.backgroundGradientOverlayPropTypeUtil);
   const getCurrentOverlayType = () => {
     if (colorValue) {
       return "color";
@@ -5936,9 +6089,9 @@ var useBackgroundTabsHistory = ({
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
 var DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = "#00000033";
-var initialBackgroundColorOverlay = import_editor_props40.backgroundColorOverlayPropTypeUtil.create(
+var initialBackgroundColorOverlay = import_editor_props41.backgroundColorOverlayPropTypeUtil.create(
   {
-    color: import_editor_props40.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
+    color: import_editor_props41.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
   }
 );
 var getInitialBackgroundOverlay = () => ({
@@ -5972,12 +6125,12 @@ var backgroundResolutionOptions = [
   { label: (0, import_i18n38.__)("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
-  const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props40.backgroundOverlayPropTypeUtil);
+  const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props41.backgroundOverlayPropTypeUtil);
   return /* @__PURE__ */ React88.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React88.createElement(
     ControlRepeater,
     {
       initial: getInitialBackgroundOverlay(),
-      propTypeUtil: import_editor_props40.backgroundOverlayPropTypeUtil
+      propTypeUtil: import_editor_props41.backgroundOverlayPropTypeUtil
     },
     /* @__PURE__ */ React88.createElement(RepeaterHeader, { label: (0, import_i18n38.__)("Overlay", "elementor") }, /* @__PURE__ */ React88.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
     /* @__PURE__ */ React88.createElement(ItemsContainer, null, /* @__PURE__ */ React88.createElement(
@@ -6079,11 +6232,11 @@ var ItemLabelGradient = ({ value }) => {
   return /* @__PURE__ */ React88.createElement("span", null, (0, import_i18n38.__)("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
-  const propContext = useBoundProp(import_editor_props40.backgroundColorOverlayPropTypeUtil);
+  const propContext = useBoundProp(import_editor_props41.backgroundColorOverlayPropTypeUtil);
   return /* @__PURE__ */ React88.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React88.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
-  const propContext = useBoundProp(import_editor_props40.backgroundImageOverlayPropTypeUtil);
+  const propContext = useBoundProp(import_editor_props41.backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React88.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React88.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayAttachment, null)));
 };
 var StyledUnstableColorIndicator3 = (0, import_ui72.styled)(import_ui72.UnstableColorIndicator)(({ theme }) => ({
@@ -6114,7 +6267,9 @@ var getFileExtensionFromFilename = (filename) => {
 };
 var getGradientValue = (value) => {
   const gradient = value.value;
-  const stops = gradient.stops.value?.map(({ value: { color, offset } }) => `${color.value} ${offset.value ?? 0}%`)?.join(",");
+  const stops = gradient.stops.value?.map(
+    ({ value: { color, offset } }) => offset ? `${color.value} ${offset.value ?? 0}%` : `${color.value}`
+  )?.join(",");
   if (gradient.type.value === "linear") {
     return `linear-gradient(${gradient.angle.value}deg, ${stops})`;
   }
@@ -6131,7 +6286,7 @@ var clipOptions = [
 var colorLabel = (0, import_i18n39.__)("Color", "elementor");
 var clipLabel = (0, import_i18n39.__)("Clipping", "elementor");
 var BackgroundControl = createControl(() => {
-  const propContext = useBoundProp(import_editor_props41.backgroundPropTypeUtil);
+  const propContext = useBoundProp(import_editor_props42.backgroundPropTypeUtil);
   return /* @__PURE__ */ React89.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React89.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React89.createElement(BackgroundColorField, null), /* @__PURE__ */ React89.createElement(BackgroundClipField, null));
 });
 var BackgroundColorField = () => {
@@ -6144,7 +6299,7 @@ var BackgroundClipField = () => {
 // src/controls/repeatable-control.tsx
 var React90 = __toESM(require("react"));
 var import_react53 = require("react");
-var import_editor_props42 = require("@elementor/editor-props");
+var import_editor_props43 = require("@elementor/editor-props");
 var import_ui74 = require("@elementor/ui");
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
 var RepeatableControl = createControl(
@@ -6165,7 +6320,7 @@ var RepeatableControl = createControl(
       return null;
     }
     const childArrayPropTypeUtil2 = (0, import_react53.useMemo)(
-      () => (0, import_editor_props42.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
+      () => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
     const contextValue = (0, import_react53.useMemo)(
@@ -6301,7 +6456,7 @@ var getAllProperties = (pattern) => {
 // src/controls/key-value-control.tsx
 var React91 = __toESM(require("react"));
 var import_react54 = require("react");
-var import_editor_props43 = require("@elementor/editor-props");
+var import_editor_props44 = require("@elementor/editor-props");
 var import_ui75 = require("@elementor/ui");
 var import_i18n40 = require("@wordpress/i18n");
 
@@ -6326,7 +6481,7 @@ var getInitialFieldValue = (fieldValue) => {
   return transformableValue.value || "";
 };
 var KeyValueControl = createControl((props = {}) => {
-  const { value, setValue, ...propContext } = useBoundProp(import_editor_props43.keyValuePropTypeUtil);
+  const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
   const [keyError, setKeyError] = (0, import_react54.useState)("");
   const [valueError, setValueError] = (0, import_react54.useState)("");
   const [sessionState, setSessionState] = (0, import_react54.useState)({
@@ -6365,14 +6520,14 @@ var KeyValueControl = createControl((props = {}) => {
       return;
     }
     const newChangedValue = newValue[fieldType];
-    if ((0, import_editor_props43.isTransformable)(newChangedValue) && newChangedValue.$$type === "dynamic") {
+    if ((0, import_editor_props44.isTransformable)(newChangedValue) && newChangedValue.$$type === "dynamic") {
       setValue({
         ...value,
         [fieldType]: newChangedValue
       });
       return;
     }
-    const extractedValue = import_editor_props43.stringPropTypeUtil.extract(newChangedValue);
+    const extractedValue = import_editor_props44.stringPropTypeUtil.extract(newChangedValue);
     setSessionState((prev) => ({
       ...prev,
       [fieldType]: extractedValue
@@ -6412,7 +6567,7 @@ var KeyValueControl = createControl((props = {}) => {
 
 // src/controls/position-control.tsx
 var React92 = __toESM(require("react"));
-var import_editor_props44 = require("@elementor/editor-props");
+var import_editor_props45 = require("@elementor/editor-props");
 var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons27 = require("@elementor/icons");
 var import_ui76 = require("@elementor/ui");
@@ -6430,8 +6585,8 @@ var positionOptions = [
   { label: (0, import_i18n41.__)("Custom", "elementor"), value: "custom" }
 ];
 var PositionControl = () => {
-  const positionContext = useBoundProp(import_editor_props44.positionPropTypeUtil);
-  const stringPropContext = useBoundProp(import_editor_props44.stringPropTypeUtil);
+  const positionContext = useBoundProp(import_editor_props45.positionPropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props45.stringPropTypeUtil);
   const isCustom = !!positionContext.value;
   const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
   const handlePositionChange = (event) => {
@@ -6472,13 +6627,13 @@ var PositionControl = () => {
 // src/controls/transform-control/transform-repeater-control.tsx
 var React105 = __toESM(require("react"));
 var import_react62 = require("react");
-var import_editor_props53 = require("@elementor/editor-props");
+var import_editor_props54 = require("@elementor/editor-props");
 var import_icons34 = require("@elementor/icons");
 var import_ui89 = require("@elementor/ui");
 var import_i18n51 = require("@wordpress/i18n");
 
 // src/controls/transform-control/initial-values.ts
-var import_editor_props45 = require("@elementor/editor-props");
+var import_editor_props46 = require("@elementor/editor-props");
 var TransformFunctionKeys = {
   move: "transform-move",
   scale: "transform-scale",
@@ -6508,17 +6663,17 @@ var initialTransformValue = {
     z: { $$type: "size", value: { size: defaultValues.move.size, unit: defaultValues.move.unit } }
   }
 };
-var initialScaleValue = import_editor_props45.scaleTransformPropTypeUtil.create({
-  x: import_editor_props45.numberPropTypeUtil.create(defaultValues.scale),
-  y: import_editor_props45.numberPropTypeUtil.create(defaultValues.scale),
-  z: import_editor_props45.numberPropTypeUtil.create(defaultValues.scale)
+var initialScaleValue = import_editor_props46.scaleTransformPropTypeUtil.create({
+  x: import_editor_props46.numberPropTypeUtil.create(defaultValues.scale),
+  y: import_editor_props46.numberPropTypeUtil.create(defaultValues.scale),
+  z: import_editor_props46.numberPropTypeUtil.create(defaultValues.scale)
 });
-var initialRotateValue = import_editor_props45.rotateTransformPropTypeUtil.create({
+var initialRotateValue = import_editor_props46.rotateTransformPropTypeUtil.create({
   x: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
   y: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
   z: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } }
 });
-var initialSkewValue = import_editor_props45.skewTransformPropTypeUtil.create({
+var initialSkewValue = import_editor_props46.skewTransformPropTypeUtil.create({
   x: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } },
   y: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } }
 });
@@ -6531,7 +6686,7 @@ var import_i18n46 = require("@wordpress/i18n");
 // src/controls/transform-control/functions/move.tsx
 var React94 = __toESM(require("react"));
 var import_react55 = require("react");
-var import_editor_props46 = require("@elementor/editor-props");
+var import_editor_props47 = require("@elementor/editor-props");
 var import_icons28 = require("@elementor/icons");
 var import_ui78 = require("@elementor/ui");
 var import_i18n42 = require("@wordpress/i18n");
@@ -6576,7 +6731,7 @@ var moveAxisControls = [
   }
 ];
 var Move = () => {
-  const context = useBoundProp(import_editor_props46.moveTransformPropTypeUtil);
+  const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
   const rowRefs = [(0, import_react55.useRef)(null), (0, import_react55.useRef)(null), (0, import_react55.useRef)(null)];
   return /* @__PURE__ */ React94.createElement(import_ui78.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React94.createElement(
     AxisRow,
@@ -6593,7 +6748,7 @@ var Move = () => {
 // src/controls/transform-control/functions/rotate.tsx
 var React95 = __toESM(require("react"));
 var import_react56 = require("react");
-var import_editor_props47 = require("@elementor/editor-props");
+var import_editor_props48 = require("@elementor/editor-props");
 var import_icons29 = require("@elementor/icons");
 var import_ui79 = require("@elementor/ui");
 var import_i18n43 = require("@wordpress/i18n");
@@ -6616,7 +6771,7 @@ var rotateAxisControls = [
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
-  const context = useBoundProp(import_editor_props47.rotateTransformPropTypeUtil);
+  const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
   const rowRefs = [(0, import_react56.useRef)(null), (0, import_react56.useRef)(null), (0, import_react56.useRef)(null)];
   return /* @__PURE__ */ React95.createElement(import_ui79.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React95.createElement(
     AxisRow,
@@ -6632,7 +6787,7 @@ var Rotate = () => {
 // src/controls/transform-control/functions/scale.tsx
 var React97 = __toESM(require("react"));
 var import_react57 = require("react");
-var import_editor_props48 = require("@elementor/editor-props");
+var import_editor_props49 = require("@elementor/editor-props");
 var import_icons30 = require("@elementor/icons");
 var import_ui81 = require("@elementor/ui");
 var import_i18n44 = require("@wordpress/i18n");
@@ -6663,7 +6818,7 @@ var scaleAxisControls = [
   }
 ];
 var Scale = () => {
-  const context = useBoundProp(import_editor_props48.scaleTransformPropTypeUtil);
+  const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
   const rowRefs = [(0, import_react57.useRef)(null), (0, import_react57.useRef)(null), (0, import_react57.useRef)(null)];
   return /* @__PURE__ */ React97.createElement(import_ui81.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React97.createElement(PropProvider, { ...context }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React97.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
@@ -6671,7 +6826,7 @@ var Scale = () => {
 // src/controls/transform-control/functions/skew.tsx
 var React98 = __toESM(require("react"));
 var import_react58 = require("react");
-var import_editor_props49 = require("@elementor/editor-props");
+var import_editor_props50 = require("@elementor/editor-props");
 var import_icons31 = require("@elementor/icons");
 var import_ui82 = require("@elementor/ui");
 var import_i18n45 = require("@wordpress/i18n");
@@ -6689,7 +6844,7 @@ var skewAxisControls = [
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
-  const context = useBoundProp(import_editor_props49.skewTransformPropTypeUtil);
+  const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
   const rowRefs = [(0, import_react58.useRef)(null), (0, import_react58.useRef)(null), (0, import_react58.useRef)(null)];
   return /* @__PURE__ */ React98.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React98.createElement(PropProvider, { ...context }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React98.createElement(
     AxisRow,
@@ -6704,7 +6859,7 @@ var Skew = () => {
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
 var import_react59 = require("react");
-var import_editor_props50 = require("@elementor/editor-props");
+var import_editor_props51 = require("@elementor/editor-props");
 var import_ui83 = require("@elementor/ui");
 var useTransformTabsHistory = ({
   move: initialMove,
@@ -6712,10 +6867,10 @@ var useTransformTabsHistory = ({
   rotate: initialRotate,
   skew: initialSkew
 }) => {
-  const { value: moveValue, setValue: setMoveValue } = useBoundProp(import_editor_props50.moveTransformPropTypeUtil);
-  const { value: scaleValue, setValue: setScaleValue } = useBoundProp(import_editor_props50.scaleTransformPropTypeUtil);
-  const { value: rotateValue, setValue: setRotateValue } = useBoundProp(import_editor_props50.rotateTransformPropTypeUtil);
-  const { value: skewValue, setValue: setSkewValue } = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
+  const { value: moveValue, setValue: setMoveValue } = useBoundProp(import_editor_props51.moveTransformPropTypeUtil);
+  const { value: scaleValue, setValue: setScaleValue } = useBoundProp(import_editor_props51.scaleTransformPropTypeUtil);
+  const { value: rotateValue, setValue: setRotateValue } = useBoundProp(import_editor_props51.rotateTransformPropTypeUtil);
+  const { value: skewValue, setValue: setSkewValue } = useBoundProp(import_editor_props51.skewTransformPropTypeUtil);
   const { openItemIndex, items: items2 } = useRepeaterContext();
   const getCurrentTransformType = () => {
     switch (true) {
@@ -6875,7 +7030,7 @@ var import_i18n50 = require("@wordpress/i18n");
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 var React102 = __toESM(require("react"));
 var import_react60 = require("react");
-var import_editor_props51 = require("@elementor/editor-props");
+var import_editor_props52 = require("@elementor/editor-props");
 var import_ui86 = require("@elementor/ui");
 var import_i18n48 = require("@wordpress/i18n");
 var ORIGIN_UNITS = ["px", "%", "em", "rem"];
@@ -6902,7 +7057,7 @@ var ChildrenPerspectiveControl = () => {
 var PerspectiveControl = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React102.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
 var PerspectiveOriginControl = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React102.createElement(PerspectiveOriginControlProvider, null));
 var PerspectiveOriginControlProvider = () => {
-  const context = useBoundProp(import_editor_props51.perspectiveOriginPropTypeUtil);
+  const context = useBoundProp(import_editor_props52.perspectiveOriginPropTypeUtil);
   return /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React102.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
@@ -6913,7 +7068,7 @@ var ControlFields = ({ control }) => {
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
 var React103 = __toESM(require("react"));
 var import_react61 = require("react");
-var import_editor_props52 = require("@elementor/editor-props");
+var import_editor_props53 = require("@elementor/editor-props");
 var import_ui87 = require("@elementor/ui");
 var import_i18n49 = require("@wordpress/i18n");
 var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
@@ -6939,7 +7094,7 @@ var TransformOriginControl = () => {
   return /* @__PURE__ */ React103.createElement(import_ui87.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, (0, import_i18n49.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React103.createElement(ControlFields2, { control, key: control.bind })));
 };
 var ControlFields2 = ({ control }) => {
-  const context = useBoundProp(import_editor_props52.transformOriginPropTypeUtil);
+  const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
   const rowRef = (0, import_react61.useRef)(null);
   return /* @__PURE__ */ React103.createElement(PropProvider, { ...context }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
@@ -6987,7 +7142,7 @@ var TransformSettingsControl = ({
 var SIZE11 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
-    const context = useBoundProp(import_editor_props53.transformPropTypeUtil);
+    const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
     const headerRef = (0, import_react62.useRef)(null);
     const popupState = (0, import_ui89.usePopupState)({ variant: "popover" });
     return /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(
@@ -7015,7 +7170,7 @@ var Repeater2 = ({
   propType,
   popupState
 }) => {
-  const transformFunctionsContext = useBoundProp(import_editor_props53.transformFunctionsPropTypeUtil);
+  const transformFunctionsContext = useBoundProp(import_editor_props54.transformFunctionsPropTypeUtil);
   const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
   const { value: transformValues, bind } = transformFunctionsContext;
   const getInitialValue2 = () => {
@@ -7026,7 +7181,7 @@ var Repeater2 = ({
     ControlRepeater,
     {
       initial: getInitialValue2() ?? initialTransformValue,
-      propTypeUtil: import_editor_props53.transformFunctionsPropTypeUtil
+      propTypeUtil: import_editor_props54.transformFunctionsPropTypeUtil
     },
     /* @__PURE__ */ React105.createElement(
       RepeaterHeader,
@@ -7069,7 +7224,7 @@ var TransformBasePopoverTrigger = ({
 // src/controls/transition-control/transition-repeater-control.tsx
 var React108 = __toESM(require("react"));
 var import_react65 = require("react");
-var import_editor_props56 = require("@elementor/editor-props");
+var import_editor_props57 = require("@elementor/editor-props");
 var import_icons36 = require("@elementor/icons");
 var import_ui92 = require("@elementor/ui");
 var import_utils7 = require("@elementor/utils");
@@ -7078,11 +7233,11 @@ var import_i18n54 = require("@wordpress/i18n");
 // src/controls/selection-size-control.tsx
 var React106 = __toESM(require("react"));
 var import_react63 = require("react");
-var import_editor_props54 = require("@elementor/editor-props");
+var import_editor_props55 = require("@elementor/editor-props");
 var import_ui90 = require("@elementor/ui");
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
-    const { value, setValue, propType } = useBoundProp(import_editor_props54.selectionSizePropTypeUtil);
+    const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
     const rowRef = (0, import_react63.useRef)(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
     const currentSizeConfig = (0, import_react63.useMemo)(() => {
@@ -7299,7 +7454,7 @@ function subscribeToTransitionEvent() {
 // src/controls/transition-control/transition-selector.tsx
 var React107 = __toESM(require("react"));
 var import_react64 = require("react");
-var import_editor_props55 = require("@elementor/editor-props");
+var import_editor_props56 = require("@elementor/editor-props");
 var import_editor_ui14 = require("@elementor/editor-ui");
 var import_icons35 = require("@elementor/icons");
 var import_ui91 = require("@elementor/ui");
@@ -7380,7 +7535,7 @@ var TransitionSelector = ({
   disabledItems = [],
   showPromotion = false
 }) => {
-  const { value, setValue } = useBoundProp(import_editor_props55.keyValuePropTypeUtil);
+  const { value, setValue } = useBoundProp(import_editor_props56.keyValuePropTypeUtil);
   const {
     key: { value: transitionLabel }
   } = value;
@@ -7499,9 +7654,9 @@ var DURATION_CONFIG = {
   units: ["s", "ms"],
   defaultUnit: "ms"
 };
-var childArrayPropTypeUtil = (0, import_editor_props56.createArrayPropUtils)(
-  import_editor_props56.selectionSizePropTypeUtil.key,
-  import_editor_props56.selectionSizePropTypeUtil.schema,
+var childArrayPropTypeUtil = (0, import_editor_props57.createArrayPropUtils)(
+  import_editor_props57.selectionSizePropTypeUtil.key,
+  import_editor_props57.selectionSizePropTypeUtil.schema,
   "transition"
 );
 subscribeToTransitionEvent();
@@ -7545,7 +7700,7 @@ var isItemDisabled = (item) => {
 };
 var getChildControlConfig = (recentlyUsedList, disabledItems, showPromotion) => {
   return {
-    propTypeUtil: import_editor_props56.selectionSizePropTypeUtil,
+    propTypeUtil: import_editor_props57.selectionSizePropTypeUtil,
     component: SelectionSizeControl,
     props: getSelectionSizeProps(recentlyUsedList, disabledItems, showPromotion),
     isItemDisabled
@@ -7676,17 +7831,17 @@ var TransitionRepeaterControl = createControl(
 // src/controls/date-time-control.tsx
 var React109 = __toESM(require("react"));
 var dayjs = __toESM(require("dayjs"));
-var import_editor_props57 = require("@elementor/editor-props");
 var import_editor_props58 = require("@elementor/editor-props");
+var import_editor_props59 = require("@elementor/editor-props");
 var import_ui93 = require("@elementor/ui");
 var DATE_FORMAT = "YYYY-MM-DD";
 var TIME_FORMAT = "HH:mm";
 var DateTimeControl = createControl(({ inputDisabled }) => {
-  const { value, setValue, ...propContext } = useBoundProp(import_editor_props58.DateTimePropTypeUtil);
+  const { value, setValue, ...propContext } = useBoundProp(import_editor_props59.DateTimePropTypeUtil);
   const handleChange = (newValue, meta) => {
     const field = meta.bind;
     const fieldValue = newValue[field];
-    if ((0, import_editor_props57.isTransformable)(fieldValue)) {
+    if ((0, import_editor_props58.isTransformable)(fieldValue)) {
       return setValue({ ...value, [field]: fieldValue });
     }
     let formattedValue = "";
@@ -7725,7 +7880,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
   return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(import_ui93.LocalizationProvider, null, /* @__PURE__ */ React109.createElement(import_ui93.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React109.createElement(
     import_ui93.DatePicker,
     {
-      value: parseDateValue(import_editor_props57.stringPropTypeUtil.extract(value?.date)),
+      value: parseDateValue(import_editor_props58.stringPropTypeUtil.extract(value?.date)),
       onChange: (v) => handleChange({ date: v }, { bind: "date" }),
       disabled: inputDisabled,
       slotProps: {
@@ -7737,7 +7892,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
   )), /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React109.createElement(
     import_ui93.TimePicker,
     {
-      value: parseTimeValue(import_editor_props57.stringPropTypeUtil.extract(value?.time)),
+      value: parseTimeValue(import_editor_props58.stringPropTypeUtil.extract(value?.time)),
       onChange: (v) => handleChange({ time: v }, { bind: "time" }),
       disabled: inputDisabled,
       slotProps: {
@@ -7751,13 +7906,13 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 
 // src/controls/date-range-control.tsx
 var React111 = __toESM(require("react"));
-var import_editor_props60 = require("@elementor/editor-props");
+var import_editor_props61 = require("@elementor/editor-props");
 var import_ui95 = require("@elementor/ui");
 var import_i18n55 = require("@wordpress/i18n");
 
 // src/controls/date-string-control.tsx
 var React110 = __toESM(require("react"));
-var import_editor_props59 = require("@elementor/editor-props");
+var import_editor_props60 = require("@elementor/editor-props");
 var import_ui94 = require("@elementor/ui");
 
 // src/utils/date-time.ts
@@ -7792,7 +7947,7 @@ function parseTimeString(raw) {
 // src/controls/date-string-control.tsx
 var DateStringControl = createControl(
   ({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
-    const { value, setValue, disabled } = useBoundProp(import_editor_props59.dateStringPropTypeUtil);
+    const { value, setValue, disabled } = useBoundProp(import_editor_props60.dateStringPropTypeUtil);
     const isDisabled = inputDisabled ?? disabled;
     const slotProps = {
       textField: {
@@ -7840,9 +7995,9 @@ var isMaxBeforeMin = (minIso, maxIso) => {
 };
 var RANGE_ERROR_MESSAGE = (0, import_i18n55.__)("Max date must be on or after Min date", "elementor");
 var DateRangeControl = createControl(() => {
-  const { value, setValue, ...propContext } = useBoundProp(import_editor_props60.dateRangePropTypeUtil);
-  const minString = import_editor_props60.dateStringPropTypeUtil.extract(value?.min);
-  const maxString = import_editor_props60.dateStringPropTypeUtil.extract(value?.max);
+  const { value, setValue, ...propContext } = useBoundProp(import_editor_props61.dateRangePropTypeUtil);
+  const minString = import_editor_props61.dateStringPropTypeUtil.extract(value?.min);
+  const maxString = import_editor_props61.dateStringPropTypeUtil.extract(value?.max);
   const hasInvalidRange = isMaxBeforeMin(minString, maxString);
   return /* @__PURE__ */ React111.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React111.createElement(import_ui95.Stack, { gap: 0.75 }, /* @__PURE__ */ React111.createElement(import_ui95.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(
     BoundDateStringControl,
@@ -7870,11 +8025,11 @@ var BoundDateStringControl = ({
 
 // src/controls/time-string-control.tsx
 var React112 = __toESM(require("react"));
-var import_editor_props61 = require("@elementor/editor-props");
+var import_editor_props62 = require("@elementor/editor-props");
 var import_ui96 = require("@elementor/ui");
 var TimeStringControl = createControl(
   ({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
-    const { value, setValue, disabled } = useBoundProp(import_editor_props61.timeStringPropTypeUtil);
+    const { value, setValue, disabled } = useBoundProp(import_editor_props62.timeStringPropTypeUtil);
     const isDisabled = inputDisabled ?? disabled;
     const slotProps = {
       textField: {
@@ -7911,7 +8066,7 @@ var TimeStringControl = createControl(
 
 // src/controls/time-range-control.tsx
 var React113 = __toESM(require("react"));
-var import_editor_props62 = require("@elementor/editor-props");
+var import_editor_props63 = require("@elementor/editor-props");
 var import_ui97 = require("@elementor/ui");
 var import_i18n56 = require("@wordpress/i18n");
 var RANGE_LABELS2 = {
@@ -7919,7 +8074,7 @@ var RANGE_LABELS2 = {
   max: (0, import_i18n56.__)("End time", "elementor")
 };
 var TimeRangeControl = createControl(() => {
-  const { value, setValue, ...propContext } = useBoundProp(import_editor_props62.timeRangePropTypeUtil);
+  const { value, setValue, ...propContext } = useBoundProp(import_editor_props63.timeRangePropTypeUtil);
   return /* @__PURE__ */ React113.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React113.createElement(import_ui97.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
 });
 var BoundTimeStringControl = ({ bind, ariaLabel }) => {
@@ -7927,11 +8082,10 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 };
 
 // src/controls/inline-editing-control.tsx
-var React115 = __toESM(require("react"));
-var import_react68 = require("react");
-var import_editor_props63 = require("@elementor/editor-props");
-var import_ui99 = require("@elementor/ui");
-var import_utils8 = require("@elementor/utils");
+var React117 = __toESM(require("react"));
+var import_react71 = require("react");
+var import_editor_props65 = require("@elementor/editor-props");
+var import_ui101 = require("@elementor/ui");
 
 // src/components/inline-editor.tsx
 var React114 = __toESM(require("react"));
@@ -7952,6 +8106,7 @@ var import_extension_underline = __toESM(require("@tiptap/extension-underline"))
 var import_react67 = require("@tiptap/react");
 
 // src/utils/inline-editing.ts
+var import_editor_props64 = require("@elementor/editor-props");
 function isEmpty(value = "") {
   if (!value) {
     return true;
@@ -7968,6 +8123,13 @@ function htmlToPlainText(html) {
   const doc = new DOMParser().parseFromString(normalizedHtml, "text/html");
   return doc.body.textContent ?? "";
 }
+function extractInlineHtmlContent(propValue) {
+  if (import_editor_props64.escapedHtmlPropTypeUtil.isValid(propValue)) {
+    return import_editor_props64.escapedHtmlPropTypeUtil.extract(propValue) ?? "";
+  }
+  const htmlV3 = import_editor_props64.htmlV3PropTypeUtil.extract(propValue);
+  return import_editor_props64.stringPropTypeUtil.extract(htmlV3?.content ?? null) ?? "";
+}
 
 // src/components/inline-editor.tsx
 var ITALIC_KEYBOARD_SHORTCUT = "i";
@@ -7985,6 +8147,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
     onBlur = void 0,
     expectedTag = null,
     onEditorCreate,
+    onEditorDestroy,
     wrapperClassName,
     onSelectionEnd,
     mountElement = null
@@ -8069,6 +8232,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
       }
     },
     onCreate: onEditorCreate ? ({ editor: mountedEditor }) => onEditorCreate(mountedEditor) : void 0,
+    onDestroy: onEditorDestroy ? () => onEditorDestroy() : void 0,
     onBlur: mountElement ? void 0 : () => onBlurRef.current?.(),
     onSelectionUpdate: onSelectionEnd ? ({ editor: updatedEditor }) => onSelectionEnd(updatedEditor.view) : void 0
   });
@@ -8097,163 +8261,463 @@ var useOnUpdate = (callback, dependencies) => {
   }, dependencies);
 };
 
-// src/controls/inline-editing-control.tsx
-var CHILDREN_PARSE_DEBOUNCE_MS = 300;
-var InlineEditingControl = createControl(
-  ({
-    sx,
-    attributes,
-    props
-  }) => {
-    const { value, setValue, placeholder } = useBoundProp(import_editor_props63.htmlV3PropTypeUtil);
-    const content = import_editor_props63.stringPropTypeUtil.extract(value?.content ?? null) ?? "";
-    const debouncedParse = (0, import_react68.useMemo)(
-      () => (0, import_utils8.debounce)((html) => {
-        const parsed = (0, import_editor_props63.parseHtmlChildren)(html);
-        setValue({
-          content: parsed.content ? import_editor_props63.stringPropTypeUtil.create(parsed.content) : null,
-          children: parsed.children
-        });
-      }, CHILDREN_PARSE_DEBOUNCE_MS),
-      [setValue]
-    );
-    const handleChange = (0, import_react68.useCallback)(
-      (newValue) => {
-        const html = newValue ?? "";
-        setValue({
-          content: html ? import_editor_props63.stringPropTypeUtil.create(html) : null,
-          children: value?.children ?? []
-        });
-        debouncedParse(html);
-      },
-      [setValue, value?.children, debouncedParse]
-    );
-    (0, import_react68.useEffect)(() => () => debouncedParse.cancel(), [debouncedParse]);
-    return /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
-      import_ui99.Box,
-      {
-        sx: {
-          p: 0.8,
-          border: "1px solid",
-          borderColor: "grey.200",
-          borderRadius: "8px",
-          transition: "border-color .2s ease, box-shadow .2s ease",
-          "&:hover": {
-            borderColor: "black"
-          },
-          "&:focus-within": {
-            borderColor: "black",
-            boxShadow: "0 0 0 1px black"
-          },
-          "& .ProseMirror:focus": {
-            outline: "none"
-          },
-          "& .ProseMirror": {
-            minHeight: "70px",
-            fontSize: "12px",
-            "& a": {
-              color: "inherit"
-            },
-            "& .elementor-inline-editor-reset": {
-              margin: 0,
-              padding: 0
-            },
-            "&.is-empty::before": {
-              content: "attr(data-placeholder)",
-              color: "text.tertiary",
-              pointerEvents: "none",
-              position: "absolute",
-              opacity: 0.6
-            }
-          },
-          ".strip-styles *": {
-            all: "unset"
-          },
-          ...sx
-        },
-        ...attributes,
-        ...props
-      },
-      /* @__PURE__ */ React115.createElement(
-        InlineEditor,
-        {
-          value: content,
-          setValue: handleChange,
-          placeholder: placeholder?.content?.value ?? null
-        }
-      )
-    ));
-  }
-);
-
-// src/controls/email-form-action-control/index.tsx
-var React119 = __toESM(require("react"));
-var import_editor_props66 = require("@elementor/editor-props");
-var import_editor_ui16 = require("@elementor/editor-ui");
-var import_ui103 = require("@elementor/ui");
+// src/components/inline-editor-toolbar.tsx
+var React116 = __toESM(require("react"));
+var import_react69 = require("react");
+var import_editor_elements7 = require("@elementor/editor-elements");
+var import_icons38 = require("@elementor/icons");
+var import_ui100 = require("@elementor/ui");
+var import_react70 = require("@tiptap/react");
 var import_i18n58 = require("@wordpress/i18n");
 
-// src/controls/email-form-action-control/fields.tsx
-var React118 = __toESM(require("react"));
-var import_editor_ui15 = require("@elementor/editor-ui");
-var import_ui102 = require("@elementor/ui");
+// src/components/url-popover.tsx
+var React115 = __toESM(require("react"));
+var import_react68 = require("react");
+var import_icons37 = require("@elementor/icons");
+var import_ui99 = require("@elementor/ui");
 var import_i18n57 = require("@wordpress/i18n");
-
-// src/hooks/use-form-field-suggestions.ts
-var import_editor_elements7 = require("@elementor/editor-elements");
-var import_editor_props64 = require("@elementor/editor-props");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-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"
-];
-var FORM_ELEMENT_TYPE = "e-form";
-var CSS_ID_PROP_KEY = "_cssid";
-function isFormFieldWidgetType(widgetType) {
-  return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
-}
-function extractStringPropValue(value) {
-  return import_editor_props64.stringPropTypeUtil.extract(value);
-}
-function getSettingWithDefault(child, widgetType, key) {
-  const fromGet = child.settings.get(key);
-  if (fromGet !== null && fromGet !== void 0) {
-    return fromGet;
-  }
-  const schema = (0, import_editor_elements7.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
-  return schema?.[key]?.default ?? null;
-}
-function getFieldCssId(child, widgetType) {
-  return extractStringPropValue(getSettingWithDefault(child, widgetType, CSS_ID_PROP_KEY));
-}
-function getFormContainer(elementId) {
-  let container = (0, import_editor_elements7.getContainer)(elementId);
-  while (container) {
-    if (container.model.get("elType") === FORM_ELEMENT_TYPE) {
-      return container;
+var UrlPopover = ({
+  popupState,
+  restoreValue,
+  anchorRef,
+  value,
+  onChange,
+  openInNewTab,
+  onToggleNewTab
+}) => {
+  const inputRef = (0, import_react68.useRef)(null);
+  (0, import_react68.useEffect)(() => {
+    if (popupState.isOpen) {
+      requestAnimationFrame(() => inputRef.current?.focus());
     }
-    container = container.parent ?? null;
-  }
-  return null;
-}
-function useFormFieldSuggestions(options) {
-  return (0, import_editor_v1_adapters2.__privateUseListenTo)(
-    [
-      (0, import_editor_v1_adapters2.v1ReadyEvent)(),
-      (0, import_editor_v1_adapters2.commandEndEvent)("document/elements/create"),
-      (0, import_editor_v1_adapters2.commandEndEvent)("document/elements/delete"),
-      (0, import_editor_v1_adapters2.commandEndEvent)("document/elements/set-settings")
-    ],
-    () => {
-      const selectedElements = (0, import_editor_elements7.getSelectedElements)();
-      const selectedElement = selectedElements[0];
-      if (!selectedElement) {
-        return [];
+  }, [popupState.isOpen]);
+  const handleClose = () => {
+    restoreValue();
+    popupState.close();
+  };
+  return /* @__PURE__ */ React115.createElement(
+    import_ui99.Popover,
+    {
+      slotProps: {
+        paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
+      },
+      ...(0, import_ui99.bindPopover)(popupState),
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      onClose: handleClose
+    },
+    /* @__PURE__ */ React115.createElement(import_ui99.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React115.createElement(
+      import_ui99.TextField,
+      {
+        value,
+        onChange,
+        size: "tiny",
+        fullWidth: true,
+        placeholder: (0, import_i18n57.__)("Type a URL", "elementor"),
+        inputProps: { ref: inputRef },
+        color: "secondary",
+        InputProps: { sx: { borderRadius: "8px" } },
+        onKeyUp: (event) => event.key === "Enter" && handleClose()
+      }
+    ), /* @__PURE__ */ React115.createElement(import_ui99.Tooltip, { title: (0, import_i18n57.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React115.createElement(
+      import_ui99.ToggleButton,
+      {
+        size: "tiny",
+        value: "newTab",
+        selected: openInNewTab,
+        onClick: onToggleNewTab,
+        "aria-label": (0, import_i18n57.__)("Open in a new tab", "elementor"),
+        sx: { borderRadius: "8px" }
+      },
+      /* @__PURE__ */ React115.createElement(import_icons37.ExternalLinkIcon, { fontSize: "tiny" })
+    )))
+  );
+};
+
+// src/components/inline-editor-toolbar.tsx
+var InlineEditorToolbar = ({
+  editor,
+  elementId,
+  sx = {},
+  inControlPanel = false
+}) => {
+  const [urlValue, setUrlValue] = (0, import_react69.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react69.useState)(false);
+  const toolbarRef = (0, import_react69.useRef)(null);
+  const linkPopupState = (0, import_ui100.usePopupState)({ variant: "popover" });
+  const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
+  const editorState = (0, import_react70.useEditorState)({
+    editor,
+    selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
+  });
+  const formatButtonsList = (0, import_react69.useMemo)(() => {
+    const buttons = Object.values(formatButtons);
+    if (isElementClickable) {
+      return buttons.filter((button) => button.action !== "link");
+    }
+    return buttons;
+  }, [isElementClickable]);
+  const handleLinkClick = () => {
+    const linkAttrs = editor.getAttributes("link");
+    setUrlValue(linkAttrs.href || "");
+    setOpenInNewTab(linkAttrs.target === "_blank");
+    linkPopupState.open(toolbarRef.current);
+  };
+  const handleUrlChange = (event) => {
+    setUrlValue(event.target.value);
+  };
+  const handleToggleNewTab = () => {
+    setOpenInNewTab(!openInNewTab);
+  };
+  const handleUrlSubmit = () => {
+    if (urlValue) {
+      editor.chain().focus().setLink({
+        href: urlValue,
+        target: openInNewTab ? "_blank" : "_self"
+      }).run();
+    } else {
+      editor.chain().focus().unsetLink().run();
+    }
+    if (elementId) {
+      window.dispatchEvent(
+        new CustomEvent("elementor:inline-link-changed", {
+          detail: { elementId }
+        })
+      );
+    }
+    linkPopupState.close();
+  };
+  (0, import_react69.useEffect)(() => {
+    if (!inControlPanel) {
+      editor?.commands?.focus();
+    }
+  }, [editor, inControlPanel]);
+  return /* @__PURE__ */ React116.createElement(
+    import_ui100.Box,
+    {
+      ref: toolbarRef,
+      sx: {
+        display: "inline-flex",
+        gap: 0.5,
+        padding: 0.5,
+        borderRadius: "8px",
+        backgroundColor: "background.paper",
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+        alignItems: "center",
+        visibility: linkPopupState.isOpen ? "hidden" : "visible",
+        pointerEvents: linkPopupState.isOpen ? "none" : "all",
+        ...sx,
+        ...inControlPanel && {
+          width: "100%",
+          justifyContent: "center",
+          flexDirection: "row",
+          backgroundColor: "transparent",
+          boxShadow: "none",
+          borderWidth: "0",
+          borderBottom: "1px solid",
+          borderBottomColor: (theme) => theme.palette.text.secondary,
+          borderRadius: "0",
+          position: "absolute",
+          top: "0",
+          left: "0",
+          "&, & .MuiIconButton-root, & .MuiToggleButton-root": {
+            color: (theme) => theme.palette.text.primary
+          }
+        }
+      }
+    },
+    /* @__PURE__ */ React116.createElement(import_ui100.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React116.createElement(import_ui100.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React116.createElement(
+      import_ui100.ToggleButtonGroup,
+      {
+        value: editorState,
+        size: "tiny",
+        sx: {
+          display: "flex",
+          gap: 0.5,
+          border: "none",
+          [`& .${import_ui100.toggleButtonGroupClasses.firstButton}, & .${import_ui100.toggleButtonGroupClasses.middleButton}, & .${import_ui100.toggleButtonGroupClasses.lastButton}`]: {
+            borderRadius: "8px",
+            border: "none",
+            marginLeft: 0,
+            "&.Mui-selected": {
+              marginLeft: 0
+            },
+            "& + &.Mui-selected": {
+              marginLeft: 0
+            }
+          },
+          ...inControlPanel && {
+            justifyContent: "space-between",
+            width: "100%",
+            "& svg": {
+              width: "0.7rem",
+              height: "0.7rem"
+            }
+          }
+        }
+      },
+      formatButtonsList.map((button) => /* @__PURE__ */ React116.createElement(import_ui100.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React116.createElement(
+        import_ui100.ToggleButton,
+        {
+          value: button.action,
+          "aria-label": button.label,
+          size: "tiny",
+          onClick: () => {
+            if (button.action === "link") {
+              handleLinkClick();
+            } else {
+              button.method?.(editor);
+            }
+            editor?.commands?.focus();
+          }
+        },
+        button.icon
+      )))
+    ),
+    /* @__PURE__ */ React116.createElement(
+      UrlPopover,
+      {
+        popupState: linkPopupState,
+        anchorRef: toolbarRef,
+        restoreValue: handleUrlSubmit,
+        value: urlValue,
+        onChange: handleUrlChange,
+        openInNewTab,
+        onToggleNewTab: handleToggleNewTab
+      }
+    )
+  );
+};
+var checkIfElementIsClickable = (elementId) => {
+  const container = (0, import_editor_elements7.getContainer)(elementId);
+  const type = container?.model.get("widgetType");
+  const isButton = type === "e-button";
+  const hasLink = !!(0, import_editor_elements7.getElementSetting)(elementId, "link")?.value?.destination;
+  return isButton || hasLink;
+};
+var toolbarButtons = {
+  clear: {
+    label: (0, import_i18n58.__)("Clear", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(import_icons38.MinusIcon, { fontSize: "tiny" }),
+    action: "clear",
+    method: (editor) => {
+      editor.chain().focus().clearNodes().unsetAllMarks().run();
+    }
+  },
+  bold: {
+    label: (0, import_i18n58.__)("Bold", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(import_icons38.BoldIcon, { fontSize: "tiny" }),
+    action: "bold",
+    method: (editor) => {
+      editor.chain().focus().toggleBold().run();
+    }
+  },
+  italic: {
+    label: (0, import_i18n58.__)("Italic", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(import_icons38.ItalicIcon, { fontSize: "tiny" }),
+    action: "italic",
+    method: (editor) => {
+      editor.chain().focus().toggleItalic().run();
+    }
+  },
+  underline: {
+    label: (0, import_i18n58.__)("Underline", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(import_icons38.UnderlineIcon, { fontSize: "tiny" }),
+    action: "underline",
+    method: (editor) => {
+      editor.chain().focus().toggleUnderline().run();
+    }
+  },
+  strike: {
+    label: (0, import_i18n58.__)("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(import_icons38.StrikethroughIcon, { fontSize: "tiny" }),
+    action: "strike",
+    method: (editor) => {
+      editor.chain().focus().toggleStrike().run();
+    }
+  },
+  superscript: {
+    label: (0, import_i18n58.__)("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(import_icons38.SuperscriptIcon, { fontSize: "tiny" }),
+    action: "superscript",
+    method: (editor) => {
+      editor.chain().focus().toggleSuperscript().run();
+    }
+  },
+  subscript: {
+    label: (0, import_i18n58.__)("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(import_icons38.SubscriptIcon, { fontSize: "tiny" }),
+    action: "subscript",
+    method: (editor) => {
+      editor.chain().focus().toggleSubscript().run();
+    }
+  },
+  link: {
+    label: (0, import_i18n58.__)("Link", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(import_icons38.LinkIcon, { fontSize: "tiny" }),
+    action: "link",
+    method: null
+  }
+};
+var { clear: clearButton, ...formatButtons } = toolbarButtons;
+var possibleFormats = Object.keys(formatButtons);
+
+// src/controls/inline-editing-control.tsx
+var InlineEditingControl = createControl(({ sx, attributes, props, context: { elementId } }) => {
+  const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
+  const { value: rawValue } = usePropKeyContext();
+  const content = value ?? extractInlineHtmlContent(rawValue);
+  const [editor, setEditor] = (0, import_react71.useState)(null);
+  const handleChange = (0, import_react71.useCallback)(
+    (newValue) => {
+      const html = newValue ?? "";
+      setValue(html);
+    },
+    [setValue]
+  );
+  return /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(import_ui101.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React117.createElement(
+    InlineEditorToolbar,
+    {
+      editor,
+      elementId,
+      sx: (theme) => ({
+        boxShadow: "none",
+        border: "1px solid",
+        borderColor: theme.palette.text.secondary,
+        mb: 0.5
+      }),
+      inControlPanel: true
+    }
+  ), /* @__PURE__ */ React117.createElement(
+    import_ui101.Box,
+    {
+      sx: (theme) => ({
+        p: 0.8,
+        border: "1px solid",
+        borderColor: theme.palette.text.secondary,
+        borderRadius: "8px",
+        transition: "border-color .2s ease, box-shadow .2s ease",
+        "&:hover": {
+          borderColor: theme.palette.text.primary
+        },
+        "&:focus-within": {
+          borderColor: theme.palette.text.primary,
+          boxShadow: `0 0 0 1px ${theme.palette.text.primary}`
+        },
+        "& .ProseMirror:focus": {
+          outline: "none"
+        },
+        "& .ProseMirror": {
+          minHeight: "100px",
+          fontSize: "12px",
+          "& a": {
+            color: "inherit"
+          },
+          "& .elementor-inline-editor-reset": {
+            margin: 0,
+            padding: 0
+          },
+          "&.is-empty::before": {
+            content: "attr(data-placeholder)",
+            color: "text.tertiary",
+            pointerEvents: "none",
+            position: "absolute",
+            opacity: 0.6
+          }
+        },
+        ".strip-styles *": {
+          all: "unset"
+        },
+        ...sx
+      }),
+      ...attributes,
+      ...props
+    },
+    /* @__PURE__ */ React117.createElement(
+      InlineEditor,
+      {
+        value: content,
+        setValue: handleChange,
+        placeholder: placeholder ?? null,
+        onEditorCreate: setEditor,
+        onEditorDestroy: () => setEditor(null),
+        sx: {
+          paddingBlockStart: 5
+        }
+      }
+    )
+  )));
+});
+
+// src/controls/email-form-action-control/index.tsx
+var React121 = __toESM(require("react"));
+var import_editor_props68 = require("@elementor/editor-props");
+var import_editor_ui16 = require("@elementor/editor-ui");
+var import_ui105 = require("@elementor/ui");
+var import_i18n60 = require("@wordpress/i18n");
+
+// src/controls/email-form-action-control/fields.tsx
+var React120 = __toESM(require("react"));
+var import_editor_ui15 = require("@elementor/editor-ui");
+var import_ui104 = require("@elementor/ui");
+var import_i18n59 = require("@wordpress/i18n");
+
+// src/hooks/use-form-field-suggestions.ts
+var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_props66 = require("@elementor/editor-props");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+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"
+];
+var FORM_ELEMENT_TYPE = "e-form";
+var CSS_ID_PROP_KEY = "_cssid";
+function isFormFieldWidgetType(widgetType) {
+  return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
+}
+function extractStringPropValue(value) {
+  return import_editor_props66.stringPropTypeUtil.extract(value);
+}
+function getSettingWithDefault(child, widgetType, key) {
+  const fromGet = child.settings.get(key);
+  if (fromGet !== null && fromGet !== void 0) {
+    return fromGet;
+  }
+  const schema = (0, import_editor_elements8.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
+  return schema?.[key]?.default ?? null;
+}
+function getFieldCssId(child, widgetType) {
+  return extractStringPropValue(getSettingWithDefault(child, widgetType, CSS_ID_PROP_KEY));
+}
+function getFormContainer(elementId) {
+  let container = (0, import_editor_elements8.getContainer)(elementId);
+  while (container) {
+    if (container.model.get("elType") === FORM_ELEMENT_TYPE) {
+      return container;
+    }
+    container = container.parent ?? null;
+  }
+  return null;
+}
+function useFormFieldSuggestions(options) {
+  return (0, import_editor_v1_adapters2.__privateUseListenTo)(
+    [
+      (0, import_editor_v1_adapters2.v1ReadyEvent)(),
+      (0, import_editor_v1_adapters2.commandEndEvent)("document/elements/create"),
+      (0, import_editor_v1_adapters2.commandEndEvent)("document/elements/delete"),
+      (0, import_editor_v1_adapters2.commandEndEvent)("document/elements/set-settings")
+    ],
+    () => {
+      const selectedElements = (0, import_editor_elements8.getSelectedElements)();
+      const selectedElement = selectedElements[0];
+      if (!selectedElement) {
+        return [];
       }
       const formContainer = getFormContainer(selectedElement.id);
       if (!formContainer?.children) {
@@ -8286,52 +8750,68 @@ function useFormFieldSuggestions(options) {
 }
 
 // src/controls/email-form-action-control/email-chips-field.tsx
-var React116 = __toESM(require("react"));
-var import_react69 = require("react");
-var import_editor_props65 = require("@elementor/editor-props");
-var import_ui100 = require("@elementor/ui");
+var React118 = __toESM(require("react"));
+var import_react72 = require("react");
+var import_editor_props67 = require("@elementor/editor-props");
+var import_ui102 = require("@elementor/ui");
 
 // src/controls/email-form-action-control/utils.ts
 var import_schema = require("@elementor/schema");
-var import_utils9 = require("@elementor/utils");
+var import_utils8 = require("@elementor/utils");
 var MIN_PRO_VERSION_FOR_MENTIONS = "4.1.0";
 var CHIP_TRIGGER_KEYS = /* @__PURE__ */ new Set([" ", ","]);
 function isValidEmail(email) {
   return import_schema.z.string().email().safeParse(email).success;
 }
+var FORM_FIELD_SHORTCODE_PATTERN = /^\[[^[\]]+]$/;
+function isFormFieldShortcode(value) {
+  return FORM_FIELD_SHORTCODE_PATTERN.test(value);
+}
 var shouldShowMentionsInfo = () => {
-  if (!(0, import_utils9.hasProInstalled)()) {
+  if (!(0, import_utils8.hasProInstalled)()) {
     return true;
   }
   const proVersion = window.elementorPro?.config?.version;
   if (!proVersion) {
     return false;
   }
-  return (0, import_utils9.isVersionGreaterOrEqual)(proVersion, MIN_PRO_VERSION_FOR_MENTIONS);
+  return (0, import_utils8.isVersionGreaterOrEqual)(proVersion, MIN_PRO_VERSION_FOR_MENTIONS);
 };
 
 // src/controls/email-form-action-control/email-chips-field.tsx
-var EmailChipsControl = createControl(({ placeholder }) => {
-  const { value, setValue, disabled } = useBoundProp(import_editor_props65.stringArrayPropTypeUtil);
-  const [inputValue, setInputValue] = (0, import_react69.useState)("");
+var isValidRecipient = (address) => isValidEmail(address) || isFormFieldShortcode(address);
+function resolveMention(raw, suggestions) {
+  if (!raw.startsWith("@")) {
+    return raw;
+  }
+  const match = suggestions.find((suggestion) => createMentionPattern(suggestion.value, "start").test(raw));
+  return match ? `[${match.value}]` : raw;
+}
+var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
+  const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
+  const [inputValue, setInputValue] = (0, import_react72.useState)("");
   const items2 = value || [];
-  const selectedValues = items2.map((item) => import_editor_props65.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
+  const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
+  const suggestionOptions = (0, import_react72.useMemo)(
+    () => suggestions.map((suggestion) => `[${suggestion.value}]`),
+    [suggestions]
+  );
   const tryAddChip = (raw) => {
-    const address = raw.trim();
-    if (!address || selectedValues.includes(address) || !isValidEmail(address)) {
+    const address = resolveMention(raw.trim(), suggestions);
+    if (!address || selectedValues.includes(address) || !isValidRecipient(address)) {
       return;
     }
-    setValue([...items2, import_editor_props65.stringPropTypeUtil.create(address)]);
+    setValue([...items2, import_editor_props67.stringPropTypeUtil.create(address)]);
     setInputValue("");
   };
   const handleChange = (_, newValue) => {
     const updated = [];
     for (const entry of newValue) {
-      const address = entry.trim();
-      if (!address || !isValidEmail(address)) {
+      const address = resolveMention(entry.trim(), suggestions);
+      if (!address || !isValidRecipient(address)) {
         continue;
       }
-      updated.push(import_editor_props65.stringPropTypeUtil.create(address));
+      updated.push(import_editor_props67.stringPropTypeUtil.create(address));
     }
     setValue(updated);
     setInputValue("");
@@ -8347,8 +8827,8 @@ var EmailChipsControl = createControl(({ placeholder }) => {
       tryAddChip(inputValue);
     }
   };
-  return /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(
-    import_ui100.Autocomplete,
+  return /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
+    import_ui102.Autocomplete,
     {
       fullWidth: true,
       multiple: true,
@@ -8363,87 +8843,108 @@ var EmailChipsControl = createControl(({ placeholder }) => {
       },
       value: selectedValues,
       onChange: handleChange,
-      options: [],
+      options: suggestionOptions,
+      filterOptions: (options, state) => {
+        const query = state.inputValue.trim().replace(/^@/, "").toLowerCase();
+        return query ? options.filter((option) => option.toLowerCase().includes(query)) : options;
+      },
+      filterSelectedOptions: true,
       onBlur: handleBlur,
       getOptionLabel: (option) => option,
       isOptionEqualToValue: (option, val) => option === val,
-      renderInput: (params) => /* @__PURE__ */ React116.createElement(import_ui100.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
-      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React116.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
+      renderInput: (params) => /* @__PURE__ */ React118.createElement(import_ui102.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
+      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React118.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
     }
   ));
 });
-var EmailChipsField = ({ fieldLabel, placeholder }) => /* @__PURE__ */ React116.createElement(import_ui100.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(EmailChipsControl, { placeholder })));
+var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(EmailChipsControl, { placeholder, suggestions })));
 
 // src/controls/email-form-action-control/email-field.tsx
-var React117 = __toESM(require("react"));
-var import_ui101 = require("@elementor/ui");
-var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React117.createElement(import_ui101.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React117.createElement(import_ui101.Grid, { item: true }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React117.createElement(import_ui101.Grid, { item: true }, /* @__PURE__ */ React117.createElement(TextControl, { placeholder }))));
+var React119 = __toESM(require("react"));
+var import_ui103 = require("@elementor/ui");
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true }, /* @__PURE__ */ React119.createElement(TextControl, { placeholder }))));
 
 // src/controls/email-form-action-control/fields.tsx
-var SendToField = ({ placeholder }) => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Send to", "elementor"), placeholder }));
-var SubjectField = () => /* @__PURE__ */ React118.createElement(
+var SendToField = ({ placeholder }) => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React120.createElement(import_ui104.Stack, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(
+    EmailChipsField,
+    {
+      fieldLabel: (0, import_i18n59.__)("Send to", "elementor"),
+      placeholder,
+      suggestions
+    }
+  ), shouldShowMentionsInfo() && /* @__PURE__ */ React120.createElement(import_editor_ui15.InfoAlert, null, (0, import_i18n59.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
+};
+var SubjectField = () => /* @__PURE__ */ React120.createElement(
   EmailField,
   {
     bind: "subject",
-    label: (0, import_i18n57.__)("Email subject", "elementor"),
-    placeholder: (0, import_i18n57.__)("New form submission", "elementor")
+    label: (0, import_i18n59.__)("Email subject", "elementor"),
+    placeholder: (0, import_i18n59.__)("New form submission", "elementor")
   }
 );
 var MessageField = () => {
   const suggestions = useFormFieldSuggestions();
-  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Message", "elementor"))), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(import_editor_ui15.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n57.__)(
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Message", "elementor"))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(import_editor_ui15.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n59.__)(
     "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
     "elementor"
-  ) : (0, import_i18n57.__)("[all-fields] shortcode sends all fields.", "elementor")))));
+  ) : (0, import_i18n59.__)("[all-fields] shortcode sends all fields.", "elementor")))));
 };
-var FromEmailField = () => /* @__PURE__ */ React118.createElement(
+var FromEmailField = () => /* @__PURE__ */ React120.createElement(
   EmailField,
   {
     bind: "from",
-    label: (0, import_i18n57.__)("From email", "elementor"),
-    placeholder: (0, import_i18n57.__)("What email should appear as the sender?", "elementor")
+    label: (0, import_i18n59.__)("From email", "elementor"),
+    placeholder: (0, import_i18n59.__)("What email should appear as the sender?", "elementor")
   }
 );
-var FromNameField = () => /* @__PURE__ */ React118.createElement(
+var FromNameField = () => /* @__PURE__ */ React120.createElement(
   EmailField,
   {
     bind: "from-name",
-    label: (0, import_i18n57.__)("From name", "elementor"),
-    placeholder: (0, import_i18n57.__)("What name should appear as the sender?", "elementor")
+    label: (0, import_i18n59.__)("From name", "elementor"),
+    placeholder: (0, import_i18n59.__)("What name should appear as the sender?", "elementor")
   }
 );
 var ReplyToField = () => {
   const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Reply-to", "elementor"))), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Reply-to", "elementor"))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(
     MentionTextAreaControl,
     {
       suggestions: emailSuggestions,
       rows: 1,
       triggerPosition: "start",
-      placeholder: (0, import_i18n57.__)("You can type @ to insert an email field", "elementor")
+      placeholder: (0, import_i18n59.__)("You can type @ to insert an email field", "elementor")
     }
   ))));
 };
-var CcField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Cc", "elementor") }));
-var BccField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Bcc", "elementor") }));
-var MetaDataField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React118.createElement(import_ui102.Stack, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Metadata", "elementor")), /* @__PURE__ */ React118.createElement(
+var CcField = () => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: (0, import_i18n59.__)("Cc", "elementor"), suggestions }));
+};
+var BccField = () => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: (0, import_i18n59.__)("Bcc", "elementor"), suggestions }));
+};
+var MetaDataField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React120.createElement(import_ui104.Stack, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Metadata", "elementor")), /* @__PURE__ */ React120.createElement(
   ChipsControl,
   {
     options: [
-      { label: (0, import_i18n57.__)("Date", "elementor"), value: "date" },
-      { label: (0, import_i18n57.__)("Time", "elementor"), value: "time" },
-      { label: (0, import_i18n57.__)("Page URL", "elementor"), value: "page-url" },
-      { label: (0, import_i18n57.__)("User agent", "elementor"), value: "user-agent" },
-      { label: (0, import_i18n57.__)("Credit", "elementor"), value: "credit" }
+      { label: (0, import_i18n59.__)("Date", "elementor"), value: "date" },
+      { label: (0, import_i18n59.__)("Time", "elementor"), value: "time" },
+      { label: (0, import_i18n59.__)("Page URL", "elementor"), value: "page-url" },
+      { label: (0, import_i18n59.__)("User agent", "elementor"), value: "user-agent" },
+      { label: (0, import_i18n59.__)("Credit", "elementor"), value: "credit" }
     ]
   }
 )));
-var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Send as", "elementor"))), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(
+var SendAsField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Send as", "elementor"))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(
   SelectControl,
   {
     options: [
-      { label: (0, import_i18n57.__)("HTML", "elementor"), value: "html" },
-      { label: (0, import_i18n57.__)("Plain Text", "elementor"), value: "plain" }
+      { label: (0, import_i18n59.__)("HTML", "elementor"), value: "html" },
+      { label: (0, import_i18n59.__)("Plain Text", "elementor"), value: "plain" }
     ]
   }
 ))));
@@ -8451,28 +8952,28 @@ var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider,
 // src/controls/email-form-action-control/index.tsx
 var EmailFormActionControl = createControl(
   ({ toPlaceholder, label }) => {
-    const { value, setValue, ...propContext } = useBoundProp(import_editor_props66.emailsPropTypeUtil);
-    return /* @__PURE__ */ React119.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { gap: 2 }, /* @__PURE__ */ React119.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n58.__)("settings", "elementor") : (0, import_i18n58.__)("Email settings", "elementor")), /* @__PURE__ */ React119.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React119.createElement(SubjectField, null), /* @__PURE__ */ React119.createElement(MessageField, null), /* @__PURE__ */ React119.createElement(FromEmailField, null), /* @__PURE__ */ React119.createElement(AdvancedSettings, null)));
+    const { value, setValue, ...propContext } = useBoundProp(import_editor_props68.emailsPropTypeUtil);
+    return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(import_ui105.Stack, { gap: 2 }, /* @__PURE__ */ React121.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n60.__)("settings", "elementor") : (0, import_i18n60.__)("Email settings", "elementor")), /* @__PURE__ */ React121.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React121.createElement(SubjectField, null), /* @__PURE__ */ React121.createElement(MessageField, null), /* @__PURE__ */ React121.createElement(FromEmailField, null), /* @__PURE__ */ React121.createElement(AdvancedSettings, null)));
   }
 );
-var AdvancedSettings = () => /* @__PURE__ */ React119.createElement(import_editor_ui16.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React119.createElement(import_ui103.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { gap: 2 }, /* @__PURE__ */ React119.createElement(FromNameField, null), /* @__PURE__ */ React119.createElement(ReplyToField, null), /* @__PURE__ */ React119.createElement(CcField, null), /* @__PURE__ */ React119.createElement(BccField, null), /* @__PURE__ */ React119.createElement(import_ui103.Divider, null), /* @__PURE__ */ React119.createElement(MetaDataField, null), /* @__PURE__ */ React119.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React121.createElement(import_editor_ui16.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React121.createElement(import_ui105.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React121.createElement(import_ui105.Stack, { gap: 2 }, /* @__PURE__ */ React121.createElement(FromNameField, null), /* @__PURE__ */ React121.createElement(ReplyToField, null), /* @__PURE__ */ React121.createElement(CcField, null), /* @__PURE__ */ React121.createElement(BccField, null), /* @__PURE__ */ React121.createElement(import_ui105.Divider, null), /* @__PURE__ */ React121.createElement(MetaDataField, null), /* @__PURE__ */ React121.createElement(SendAsField, null))));
 
 // src/controls/attachment-type-control.tsx
-var React120 = __toESM(require("react"));
+var React122 = __toESM(require("react"));
 var import_editor_ui17 = require("@elementor/editor-ui");
-var import_ui104 = require("@elementor/ui");
-var import_i18n59 = require("@wordpress/i18n");
+var import_ui106 = require("@elementor/ui");
+var import_i18n61 = require("@wordpress/i18n");
 var AttachmentTypeControl = createControl(({ label, options }) => {
-  return /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(SelectControl, { options })), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(import_editor_ui17.InfoAlert, null, (0, import_i18n59.__)(
+  return /* @__PURE__ */ React122.createElement(import_ui106.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React122.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React122.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React122.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React122.createElement(SelectControl, { options })), /* @__PURE__ */ React122.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React122.createElement(import_editor_ui17.InfoAlert, null, (0, import_i18n61.__)(
     "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
     "elementor"
   ))));
 });
 
 // src/controls/grid-span-control.tsx
-var React121 = __toESM(require("react"));
-var import_editor_props67 = require("@elementor/editor-props");
-var import_ui105 = require("@elementor/ui");
+var React123 = __toESM(require("react"));
+var import_editor_props69 = require("@elementor/editor-props");
+var import_ui107 = require("@elementor/ui");
 var GridSpanControl = createControl(
   ({
     placeholder: propPlaceholder,
@@ -8483,14 +8984,14 @@ var GridSpanControl = createControl(
     sx,
     ariaLabel
   }) => {
-    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(import_editor_props67.spanPropTypeUtil);
+    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(import_editor_props69.spanPropTypeUtil);
     const handleChange = (event) => {
       const next = event.target.value;
       setValue(next === "" ? null : next);
     };
     const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
-    return /* @__PURE__ */ React121.createElement(ControlActions, null, /* @__PURE__ */ React121.createElement(
-      import_ui105.TextField,
+    return /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
+      import_ui107.TextField,
       {
         size: "tiny",
         fullWidth: true,
@@ -8509,26 +9010,26 @@ var GridSpanControl = createControl(
   }
 );
 
-// src/components/promotions/display-conditions-control.tsx
-var React123 = __toESM(require("react"));
-var import_react71 = require("react");
-var import_icons37 = require("@elementor/icons");
-var import_ui107 = require("@elementor/ui");
-var import_i18n60 = require("@wordpress/i18n");
+// src/components/promotions/display-conditions-control.tsx
+var React125 = __toESM(require("react"));
+var import_react74 = require("react");
+var import_icons39 = require("@elementor/icons");
+var import_ui109 = require("@elementor/ui");
+var import_i18n62 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
-var React122 = __toESM(require("react"));
-var import_react70 = require("react");
+var React124 = __toESM(require("react"));
+var import_react73 = require("react");
 var import_editor_ui18 = require("@elementor/editor-ui");
-var import_ui106 = require("@elementor/ui");
+var import_ui108 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = (0, import_react70.forwardRef)(
+var PromotionTrigger = (0, import_react73.forwardRef)(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react70.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react73.useState)(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = (0, import_react70.useCallback)(() => {
+    const toggle = (0, import_react73.useCallback)(() => {
       setIsOpen((prev) => {
         if (!prev) {
           trackViewPromotion(trackingData);
@@ -8536,8 +9037,8 @@ var PromotionTrigger = (0, import_react70.forwardRef)(
         return !prev;
       });
     }, [trackingData]);
-    (0, import_react70.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React122.createElement(React122.Fragment, null, promotion && /* @__PURE__ */ React122.createElement(
+    (0, import_react73.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
+    return /* @__PURE__ */ React124.createElement(React124.Fragment, null, promotion && /* @__PURE__ */ React124.createElement(
       import_editor_ui18.PromotionInfotip,
       {
         title: promotion.title,
@@ -8551,8 +9052,8 @@ var PromotionTrigger = (0, import_react70.forwardRef)(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React122.createElement(
-        import_ui106.Box,
+      /* @__PURE__ */ React124.createElement(
+        import_ui108.Box,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -8560,19 +9061,19 @@ var PromotionTrigger = (0, import_react70.forwardRef)(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React122.createElement(import_editor_ui18.PromotionChip, null)
+        children ?? /* @__PURE__ */ React124.createElement(import_editor_ui18.PromotionChip, null)
       )
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var ARIA_LABEL = (0, import_i18n60.__)("Display Conditions", "elementor");
+var ARIA_LABEL = (0, import_i18n62.__)("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = (0, import_react71.useRef)(null);
-  return /* @__PURE__ */ React123.createElement(
-    import_ui107.Stack,
+  const triggerRef = (0, import_react74.useRef)(null);
+  return /* @__PURE__ */ React125.createElement(
+    import_ui109.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -8581,9 +9082,9 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React123.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React123.createElement(
-      import_ui107.IconButton,
+    /* @__PURE__ */ React125.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React125.createElement(import_ui109.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React125.createElement(
+      import_ui109.IconButton,
       {
         size: "tiny",
         "aria-label": ARIA_LABEL,
@@ -8595,23 +9096,23 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React123.createElement(import_icons37.SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React125.createElement(import_icons39.SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-var React124 = __toESM(require("react"));
-var import_react72 = require("react");
-var import_icons38 = require("@elementor/icons");
-var import_ui108 = require("@elementor/ui");
-var import_i18n61 = require("@wordpress/i18n");
-var ARIA_LABEL2 = (0, import_i18n61.__)("Attributes", "elementor");
+var React126 = __toESM(require("react"));
+var import_react75 = require("react");
+var import_icons40 = require("@elementor/icons");
+var import_ui110 = require("@elementor/ui");
+var import_i18n63 = require("@wordpress/i18n");
+var ARIA_LABEL2 = (0, import_i18n63.__)("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = (0, import_react72.useRef)(null);
-  return /* @__PURE__ */ React124.createElement(
-    import_ui108.Stack,
+  const triggerRef = (0, import_react75.useRef)(null);
+  return /* @__PURE__ */ React126.createElement(
+    import_ui110.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -8620,9 +9121,9 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React124.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React124.createElement(import_ui108.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React124.createElement(
-      import_icons38.PlusIcon,
+    /* @__PURE__ */ React126.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React126.createElement(import_ui110.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React126.createElement(
+      import_icons40.PlusIcon,
       {
         "aria-label": ARIA_LABEL2,
         fontSize: "tiny",
@@ -8635,21 +9136,21 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-var React125 = __toESM(require("react"));
-var import_icons39 = require("@elementor/icons");
-var import_ui109 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui109.styled)(import_ui109.IconButton)(({ theme }) => ({
+var React127 = __toESM(require("react"));
+var import_icons41 = require("@elementor/icons");
+var import_ui111 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui111.styled)(import_ui111.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React125.createElement(import_ui109.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React125.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React125.createElement(import_icons39.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React127.createElement(import_ui111.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React127.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React127.createElement(import_icons41.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-var React126 = __toESM(require("react"));
-var import_react73 = require("react");
-var import_icons40 = require("@elementor/icons");
-var import_ui110 = require("@elementor/ui");
-var import_i18n62 = require("@wordpress/i18n");
+var React128 = __toESM(require("react"));
+var import_react76 = require("react");
+var import_icons42 = require("@elementor/icons");
+var import_ui112 = require("@elementor/ui");
+var import_i18n64 = require("@wordpress/i18n");
 var SIZE12 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -8668,7 +9169,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = (0, import_react73.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react76.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -8731,8 +9232,8 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React126.createElement(
-    import_ui110.IconButton,
+  const addButton = /* @__PURE__ */ React128.createElement(
+    import_ui112.IconButton,
     {
       size: SIZE12,
       sx: {
@@ -8740,32 +9241,32 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": (0, import_i18n62.__)("Add item", "elementor")
+      "aria-label": (0, import_i18n64.__)("Add item", "elementor")
     },
-    /* @__PURE__ */ React126.createElement(import_icons40.PlusIcon, { fontSize: SIZE12 })
+    /* @__PURE__ */ React128.createElement(import_icons42.PlusIcon, { fontSize: SIZE12 })
   );
-  return /* @__PURE__ */ React126.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React126.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React126.createElement(
-    import_ui110.Infotip,
+  return /* @__PURE__ */ React128.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React128.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React128.createElement(
+    import_ui112.Infotip,
     {
       placement: "right",
       content: addButtonInfotipContent,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React126.createElement(import_ui110.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React126.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React128.createElement(import_ui112.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React128.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React126.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React126.createElement(
+    return /* @__PURE__ */ React128.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React128.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React126.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React126.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React126.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React126.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React128.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React128.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -8779,7 +9280,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React126.createElement(
+      (props) => /* @__PURE__ */ React128.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -8819,18 +9320,18 @@ var RepeaterItem = ({
     },
     wrappedOnPopoverClose
   );
-  const triggerProps = (0, import_ui110.bindTrigger)(popoverState);
+  const triggerProps = (0, import_ui112.bindTrigger)(popoverState);
   usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
-  const duplicateLabel = (0, import_i18n62.__)("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? (0, import_i18n62.__)("Show", "elementor") : (0, import_i18n62.__)("Hide", "elementor");
-  const removeLabel = (0, import_i18n62.__)("Remove", "elementor");
-  return /* @__PURE__ */ React126.createElement(import_ui110.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React126.createElement(
+  const duplicateLabel = (0, import_i18n64.__)("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? (0, import_i18n64.__)("Show", "elementor") : (0, import_i18n64.__)("Hide", "elementor");
+  const removeLabel = (0, import_i18n64.__)("Remove", "elementor");
+  return /* @__PURE__ */ React128.createElement(import_ui112.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React128.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": (0, import_i18n62.__)("Open item", "elementor"),
+      "aria-label": (0, import_i18n64.__)("Open item", "elementor"),
       ...triggerProps,
       onClick: (e) => {
         triggerProps.onClick(e);
@@ -8839,15 +9340,15 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React126.createElement(React126.Fragment, null, showDuplicate && /* @__PURE__ */ React126.createElement(import_ui110.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(import_ui110.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React126.createElement(import_icons40.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React126.createElement(import_ui110.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(import_ui110.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React126.createElement(import_icons40.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React126.createElement(import_icons40.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React126.createElement(import_ui110.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(import_ui110.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React126.createElement(import_icons40.XIcon, { fontSize: SIZE12 }))))
+      actions: /* @__PURE__ */ React128.createElement(React128.Fragment, null, showDuplicate && /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React128.createElement(import_icons42.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React128.createElement(import_icons42.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React128.createElement(import_icons42.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React128.createElement(import_icons42.XIcon, { fontSize: SIZE12 }))))
     }
-  ), /* @__PURE__ */ React126.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React126.createElement(import_ui110.Box, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React128.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React128.createElement(import_ui112.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = (0, import_react73.useState)(null);
-  const popoverState = (0, import_ui110.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui110.bindPopover)(popoverState);
-  (0, import_react73.useEffect)(() => {
+  const [ref, setRef] = (0, import_react76.useState)(null);
+  const popoverState = (0, import_ui112.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui112.bindPopover)(popoverState);
+  (0, import_react76.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -8865,276 +9366,6 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   };
 };
 
-// src/components/inline-editor-toolbar.tsx
-var React128 = __toESM(require("react"));
-var import_react75 = require("react");
-var import_editor_elements8 = require("@elementor/editor-elements");
-var import_icons42 = require("@elementor/icons");
-var import_ui112 = require("@elementor/ui");
-var import_react76 = require("@tiptap/react");
-var import_i18n64 = require("@wordpress/i18n");
-
-// src/components/url-popover.tsx
-var React127 = __toESM(require("react"));
-var import_react74 = require("react");
-var import_icons41 = require("@elementor/icons");
-var import_ui111 = require("@elementor/ui");
-var import_i18n63 = require("@wordpress/i18n");
-var UrlPopover = ({
-  popupState,
-  restoreValue,
-  anchorRef,
-  value,
-  onChange,
-  openInNewTab,
-  onToggleNewTab
-}) => {
-  const inputRef = (0, import_react74.useRef)(null);
-  (0, import_react74.useEffect)(() => {
-    if (popupState.isOpen) {
-      requestAnimationFrame(() => inputRef.current?.focus());
-    }
-  }, [popupState.isOpen]);
-  const handleClose = () => {
-    restoreValue();
-    popupState.close();
-  };
-  return /* @__PURE__ */ React127.createElement(
-    import_ui111.Popover,
-    {
-      slotProps: {
-        paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
-      },
-      ...(0, import_ui111.bindPopover)(popupState),
-      anchorOrigin: { vertical: "top", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      onClose: handleClose
-    },
-    /* @__PURE__ */ React127.createElement(import_ui111.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React127.createElement(
-      import_ui111.TextField,
-      {
-        value,
-        onChange,
-        size: "tiny",
-        fullWidth: true,
-        placeholder: (0, import_i18n63.__)("Type a URL", "elementor"),
-        inputProps: { ref: inputRef },
-        color: "secondary",
-        InputProps: { sx: { borderRadius: "8px" } },
-        onKeyUp: (event) => event.key === "Enter" && handleClose()
-      }
-    ), /* @__PURE__ */ React127.createElement(import_ui111.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React127.createElement(
-      import_ui111.ToggleButton,
-      {
-        size: "tiny",
-        value: "newTab",
-        selected: openInNewTab,
-        onClick: onToggleNewTab,
-        "aria-label": (0, import_i18n63.__)("Open in a new tab", "elementor"),
-        sx: { borderRadius: "8px" }
-      },
-      /* @__PURE__ */ React127.createElement(import_icons41.ExternalLinkIcon, { fontSize: "tiny" })
-    )))
-  );
-};
-
-// src/components/inline-editor-toolbar.tsx
-var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = (0, import_react75.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react75.useState)(false);
-  const toolbarRef = (0, import_react75.useRef)(null);
-  const linkPopupState = (0, import_ui112.usePopupState)({ variant: "popover" });
-  const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = (0, import_react76.useEditorState)({
-    editor,
-    selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
-  });
-  const formatButtonsList = (0, import_react75.useMemo)(() => {
-    const buttons = Object.values(formatButtons);
-    if (isElementClickable) {
-      return buttons.filter((button) => button.action !== "link");
-    }
-    return buttons;
-  }, [isElementClickable]);
-  const handleLinkClick = () => {
-    const linkAttrs = editor.getAttributes("link");
-    setUrlValue(linkAttrs.href || "");
-    setOpenInNewTab(linkAttrs.target === "_blank");
-    linkPopupState.open(toolbarRef.current);
-  };
-  const handleUrlChange = (event) => {
-    setUrlValue(event.target.value);
-  };
-  const handleToggleNewTab = () => {
-    setOpenInNewTab(!openInNewTab);
-  };
-  const handleUrlSubmit = () => {
-    if (urlValue) {
-      editor.chain().focus().setLink({
-        href: urlValue,
-        target: openInNewTab ? "_blank" : "_self"
-      }).run();
-    } else {
-      editor.chain().focus().unsetLink().run();
-    }
-    if (elementId) {
-      window.dispatchEvent(
-        new CustomEvent("elementor:inline-link-changed", {
-          detail: { elementId }
-        })
-      );
-    }
-    linkPopupState.close();
-  };
-  (0, import_react75.useEffect)(() => {
-    editor?.commands?.focus();
-  }, [editor]);
-  return /* @__PURE__ */ React128.createElement(
-    import_ui112.Box,
-    {
-      ref: toolbarRef,
-      sx: {
-        display: "inline-flex",
-        gap: 0.5,
-        padding: 0.5,
-        borderRadius: "8px",
-        backgroundColor: "background.paper",
-        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
-        alignItems: "center",
-        visibility: linkPopupState.isOpen ? "hidden" : "visible",
-        pointerEvents: linkPopupState.isOpen ? "none" : "all",
-        ...sx
-      }
-    },
-    /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React128.createElement(
-      import_ui112.ToggleButtonGroup,
-      {
-        value: editorState,
-        size: "tiny",
-        sx: {
-          display: "flex",
-          gap: 0.5,
-          border: "none",
-          [`& .${import_ui112.toggleButtonGroupClasses.firstButton}, & .${import_ui112.toggleButtonGroupClasses.middleButton}, & .${import_ui112.toggleButtonGroupClasses.lastButton}`]: {
-            borderRadius: "8px",
-            border: "none",
-            marginLeft: 0,
-            "&.Mui-selected": {
-              marginLeft: 0
-            },
-            "& + &.Mui-selected": {
-              marginLeft: 0
-            }
-          }
-        }
-      },
-      formatButtonsList.map((button) => /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React128.createElement(
-        import_ui112.ToggleButton,
-        {
-          value: button.action,
-          "aria-label": button.label,
-          size: "tiny",
-          onClick: () => {
-            if (button.action === "link") {
-              handleLinkClick();
-            } else {
-              button.method?.(editor);
-            }
-            editor?.commands?.focus();
-          }
-        },
-        button.icon
-      )))
-    ),
-    /* @__PURE__ */ React128.createElement(
-      UrlPopover,
-      {
-        popupState: linkPopupState,
-        anchorRef: toolbarRef,
-        restoreValue: handleUrlSubmit,
-        value: urlValue,
-        onChange: handleUrlChange,
-        openInNewTab,
-        onToggleNewTab: handleToggleNewTab
-      }
-    )
-  );
-};
-var checkIfElementIsClickable = (elementId) => {
-  const container = (0, import_editor_elements8.getContainer)(elementId);
-  const type = container?.model.get("widgetType");
-  const isButton = type === "e-button";
-  const hasLink = !!(0, import_editor_elements8.getElementSetting)(elementId, "link")?.value?.destination;
-  return isButton || hasLink;
-};
-var toolbarButtons = {
-  clear: {
-    label: (0, import_i18n64.__)("Clear", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(import_icons42.MinusIcon, { fontSize: "tiny" }),
-    action: "clear",
-    method: (editor) => {
-      editor.chain().focus().clearNodes().unsetAllMarks().run();
-    }
-  },
-  bold: {
-    label: (0, import_i18n64.__)("Bold", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(import_icons42.BoldIcon, { fontSize: "tiny" }),
-    action: "bold",
-    method: (editor) => {
-      editor.chain().focus().toggleBold().run();
-    }
-  },
-  italic: {
-    label: (0, import_i18n64.__)("Italic", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(import_icons42.ItalicIcon, { fontSize: "tiny" }),
-    action: "italic",
-    method: (editor) => {
-      editor.chain().focus().toggleItalic().run();
-    }
-  },
-  underline: {
-    label: (0, import_i18n64.__)("Underline", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(import_icons42.UnderlineIcon, { fontSize: "tiny" }),
-    action: "underline",
-    method: (editor) => {
-      editor.chain().focus().toggleUnderline().run();
-    }
-  },
-  strike: {
-    label: (0, import_i18n64.__)("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(import_icons42.StrikethroughIcon, { fontSize: "tiny" }),
-    action: "strike",
-    method: (editor) => {
-      editor.chain().focus().toggleStrike().run();
-    }
-  },
-  superscript: {
-    label: (0, import_i18n64.__)("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(import_icons42.SuperscriptIcon, { fontSize: "tiny" }),
-    action: "superscript",
-    method: (editor) => {
-      editor.chain().focus().toggleSuperscript().run();
-    }
-  },
-  subscript: {
-    label: (0, import_i18n64.__)("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(import_icons42.SubscriptIcon, { fontSize: "tiny" }),
-    action: "subscript",
-    method: (editor) => {
-      editor.chain().focus().toggleSubscript().run();
-    }
-  },
-  link: {
-    label: (0, import_i18n64.__)("Link", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(import_icons42.LinkIcon, { fontSize: "tiny" }),
-    action: "link",
-    method: null
-  }
-};
-var { clear: clearButton, ...formatButtons } = toolbarButtons;
-var possibleFormats = Object.keys(formatButtons);
-
 // src/components/size/unstable-size-field.tsx
 var React131 = __toESM(require("react"));
 var import_ui114 = require("@elementor/ui");