@elementor/editor-controls 4.0.0-552 → 4.0.0-573

package/dist/index.js

@@ -45,6 +45,7 @@ __export(index_exports, {
   ControlToggleButtonGroup: () => ControlToggleButtonGroup,
   DateTimeControl: () => DateTimeControl,
   DisplayConditionsControl: () => DisplayConditionsControl,
+  EmailFormActionControl: () => EmailFormActionControl,
   EqualUnequalSizesControl: () => EqualUnequalSizesControl,
   FilterRepeaterControl: () => FilterRepeaterControl,
   FontFamilyControl: () => FontFamilyControl,
@@ -2269,10 +2270,10 @@ var import_ui37 = require("@elementor/ui");
 var SIZE6 = "tiny";
 var ChipsControl = createControl(({ options }) => {
   const { value, setValue, disabled } = useBoundProp(import_editor_props16.stringArrayPropTypeUtil);
-  const selectedValues = value || [];
+  const selectedValues = (value || []).map((item) => import_editor_props16.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
   const selectedOptions = selectedValues.map((val) => options.find((opt) => opt.value === val)).filter((opt) => opt !== void 0);
   const handleChange = (_, newValue) => {
-    const values = newValue.map((option) => option.value);
+    const values = newValue.map((option) => import_editor_props16.stringPropTypeUtil.create(option.value));
     setValue(values.length > 0 ? values : null);
   };
   return /* @__PURE__ */ React50.createElement(ControlActions, null, /* @__PURE__ */ React50.createElement(
@@ -6244,8 +6245,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 
 // src/controls/inline-editing-control.tsx
 var React100 = __toESM(require("react"));
+var import_react54 = require("react");
 var import_editor_props52 = require("@elementor/editor-props");
 var import_ui86 = require("@elementor/ui");
+var import_utils7 = require("@elementor/utils");
 
 // src/components/inline-editor.tsx
 var React99 = __toESM(require("react"));
@@ -6418,14 +6421,37 @@ var useOnUpdate = (callback, dependencies) => {
 };
 
 // src/controls/inline-editing-control.tsx
+var CHILDREN_PARSE_DEBOUNCE_MS = 300;
 var InlineEditingControl = createControl(
   ({
     sx,
     attributes,
     props
   }) => {
-    const { value, setValue } = useBoundProp(import_editor_props52.htmlPropTypeUtil);
-    const handleChange = (newValue) => setValue(newValue ?? "");
+    const { value, setValue } = useBoundProp(import_editor_props52.htmlV2PropTypeUtil);
+    const content = value?.content ?? "";
+    const debouncedParse = (0, import_react54.useMemo)(
+      () => (0, import_utils7.debounce)((html) => {
+        const parsed = (0, import_editor_props52.parseHtmlChildren)(html);
+        setValue({
+          content: parsed.content || null,
+          children: parsed.children
+        });
+      }, CHILDREN_PARSE_DEBOUNCE_MS),
+      [setValue]
+    );
+    const handleChange = (0, import_react54.useCallback)(
+      (newValue) => {
+        const html = newValue ?? "";
+        setValue({
+          content: html || null,
+          children: value?.children ?? []
+        });
+        debouncedParse(html);
+      },
+      [setValue, value?.children, debouncedParse]
+    );
+    (0, import_react54.useEffect)(() => () => debouncedParse.cancel(), [debouncedParse]);
     return /* @__PURE__ */ React100.createElement(ControlActions, null, /* @__PURE__ */ React100.createElement(
       import_ui86.Box,
       {
@@ -6464,34 +6490,112 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React100.createElement(InlineEditor, { value: value || "", setValue: handleChange })
+      /* @__PURE__ */ React100.createElement(InlineEditor, { value: content, setValue: handleChange })
     ));
   }
 );
 
+// src/controls/email-form-action-control.tsx
+var React101 = __toESM(require("react"));
+var import_editor_props53 = require("@elementor/editor-props");
+var import_editor_ui13 = require("@elementor/editor-ui");
+var import_ui87 = require("@elementor/ui");
+var import_i18n50 = require("@wordpress/i18n");
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React101.createElement(import_ui87.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React101.createElement(import_ui87.Grid, { item: true }, /* @__PURE__ */ React101.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React101.createElement(import_ui87.Grid, { item: true }, /* @__PURE__ */ React101.createElement(TextControl, { placeholder }))));
+var SendToField = () => /* @__PURE__ */ React101.createElement(
+  EmailField,
+  {
+    bind: "to",
+    label: (0, import_i18n50.__)("Send To", "elementor"),
+    placeholder: (0, import_i18n50.__)("Where should we send new submissions?", "elementor")
+  }
+);
+var SubjectField = () => /* @__PURE__ */ React101.createElement(
+  EmailField,
+  {
+    bind: "subject",
+    label: (0, import_i18n50.__)("Email Subject", "elementor"),
+    placeholder: (0, import_i18n50.__)("New form submission", "elementor")
+  }
+);
+var MessageField = () => /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React101.createElement(import_ui87.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React101.createElement(import_ui87.Grid, { item: true }, /* @__PURE__ */ React101.createElement(ControlFormLabel, null, (0, import_i18n50.__)("Message", "elementor"))), /* @__PURE__ */ React101.createElement(import_ui87.Grid, { item: true }, /* @__PURE__ */ React101.createElement(
+  TextAreaControl,
+  {
+    placeholder: (0, import_i18n50.__)(
+      "By default, all form fields are sent via [all-fields] shortcode.",
+      "elementor"
+    )
+  }
+))));
+var FromEmailField = () => /* @__PURE__ */ React101.createElement(
+  EmailField,
+  {
+    bind: "from",
+    label: (0, import_i18n50.__)("From email", "elementor"),
+    placeholder: (0, import_i18n50.__)("What email address should appear as the sender?", "elementor")
+  }
+);
+var FromNameField = () => /* @__PURE__ */ React101.createElement(
+  EmailField,
+  {
+    bind: "from-name",
+    label: (0, import_i18n50.__)("From name", "elementor"),
+    placeholder: (0, import_i18n50.__)("What name should appear as the sender?", "elementor")
+  }
+);
+var ReplyToField = () => /* @__PURE__ */ React101.createElement(EmailField, { bind: "reply-to", label: (0, import_i18n50.__)("Reply-to", "elementor") });
+var CcField = () => /* @__PURE__ */ React101.createElement(EmailField, { bind: "cc", label: (0, import_i18n50.__)("Cc", "elementor") });
+var BccField = () => /* @__PURE__ */ React101.createElement(EmailField, { bind: "bcc", label: (0, import_i18n50.__)("Bcc", "elementor") });
+var MetaDataField = () => /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React101.createElement(import_ui87.Stack, { gap: 0.5 }, /* @__PURE__ */ React101.createElement(ControlLabel, null, (0, import_i18n50.__)("Meta data", "elementor")), /* @__PURE__ */ React101.createElement(
+  ChipsControl,
+  {
+    options: [
+      { label: (0, import_i18n50.__)("Date", "elementor"), value: "date" },
+      { label: (0, import_i18n50.__)("Time", "elementor"), value: "time" },
+      { label: (0, import_i18n50.__)("Page URL", "elementor"), value: "page-url" },
+      { label: (0, import_i18n50.__)("User agent", "elementor"), value: "user-agent" },
+      { label: (0, import_i18n50.__)("Credit", "elementor"), value: "credit" }
+    ]
+  }
+)));
+var SendAsField = () => /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React101.createElement(import_ui87.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React101.createElement(import_ui87.Grid, { item: true }, /* @__PURE__ */ React101.createElement(ControlFormLabel, null, (0, import_i18n50.__)("Send as", "elementor"))), /* @__PURE__ */ React101.createElement(import_ui87.Grid, { item: true }, /* @__PURE__ */ React101.createElement(
+  SelectControl,
+  {
+    options: [
+      { label: (0, import_i18n50.__)("HTML", "elementor"), value: "html" },
+      { label: (0, import_i18n50.__)("Plain Text", "elementor"), value: "plain" }
+    ]
+  }
+))));
+var AdvancedSettings = () => /* @__PURE__ */ React101.createElement(import_editor_ui13.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React101.createElement(import_ui87.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React101.createElement(import_ui87.Stack, { gap: 2 }, /* @__PURE__ */ React101.createElement(FromNameField, null), /* @__PURE__ */ React101.createElement(ReplyToField, null), /* @__PURE__ */ React101.createElement(CcField, null), /* @__PURE__ */ React101.createElement(BccField, null), /* @__PURE__ */ React101.createElement(import_ui87.Divider, null), /* @__PURE__ */ React101.createElement(MetaDataField, null), /* @__PURE__ */ React101.createElement(SendAsField, null))));
+var EmailFormActionControl = createControl(() => {
+  const { value, setValue, ...propContext } = useBoundProp(import_editor_props53.emailPropTypeUtil);
+  return /* @__PURE__ */ React101.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React101.createElement(import_ui87.Stack, { gap: 2 }, /* @__PURE__ */ React101.createElement(ControlFormLabel, null, (0, import_i18n50.__)("Email settings", "elementor")), /* @__PURE__ */ React101.createElement(SendToField, null), /* @__PURE__ */ React101.createElement(SubjectField, null), /* @__PURE__ */ React101.createElement(MessageField, null), /* @__PURE__ */ React101.createElement(FromEmailField, null), /* @__PURE__ */ React101.createElement(AdvancedSettings, null)));
+});
+
 // src/components/promotions/display-conditions-control.tsx
-var React102 = __toESM(require("react"));
-var import_react55 = require("react");
+var React103 = __toESM(require("react"));
+var import_react56 = require("react");
 var import_icons33 = require("@elementor/icons");
-var import_ui88 = require("@elementor/ui");
-var import_i18n50 = require("@wordpress/i18n");
+var import_ui89 = require("@elementor/ui");
+var import_i18n51 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
-var React101 = __toESM(require("react"));
-var import_react54 = require("react");
-var import_editor_ui13 = require("@elementor/editor-ui");
-var import_ui87 = require("@elementor/ui");
+var React102 = __toESM(require("react"));
+var import_react55 = require("react");
+var import_editor_ui14 = require("@elementor/editor-ui");
+var import_ui88 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = (0, import_react54.forwardRef)(
+var PromotionTrigger = (0, import_react55.forwardRef)(
   ({ promotionKey, children }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react54.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react55.useState)(false);
     const promotion = getV4Promotion(promotionKey);
     const toggle = () => setIsOpen((prev) => !prev);
-    (0, import_react54.useImperativeHandle)(ref, () => ({ toggle }), []);
-    return /* @__PURE__ */ React101.createElement(React101.Fragment, null, promotion && /* @__PURE__ */ React101.createElement(
-      import_editor_ui13.PromotionInfotip,
+    (0, import_react55.useImperativeHandle)(ref, () => ({ toggle }), []);
+    return /* @__PURE__ */ React102.createElement(React102.Fragment, null, promotion && /* @__PURE__ */ React102.createElement(
+      import_editor_ui14.PromotionInfotip,
       {
         title: promotion.title,
         content: promotion.content,
@@ -6503,8 +6607,8 @@ var PromotionTrigger = (0, import_react54.forwardRef)(
           setIsOpen(false);
         }
       },
-      /* @__PURE__ */ React101.createElement(
-        import_ui87.Box,
+      /* @__PURE__ */ React102.createElement(
+        import_ui88.Box,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -6512,18 +6616,18 @@ var PromotionTrigger = (0, import_react54.forwardRef)(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React101.createElement(import_editor_ui13.PromotionChip, null)
+        children ?? /* @__PURE__ */ React102.createElement(import_editor_ui14.PromotionChip, null)
       )
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var ARIA_LABEL = (0, import_i18n50.__)("Display Conditions", "elementor");
+var ARIA_LABEL = (0, import_i18n51.__)("Display Conditions", "elementor");
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = (0, import_react55.useRef)(null);
-  return /* @__PURE__ */ React102.createElement(
-    import_ui88.Stack,
+  const triggerRef = (0, import_react56.useRef)(null);
+  return /* @__PURE__ */ React103.createElement(
+    import_ui89.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -6532,9 +6636,9 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React102.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions" }),
-    /* @__PURE__ */ React102.createElement(import_ui88.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React102.createElement(
-      import_ui88.IconButton,
+    /* @__PURE__ */ React103.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions" }),
+    /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React103.createElement(
+      import_ui89.IconButton,
       {
         size: "tiny",
         "aria-label": ARIA_LABEL,
@@ -6546,22 +6650,22 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React102.createElement(import_icons33.SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React103.createElement(import_icons33.SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-var React103 = __toESM(require("react"));
-var import_react56 = require("react");
+var React104 = __toESM(require("react"));
+var import_react57 = require("react");
 var import_icons34 = require("@elementor/icons");
-var import_ui89 = require("@elementor/ui");
-var import_i18n51 = require("@wordpress/i18n");
-var ARIA_LABEL2 = (0, import_i18n51.__)("Attributes", "elementor");
+var import_ui90 = require("@elementor/ui");
+var import_i18n52 = require("@wordpress/i18n");
+var ARIA_LABEL2 = (0, import_i18n52.__)("Attributes", "elementor");
 var AttributesControl = createControl(() => {
-  const triggerRef = (0, import_react56.useRef)(null);
-  return /* @__PURE__ */ React103.createElement(
-    import_ui89.Stack,
+  const triggerRef = (0, import_react57.useRef)(null);
+  return /* @__PURE__ */ React104.createElement(
+    import_ui90.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -6570,8 +6674,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React103.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes" }),
-    /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React103.createElement(
+    /* @__PURE__ */ React104.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes" }),
+    /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React104.createElement(
       import_icons34.PlusIcon,
       {
         "aria-label": ARIA_LABEL2,
@@ -6585,21 +6689,21 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-var React104 = __toESM(require("react"));
+var React105 = __toESM(require("react"));
 var import_icons35 = require("@elementor/icons");
-var import_ui90 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui90.styled)(import_ui90.IconButton)(({ theme }) => ({
+var import_ui91 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui91.styled)(import_ui91.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React104.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React104.createElement(import_icons35.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React105.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React105.createElement(import_icons35.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-var React105 = __toESM(require("react"));
-var import_react57 = require("react");
+var React106 = __toESM(require("react"));
+var import_react58 = require("react");
 var import_icons36 = require("@elementor/icons");
-var import_ui91 = require("@elementor/ui");
-var import_i18n52 = require("@wordpress/i18n");
+var import_ui92 = require("@elementor/ui");
+var import_i18n53 = require("@wordpress/i18n");
 var SIZE10 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -6617,7 +6721,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = (0, import_react57.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react58.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -6680,8 +6784,8 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React105.createElement(
-    import_ui91.IconButton,
+  const addButton = /* @__PURE__ */ React106.createElement(
+    import_ui92.IconButton,
     {
       size: SIZE10,
       sx: {
@@ -6689,32 +6793,32 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": (0, import_i18n52.__)("Add item", "elementor")
+      "aria-label": (0, import_i18n53.__)("Add item", "elementor")
     },
-    /* @__PURE__ */ React105.createElement(import_icons36.PlusIcon, { fontSize: SIZE10 })
+    /* @__PURE__ */ React106.createElement(import_icons36.PlusIcon, { fontSize: SIZE10 })
   );
-  return /* @__PURE__ */ React105.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React105.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React105.createElement(
-    import_ui91.Infotip,
+  return /* @__PURE__ */ React106.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React106.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React106.createElement(
+    import_ui92.Infotip,
     {
       placement: "right",
       content: addButtonInfotipContent,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React105.createElement(import_ui91.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React105.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React106.createElement(import_ui92.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React106.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React105.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React105.createElement(
+    return /* @__PURE__ */ React106.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React106.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React105.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React105.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React105.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React105.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React106.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React106.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React106.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React106.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -6726,7 +6830,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React105.createElement(
+      (props) => /* @__PURE__ */ React106.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -6756,27 +6860,27 @@ var RepeaterItem = ({
   value
 }) => {
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = (0, import_i18n52.__)("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? (0, import_i18n52.__)("Show", "elementor") : (0, import_i18n52.__)("Hide", "elementor");
-  const removeLabel = (0, import_i18n52.__)("Remove", "elementor");
-  return /* @__PURE__ */ React105.createElement(React105.Fragment, null, /* @__PURE__ */ React105.createElement(
+  const duplicateLabel = (0, import_i18n53.__)("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? (0, import_i18n53.__)("Show", "elementor") : (0, import_i18n53.__)("Hide", "elementor");
+  const removeLabel = (0, import_i18n53.__)("Remove", "elementor");
+  return /* @__PURE__ */ React106.createElement(React106.Fragment, null, /* @__PURE__ */ React106.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": (0, import_i18n52.__)("Open item", "elementor"),
-      ...(0, import_ui91.bindTrigger)(popoverState),
+      "aria-label": (0, import_i18n53.__)("Open item", "elementor"),
+      ...(0, import_ui92.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React105.createElement(React105.Fragment, null, showDuplicate && /* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React105.createElement(import_ui91.IconButton, { size: SIZE10, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React105.createElement(import_icons36.CopyIcon, { fontSize: SIZE10 }))), showToggle && /* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React105.createElement(import_ui91.IconButton, { size: SIZE10, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React105.createElement(import_icons36.EyeOffIcon, { fontSize: SIZE10 }) : /* @__PURE__ */ React105.createElement(import_icons36.EyeIcon, { fontSize: SIZE10 }))), actions?.(value), showRemove && /* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React105.createElement(import_ui91.IconButton, { size: SIZE10, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React105.createElement(import_icons36.XIcon, { fontSize: SIZE10 }))))
+      actions: /* @__PURE__ */ React106.createElement(React106.Fragment, null, showDuplicate && /* @__PURE__ */ React106.createElement(import_ui92.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React106.createElement(import_ui92.IconButton, { size: SIZE10, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React106.createElement(import_icons36.CopyIcon, { fontSize: SIZE10 }))), showToggle && /* @__PURE__ */ React106.createElement(import_ui92.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React106.createElement(import_ui92.IconButton, { size: SIZE10, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React106.createElement(import_icons36.EyeOffIcon, { fontSize: SIZE10 }) : /* @__PURE__ */ React106.createElement(import_icons36.EyeIcon, { fontSize: SIZE10 }))), actions?.(value), showRemove && /* @__PURE__ */ React106.createElement(import_ui92.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React106.createElement(import_ui92.IconButton, { size: SIZE10, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React106.createElement(import_icons36.XIcon, { fontSize: SIZE10 }))))
     }
-  ), /* @__PURE__ */ React105.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React105.createElement(import_ui91.Box, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React106.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React106.createElement(import_ui92.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react57.useState)(null);
-  const popoverState = (0, import_ui91.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui91.bindPopover)(popoverState);
-  (0, import_react57.useEffect)(() => {
+  const [ref, setRef] = (0, import_react58.useState)(null);
+  const popoverState = (0, import_ui92.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui92.bindPopover)(popoverState);
+  (0, import_react58.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -6791,20 +6895,20 @@ var usePopover = (openOnMount, onOpen) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-var React107 = __toESM(require("react"));
-var import_react59 = require("react");
+var React108 = __toESM(require("react"));
+var import_react60 = require("react");
 var import_editor_elements6 = require("@elementor/editor-elements");
 var import_icons38 = require("@elementor/icons");
-var import_ui93 = require("@elementor/ui");
-var import_react60 = require("@tiptap/react");
-var import_i18n54 = require("@wordpress/i18n");
+var import_ui94 = require("@elementor/ui");
+var import_react61 = require("@tiptap/react");
+var import_i18n55 = require("@wordpress/i18n");
 
 // src/components/url-popover.tsx
-var React106 = __toESM(require("react"));
-var import_react58 = require("react");
+var React107 = __toESM(require("react"));
+var import_react59 = require("react");
 var import_icons37 = require("@elementor/icons");
-var import_ui92 = require("@elementor/ui");
-var import_i18n53 = require("@wordpress/i18n");
+var import_ui93 = require("@elementor/ui");
+var import_i18n54 = require("@wordpress/i18n");
 var UrlPopover = ({
   popupState,
   restoreValue,
@@ -6814,8 +6918,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = (0, import_react58.useRef)(null);
-  (0, import_react58.useEffect)(() => {
+  const inputRef = (0, import_react59.useRef)(null);
+  (0, import_react59.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -6824,57 +6928,57 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React106.createElement(
-    import_ui92.Popover,
+  return /* @__PURE__ */ React107.createElement(
+    import_ui93.Popover,
     {
       slotProps: {
         paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
       },
-      ...(0, import_ui92.bindPopover)(popupState),
+      ...(0, import_ui93.bindPopover)(popupState),
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React106.createElement(import_ui92.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React106.createElement(
-      import_ui92.TextField,
+    /* @__PURE__ */ React107.createElement(import_ui93.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React107.createElement(
+      import_ui93.TextField,
       {
         value,
         onChange,
         size: "tiny",
         fullWidth: true,
-        placeholder: (0, import_i18n53.__)("Type a URL", "elementor"),
+        placeholder: (0, import_i18n54.__)("Type a URL", "elementor"),
         inputProps: { ref: inputRef },
         color: "secondary",
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React106.createElement(import_ui92.Tooltip, { title: (0, import_i18n53.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React106.createElement(
-      import_ui92.ToggleButton,
+    ), /* @__PURE__ */ React107.createElement(import_ui93.Tooltip, { title: (0, import_i18n54.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React107.createElement(
+      import_ui93.ToggleButton,
       {
         size: "tiny",
         value: "newTab",
         selected: openInNewTab,
         onClick: onToggleNewTab,
-        "aria-label": (0, import_i18n53.__)("Open in a new tab", "elementor"),
+        "aria-label": (0, import_i18n54.__)("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React106.createElement(import_icons37.ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React107.createElement(import_icons37.ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
 
 // src/components/inline-editor-toolbar.tsx
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = (0, import_react59.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react59.useState)(false);
-  const toolbarRef = (0, import_react59.useRef)(null);
-  const linkPopupState = (0, import_ui93.usePopupState)({ variant: "popover" });
+  const [urlValue, setUrlValue] = (0, import_react60.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react60.useState)(false);
+  const toolbarRef = (0, import_react60.useRef)(null);
+  const linkPopupState = (0, import_ui94.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = (0, import_react60.useEditorState)({
+  const editorState = (0, import_react61.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react59.useMemo)(() => {
+  const formatButtonsList = (0, import_react60.useMemo)(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -6911,11 +7015,11 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  React107.useEffect(() => {
+  React108.useEffect(() => {
     editor?.commands?.focus();
   }, [editor]);
-  return /* @__PURE__ */ React107.createElement(
-    import_ui93.Box,
+  return /* @__PURE__ */ React108.createElement(
+    import_ui94.Box,
     {
       ref: toolbarRef,
       sx: {
@@ -6931,9 +7035,9 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         ...sx
       }
     },
-    /* @__PURE__ */ React107.createElement(import_ui93.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React107.createElement(import_ui93.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React107.createElement(
-      import_ui93.ToggleButtonGroup,
+    /* @__PURE__ */ React108.createElement(import_ui94.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React108.createElement(import_ui94.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React108.createElement(
+      import_ui94.ToggleButtonGroup,
       {
         value: editorState,
         size: "tiny",
@@ -6941,7 +7045,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           display: "flex",
           gap: 0.5,
           border: "none",
-          [`& .${import_ui93.toggleButtonGroupClasses.firstButton}, & .${import_ui93.toggleButtonGroupClasses.middleButton}, & .${import_ui93.toggleButtonGroupClasses.lastButton}`]: {
+          [`& .${import_ui94.toggleButtonGroupClasses.firstButton}, & .${import_ui94.toggleButtonGroupClasses.middleButton}, & .${import_ui94.toggleButtonGroupClasses.lastButton}`]: {
             borderRadius: "8px",
             border: "none",
             marginLeft: 0,
@@ -6954,8 +7058,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React107.createElement(import_ui93.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React107.createElement(
-        import_ui93.ToggleButton,
+      formatButtonsList.map((button) => /* @__PURE__ */ React108.createElement(import_ui94.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React108.createElement(
+        import_ui94.ToggleButton,
         {
           value: button.action,
           "aria-label": button.label,
@@ -6972,7 +7076,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         button.icon
       )))
     ),
-    /* @__PURE__ */ React107.createElement(
+    /* @__PURE__ */ React108.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -6995,64 +7099,64 @@ var checkIfElementIsClickable = (elementId) => {
 };
 var toolbarButtons = {
   clear: {
-    label: (0, import_i18n54.__)("Clear", "elementor"),
-    icon: /* @__PURE__ */ React107.createElement(import_icons38.MinusIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n55.__)("Clear", "elementor"),
+    icon: /* @__PURE__ */ React108.createElement(import_icons38.MinusIcon, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: (0, import_i18n54.__)("Bold", "elementor"),
-    icon: /* @__PURE__ */ React107.createElement(import_icons38.BoldIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n55.__)("Bold", "elementor"),
+    icon: /* @__PURE__ */ React108.createElement(import_icons38.BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: (0, import_i18n54.__)("Italic", "elementor"),
-    icon: /* @__PURE__ */ React107.createElement(import_icons38.ItalicIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n55.__)("Italic", "elementor"),
+    icon: /* @__PURE__ */ React108.createElement(import_icons38.ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: (0, import_i18n54.__)("Underline", "elementor"),
-    icon: /* @__PURE__ */ React107.createElement(import_icons38.UnderlineIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n55.__)("Underline", "elementor"),
+    icon: /* @__PURE__ */ React108.createElement(import_icons38.UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: (0, import_i18n54.__)("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React107.createElement(import_icons38.StrikethroughIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n55.__)("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React108.createElement(import_icons38.StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: (0, import_i18n54.__)("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React107.createElement(import_icons38.SuperscriptIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n55.__)("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React108.createElement(import_icons38.SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: (0, import_i18n54.__)("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React107.createElement(import_icons38.SubscriptIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n55.__)("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React108.createElement(import_icons38.SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
   },
   link: {
-    label: (0, import_i18n54.__)("Link", "elementor"),
-    icon: /* @__PURE__ */ React107.createElement(import_icons38.LinkIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n55.__)("Link", "elementor"),
+    icon: /* @__PURE__ */ React108.createElement(import_icons38.LinkIcon, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -7061,8 +7165,8 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 
 // src/components/size/unstable-size-field.tsx
-var React110 = __toESM(require("react"));
-var import_ui95 = require("@elementor/ui");
+var React111 = __toESM(require("react"));
+var import_ui96 = require("@elementor/ui");
 
 // src/hooks/use-size-value.ts
 var useSizeValue = (externalValue, onChange, defaultValue) => {
@@ -7102,26 +7206,26 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-var React108 = __toESM(require("react"));
-var import_react61 = require("react");
-var import_editor_ui14 = require("@elementor/editor-ui");
-var import_ui94 = require("@elementor/ui");
+var React109 = __toESM(require("react"));
+var import_react62 = require("react");
+var import_editor_ui15 = require("@elementor/editor-ui");
+var import_ui95 = require("@elementor/ui");
 var menuItemContentStyles = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "center"
 };
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
-  const popupState = (0, import_ui94.usePopupState)({
+  const popupState = (0, import_ui95.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react61.useId)()
+    popupId: (0, import_react62.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui94.bindTrigger)(popupState) }, value), /* @__PURE__ */ React108.createElement(import_ui94.Menu, { MenuListProps: { dense: true }, ...(0, import_ui94.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React108.createElement(
-    import_editor_ui14.MenuListItem,
+  return /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui95.bindTrigger)(popupState) }, value), /* @__PURE__ */ React109.createElement(import_ui95.Menu, { MenuListProps: { dense: true }, ...(0, import_ui95.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React109.createElement(
+    import_editor_ui15.MenuListItem,
     {
       key: option,
       onClick: () => handleMenuItemClick(index),
@@ -7139,7 +7243,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     option.toUpperCase()
   ))));
 };
-var StyledButton2 = (0, import_ui94.styled)(import_ui94.Button, {
+var StyledButton2 = (0, import_ui95.styled)(import_ui95.Button, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -7149,11 +7253,11 @@ var StyledButton2 = (0, import_ui94.styled)(import_ui94.Button, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-var React109 = __toESM(require("react"));
-var import_react62 = require("react");
-var UnstableSizeInput = (0, import_react62.forwardRef)(
+var React110 = __toESM(require("react"));
+var import_react63 = require("react");
+var UnstableSizeInput = (0, import_react63.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React109.createElement(
+    return /* @__PURE__ */ React110.createElement(
       NumberInput,
       {
         ref,
@@ -7197,7 +7301,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React111.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -7206,7 +7310,7 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        endAdornment: /* @__PURE__ */ React110.createElement(import_ui95.InputAdornment, { position: "end" }, /* @__PURE__ */ React110.createElement(
+        endAdornment: /* @__PURE__ */ React111.createElement(import_ui96.InputAdornment, { position: "end" }, /* @__PURE__ */ React111.createElement(
           UnitSelect,
           {
             options: units2,
@@ -7224,13 +7328,13 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_i18n55 = require("@wordpress/i18n");
+var import_i18n56 = require("@wordpress/i18n");
 var supportedCategories = {
-  system: (0, import_i18n55.__)("System", "elementor"),
-  custom: (0, import_i18n55.__)("Custom Fonts", "elementor"),
-  googlefonts: (0, import_i18n55.__)("Google Fonts", "elementor")
+  system: (0, import_i18n56.__)("System", "elementor"),
+  custom: (0, import_i18n56.__)("Custom Fonts", "elementor"),
+  googlefonts: (0, import_i18n56.__)("Google Fonts", "elementor")
 };
 var getFontFamilies = () => {
   const { controls } = (0, import_editor_v1_adapters.getElementorConfig)();
@@ -7242,7 +7346,7 @@ var getFontFamilies = () => {
 };
 var useFontFamilies = () => {
   const fontFamilies = getFontFamilies();
-  return (0, import_react63.useMemo)(() => {
+  return (0, import_react64.useMemo)(() => {
     const categoriesOrder = ["system", "custom", "googlefonts"];
     return Object.entries(fontFamilies || {}).reduce((acc, [font, category]) => {
       if (!supportedCategories[category]) {
@@ -7277,6 +7381,7 @@ var useFontFamilies = () => {
   ControlToggleButtonGroup,
   DateTimeControl,
   DisplayConditionsControl,
+  EmailFormActionControl,
   EqualUnequalSizesControl,
   FilterRepeaterControl,
   FontFamilyControl,