@elementor/editor-controls 4.3.0-1058 → 4.3.0-1059

package/dist/index.mjs

@@ -7962,10 +7962,10 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 };
 
 // src/controls/inline-editing-control.tsx
-import * as React115 from "react";
-import { useCallback as useCallback4 } from "react";
+import * as React117 from "react";
+import { useCallback as useCallback4, useState as useState20 } from "react";
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
-import { Box as Box25 } from "@elementor/ui";
+import { Box as Box26 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
 import * as React114 from "react";
@@ -8027,6 +8027,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
     onBlur = void 0,
     expectedTag = null,
     onEditorCreate,
+    onEditorDestroy,
     wrapperClassName,
     onSelectionEnd,
     mountElement = null
@@ -8111,6 +8112,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
   });
@@ -8139,88 +8141,425 @@ var useOnUpdate = (callback, dependencies) => {
   }, dependencies);
 };
 
-// src/controls/inline-editing-control.tsx
-var InlineEditingControl = createControl(
-  ({
-    sx,
-    attributes,
-    props
-  }) => {
-    const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
-    const { value: rawValue } = usePropKeyContext();
-    const content = value ?? extractInlineHtmlContent(rawValue);
-    const handleChange = useCallback4(
-      (newValue) => {
-        const html = newValue ?? "";
-        setValue(html);
+// src/components/inline-editor-toolbar.tsx
+import * as React116 from "react";
+import { useEffect as useEffect19, useMemo as useMemo17, useRef as useRef30, useState as useState19 } from "react";
+import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
+import {
+  BoldIcon,
+  ItalicIcon,
+  LinkIcon as LinkIcon3,
+  MinusIcon as MinusIcon2,
+  StrikethroughIcon,
+  SubscriptIcon,
+  SuperscriptIcon,
+  UnderlineIcon
+} from "@elementor/icons";
+import {
+  Box as Box25,
+  IconButton as IconButton9,
+  ToggleButton as ToggleButton3,
+  ToggleButtonGroup as ToggleButtonGroup2,
+  toggleButtonGroupClasses,
+  Tooltip as Tooltip10,
+  usePopupState as usePopupState10
+} from "@elementor/ui";
+import { useEditorState } from "@tiptap/react";
+import { __ as __58 } from "@wordpress/i18n";
+
+// src/components/url-popover.tsx
+import * as React115 from "react";
+import { useEffect as useEffect18, useRef as useRef29 } from "react";
+import { ExternalLinkIcon } from "@elementor/icons";
+import { bindPopover as bindPopover8, Popover as Popover8, Stack as Stack19, TextField as TextField11, ToggleButton as ToggleButton2, Tooltip as Tooltip9 } from "@elementor/ui";
+import { __ as __57 } from "@wordpress/i18n";
+var UrlPopover = ({
+  popupState,
+  restoreValue,
+  anchorRef,
+  value,
+  onChange,
+  openInNewTab,
+  onToggleNewTab
+}) => {
+  const inputRef = useRef29(null);
+  useEffect18(() => {
+    if (popupState.isOpen) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [popupState.isOpen]);
+  const handleClose = () => {
+    restoreValue();
+    popupState.close();
+  };
+  return /* @__PURE__ */ React115.createElement(
+    Popover8,
+    {
+      slotProps: {
+        paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
       },
-      [setValue]
-    );
-    return /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
-      Box25,
+      ...bindPopover8(popupState),
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      onClose: handleClose
+    },
+    /* @__PURE__ */ React115.createElement(Stack19, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React115.createElement(
+      TextField11,
       {
+        value,
+        onChange,
+        size: "tiny",
+        fullWidth: true,
+        placeholder: __57("Type a URL", "elementor"),
+        inputProps: { ref: inputRef },
+        color: "secondary",
+        InputProps: { sx: { borderRadius: "8px" } },
+        onKeyUp: (event) => event.key === "Enter" && handleClose()
+      }
+    ), /* @__PURE__ */ React115.createElement(Tooltip9, { title: __57("Open in a new tab", "elementor") }, /* @__PURE__ */ React115.createElement(
+      ToggleButton2,
+      {
+        size: "tiny",
+        value: "newTab",
+        selected: openInNewTab,
+        onClick: onToggleNewTab,
+        "aria-label": __57("Open in a new tab", "elementor"),
+        sx: { borderRadius: "8px" }
+      },
+      /* @__PURE__ */ React115.createElement(ExternalLinkIcon, { fontSize: "tiny" })
+    )))
+  );
+};
+
+// src/components/inline-editor-toolbar.tsx
+var InlineEditorToolbar = ({
+  editor,
+  elementId,
+  sx = {},
+  inControlPanel = false
+}) => {
+  const [urlValue, setUrlValue] = useState19("");
+  const [openInNewTab, setOpenInNewTab] = useState19(false);
+  const toolbarRef = useRef30(null);
+  const linkPopupState = usePopupState10({ variant: "popover" });
+  const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
+  });
+  const formatButtonsList = useMemo17(() => {
+    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();
+  };
+  useEffect19(() => {
+    if (!inControlPanel) {
+      editor?.commands?.focus();
+    }
+  }, [editor, inControlPanel]);
+  return /* @__PURE__ */ React116.createElement(
+    Box25,
+    {
+      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: "grey.200",
+          borderRadius: "0",
+          position: "absolute",
+          top: "0",
+          left: "0"
+        }
+      }
+    },
+    /* @__PURE__ */ React116.createElement(Tooltip10, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React116.createElement(IconButton9, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React116.createElement(
+      ToggleButtonGroup2,
+      {
+        value: editorState,
+        size: "tiny",
         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
+          display: "flex",
+          gap: 0.5,
+          border: "none",
+          [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]: {
+            borderRadius: "8px",
+            border: "none",
+            marginLeft: 0,
+            "&.Mui-selected": {
+              marginLeft: 0
             },
-            "&.is-empty::before": {
-              content: "attr(data-placeholder)",
-              color: "text.tertiary",
-              pointerEvents: "none",
-              position: "absolute",
-              opacity: 0.6
+            "& + &.Mui-selected": {
+              marginLeft: 0
             }
           },
-          ".strip-styles *": {
-            all: "unset"
+          ...inControlPanel && {
+            justifyContent: "space-between",
+            width: "100%",
+            "& svg": {
+              width: "0.7rem",
+              height: "0.7rem",
+              fill: "black"
+            }
+          }
+        }
+      },
+      formatButtonsList.map((button) => /* @__PURE__ */ React116.createElement(Tooltip10, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React116.createElement(
+        ToggleButton3,
+        {
+          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 = getContainer2(elementId);
+  const type = container?.model.get("widgetType");
+  const isButton = type === "e-button";
+  const hasLink = !!getElementSetting(elementId, "link")?.value?.destination;
+  return isButton || hasLink;
+};
+var toolbarButtons = {
+  clear: {
+    label: __58("Clear", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(MinusIcon2, { fontSize: "tiny" }),
+    action: "clear",
+    method: (editor) => {
+      editor.chain().focus().clearNodes().unsetAllMarks().run();
+    }
+  },
+  bold: {
+    label: __58("Bold", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(BoldIcon, { fontSize: "tiny" }),
+    action: "bold",
+    method: (editor) => {
+      editor.chain().focus().toggleBold().run();
+    }
+  },
+  italic: {
+    label: __58("Italic", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(ItalicIcon, { fontSize: "tiny" }),
+    action: "italic",
+    method: (editor) => {
+      editor.chain().focus().toggleItalic().run();
+    }
+  },
+  underline: {
+    label: __58("Underline", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(UnderlineIcon, { fontSize: "tiny" }),
+    action: "underline",
+    method: (editor) => {
+      editor.chain().focus().toggleUnderline().run();
+    }
+  },
+  strike: {
+    label: __58("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(StrikethroughIcon, { fontSize: "tiny" }),
+    action: "strike",
+    method: (editor) => {
+      editor.chain().focus().toggleStrike().run();
+    }
+  },
+  superscript: {
+    label: __58("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(SuperscriptIcon, { fontSize: "tiny" }),
+    action: "superscript",
+    method: (editor) => {
+      editor.chain().focus().toggleSuperscript().run();
+    }
+  },
+  subscript: {
+    label: __58("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(SubscriptIcon, { fontSize: "tiny" }),
+    action: "subscript",
+    method: (editor) => {
+      editor.chain().focus().toggleSubscript().run();
+    }
+  },
+  link: {
+    label: __58("Link", "elementor"),
+    icon: /* @__PURE__ */ React116.createElement(LinkIcon3, { fontSize: "tiny" }),
+    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(escapedHtmlPropTypeUtil2);
+  const { value: rawValue } = usePropKeyContext();
+  const content = value ?? extractInlineHtmlContent(rawValue);
+  const [editor, setEditor] = useState20(null);
+  const handleChange = useCallback4(
+    (newValue) => {
+      const html = newValue ?? "";
+      setValue(html);
+    },
+    [setValue]
+  );
+  return /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(Box26, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React117.createElement(
+    InlineEditorToolbar,
+    {
+      editor,
+      elementId,
+      sx: {
+        boxShadow: "none",
+        border: "1px solid",
+        borderColor: "grey.200",
+        mb: 0.5
+      },
+      inControlPanel: true
+    }
+  ), /* @__PURE__ */ React117.createElement(
+    Box26,
+    {
+      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: "100px",
+          fontSize: "12px",
+          "& a": {
+            color: "inherit"
+          },
+          "& .elementor-inline-editor-reset": {
+            margin: 0,
+            padding: 0
           },
-          ...sx
+          "&.is-empty::before": {
+            content: "attr(data-placeholder)",
+            color: "text.tertiary",
+            pointerEvents: "none",
+            position: "absolute",
+            opacity: 0.6
+          }
+        },
+        ".strip-styles *": {
+          all: "unset"
         },
-        ...attributes,
-        ...props
+        ...sx
       },
-      /* @__PURE__ */ React115.createElement(InlineEditor, { value: content, setValue: handleChange, placeholder: placeholder ?? null })
-    ));
-  }
-);
+      ...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
-import * as React119 from "react";
+import * as React121 from "react";
 import { emailsPropTypeUtil } from "@elementor/editor-props";
 import { CollapsibleContent } from "@elementor/editor-ui";
-import { Box as Box26, Divider as Divider5, Stack as Stack20 } from "@elementor/ui";
-import { __ as __58 } from "@wordpress/i18n";
+import { Box as Box27, Divider as Divider5, Stack as Stack21 } from "@elementor/ui";
+import { __ as __60 } from "@wordpress/i18n";
 
 // src/controls/email-form-action-control/fields.tsx
-import * as React118 from "react";
+import * as React120 from "react";
 import { InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
-import { Grid as Grid34, Stack as Stack19 } from "@elementor/ui";
-import { __ as __57 } from "@wordpress/i18n";
+import { Grid as Grid34, Stack as Stack20 } from "@elementor/ui";
+import { __ as __59 } from "@wordpress/i18n";
 
 // src/hooks/use-form-field-suggestions.ts
-import { getContainer as getContainer2, getSelectedElements as getSelectedElements3, getWidgetsCache } from "@elementor/editor-elements";
+import { getContainer as getContainer3, getSelectedElements as getSelectedElements3, getWidgetsCache } from "@elementor/editor-elements";
 import { stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
 import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 var FORM_FIELD_WIDGET_TYPES = [
@@ -8252,7 +8591,7 @@ function getFieldCssId(child, widgetType) {
   return extractStringPropValue(getSettingWithDefault(child, widgetType, CSS_ID_PROP_KEY));
 }
 function getFormContainer(elementId) {
-  let container = getContainer2(elementId);
+  let container = getContainer3(elementId);
   while (container) {
     if (container.model.get("elType") === FORM_ELEMENT_TYPE) {
       return container;
@@ -8306,10 +8645,10 @@ function useFormFieldSuggestions(options) {
 }
 
 // src/controls/email-form-action-control/email-chips-field.tsx
-import * as React116 from "react";
-import { useMemo as useMemo17, useState as useState19 } from "react";
+import * as React118 from "react";
+import { useMemo as useMemo18, useState as useState21 } from "react";
 import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
-import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField11 } from "@elementor/ui";
+import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField12 } from "@elementor/ui";
 
 // src/controls/email-form-action-control/utils.ts
 import { z } from "@elementor/schema";
@@ -8345,10 +8684,10 @@ function resolveMention(raw, suggestions) {
 }
 var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
-  const [inputValue, setInputValue] = useState19("");
+  const [inputValue, setInputValue] = useState21("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => stringPropTypeUtil22.extract(item)).filter((val) => val !== null);
-  const suggestionOptions = useMemo17(
+  const suggestionOptions = useMemo18(
     () => suggestions.map((suggestion) => `[${suggestion.value}]`),
     [suggestions]
   );
@@ -8383,7 +8722,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       tryAddChip(inputValue);
     }
   };
-  return /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
     Autocomplete4,
     {
       fullWidth: true,
@@ -8408,99 +8747,99 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       onBlur: handleBlur,
       getOptionLabel: (option) => option,
       isOptionEqualToValue: (option, val) => option === val,
-      renderInput: (params) => /* @__PURE__ */ React116.createElement(TextField11, { ...params, placeholder, onKeyDown: handleKeyDown }),
-      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React116.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
+      renderInput: (params) => /* @__PURE__ */ React118.createElement(TextField12, { ...params, placeholder, onKeyDown: handleKeyDown }),
+      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React118.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
     }
   ));
 });
-var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React116.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(EmailChipsControl, { placeholder, suggestions })));
+var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React118.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(Grid32, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React118.createElement(Grid32, { item: true }, /* @__PURE__ */ React118.createElement(EmailChipsControl, { placeholder, suggestions })));
 
 // src/controls/email-form-action-control/email-field.tsx
-import * as React117 from "react";
+import * as React119 from "react";
 import { Grid as Grid33 } from "@elementor/ui";
-var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React117.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(TextControl, { placeholder }))));
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React119.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React119.createElement(Grid33, { item: true }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React119.createElement(Grid33, { item: true }, /* @__PURE__ */ React119.createElement(TextControl, { placeholder }))));
 
 // src/controls/email-form-action-control/fields.tsx
 var SendToField = ({ placeholder }) => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React118.createElement(Stack19, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React120.createElement(Stack20, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(
     EmailChipsField,
     {
-      fieldLabel: __57("Send to", "elementor"),
+      fieldLabel: __59("Send to", "elementor"),
       placeholder,
       suggestions
     }
-  ), shouldShowMentionsInfo() && /* @__PURE__ */ React118.createElement(InfoAlert2, null, __57("Type @ or an email field name to insert its submitted value.", "elementor"))));
+  ), shouldShowMentionsInfo() && /* @__PURE__ */ React120.createElement(InfoAlert2, null, __59("Type @ or an email field name to insert its submitted value.", "elementor"))));
 };
-var SubjectField = () => /* @__PURE__ */ React118.createElement(
+var SubjectField = () => /* @__PURE__ */ React120.createElement(
   EmailField,
   {
     bind: "subject",
-    label: __57("Email subject", "elementor"),
-    placeholder: __57("New form submission", "elementor")
+    label: __59("Email subject", "elementor"),
+    placeholder: __59("New form submission", "elementor")
   }
 );
 var MessageField = () => {
   const suggestions = useFormFieldSuggestions();
-  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React118.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, __57("Message", "elementor"))), /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __57(
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Message", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __59(
     "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
     "elementor"
-  ) : __57("[all-fields] shortcode sends all fields.", "elementor")))));
+  ) : __59("[all-fields] shortcode sends all fields.", "elementor")))));
 };
