@elementor/editor-app-bar 4.1.0-838 → 4.1.0-beta2

package/dist/index.mjs

@@ -189,9 +189,9 @@ var documentOptionsMenu = createMenu2({
 import { injectIntoTop as injectIntoTop2 } from "@elementor/editor";
 
 // src/components/app-bar.tsx
-import * as React20 from "react";
+import * as React22 from "react";
 import { __useActiveDocument as useActiveDocument } from "@elementor/editor-documents";
-import { AppBar as BaseAppBar, Box as Box3, Divider as Divider2, Grid, ThemeProvider as ThemeProvider2, Toolbar } from "@elementor/ui";
+import { AppBar as BaseAppBar, Box as Box3, Divider as Divider2, Grid, ThemeProvider as ThemeProvider3, Toolbar } from "@elementor/ui";
 
 // src/components/locations/main-menu-location.tsx
 import * as React10 from "react";
@@ -329,33 +329,162 @@ function ResponsiveLocation() {
 }
 
 // src/components/locations/tools-menu-location.tsx
-import * as React18 from "react";
+import * as React20 from "react";
 
-// src/components/ui/toolbar-menu.tsx
+// src/extensions/angie/components/angie-guide-location.tsx
+import * as React15 from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
+import { ThemeProvider } from "@elementor/editor-ui";
+import { useMixpanel } from "@elementor/events";
+import { Infotip } from "@elementor/ui";
+
+// src/extensions/angie/angie-consts.ts
+import { __ as __2 } from "@wordpress/i18n";
+var ANGIE_GUIDE_TOGGLE_EVENT = "elementor/editor/toggle-angie-guide";
+var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
+var ANGIE_BUTTON_ARIA_LABEL = __2("Angie", "elementor");
+var ANGIE_LEARN_MORE_URL = "https://go.elementor.com/angie-learn-more";
+var ANGIE_DESCRIPTION = __2(
+  "Angie lets you generate custom widgets, sections, and code using simple instructions.",
+  "elementor"
+);
+var AI_WIDGET_CTA_VIEWED_EVENT = "ai_widget_cta_viewed";
+var ANGIE_TOP_BAR_PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-top-bar-promotion.svg";
+var ANGIE_TOP_BAR_DESCRIPTION = __2("Build custom widgets using simple instructions.", "elementor");
+
+// src/extensions/angie/components/angie-guide-card.tsx
 import * as React14 from "react";
-import { Stack as Stack2 } from "@elementor/ui";
+import { Button, Chip, ClickAwayListener, CloseButton, Image, Stack as Stack2, Typography } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClose }) {
+  return /* @__PURE__ */ React14.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React14.createElement(Stack2, { sx: { width: 296 }, "data-testid": "e-angie-guide-card" }, /* @__PURE__ */ React14.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1, py: 1, px: 2 }, /* @__PURE__ */ React14.createElement(Typography, { variant: "subtitle2" }, __3("Meet Angie", "elementor")), /* @__PURE__ */ React14.createElement(Chip, { label: __3("New", "elementor"), size: "small", color: "info", variant: "standard" }), /* @__PURE__ */ React14.createElement(
+    CloseButton,
+    {
+      edge: "end",
+      sx: { ml: "auto" },
+      slotProps: { icon: { fontSize: "small" } },
+      onClick: onClose
+    }
+  )), /* @__PURE__ */ React14.createElement(Image, { src: imageUrl, alt: __3("Angie", "elementor"), sx: { height: 150, width: "100%" } }), /* @__PURE__ */ React14.createElement(Stack2, { px: 2, pt: 1.5, pb: 1 }, /* @__PURE__ */ React14.createElement(Typography, { variant: "body2", color: "secondary" }, description)), /* @__PURE__ */ React14.createElement(Stack2, { direction: "row", justifyContent: "flex-end", gap: 1, pt: 1, pb: 1.5, px: 2 }, /* @__PURE__ */ React14.createElement(
+    Button,
+    {
+      variant: "text",
+      size: "small",
+      color: "secondary",
+      onClick: () => {
+        window.open(learnMoreUrl, "_blank", "noopener,noreferrer");
+        onClose();
+      }
+    },
+    __3("Learn More", "elementor")
+  ), onInstall && /* @__PURE__ */ React14.createElement(Button, { variant: "contained", size: "small", color: "accent", onClick: onInstall }, __3("Try for free", "elementor")))));
+}
+
+// src/extensions/angie/hooks/use-auto-show.ts
+import { useEffect } from "react";
+function useAutoShow() {
+  useEffect(() => {
+    if (!window.elementor?.config?.angie?.autoShow) {
+      return;
+    }
+    const id = setTimeout(() => {
+      window.dispatchEvent(new CustomEvent(ANGIE_GUIDE_TOGGLE_EVENT));
+    }, 0);
+    return () => clearTimeout(id);
+  }, []);
+}
+
+// src/extensions/angie/components/angie-guide-location.tsx
+function AngieGuideLocation() {
+  useAutoShow();
+  const [anchorEl, setAnchorEl] = useState2(null);
+  const { dispatchEvent: dispatchEvent2 } = useMixpanel();
+  const { isAdmin } = useCurrentUserCapabilities();
+  const isOpen = Boolean(anchorEl);
+  useEffect2(() => {
+    const handleToggle = () => {
+      setAnchorEl((prev) => {
+        if (prev) {
+          return null;
+        }
+        return document.querySelector(`[aria-label="${ANGIE_BUTTON_ARIA_LABEL}"]`);
+      });
+    };
+    window.addEventListener(ANGIE_GUIDE_TOGGLE_EVENT, handleToggle);
+    return () => {
+      window.removeEventListener(ANGIE_GUIDE_TOGGLE_EVENT, handleToggle);
+    };
+  }, []);
+  const handleClose = () => setAnchorEl(null);
+  const handleInstall = async () => {
+    dispatchEvent2?.(AI_WIDGET_CTA_VIEWED_EVENT, {
+      entry_point: "top_bar_icon"
+    });
+    window.dispatchEvent(
+      new CustomEvent(CREATE_WIDGET_EVENT, {
+        detail: {
+          entry_point: "top_bar_icon"
+        }
+      })
+    );
+    handleClose();
+  };
+  return /* @__PURE__ */ React15.createElement(ThemeProvider, null, /* @__PURE__ */ React15.createElement(
+    Infotip,
+    {
+      content: /* @__PURE__ */ React15.createElement(
+        AngieGuideCard,
+        {
+          imageUrl: ANGIE_TOP_BAR_PROMOTION_IMAGE_URL,
+          description: ANGIE_TOP_BAR_DESCRIPTION,
+          learnMoreUrl: ANGIE_LEARN_MORE_URL,
+          onInstall: isAdmin ? handleInstall : void 0,
+          onClose: handleClose
+        }
+      ),
+      placement: "bottom-start",
+      open: isOpen,
+      disableHoverListener: true,
+      PopperProps: {
+        anchorEl,
+        modifiers: [
+          {
+            name: "offset",
+            options: { offset: [-4, -4] }
+          }
+        ]
+      }
+    },
+    /* @__PURE__ */ React15.createElement("span", null)
+  ));
+}
+
+// src/components/ui/toolbar-menu.tsx
+import * as React16 from "react";
+import { Stack as Stack3 } from "@elementor/ui";
 function ToolbarMenu({ children, ...props }) {
-  return /* @__PURE__ */ React14.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React14.createElement(Stack2, { sx: { px: 1.5 }, spacing: 1.5, direction: "row", alignItems: "center", ...props }, children));
+  return /* @__PURE__ */ React16.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React16.createElement(Stack3, { sx: { px: 1.5 }, spacing: 1.5, direction: "row", alignItems: "center", ...props }, children));
 }
 
 // src/components/ui/toolbar-menu-more.tsx