-var FromEmailField = () => /* @__PURE__ */ React118.createElement(
+var FromEmailField = () => /* @__PURE__ */ React120.createElement(
   EmailField,
   {
     bind: "from",
-    label: __57("From email", "elementor"),
-    placeholder: __57("What email should appear as the sender?", "elementor")
+    label: __59("From email", "elementor"),
+    placeholder: __59("What email should appear as the sender?", "elementor")
   }
 );
-var FromNameField = () => /* @__PURE__ */ React118.createElement(
+var FromNameField = () => /* @__PURE__ */ React120.createElement(
   EmailField,
   {
     bind: "from-name",
-    label: __57("From name", "elementor"),
-    placeholder: __57("What name should appear as the sender?", "elementor")
+    label: __59("From name", "elementor"),
+    placeholder: __59("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(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, __57("Reply-to", "elementor"))), /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Reply-to", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(
     MentionTextAreaControl,
     {
       suggestions: emailSuggestions,
       rows: 1,
       triggerPosition: "start",
-      placeholder: __57("You can type @ to insert an email field", "elementor")
+      placeholder: __59("You can type @ to insert an email field", "elementor")
     }
   ))));
 };
 var CcField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Cc", "elementor"), suggestions }));
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: __59("Cc", "elementor"), suggestions }));
 };
 var BccField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Bcc", "elementor"), suggestions }));
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: __59("Bcc", "elementor"), suggestions }));
 };
-var MetaDataField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React118.createElement(Stack19, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, __57("Metadata", "elementor")), /* @__PURE__ */ React118.createElement(
+var MetaDataField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React120.createElement(Stack20, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Metadata", "elementor")), /* @__PURE__ */ React120.createElement(
   ChipsControl,
   {
     options: [
-      { label: __57("Date", "elementor"), value: "date" },
-      { label: __57("Time", "elementor"), value: "time" },
-      { label: __57("Page URL", "elementor"), value: "page-url" },
-      { label: __57("User agent", "elementor"), value: "user-agent" },
-      { label: __57("Credit", "elementor"), value: "credit" }
+      { label: __59("Date", "elementor"), value: "date" },
+      { label: __59("Time", "elementor"), value: "time" },
+      { label: __59("Page URL", "elementor"), value: "page-url" },
+      { label: __59("User agent", "elementor"), value: "user-agent" },
+      { label: __59("Credit", "elementor"), value: "credit" }
     ]
   }
 )));
-var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React118.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, __57("Send as", "elementor"))), /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(
+var SendAsField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Send as", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(
   SelectControl,
   {
     options: [
-      { label: __57("HTML", "elementor"), value: "html" },
-      { label: __57("Plain Text", "elementor"), value: "plain" }
+      { label: __59("HTML", "elementor"), value: "html" },
+      { label: __59("Plain Text", "elementor"), value: "plain" }
     ]
   }
 ))));