-import * as React15 from "react";
+import * as React17 from "react";
 import { DotsVerticalIcon } from "@elementor/icons";
 import { bindMenu as bindMenu2, bindTrigger as bindTrigger2, usePopupState as usePopupState2 } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 function ToolbarMenuMore({ children, id }) {
   const popupState = usePopupState2({
     variant: "popover",
     popupId: id
   });
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(ToolbarMenuItem, { ...bindTrigger2(popupState), title: __2("More", "elementor") }, /* @__PURE__ */ React15.createElement(DotsVerticalIcon, null)), /* @__PURE__ */ React15.createElement(PopoverMenu, { onClick: popupState.close, ...bindMenu2(popupState) }, children));
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(ToolbarMenuItem, { ...bindTrigger2(popupState), title: __4("More", "elementor") }, /* @__PURE__ */ React17.createElement(DotsVerticalIcon, null)), /* @__PURE__ */ React17.createElement(PopoverMenu, { onClick: popupState.close, ...bindMenu2(popupState) }, children));
 }
 
 // src/components/locations/integrations-menu-location.tsx
-import * as React16 from "react";
+import * as React18 from "react";
 import { PlugIcon } from "@elementor/icons";
 import { bindMenu as bindMenu3, bindTrigger as bindTrigger3, usePopupState as usePopupState3 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 var { useMenuItems: useMenuItems2 } = integrationsMenu;
 function IntegrationsMenuLocation() {
   const menuItems = useMenuItems2();
@@ -366,7 +495,7 @@ function IntegrationsMenuLocation() {
   if (menuItems.default.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(ToolbarMenuItem, { ...bindTrigger3(popupState), title: __3("Integrations", "elementor") }, /* @__PURE__ */ React16.createElement(PlugIcon, null)), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ToolbarMenuItem, { ...bindTrigger3(popupState), title: __5("Integrations", "elementor") }, /* @__PURE__ */ React18.createElement(PlugIcon, null)), /* @__PURE__ */ React18.createElement(
     PopoverMenu,
     {
       onClick: popupState.close,
@@ -374,32 +503,32 @@ function IntegrationsMenuLocation() {
       marginThreshold: 8,
       open: popupState.isOpen
     },
-    menuItems.default.map(({ MenuItem: IntegrationsMenuItem, id }) => /* @__PURE__ */ React16.createElement(IntegrationsMenuItem, { key: id }))
+    menuItems.default.map(({ MenuItem: IntegrationsMenuItem, id }) => /* @__PURE__ */ React18.createElement(IntegrationsMenuItem, { key: id }))
   ));
 }
 
 // src/components/locations/send-feedback-popup-location.tsx
-import * as React17 from "react";
-import { useEffect, useState as useState2 } from "react";
-import { ThemeProvider } from "@elementor/editor-ui";
+import * as React19 from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
-import { useMixpanel } from "@elementor/events";
+import { useMixpanel as useMixpanel2 } from "@elementor/events";
 import { httpService } from "@elementor/http-client";
 import { AlertCircleIcon, CheckIcon } from "@elementor/icons";
 import {
   bindDialog,
-  Button,
-  CloseButton,
+  Button as Button2,
+  CloseButton as CloseButton2,
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   Popover,
-  Stack as Stack3,
+  Stack as Stack4,
   TextField,
   usePopupState as usePopupState4
 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/extensions/feedback/feedback-consts.ts
 var EXPERIMENT_NAME = "in_editor_feedback";
@@ -413,23 +542,23 @@ var checkIfUserIsConnected = () => {
 function SendFeedbackPopupLocation() {
   const isActive = isExperimentActive(EXPERIMENT_NAME);
   const extendedWindow = window;
-  const [isUserConnected, setIsUserConnected] = useState2(checkIfUserIsConnected());
+  const [isUserConnected, setIsUserConnected] = useState3(checkIfUserIsConnected());
   const connectUrl = extendedWindow?.elementor?.config.user.top_bar.connect_url;
-  const [feedbackContent, setFeedbackContent] = useState2("");
-  const [feedbackResult, setFeedbackResult] = useState2(null);
-  const [submitDisabled, setSubmitDisabled] = useState2(true);
-  const { dispatchEvent: trackEvent = (...args) => void args } = useMixpanel();
+  const [feedbackContent, setFeedbackContent] = useState3("");
+  const [feedbackResult, setFeedbackResult] = useState3(null);
+  const [submitDisabled, setSubmitDisabled] = useState3(true);
+  const { dispatchEvent: trackEvent2 = (...args) => void args } = useMixpanel2();
   const popupState = usePopupState4({
     variant: "dialog",
     popupId: FEEDBACK_TOGGLE_EVENT
   });
-  const [isFetching, setIsFetching] = useState2(false);
-  useEffect(() => {
+  const [isFetching, setIsFetching] = useState3(false);
+  useEffect3(() => {
     const handler = () => {
       popupState.toggle();
       setIsUserConnected(checkIfUserIsConnected());
       setFeedbackResult(null);
-      trackEvent("feedback_modal_opened", {
+      trackEvent2("feedback_modal_opened", {
         source: "top_bar",
         context: "v4_beta"
       });
@@ -438,13 +567,13 @@ function SendFeedbackPopupLocation() {
     return () => {
       window.removeEventListener(FEEDBACK_TOGGLE_EVENT, handler);
     };
-  }, [popupState, trackEvent]);
-  useEffect(() => {
+  }, [popupState, trackEvent2]);
+  useEffect3(() => {
     setSubmitDisabled(feedbackContent.trim().length < 10 || !isUserConnected || isFetching);
   }, [feedbackContent, feedbackResult, isUserConnected, isFetching]);
   const handleClose = () => {
     popupState.close();
-    trackEvent("feedback_modal_closed", {
+    trackEvent2("feedback_modal_closed", {
       feedback_text: feedbackContent
     });
   };
@@ -464,7 +593,7 @@ function SendFeedbackPopupLocation() {
       if (!response.data.success && response.data.code.toString() === "401" || response.data.code.toString() === "403") {
         setIsUserConnected(false);
       }
-      trackEvent(response.data.success ? "feedback_submitted" : "feedback_error", {
+      trackEvent2(response.data.success ? "feedback_submitted" : "feedback_error", {
         feedback_length: feedbackContent.length,
         error_type: response.data.success ? void 0 : "server",
         error_message: response.data.success ? void 0 : response.data.message
@@ -474,8 +603,8 @@ function SendFeedbackPopupLocation() {
   if (!isActive) {
     return null;
   }
-  return /* @__PURE__ */ React17.createElement(ThemeProvider, null, /* @__PURE__ */ React17.createElement(Popover, { ...bindDialog(popupState), onClose: () => handleClose() }, /* @__PURE__ */ React17.createElement(Dialog, { open: popupState.isOpen }, /* @__PURE__ */ React17.createElement(DialogHeader, { style: { width: "100%", minWidth: "35rem" } }, /* @__PURE__ */ React17.createElement(DialogTitle, { style: { width: "100%" } }, /* @__PURE__ */ React17.createElement(
-    Stack3,
+  return /* @__PURE__ */ React19.createElement(ThemeProvider2, null, /* @__PURE__ */ React19.createElement(Popover, { ...bindDialog(popupState), onClose: () => handleClose() }, /* @__PURE__ */ React19.createElement(Dialog, { open: popupState.isOpen }, /* @__PURE__ */ React19.createElement(DialogHeader, { style: { width: "100%", minWidth: "35rem" } }, /* @__PURE__ */ React19.createElement(DialogTitle, { style: { width: "100%" } }, /* @__PURE__ */ React19.createElement(
+    Stack4,
     {
       display: "flex",
       direction: "row",
@@ -483,18 +612,18 @@ function SendFeedbackPopupLocation() {
       justifyContent: "space-between",
       width: "100%"
     },
-    __4("Submit Feedback", "elementor"),
-    /* @__PURE__ */ React17.createElement(CloseButton, { onClick: popupState.close })
-  ))), /* @__PURE__ */ React17.createElement(DialogContent, null, /* @__PURE__ */ React17.createElement(Stack3, { direction: "column", gap: 2 }, isUserConnected ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
+    __6("Submit Feedback", "elementor"),
+    /* @__PURE__ */ React19.createElement(CloseButton2, { onClick: popupState.close })
+  ))), /* @__PURE__ */ React19.createElement(DialogContent, null, /* @__PURE__ */ React19.createElement(Stack4, { direction: "column", gap: 2 }, isUserConnected ? /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     TextField,
     {
       autofocus: true,
-      placeholder: __4(
+      placeholder: __6(
         "E.g. Can you add ABC features? I want to do ABC and it\u2019s important because \u2026",
         "elementor"
       ),
       fullwith: true,
-      label: __4("Your Feedback", "elementor"),
+      label: __6("Your Feedback", "elementor"),
       multiline: true,
       id: "elementor-feedback-usercontent",
       rows: 6,
@@ -503,8 +632,8 @@ function SendFeedbackPopupLocation() {
       onChange: (event) => setFeedbackContent(event.target.value),
       value: feedbackContent
     }
-  ), /* @__PURE__ */ React17.createElement(Stack3, { direction: "row", justifyContent: "flex-end", alignItems: "center", gap: 2 }, feedbackResult && /* @__PURE__ */ React17.createElement(React17.Fragment, null, feedbackResult.success ? /* @__PURE__ */ React17.createElement(CheckIcon, { color: "success" }) : /* @__PURE__ */ React17.createElement(AlertCircleIcon, { color: "error" }), feedbackResult.message), feedbackResult?.success ? /* @__PURE__ */ React17.createElement(Button, { variant: "text", onClick: () => handleStartAnother() }, __4("Submit Another Feedback", "elementor")) : /* @__PURE__ */ React17.createElement(
-    Button,
+  ), /* @__PURE__ */ React19.createElement(Stack4, { direction: "row", justifyContent: "flex-end", alignItems: "center", gap: 2 }, feedbackResult && /* @__PURE__ */ React19.createElement(React19.Fragment, null, feedbackResult.success ? /* @__PURE__ */ React19.createElement(CheckIcon, { color: "success" }) : /* @__PURE__ */ React19.createElement(AlertCircleIcon, { color: "error" }), feedbackResult.message), feedbackResult?.success ? /* @__PURE__ */ React19.createElement(Button2, { variant: "text", onClick: () => handleStartAnother() }, __6("Submit Another Feedback", "elementor")) : /* @__PURE__ */ React19.createElement(
+    Button2,
     {
       disabled: submitDisabled,
       onClick: submitFeedback,
@@ -512,9 +641,9 @@ function SendFeedbackPopupLocation() {
       color: "primary",
       size: "small"
     },
-    __4("Submit", "elementor")
-  ))) : /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
-    Button,
+    __6("Submit", "elementor")
+  ))) : /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+    Button2,
     {
       variant: "contained",
       color: "primary",
@@ -524,7 +653,7 @@ function SendFeedbackPopupLocation() {
       rel: "noopener",
       onClick: popupState.close
     },
-    __4("Connect to Elementor", "elementor")
+    __6("Connect to Elementor", "elementor")
   )))))));
 }
 
@@ -535,11 +664,11 @@ function ToolsMenuLocation() {
   const menuItems = useMenuItems3();
   const toolbarMenuItems = menuItems.default.slice(0, MAX_TOOLBAR_ACTIONS);
   const popoverMenuItems = menuItems.default.slice(MAX_TOOLBAR_ACTIONS);
-  return /* @__PURE__ */ React18.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React18.createElement(MenuItem2, { key: id })), /* @__PURE__ */ React18.createElement(SendFeedbackPopupLocation, null), /* @__PURE__ */ React18.createElement(IntegrationsMenuLocation, null), popoverMenuItems.length > 0 && /* @__PURE__ */ React18.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-tools-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React18.createElement(MenuItem2, { key: id }))));
+  return /* @__PURE__ */ React20.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React20.createElement(MenuItem2, { key: id })), /* @__PURE__ */ React20.createElement(AngieGuideLocation, null), /* @__PURE__ */ React20.createElement(SendFeedbackPopupLocation, null), /* @__PURE__ */ React20.createElement(IntegrationsMenuLocation, null), popoverMenuItems.length > 0 && /* @__PURE__ */ React20.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-tools-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React20.createElement(MenuItem2, { key: id }))));
 }
 
 // src/components/locations/utilities-menu-location.tsx
-import * as React19 from "react";
+import * as React21 from "react";
 import { Fragment as Fragment4 } from "react";
 var MAX_TOOLBAR_ACTIONS2 = 4;
 var { useMenuItems: useMenuItems4 } = utilitiesMenu;
@@ -548,40 +677,42 @@ function UtilitiesMenuLocation() {
   const shouldUsePopover = menuItems.default.length > MAX_TOOLBAR_ACTIONS2 + 1;
   const toolbarMenuItems = shouldUsePopover ? menuItems.default.slice(0, MAX_TOOLBAR_ACTIONS2) : menuItems.default;
   const popoverMenuItems = shouldUsePopover ? menuItems.default.slice(MAX_TOOLBAR_ACTIONS2) : [];
-  return /* @__PURE__ */ React19.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React19.createElement(Fragment4, { key: id }, /* @__PURE__ */ React19.createElement(MenuItem2, null))), popoverMenuItems.length > 0 && /* @__PURE__ */ React19.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React19.createElement(MenuItem2, { key: id }))));
+  return /* @__PURE__ */ React21.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React21.createElement(Fragment4, { key: id }, /* @__PURE__ */ React21.createElement(MenuItem2, null))), popoverMenuItems.length > 0 && /* @__PURE__ */ React21.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React21.createElement(MenuItem2, { key: id }))));
 }
 
 // src/components/app-bar.tsx
 function AppBar() {
   const document2 = useActiveDocument();
-  return /* @__PURE__ */ React20.createElement(ThemeProvider2, { colorScheme: "dark" }, /* @__PURE__ */ React20.createElement(BaseAppBar, { position: "sticky" }, /* @__PURE__ */ React20.createElement(Toolbar, { disableGutters: true, variant: "dense" }, /* @__PURE__ */ React20.createElement(Box3, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", flexGrow: 1 }, /* @__PURE__ */ React20.createElement(Grid, { container: true, flexWrap: "nowrap" }, /* @__PURE__ */ React20.createElement(MainMenuLocation, null), document2?.permissions?.allowAddingWidgets && /* @__PURE__ */ React20.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React20.createElement(Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React20.createElement(ToolbarMenu, { spacing: 1.5 }, /* @__PURE__ */ React20.createElement(Divider2, { orientation: "vertical" }), /* @__PURE__ */ React20.createElement(PageIndicationLocation, null), /* @__PURE__ */ React20.createElement(Divider2, { orientation: "vertical" }), /* @__PURE__ */ React20.createElement(ResponsiveLocation, null), /* @__PURE__ */ React20.createElement(Divider2, { orientation: "vertical" }))), /* @__PURE__ */ React20.createElement(Grid, { container: true, justifyContent: "flex-end", flexWrap: "nowrap" }, /* @__PURE__ */ React20.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React20.createElement(PrimaryActionLocation, null))))));
+  return /* @__PURE__ */ React22.createElement(ThemeProvider3, { colorScheme: "dark" }, /* @__PURE__ */ React22.createElement(BaseAppBar, { position: "sticky" }, /* @__PURE__ */ React22.createElement(Toolbar, { disableGutters: true, variant: "dense" }, /* @__PURE__ */ React22.createElement(Box3, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", flexGrow: 1 }, /* @__PURE__ */ React22.createElement(Grid, { container: true, flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(MainMenuLocation, null), document2?.permissions?.allowAddingWidgets && /* @__PURE__ */ React22.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React22.createElement(Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React22.createElement(ToolbarMenu, { spacing: 1.5 }, /* @__PURE__ */ React22.createElement(Divider2, { orientation: "vertical" }), /* @__PURE__ */ React22.createElement(PageIndicationLocation, null), /* @__PURE__ */ React22.createElement(Divider2, { orientation: "vertical" }), /* @__PURE__ */ React22.createElement(ResponsiveLocation, null), /* @__PURE__ */ React22.createElement(Divider2, { orientation: "vertical" }))), /* @__PURE__ */ React22.createElement(Grid, { container: true, justifyContent: "flex-end", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React22.createElement(PrimaryActionLocation, null))))));
 }
 
 // src/extensions/angie/hooks/use-action-props.ts
+import { useEffect as useEffect4 } from "react";
 import { isAngieAvailable } from "@elementor/editor-mcp";
+import { trackEvent } from "@elementor/events";
 import { AngieIcon } from "@elementor/icons";
-import { __ as __5 } from "@wordpress/i18n";
-var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
-var CREATE_WIDGET_PROMPT = `Create a widget for me.
-Goal: [What should this widget help me accomplish?]
-Placement: [Where will I see it in the editor/UI?]
-How it should work: `;
+import { __ as __7 } from "@wordpress/i18n";
 function useActionProps() {
+  const hasAngieInstalled = isAngieAvailable();
+  const visible = !hasAngieInstalled;
+  useEffect4(() => {
+    if (!visible) {
+      return;
+    }
+    trackEvent({
+      eventName: AI_WIDGET_CTA_VIEWED_EVENT,
+      entry_point: "top_bar_icon",
+      has_angie_installed: false
+    });
+  }, [visible]);
   return {
-    title: __5("Angie", "elementor"),
+    title: __7("Angie", "elementor"),
     icon: AngieIcon,
     onClick: () => {
-      window.dispatchEvent(
-        new CustomEvent(CREATE_WIDGET_EVENT, {
-          detail: {
-            prompt: CREATE_WIDGET_PROMPT,
-            entry_point: "top_bar"
-          }
-        })
-      );
+      window.dispatchEvent(new CustomEvent(ANGIE_GUIDE_TOGGLE_EVENT));
     },
     selected: false,
-    visible: !isAngieAvailable()
+    visible
   };
 }
 
@@ -597,7 +728,7 @@ function init() {
 // src/extensions/connect/hooks/use-connect-link-config.tsx
 import { useCallback } from "react";
 import { UserIcon } from "@elementor/icons";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 var dispatchConnectClickEvent = (eventName) => {
   try {
     const extendedWindow = window;
@@ -650,12 +781,12 @@ function useConnectLinkConfig() {
     [extendedWindow]
   );
   return isUserConnected ? {
-    title: __6("My Elementor", "elementor"),
+    title: __8("My Elementor", "elementor"),
     href: extendedWindow?.elementor?.config.user.top_bar.my_elementor_url,
     icon: UserIcon,
     target: "_blank"
   } : {
-    title: __6("Connect my account", "elementor"),
+    title: __8("Connect my account", "elementor"),
     href: extendedWindow?.elementor?.config.user.top_bar.connect_url,
     icon: UserIcon,
     target,
@@ -677,12 +808,12 @@ function init2() {
 import { __useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
 import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
 import { EyeIcon } from "@elementor/icons";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 function useActionProps2() {
   const document2 = useActiveDocument2();
   return {
     icon: EyeIcon,
-    title: __7("Preview Changes", "elementor"),
+    title: __9("Preview Changes", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementorCommon?.eventsManager?.config;
@@ -714,7 +845,7 @@ function init3() {
 }
 
 // src/extensions/documents-save/components/primary-action.tsx
-import * as React22 from "react";
+import * as React24 from "react";
 import {
   __useActiveDocument as useActiveDocument3,
   __useActiveDocumentActions as useActiveDocumentActions
@@ -725,16 +856,16 @@ import {
   bindMenu as bindMenu4,
   bindTrigger as bindTrigger4,
   Box as Box4,
-  Button as Button2,
+  Button as Button3,
   ButtonGroup,
   CircularProgress,
   Tooltip as Tooltip3,
   usePopupState as usePopupState5
 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/extensions/documents-save/components/primary-action-menu.tsx
-import * as React21 from "react";
+import * as React23 from "react";
 import { Divider as Divider3, styled as styled2 } from "@elementor/ui";
 var { useMenuItems: useMenuItems5 } = documentOptionsMenu;
 var StyledPopoverMenu = styled2(PopoverMenu)`
@@ -750,7 +881,7 @@ var StyledPopoverMenu = styled2(PopoverMenu)`
 `;
 function PrimaryActionMenu(props) {
   const { save: saveActions, default: defaultActions } = useMenuItems5();
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React23.createElement(
     StyledPopoverMenu,
     {
       ...props,
@@ -768,13 +899,13 @@ function PrimaryActionMenu(props) {
       }
     },
     saveActions.map(({ MenuItem: MenuItem2, id }, index) => [
-      index > 0 && /* @__PURE__ */ React21.createElement(Divider3, { key: `${id}-divider` }),
-      /* @__PURE__ */ React21.createElement(MenuItem2, { key: id })
+      index > 0 && /* @__PURE__ */ React23.createElement(Divider3, { key: `${id}-divider` }),
+      /* @__PURE__ */ React23.createElement(MenuItem2, { key: id })
     ]),
-    saveActions.length > 0 && defaultActions.length > 0 && /* @__PURE__ */ React21.createElement(Divider3, null),
+    saveActions.length > 0 && defaultActions.length > 0 && /* @__PURE__ */ React23.createElement(Divider3, null),
     defaultActions.map(({ MenuItem: MenuItem2, id }, index) => [
-      index > 0 && /* @__PURE__ */ React21.createElement(Divider3, { key: `${id}-divider` }),
-      /* @__PURE__ */ React21.createElement(MenuItem2, { key: id })
+      index > 0 && /* @__PURE__ */ React23.createElement(Divider3, { key: `${id}-divider` }),
+      /* @__PURE__ */ React23.createElement(MenuItem2, { key: id })
     ])
   );
 }
@@ -795,8 +926,8 @@ function PrimaryAction() {
   const isPublishDisabled = !isEditMode || !isPublishEnabled(document2);
   const isSaveOptionsDisabled = !isEditMode || document2.type.value === "kit";
   const shouldShowSpinner = document2.isSaving && !isPublishDisabled;
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(ButtonGroup, { size: "large", variant: "contained" }, /* @__PURE__ */ React22.createElement(
-    Button2,
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(ButtonGroup, { size: "large", variant: "contained" }, /* @__PURE__ */ React24.createElement(
+    Button3,
     {
       onClick: () => {
         const extendedWindow = window;
@@ -826,11 +957,11 @@ function PrimaryAction() {
       },
       disabled: isPublishDisabled
     },
-    shouldShowSpinner ? /* @__PURE__ */ React22.createElement(CircularProgress, { color: "inherit", size: "1.5em" }) : getLabel(document2)
-  ), /* @__PURE__ */ React22.createElement(
+    shouldShowSpinner ? /* @__PURE__ */ React24.createElement(CircularProgress, { color: "inherit", size: "1.5em" }) : getLabel(document2)
+  ), /* @__PURE__ */ React24.createElement(
     Tooltip3,
     {
-      title: __8("Save Options", "elementor"),
+      title: __10("Save Options", "elementor"),
       PopperProps: {
         sx: {
           "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
@@ -840,21 +971,21 @@ function PrimaryAction() {
         }
       }
     },
-    /* @__PURE__ */ React22.createElement(Box4, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React22.createElement(
-      Button2,
+    /* @__PURE__ */ React24.createElement(Box4, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React24.createElement(
+      Button3,
       {
         size: "small",
         ...bindTrigger4(popupState),
         sx: { px: 0, height: "100%", borderRadius: 0 },
         disabled: isSaveOptionsDisabled,
-        "aria-label": __8("Save Options", "elementor")
+        "aria-label": __10("Save Options", "elementor")
       },
-      /* @__PURE__ */ React22.createElement(ChevronDownIcon, null)
+      /* @__PURE__ */ React24.createElement(ChevronDownIcon, null)
     ))
-  )), /* @__PURE__ */ React22.createElement(PrimaryActionMenu, { ...bindMenu4(popupState), onClick: popupState.close }));
+  )), /* @__PURE__ */ React24.createElement(PrimaryActionMenu, { ...bindMenu4(popupState), onClick: popupState.close }));
 }
 function getLabel(document2) {
-  return document2.userCan.publish ? __8("Publish", "elementor") : __8("Submit", "elementor");
+  return document2.userCan.publish ? __10("Publish", "elementor") : __10("Submit", "elementor");
 }
 function isPublishEnabled(document2) {
   if (document2.type.value === "kit") {
@@ -868,16 +999,16 @@ import {
   __useActiveDocument as useActiveDocument4,
   __useActiveDocumentActions as useActiveDocumentActions2
 } from "@elementor/editor-documents";
-import { useMixpanel as useMixpanel2 } from "@elementor/events";
+import { useMixpanel as useMixpanel3 } from "@elementor/events";
 import { LinkIcon } from "@elementor/icons";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 function useDocumentCopyAndShareProps() {
   const document2 = useActiveDocument4();
   const { copyAndShare } = useActiveDocumentActions2();
-  const { dispatchEvent: dispatchEvent2, config } = useMixpanel2();
+  const { dispatchEvent: dispatchEvent2, config } = useMixpanel3();
   return {
     icon: LinkIcon,
-    title: __9("Copy and Share", "elementor"),
+    title: __11("Copy and Share", "elementor"),
     onClick: () => {
       const eventName = config?.names?.editorOne?.topBarPublishDropdown;
       if (eventName) {
@@ -905,16 +1036,16 @@ import {
   __useActiveDocument as useActiveDocument5,
   __useActiveDocumentActions as useActiveDocumentActions3
 } from "@elementor/editor-documents";
-import { useMixpanel as useMixpanel3 } from "@elementor/events";
+import { useMixpanel as useMixpanel4 } from "@elementor/events";
 import { FileReportIcon } from "@elementor/icons";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 function useDocumentSaveDraftProps() {
   const document2 = useActiveDocument5();
   const { saveDraft } = useActiveDocumentActions3();
-  const { dispatchEvent: dispatchEvent2, config } = useMixpanel3();
+  const { dispatchEvent: dispatchEvent2, config } = useMixpanel4();
   return {
     icon: FileReportIcon,
-    title: __10("Save Draft", "elementor"),
+    title: __12("Save Draft", "elementor"),
     onClick: () => {
       const eventName = config?.names?.editorOne?.topBarPublishDropdown;
       if (eventName) {
@@ -938,15 +1069,15 @@ function useDocumentSaveDraftProps() {
 
 // src/extensions/documents-save/hooks/use-document-save-template-props.ts
 import { __useActiveDocumentActions as useActiveDocumentActions4 } from "@elementor/editor-documents";
-import { useMixpanel as useMixpanel4 } from "@elementor/events";
+import { useMixpanel as useMixpanel5 } from "@elementor/events";
 import { FolderIcon } from "@elementor/icons";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 function useDocumentSaveTemplateProps() {
   const { saveTemplate } = useActiveDocumentActions4();
-  const { dispatchEvent: dispatchEvent2, config } = useMixpanel4();
+  const { dispatchEvent: dispatchEvent2, config } = useMixpanel5();
   return {
     icon: FolderIcon,
-    title: __11("Save as Template", "elementor"),
+    title: __13("Save as Template", "elementor"),
     onClick: () => {
       const eventName = config?.names?.editorOne?.topBarPublishDropdown;
       if (eventName) {
@@ -971,12 +1102,12 @@ function useDocumentSaveTemplateProps() {
 import { __useActiveDocument as useActiveDocument6 } from "@elementor/editor-documents";
 import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
 import { EyeIcon as EyeIcon2 } from "@elementor/icons";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 function useDocumentViewAsMarkdownProps() {
   const document2 = useActiveDocument6();
   return {
     icon: EyeIcon2,
-    title: __12("View as Markdown", "elementor"),
+    title: __14("View as Markdown", "elementor"),
     onClick: async () => {
       const baseUrl = document2?.links?.wpPreview || document2?.links?.permalink;
       if (!baseUrl) {
@@ -995,15 +1126,15 @@ function useDocumentViewAsMarkdownProps() {
 // src/extensions/documents-save/hooks/use-document-view-page-props.ts
 import { __useActiveDocument as useActiveDocument7 } from "@elementor/editor-documents";
 import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
-import { useMixpanel as useMixpanel5 } from "@elementor/events";
+import { useMixpanel as useMixpanel6 } from "@elementor/events";
 import { EyeIcon as EyeIcon3 } from "@elementor/icons";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 function useDocumentViewPageProps() {
   const document2 = useActiveDocument7();
-  const { dispatchEvent: dispatchEvent2, config } = useMixpanel5();
+  const { dispatchEvent: dispatchEvent2, config } = useMixpanel6();
   return {
     icon: EyeIcon3,
-    title: __13("View Page", "elementor"),
+    title: __15("View Page", "elementor"),
     onClick: () => {
       const eventName = config?.names?.editorOne?.topBarPublishDropdown;
       if (eventName) {
@@ -1073,7 +1204,7 @@ import {
   __privateUseRouteStatus as useRouteStatus
 } from "@elementor/editor-v1-adapters";
 import { FileSettingsIcon } from "@elementor/icons";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 function useActionProps3() {
   const activeDocument = useActiveDocument8();
   const hostDocument = useHostDocument();
@@ -1081,8 +1212,8 @@ function useActionProps3() {
   const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
   const ButtonTitle = document2 ? (
     /* translators: %s: Post type label. */
-    __14("%s Settings", "elementor").replace("%s", document2.type.label)
-  ) : __14("Document Settings", "elementor");
+    __16("%s Settings", "elementor").replace("%s", document2.type.label)
+  ) : __16("Document Settings", "elementor");
   return {
     title: ButtonTitle,
     icon: FileSettingsIcon,
@@ -1122,11 +1253,11 @@ import {
   __privateUseRouteStatus as useRouteStatus2
 } from "@elementor/editor-v1-adapters";
 import { PlusIcon } from "@elementor/icons";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 function useActionProps4() {
   const { isActive, isBlocked } = useRouteStatus2("panel/elements");
   return {
-    title: __15("Add Element", "elementor"),
+    title: __17("Add Element", "elementor"),
     icon: PlusIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1153,10 +1284,10 @@ import {
   routeOpenEvent,
   v1ReadyEvent
 } from "@elementor/editor-v1-adapters";
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 function syncPanelTitle() {
-  const panelTitle = __16("Elements", "elementor");
-  const tabTitle = __16("Widgets", "elementor");
+  const panelTitle = __18("Elements", "elementor");
+  const tabTitle = __18("Widgets", "elementor");
   listenTo(routeOpenEvent("panel/elements"), () => {
     setPanelTitle(panelTitle);
     setTabTitle(tabTitle);
@@ -1191,7 +1322,7 @@ function init6() {
 // src/extensions/feedback/index.ts
 import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
 import { MessageLinesIcon } from "@elementor/icons";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __19 } from "@wordpress/i18n";
 function init7() {
   const isActive = isExperimentActive2(EXPERIMENT_NAME);
   if (!isActive) {
@@ -1204,7 +1335,7 @@ function init7() {
     useProps: () => {
       return {
         icon: MessageLinesIcon,
-        title: __17("Send Feedback", "elementor"),
+        title: __19("Send Feedback", "elementor"),
         onClick: () => {
           dispatchEvent(new CustomEvent(FEEDBACK_TOGGLE_EVENT));
         }
@@ -1216,10 +1347,10 @@ function init7() {
 // src/extensions/finder/hooks/use-action-props.ts
 import { __privateRunCommand as runCommand4 } from "@elementor/editor-v1-adapters";
 import { SearchIcon } from "@elementor/icons";
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 function useActionProps5() {
   return {
-    title: __18("Finder", "elementor"),
+    title: __20("Finder", "elementor"),
     icon: SearchIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1248,10 +1379,10 @@ function init8() {
 
 // src/extensions/help/hooks/use-action-props.ts
 import { HelpIcon } from "@elementor/icons";
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __21 } from "@wordpress/i18n";
 function useActionProps6() {
   return {
-    title: __19("Help Center", "elementor"),
+    title: __21("Help Center", "elementor"),
     href: "https://go.elementor.com/editor-top-bar-learn/",
     icon: HelpIcon,
     target: "_blank",
@@ -1286,11 +1417,11 @@ import {
   __privateUseRouteStatus as useRouteStatus3
 } from "@elementor/editor-v1-adapters";
 import { HistoryIcon } from "@elementor/icons";
-import { __ as __20 } from "@wordpress/i18n";
+import { __ as __22 } from "@wordpress/i18n";
 function useActionProps7() {
   const { isActive, isBlocked } = useRouteStatus3("panel/history");
   return {
-    title: __20("History", "elementor"),
+    title: __22("History", "elementor"),
     icon: HistoryIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1322,11 +1453,11 @@ function init10() {
 // src/extensions/keyboard-shortcuts/hooks/use-action-props.ts
 import { __privateRunCommand as runCommand5 } from "@elementor/editor-v1-adapters";
 import { KeyboardIcon } from "@elementor/icons";
-import { __ as __21 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 function useActionProps8() {
   return {
     icon: KeyboardIcon,
-    title: __21("Keyboard Shortcuts", "elementor"),
+    title: __23("Keyboard Shortcuts", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementorCommon?.eventsManager?.config;
@@ -1354,7 +1485,7 @@ function init11() {
 }
 
 // src/extensions/responsive/components/breakpoints-switcher.tsx
-import * as React23 from "react";
+import * as React25 from "react";
 import {
   useActivateBreakpoint,
   useActiveBreakpoint,
@@ -1370,7 +1501,7 @@ import {
   WidescreenIcon
 } from "@elementor/icons";
 import { Tab, Tabs, Tooltip as BaseTooltip2 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 function BreakpointsSwitcher() {
   const breakpoints = useBreakpoints();
   const activeBreakpoint = useActiveBreakpoint();
@@ -1392,14 +1523,14 @@ function BreakpointsSwitcher() {
     }
     activateBreakpoint(value);
   };
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     Tabs,
     {
       textColor: "inherit",
       indicatorColor: "secondary",
       value: activeBreakpoint,
       onChange,
-      "aria-label": __22("Switch Device", "elementor"),
+      "aria-label": __24("Switch Device", "elementor"),
       sx: {
         "& .MuiTabs-indicator": {
           backgroundColor: "text.primary"
@@ -1409,13 +1540,13 @@ function BreakpointsSwitcher() {
     breakpoints.map(({ id, label, type, width }) => {
       const Icon = iconsMap[id];
       const title = labelsMap[type || "default"].replace("%s", label).replace("%d", width?.toString() || "");
-      return /* @__PURE__ */ React23.createElement(
+      return /* @__PURE__ */ React25.createElement(
         Tab,
         {
           value: id,
           key: id,
           "aria-label": title,
-          icon: /* @__PURE__ */ React23.createElement(Tooltip4, { title }, /* @__PURE__ */ React23.createElement(Icon, null)),
+          icon: /* @__PURE__ */ React25.createElement(Tooltip4, { title }, /* @__PURE__ */ React25.createElement(Icon, null)),
           sx: { minWidth: "auto" },
           "data-testid": `switch-device-to-${id}`
         }
@@ -1424,7 +1555,7 @@ function BreakpointsSwitcher() {
   );
 }
 function Tooltip4(props) {
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     BaseTooltip2,
     {
       PopperProps: {
@@ -1450,9 +1581,9 @@ var iconsMap = {
 var labelsMap = {
   default: "%s",
   // translators: %s: Breakpoint label, %d: Breakpoint size.
-  "min-width": __22("%s (%dpx and up)", "elementor"),
+  "min-width": __24("%s (%dpx and up)", "elementor"),
   // translators: %s: Breakpoint label, %d: Breakpoint size.
-  "max-width": __22("%s (up to %dpx)", "elementor")
+  "max-width": __24("%s (up to %dpx)", "elementor")
 };
 
 // src/extensions/responsive/index.ts
@@ -1471,10 +1602,10 @@ function init12() {
 import { injectIntoTop } from "@elementor/editor";
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
-import * as React26 from "react";
+import * as React28 from "react";
 
 // src/extensions/site-settings/components/portal.tsx
-import * as React24 from "react";
+import * as React26 from "react";
 import {
   __privateIsRouteActive as isRouteActive2,
   __privateUseListenTo as useListenTo,
@@ -1490,24 +1621,24 @@ function Portal(props) {
   if (!containerRef.current) {
     return null;
   }
-  return /* @__PURE__ */ React24.createElement(BasePortal, { container: containerRef.current, ...props });
+  return /* @__PURE__ */ React26.createElement(BasePortal, { container: containerRef.current, ...props });
 }
 function getContainerRef() {
   return isRouteActive2("panel/global") ? { current: document.querySelector("#elementor-panel-inner") } : { current: null };
 }
 
 // src/extensions/site-settings/components/primary-action.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 import {
   __useActiveDocument as useActiveDocument9,
   __useActiveDocumentActions as useActiveDocumentActions5
 } from "@elementor/editor-documents";
-import { Button as Button3, CircularProgress as CircularProgress2, Paper } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
+import { Button as Button4, CircularProgress as CircularProgress2, Paper } from "@elementor/ui";
+import { __ as __25 } from "@wordpress/i18n";
 function PrimaryAction2() {
   const document2 = useActiveDocument9();
   const { save } = useActiveDocumentActions5();
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(
     Paper,
     {
       sx: {
@@ -1517,8 +1648,8 @@ function PrimaryAction2() {
         borderColor: "divider"
       }
     },
-    /* @__PURE__ */ React25.createElement(
-      Button3,
+    /* @__PURE__ */ React27.createElement(
+      Button4,
       {
         variant: "contained",
         disabled: !document2 || !document2.isDirty,
@@ -1526,14 +1657,14 @@ function PrimaryAction2() {
         sx: { width: "100%" },
         onClick: () => document2 && !document2.isSaving ? save() : null
       },
-      document2?.isSaving ? /* @__PURE__ */ React25.createElement(CircularProgress2, null) : __23("Save Changes", "elementor")
+      document2?.isSaving ? /* @__PURE__ */ React27.createElement(CircularProgress2, null) : __25("Save Changes", "elementor")
     )
   );
 }
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
 function PortalledPrimaryAction() {
-  return /* @__PURE__ */ React26.createElement(Portal, null, /* @__PURE__ */ React26.createElement(PrimaryAction2, null));
+  return /* @__PURE__ */ React28.createElement(Portal, null, /* @__PURE__ */ React28.createElement(PrimaryAction2, null));
 }
 
 // src/extensions/site-settings/hooks/use-action-props.ts
@@ -1542,13 +1673,13 @@ import {
   __privateUseRouteStatus as useRouteStatus4
 } from "@elementor/editor-v1-adapters";
 import { SettingsIcon } from "@elementor/icons";
-import { __ as __24 } from "@wordpress/i18n";
+import { __ as __26 } from "@wordpress/i18n";
 function useActionProps9() {
   const { isActive, isBlocked } = useRouteStatus4("panel/global", {
     blockOnKitRoutes: false
   });
   return {
-    title: __24("Site Settings", "elementor"),
+    title: __26("Site Settings", "elementor"),
     icon: SettingsIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1592,11 +1723,11 @@ import {
   __privateUseRouteStatus as useRouteStatus5
 } from "@elementor/editor-v1-adapters";
 import { StructureIcon } from "@elementor/icons";
-import { __ as __25 } from "@wordpress/i18n";
+import { __ as __27 } from "@wordpress/i18n";
 function useActionProps10() {
   const { isActive, isBlocked } = useRouteStatus5("navigator");
   return {
-    title: __25("Structure", "elementor"),
+    title: __27("Structure", "elementor"),
     icon: StructureIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1628,11 +1759,11 @@ function init14() {
 // src/extensions/theme-builder/hooks/use-action-props.ts
 import { __privateRunCommand as runCommand8 } from "@elementor/editor-v1-adapters";
 import { ThemeBuilderIcon } from "@elementor/icons";
-import { __ as __26 } from "@wordpress/i18n";
+import { __ as __28 } from "@wordpress/i18n";
 function useActionProps11() {
   return {
     icon: ThemeBuilderIcon,
-    title: __26("Theme Builder", "elementor"),
+    title: __28("Theme Builder", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementorCommon?.eventsManager?.config;
@@ -1665,12 +1796,12 @@ import {
   __privateUseRouteStatus as useRouteStatus6
 } from "@elementor/editor-v1-adapters";
 import { ToggleRightIcon } from "@elementor/icons";
-import { __ as __27 } from "@wordpress/i18n";
+import { __ as __29 } from "@wordpress/i18n";
 function useActionProps12() {
   const { isActive, isBlocked } = useRouteStatus6("panel/editor-preferences");
   return {
     icon: ToggleRightIcon,
-    title: __27("User Preferences", "elementor"),
+    title: __29("User Preferences", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementorCommon?.eventsManager?.config;
@@ -1702,7 +1833,7 @@ function init16() {
 // src/extensions/wordpress/index.ts
 import { __useActiveDocument as useActiveDocument10 } from "@elementor/editor-documents";
 import { WordpressIcon } from "@elementor/icons";
-import { __ as __28 } from "@wordpress/i18n";
+import { __ as __30 } from "@wordpress/i18n";
 function init17() {
   mainMenu.registerLink({
     id: "exit-to-wordpress",
@@ -1711,7 +1842,7 @@ function init17() {
     useProps: () => {
       const document2 = useActiveDocument10();
       return {
-        title: __28("Exit to WordPress", "elementor"),
+        title: __30("Exit to WordPress", "elementor"),
         href: document2?.links?.platformEdit,
         icon: WordpressIcon,
         onClick: () => {