@@ -8509,27 +8848,27 @@ var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider,
 var EmailFormActionControl = createControl(
   ({ toPlaceholder, label }) => {
     const { value, setValue, ...propContext } = useBoundProp(emailsPropTypeUtil);
-    return /* @__PURE__ */ React119.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React119.createElement(Stack20, { gap: 2 }, /* @__PURE__ */ React119.createElement(ControlLabel, null, label ? label + " " + __58("settings", "elementor") : __58("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)));
+    return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(Stack21, { gap: 2 }, /* @__PURE__ */ React121.createElement(ControlLabel, null, label ? label + " " + __60("settings", "elementor") : __60("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(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React119.createElement(Box26, { sx: { pt: 2 } }, /* @__PURE__ */ React119.createElement(Stack20, { 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(Divider5, null), /* @__PURE__ */ React119.createElement(MetaDataField, null), /* @__PURE__ */ React119.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React121.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React121.createElement(Box27, { sx: { pt: 2 } }, /* @__PURE__ */ React121.createElement(Stack21, { 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(Divider5, null), /* @__PURE__ */ React121.createElement(MetaDataField, null), /* @__PURE__ */ React121.createElement(SendAsField, null))));
 
 // src/controls/attachment-type-control.tsx
-import * as React120 from "react";
+import * as React122 from "react";
 import { InfoAlert as InfoAlert3 } from "@elementor/editor-ui";
 import { Grid as Grid35 } from "@elementor/ui";
-import { __ as __59 } from "@wordpress/i18n";
+import { __ as __61 } from "@wordpress/i18n";
 var AttachmentTypeControl = createControl(({ label, options }) => {
-  return /* @__PURE__ */ React120.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React120.createElement(Grid35, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React120.createElement(Grid35, { item: true }, /* @__PURE__ */ React120.createElement(SelectControl, { options })), /* @__PURE__ */ React120.createElement(Grid35, { item: true }, /* @__PURE__ */ React120.createElement(InfoAlert3, null, __59(
+  return /* @__PURE__ */ React122.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(SelectControl, { options })), /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(InfoAlert3, null, __61(
     "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
     "elementor"
   ))));
 });
 
 // src/controls/grid-span-control.tsx
-import * as React121 from "react";
+import * as React123 from "react";
 import { spanPropTypeUtil } from "@elementor/editor-props";
-import { TextField as TextField12 } from "@elementor/ui";
+import { TextField as TextField13 } from "@elementor/ui";
 var GridSpanControl = createControl(
   ({
     placeholder: propPlaceholder,
@@ -8546,8 +8885,8 @@ var GridSpanControl = createControl(
       setValue(next === "" ? null : next);
     };
     const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
-    return /* @__PURE__ */ React121.createElement(ControlActions, null, /* @__PURE__ */ React121.createElement(
-      TextField12,
+    return /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
+      TextField13,
       {
         size: "tiny",
         fullWidth: true,
@@ -8567,23 +8906,23 @@ var GridSpanControl = createControl(
 );
 
 // src/components/promotions/display-conditions-control.tsx
-import * as React123 from "react";
-import { useRef as useRef29 } from "react";
+import * as React125 from "react";
+import { useRef as useRef31 } from "react";
 import { SitemapIcon } from "@elementor/icons";
-import { IconButton as IconButton9, Stack as Stack21, Tooltip as Tooltip9 } from "@elementor/ui";
-import { __ as __60 } from "@wordpress/i18n";
+import { IconButton as IconButton10, Stack as Stack22, Tooltip as Tooltip11 } from "@elementor/ui";
+import { __ as __62 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
-import * as React122 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState20 } from "react";
+import * as React124 from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState22 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
-import { Box as Box27 } from "@elementor/ui";
+import { Box as Box28 } from "@elementor/ui";
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
 var PromotionTrigger = forwardRef12(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = useState20(false);
+    const [isOpen, setIsOpen] = useState22(false);
     const promotion = getV4Promotion(promotionKey);
     const toggle = useCallback5(() => {
       setIsOpen((prev) => {
@@ -8594,7 +8933,7 @@ var PromotionTrigger = forwardRef12(
       });
     }, [trackingData]);
     useImperativeHandle(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React122.createElement(React122.Fragment, null, promotion && /* @__PURE__ */ React122.createElement(
+    return /* @__PURE__ */ React124.createElement(React124.Fragment, null, promotion && /* @__PURE__ */ React124.createElement(
       PromotionInfotip,
       {
         title: promotion.title,
@@ -8608,8 +8947,8 @@ var PromotionTrigger = forwardRef12(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React122.createElement(
-        Box27,
+      /* @__PURE__ */ React124.createElement(
+        Box28,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -8617,19 +8956,19 @@ var PromotionTrigger = forwardRef12(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React122.createElement(PromotionChip2, null)
+        children ?? /* @__PURE__ */ React124.createElement(PromotionChip2, null)
       )
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var ARIA_LABEL = __60("Display Conditions", "elementor");
+var ARIA_LABEL = __62("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = useRef29(null);
-  return /* @__PURE__ */ React123.createElement(
-    Stack21,
+  const triggerRef = useRef31(null);
+  return /* @__PURE__ */ React125.createElement(
+    Stack22,
     {
       direction: "row",
       spacing: 2,
@@ -8638,9 +8977,9 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React123.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React123.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React123.createElement(
-      IconButton9,
+    /* @__PURE__ */ React125.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React125.createElement(Tooltip11, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React125.createElement(
+      IconButton10,
       {
         size: "tiny",
         "aria-label": ARIA_LABEL,
@@ -8652,23 +8991,23 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React123.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React125.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-import * as React124 from "react";
-import { useRef as useRef30 } from "react";
+import * as React126 from "react";
+import { useRef as useRef32 } from "react";
 import { PlusIcon as PlusIcon4 } from "@elementor/icons";
-import { Stack as Stack22, Tooltip as Tooltip10 } from "@elementor/ui";
-import { __ as __61 } from "@wordpress/i18n";
-var ARIA_LABEL2 = __61("Attributes", "elementor");
+import { Stack as Stack23, Tooltip as Tooltip12 } from "@elementor/ui";
+import { __ as __63 } from "@wordpress/i18n";
+var ARIA_LABEL2 = __63("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = useRef30(null);
-  return /* @__PURE__ */ React124.createElement(
-    Stack22,
+  const triggerRef = useRef32(null);
+  return /* @__PURE__ */ React126.createElement(
+    Stack23,
     {
       direction: "row",
       spacing: 2,
@@ -8677,8 +9016,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React124.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React124.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React124.createElement(
+    /* @__PURE__ */ React126.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React126.createElement(Tooltip12, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React126.createElement(
       PlusIcon4,
       {
         "aria-label": ARIA_LABEL2,
@@ -8692,29 +9031,29 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-import * as React125 from "react";
+import * as React127 from "react";
 import { BrushBigIcon } from "@elementor/icons";
-import { IconButton as IconButton10, styled as styled11, Tooltip as Tooltip11 } from "@elementor/ui";
-var CustomIconButton = styled11(IconButton10)(({ theme }) => ({
+import { IconButton as IconButton11, styled as styled11, Tooltip as Tooltip13 } from "@elementor/ui";
+var CustomIconButton = styled11(IconButton11)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React125.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React125.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React125.createElement(BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React127.createElement(Tooltip13, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React127.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React127.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-import * as React126 from "react";
-import { useEffect as useEffect18, useState as useState21 } from "react";
+import * as React128 from "react";
+import { useEffect as useEffect20, useState as useState23 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
 import {
-  bindPopover as bindPopover8,
+  bindPopover as bindPopover9,
   bindTrigger as bindTrigger7,
-  Box as Box28,
-  IconButton as IconButton11,
+  Box as Box29,
+  IconButton as IconButton12,
   Infotip as Infotip4,
-  Tooltip as Tooltip12,
-  usePopupState as usePopupState10
+  Tooltip as Tooltip14,
+  usePopupState as usePopupState11
 } from "@elementor/ui";
-import { __ as __62 } from "@wordpress/i18n";
+import { __ as __64 } from "@wordpress/i18n";
 var SIZE12 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -8733,7 +9072,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = useState21(initialOpenItem);
+  const [openItem, setOpenItem] = useState23(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -8796,8 +9135,8 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React126.createElement(
-    IconButton11,
+  const addButton = /* @__PURE__ */ React128.createElement(
+    IconButton12,
     {
       size: SIZE12,
       sx: {
@@ -8805,11 +9144,11 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": __62("Add item", "elementor")
+      "aria-label": __64("Add item", "elementor")
     },
-    /* @__PURE__ */ React126.createElement(PlusIcon5, { fontSize: SIZE12 })
+    /* @__PURE__ */ React128.createElement(PlusIcon5, { fontSize: SIZE12 })
   );
-  return /* @__PURE__ */ React126.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React126.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React126.createElement(
+  return /* @__PURE__ */ React128.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React128.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React128.createElement(
     Infotip4,
     {
       placement: "right",
@@ -8817,20 +9156,20 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React126.createElement(Box28, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React126.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React128.createElement(Box29, { 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),
@@ -8844,7 +9183,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React126.createElement(
+      (props) => /* @__PURE__ */ React128.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -8886,16 +9225,16 @@ var RepeaterItem = ({
   );
   const triggerProps = bindTrigger7(popoverState);
   usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
-  const duplicateLabel = __62("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? __62("Show", "elementor") : __62("Hide", "elementor");
-  const removeLabel = __62("Remove", "elementor");
-  return /* @__PURE__ */ React126.createElement(Box28, { sx: { display: "contents" } }, /* @__PURE__ */ React126.createElement(
+  const duplicateLabel = __64("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? __64("Show", "elementor") : __64("Hide", "elementor");
+  const removeLabel = __64("Remove", "elementor");
+  return /* @__PURE__ */ React128.createElement(Box29, { sx: { display: "contents" } }, /* @__PURE__ */ React128.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": __62("Open item", "elementor"),
+      "aria-label": __64("Open item", "elementor"),
       ...triggerProps,
       onClick: (e) => {
         triggerProps.onClick(e);
@@ -8904,15 +9243,15 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React126.createElement(React126.Fragment, null, showDuplicate && /* @__PURE__ */ React126.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(IconButton11, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React126.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React126.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(IconButton11, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React126.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React126.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React126.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(IconButton11, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React126.createElement(XIcon4, { fontSize: SIZE12 }))))
+      actions: /* @__PURE__ */ React128.createElement(React128.Fragment, null, showDuplicate && /* @__PURE__ */ React128.createElement(Tooltip14, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React128.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React128.createElement(Tooltip14, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React128.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React128.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React128.createElement(Tooltip14, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React128.createElement(XIcon4, { fontSize: SIZE12 }))))
     }
-  ), /* @__PURE__ */ React126.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React126.createElement(Box28, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React128.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React128.createElement(Box29, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = useState21(null);
-  const popoverState = usePopupState10({ variant: "popover" });
-  const popoverProps = bindPopover8(popoverState);
-  useEffect18(() => {
+  const [ref, setRef] = useState23(null);
+  const popoverState = usePopupState11({ variant: "popover" });
+  const popoverProps = bindPopover9(popoverState);
+  useEffect20(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -8930,293 +9269,6 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   };
 };
 
-// src/components/inline-editor-toolbar.tsx
-import * as React128 from "react";
-import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef32, useState as useState22 } from "react";
-import { getContainer as getContainer3, getElementSetting } from "@elementor/editor-elements";
-import {
-  BoldIcon,
-  ItalicIcon,
-  LinkIcon as LinkIcon3,
-  MinusIcon as MinusIcon2,
-  StrikethroughIcon,
-  SubscriptIcon,
-  SuperscriptIcon,
-  UnderlineIcon
-} from "@elementor/icons";
-import {
-  Box as Box29,
-  IconButton as IconButton12,
-  ToggleButton as ToggleButton3,
-  ToggleButtonGroup as ToggleButtonGroup2,
-  toggleButtonGroupClasses,
-  Tooltip as Tooltip14,
-  usePopupState as usePopupState11
-} from "@elementor/ui";
-import { useEditorState } from "@tiptap/react";
-import { __ as __64 } from "@wordpress/i18n";
-
-// src/components/url-popover.tsx
-import * as React127 from "react";
-import { useEffect as useEffect19, useRef as useRef31 } from "react";
-import { ExternalLinkIcon } from "@elementor/icons";
-import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack23, TextField as TextField13, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
-import { __ as __63 } from "@wordpress/i18n";
-var UrlPopover = ({
-  popupState,
-  restoreValue,
-  anchorRef,
-  value,
-  onChange,
-  openInNewTab,
-  onToggleNewTab
-}) => {
-  const inputRef = useRef31(null);
-  useEffect19(() => {
-    if (popupState.isOpen) {
-      requestAnimationFrame(() => inputRef.current?.focus());
-    }
-  }, [popupState.isOpen]);
-  const handleClose = () => {
-    restoreValue();
-    popupState.close();
-  };
-  return /* @__PURE__ */ React127.createElement(
-    Popover8,
-    {
-      slotProps: {
-        paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
-      },
-      ...bindPopover9(popupState),
-      anchorOrigin: { vertical: "top", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      onClose: handleClose
-    },
-    /* @__PURE__ */ React127.createElement(Stack23, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React127.createElement(
-      TextField13,
-      {
-        value,
-        onChange,
-        size: "tiny",
-        fullWidth: true,
-        placeholder: __63("Type a URL", "elementor"),
-        inputProps: { ref: inputRef },
-        color: "secondary",
-        InputProps: { sx: { borderRadius: "8px" } },
-        onKeyUp: (event) => event.key === "Enter" && handleClose()
-      }
-    ), /* @__PURE__ */ React127.createElement(Tooltip13, { title: __63("Open in a new tab", "elementor") }, /* @__PURE__ */ React127.createElement(
-      ToggleButton2,
-      {
-        size: "tiny",
-        value: "newTab",
-        selected: openInNewTab,
-        onClick: onToggleNewTab,
-        "aria-label": __63("Open in a new tab", "elementor"),
-        sx: { borderRadius: "8px" }
-      },
-      /* @__PURE__ */ React127.createElement(ExternalLinkIcon, { fontSize: "tiny" })
-    )))
-  );
-};
-
-// src/components/inline-editor-toolbar.tsx
-var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = useState22("");
-  const [openInNewTab, setOpenInNewTab] = useState22(false);
-  const toolbarRef = useRef32(null);
-  const linkPopupState = usePopupState11({ variant: "popover" });
-  const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
-  });
-  const formatButtonsList = useMemo18(() => {
-    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();
-  };
-  useEffect20(() => {
-    editor?.commands?.focus();
-  }, [editor]);
-  return /* @__PURE__ */ React128.createElement(
-    Box29,
-    {
-      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(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React128.createElement(IconButton12, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React128.createElement(
-      ToggleButtonGroup2,
-      {
-        value: editorState,
-        size: "tiny",
-        sx: {
-          display: "flex",
-          gap: 0.5,
-          border: "none",
-          [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]: {
-            borderRadius: "8px",
-            border: "none",
-            marginLeft: 0,
-            "&.Mui-selected": {
-              marginLeft: 0
-            },
-            "& + &.Mui-selected": {
-              marginLeft: 0
-            }
-          }
-        }
-      },
-      formatButtonsList.map((button) => /* @__PURE__ */ React128.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React128.createElement(
-        ToggleButton3,
-        {
-          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 = getContainer3(elementId);
-  const type = container?.model.get("widgetType");
-  const isButton = type === "e-button";
-  const hasLink = !!getElementSetting(elementId, "link")?.value?.destination;
-  return isButton || hasLink;
-};
-var toolbarButtons = {
-  clear: {
-    label: __64("Clear", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(MinusIcon2, { fontSize: "tiny" }),
-    action: "clear",
-    method: (editor) => {
-      editor.chain().focus().clearNodes().unsetAllMarks().run();
-    }
-  },
-  bold: {
-    label: __64("Bold", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(BoldIcon, { fontSize: "tiny" }),
-    action: "bold",
-    method: (editor) => {
-      editor.chain().focus().toggleBold().run();
-    }
-  },
-  italic: {
-    label: __64("Italic", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(ItalicIcon, { fontSize: "tiny" }),
-    action: "italic",
-    method: (editor) => {
-      editor.chain().focus().toggleItalic().run();
-    }
-  },
-  underline: {
-    label: __64("Underline", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(UnderlineIcon, { fontSize: "tiny" }),
-    action: "underline",
-    method: (editor) => {
-      editor.chain().focus().toggleUnderline().run();
-    }
-  },
-  strike: {
-    label: __64("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(StrikethroughIcon, { fontSize: "tiny" }),
-    action: "strike",
-    method: (editor) => {
-      editor.chain().focus().toggleStrike().run();
-    }
-  },
-  superscript: {
-    label: __64("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(SuperscriptIcon, { fontSize: "tiny" }),
-    action: "superscript",
-    method: (editor) => {
-      editor.chain().focus().toggleSuperscript().run();
-    }
-  },
-  subscript: {
-    label: __64("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(SubscriptIcon, { fontSize: "tiny" }),
-    action: "subscript",
-    method: (editor) => {
-      editor.chain().focus().toggleSubscript().run();
-    }
-  },
-  link: {
-    label: __64("Link", "elementor"),
-    icon: /* @__PURE__ */ React128.createElement(LinkIcon3, { fontSize: "tiny" }),
-    action: "link",
-    method: null
-  }
-};
-var { clear: clearButton, ...formatButtons } = toolbarButtons;
-var possibleFormats = Object.keys(formatButtons);
-
 // src/components/size/unstable-size-field.tsx
 import * as React131 from "react";
 import { InputAdornment as InputAdornment6 } from "@elementor/ui";