@elementor/editor-app-bar 4.0.5 → 4.0.8

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,145 @@ 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, useState as useState2 } from "react";
+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")
+  ), /* @__PURE__ */ React14.createElement(Button, { variant: "contained", size: "small", color: "accent", onClick: onInstall }, __3("Try for free", "elementor")))));
+}
+
+// src/extensions/angie/components/angie-guide-location.tsx
+function AngieGuideLocation() {
+  const [anchorEl, setAnchorEl] = useState2(null);
+  const { dispatchEvent: dispatchEvent2 } = useMixpanel();
+  const isOpen = Boolean(anchorEl);
+  useEffect(() => {
+    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: handleInstall,
+          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 +478,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 +486,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 useEffect2, 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 +525,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);
+  useEffect2(() => {
     const handler = () => {
       popupState.toggle();
       setIsUserConnected(checkIfUserIsConnected());
       setFeedbackResult(null);
-      trackEvent("feedback_modal_opened", {
+      trackEvent2("feedback_modal_opened", {
         source: "top_bar",
         context: "v4_beta"
       });
@@ -438,13 +550,13 @@ function SendFeedbackPopupLocation() {
     return () => {
       window.removeEventListener(FEEDBACK_TOGGLE_EVENT, handler);
     };
-  }, [popupState, trackEvent]);
-  useEffect(() => {
+  }, [popupState, trackEvent2]);
+  useEffect2(() => {
     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 +576,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 +586,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 +595,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 +615,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: () => handleStartAntoher() }, __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: () => handleStartAntoher() }, __6("Submit Another Feedback", "elementor")) : /* @__PURE__ */ React19.createElement(
+    Button2,
     {
       disabled: submitDisabled,
       onClick: submitFeedback,
@@ -512,9 +624,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 +636,7 @@ function SendFeedbackPopupLocation() {
       rel: "noopener",
       onClick: popupState.close
     },
-    __4("Connect to Elementor", "elementor")
+    __6("Connect to Elementor", "elementor")
   )))))));
 }
 
@@ -535,11 +647,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,19 +660,58 @@ 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 useEffect3 } from "react";
+import { isAngieAvailable } from "@elementor/editor-mcp";
+import { trackEvent } from "@elementor/events";
+import { AngieIcon } from "@elementor/icons";
+import { __ as __7 } from "@wordpress/i18n";
+function useActionProps() {
+  const hasAngieInstalled = isAngieAvailable();
+  const visible = !hasAngieInstalled;
+  useEffect3(() => {
+    if (!visible) {
+      return;
+    }
+    trackEvent({
+      eventName: AI_WIDGET_CTA_VIEWED_EVENT,
+      entry_point: "top_bar_icon",
+      has_angie_installed: false
+    });
+  }, [visible]);
+  return {
+    title: __7("Angie", "elementor"),
+    icon: AngieIcon,
+    onClick: () => {
+      window.dispatchEvent(new CustomEvent(ANGIE_GUIDE_TOGGLE_EVENT));
+    },
+    selected: false,
+    visible
+  };
+}
+
+// src/extensions/angie/index.ts
+function init() {
+  toolsMenu.registerToggleAction({
+    id: "toggle-angie",
+    priority: 2,
+    useProps: useActionProps
+  });
 }
 
 // src/extensions/connect/hooks/use-connect-link-config.tsx
 import { useCallback } from "react";
 import { UserIcon } from "@elementor/icons";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 var dispatchConnectClickEvent = (eventName) => {
   try {
     const extendedWindow = window;
@@ -613,12 +764,12 @@ function useConnectLinkConfig() {
     [extendedWindow]
   );
   return isUserConnected ? {
-    title: __5("My Elementor", "elementor"),
+    title: __8("My Elementor", "elementor"),
     href: extendedWindow?.elementor?.config.user.top_bar.my_elementor_url,
     icon: UserIcon,
     target: "_blank"
   } : {
-    title: __5("Connect my account", "elementor"),
+    title: __8("Connect my account", "elementor"),
     href: extendedWindow?.elementor?.config.user.top_bar.connect_url,
     icon: UserIcon,
     target,
@@ -627,7 +778,7 @@ function useConnectLinkConfig() {
 }
 
 // src/extensions/connect/index.ts
-function init() {
+function init2() {
   mainMenu.registerLink({
     id: "app-bar-connect",
     group: "exits",
@@ -640,12 +791,12 @@ function init() {
 import { __useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
 import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
 import { EyeIcon } from "@elementor/icons";
-import { __ as __6 } from "@wordpress/i18n";
-function useActionProps() {
+import { __ as __9 } from "@wordpress/i18n";
+function useActionProps2() {
   const document2 = useActiveDocument2();
   return {
     icon: EyeIcon,
-    title: __6("Preview Changes", "elementor"),
+    title: __9("Preview Changes", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementorCommon?.eventsManager?.config;
@@ -668,16 +819,16 @@ function useActionProps() {
 }
 
 // src/extensions/documents-preview/index.ts
-function init2() {
+function init3() {
   utilitiesMenu.registerAction({
     id: "document-preview-button",
     priority: 30,
-    useProps: useActionProps
+    useProps: useActionProps2
   });
 }
 
 // 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
@@ -688,16 +839,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 __7 } 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)`
@@ -713,7 +864,7 @@ var StyledPopoverMenu = styled2(PopoverMenu)`
 `;
 function PrimaryActionMenu(props) {
   const { save: saveActions, default: defaultActions } = useMenuItems5();
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React23.createElement(
     StyledPopoverMenu,
     {
       ...props,
@@ -731,13 +882,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 })
     ])
   );
 }
@@ -758,8 +909,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;
@@ -789,11 +940,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: __7("Save Options", "elementor"),
+      title: __10("Save Options", "elementor"),
       PopperProps: {
         sx: {
           "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
@@ -803,21 +954,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": __7("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 ? __7("Publish", "elementor") : __7("Submit", "elementor");
+  return document2.userCan.publish ? __10("Publish", "elementor") : __10("Submit", "elementor");
 }
 function isPublishEnabled(document2) {
   if (document2.type.value === "kit") {
@@ -831,16 +982,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 __8 } 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: __8("Copy and Share", "elementor"),
+    title: __11("Copy and Share", "elementor"),
     onClick: () => {
       const eventName = config?.names?.editorOne?.topBarPublishDropdown;
       if (eventName) {
@@ -868,16 +1019,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 __9 } 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: __9("Save Draft", "elementor"),
+    title: __12("Save Draft", "elementor"),
     onClick: () => {
       const eventName = config?.names?.editorOne?.topBarPublishDropdown;
       if (eventName) {
@@ -901,15 +1052,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 __10 } 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: __10("Save as Template", "elementor"),
+    title: __13("Save as Template", "elementor"),
     onClick: () => {
       const eventName = config?.names?.editorOne?.topBarPublishDropdown;
       if (eventName) {
@@ -933,15 +1084,15 @@ function useDocumentSaveTemplateProps() {
 // src/extensions/documents-save/hooks/use-document-view-page-props.ts
 import { __useActiveDocument as useActiveDocument6 } from "@elementor/editor-documents";
 import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
-import { useMixpanel as useMixpanel5 } from "@elementor/events";
+import { useMixpanel as useMixpanel6 } from "@elementor/events";
 import { EyeIcon as EyeIcon2 } from "@elementor/icons";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 function useDocumentViewPageProps() {
   const document2 = useActiveDocument6();
-  const { dispatchEvent: dispatchEvent2, config } = useMixpanel5();
+  const { dispatchEvent: dispatchEvent2, config } = useMixpanel6();
   return {
     icon: EyeIcon2,
-    title: __11("View Page", "elementor"),
+    title: __14("View Page", "elementor"),
     onClick: () => {
       const eventName = config?.names?.editorOne?.topBarPublishDropdown;
       if (eventName) {
@@ -967,7 +1118,7 @@ function useDocumentViewPageProps() {
 }
 
 // src/extensions/documents-save/index.ts
-function init3() {
+function init4() {
   injectIntoPrimaryAction({
     id: "document-primary-action",
     component: PrimaryAction
@@ -1006,16 +1157,16 @@ import {
   __privateUseRouteStatus as useRouteStatus
 } from "@elementor/editor-v1-adapters";
 import { FileSettingsIcon } from "@elementor/icons";
-import { __ as __12 } from "@wordpress/i18n";
-function useActionProps2() {
+import { __ as __15 } from "@wordpress/i18n";
+function useActionProps3() {
   const activeDocument = useActiveDocument7();
   const hostDocument = useHostDocument();
   const { isActive, isBlocked } = useRouteStatus("panel/page-settings");
   const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
   const ButtonTitle = document2 ? (
     /* translators: %s: Post type label. */
-    __12("%s Settings", "elementor").replace("%s", document2.type.label)
-  ) : __12("Document Settings", "elementor");
+    __15("%s Settings", "elementor").replace("%s", document2.type.label)
+  ) : __15("Document Settings", "elementor");
   return {
     title: ButtonTitle,
     icon: FileSettingsIcon,
@@ -1041,11 +1192,11 @@ function useActionProps2() {
 }
 
 // src/extensions/documents-settings/index.ts
-function init4() {
+function init5() {
   toolsMenu.registerToggleAction({
     id: "document-settings-button",
-    priority: 2,
-    useProps: useActionProps2
+    priority: 3,
+    useProps: useActionProps3
   });
 }
 
@@ -1055,11 +1206,11 @@ import {
   __privateUseRouteStatus as useRouteStatus2
 } from "@elementor/editor-v1-adapters";
 import { PlusIcon } from "@elementor/icons";
-import { __ as __13 } from "@wordpress/i18n";
-function useActionProps3() {
+import { __ as __16 } from "@wordpress/i18n";
+function useActionProps4() {
   const { isActive, isBlocked } = useRouteStatus2("panel/elements");
   return {
-    title: __13("Add Element", "elementor"),
+    title: __16("Add Element", "elementor"),
     icon: PlusIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1086,10 +1237,10 @@ import {
   routeOpenEvent,
   v1ReadyEvent
 } from "@elementor/editor-v1-adapters";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 function syncPanelTitle() {
-  const panelTitle = __14("Elements", "elementor");
-  const tabTitle = __14("Widgets", "elementor");
+  const panelTitle = __17("Elements", "elementor");
+  const tabTitle = __17("Widgets", "elementor");
   listenTo(routeOpenEvent("panel/elements"), () => {
     setPanelTitle(panelTitle);
     setTabTitle(tabTitle);
@@ -1112,20 +1263,20 @@ function setTabTitle(title) {
 }
 
 // src/extensions/elements/index.ts
-function init5() {
+function init6() {
   syncPanelTitle();
   toolsMenu.registerToggleAction({
     id: "open-elements-panel",
     priority: 1,
-    useProps: useActionProps3
+    useProps: useActionProps4
   });
 }
 
 // src/extensions/feedback/index.ts
 import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
 import { MessageLinesIcon } from "@elementor/icons";
-import { __ as __15 } from "@wordpress/i18n";
-function init6() {
+import { __ as __18 } from "@wordpress/i18n";
+function init7() {
   const isActive = isExperimentActive2(EXPERIMENT_NAME);
   if (!isActive) {
     return;
@@ -1137,7 +1288,7 @@ function init6() {
     useProps: () => {
       return {
         icon: MessageLinesIcon,
-        title: __15("Send Feedback", "elementor"),
+        title: __18("Send Feedback", "elementor"),
         onClick: () => {
           dispatchEvent(new CustomEvent(FEEDBACK_TOGGLE_EVENT));
         }
@@ -1149,10 +1300,10 @@ function init6() {
 // src/extensions/finder/hooks/use-action-props.ts
 import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
 import { SearchIcon } from "@elementor/icons";
-import { __ as __16 } from "@wordpress/i18n";
-function useActionProps4() {
+import { __ as __19 } from "@wordpress/i18n";
+function useActionProps5() {
   return {
-    title: __16("Finder", "elementor"),
+    title: __19("Finder", "elementor"),
     icon: SearchIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1171,20 +1322,20 @@ function useActionProps4() {
 }
 
 // src/extensions/finder/index.ts
-function init7() {
+function init8() {
   utilitiesMenu.registerAction({
     id: "toggle-finder",
     priority: 15,
-    useProps: useActionProps4
+    useProps: useActionProps5
   });
 }
 
 // src/extensions/help/hooks/use-action-props.ts
 import { HelpIcon } from "@elementor/icons";
-import { __ as __17 } from "@wordpress/i18n";
-function useActionProps5() {
+import { __ as __20 } from "@wordpress/i18n";
+function useActionProps6() {
   return {
-    title: __17("Help Center", "elementor"),
+    title: __20("Help Center", "elementor"),
     href: "https://go.elementor.com/editor-top-bar-learn/",
     icon: HelpIcon,
     target: "_blank",
@@ -1204,12 +1355,12 @@ function useActionProps5() {
 }
 
 // src/extensions/help/index.ts
-function init8() {
+function init9() {
   mainMenu.registerLink({
     id: "open-help-center",
     group: "help",
     priority: 10,
-    useProps: useActionProps5
+    useProps: useActionProps6
   });
 }
 
@@ -1219,11 +1370,11 @@ import {
   __privateUseRouteStatus as useRouteStatus3
 } from "@elementor/editor-v1-adapters";
 import { HistoryIcon } from "@elementor/icons";
-import { __ as __18 } from "@wordpress/i18n";
-function useActionProps6() {
+import { __ as __21 } from "@wordpress/i18n";
+function useActionProps7() {
   const { isActive, isBlocked } = useRouteStatus3("panel/history");
   return {
-    title: __18("History", "elementor"),
+    title: __21("History", "elementor"),
     icon: HistoryIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1244,22 +1395,22 @@ function useActionProps6() {
 }
 
 // src/extensions/history/index.ts
-function init9() {
+function init10() {
   toolsMenu.registerToggleAction({
     id: "open-history",
     priority: 15,
-    useProps: useActionProps6
+    useProps: useActionProps7
   });
 }
 
 // src/extensions/keyboard-shortcuts/hooks/use-action-props.ts
 import { __privateRunCommand as runCommand4 } from "@elementor/editor-v1-adapters";
 import { KeyboardIcon } from "@elementor/icons";
-import { __ as __19 } from "@wordpress/i18n";
-function useActionProps7() {
+import { __ as __22 } from "@wordpress/i18n";
+function useActionProps8() {
   return {
     icon: KeyboardIcon,
-    title: __19("Keyboard Shortcuts", "elementor"),
+    title: __22("Keyboard Shortcuts", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementorCommon?.eventsManager?.config;
@@ -1277,17 +1428,17 @@ function useActionProps7() {
 }
 
 // src/extensions/keyboard-shortcuts/index.ts
-function init10() {
+function init11() {
   mainMenu.registerAction({
     id: "open-keyboard-shortcuts",
     group: "default",
     priority: 40,
-    useProps: useActionProps7
+    useProps: useActionProps8
   });
 }
 
 // src/extensions/responsive/components/breakpoints-switcher.tsx
-import * as React23 from "react";
+import * as React25 from "react";
 import {
   useActivateBreakpoint,
   useActiveBreakpoint,
@@ -1303,7 +1454,7 @@ import {
   WidescreenIcon
 } from "@elementor/icons";
 import { Tab, Tabs, Tooltip as BaseTooltip2 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 function BreakpointsSwitcher() {
   const breakpoints = useBreakpoints();
   const activeBreakpoint = useActiveBreakpoint();
@@ -1325,14 +1476,14 @@ function BreakpointsSwitcher() {
     }
     activateBreakpoint(value);
   };
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     Tabs,
     {
       textColor: "inherit",
       indicatorColor: "secondary",
       value: activeBreakpoint,
       onChange,
-      "aria-label": __20("Switch Device", "elementor"),
+      "aria-label": __23("Switch Device", "elementor"),
       sx: {
         "& .MuiTabs-indicator": {
           backgroundColor: "text.primary"
@@ -1342,13 +1493,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}`
         }
@@ -1357,7 +1508,7 @@ function BreakpointsSwitcher() {
   );
 }
 function Tooltip4(props) {
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     BaseTooltip2,
     {
       PopperProps: {
@@ -1383,13 +1534,13 @@ var iconsMap = {
 var labelsMap = {
   default: "%s",
   // translators: %s: Breakpoint label, %d: Breakpoint size.
-  "min-width": __20("%s (%dpx and up)", "elementor"),
+  "min-width": __23("%s (%dpx and up)", "elementor"),
   // translators: %s: Breakpoint label, %d: Breakpoint size.
-  "max-width": __20("%s (up to %dpx)", "elementor")
+  "max-width": __23("%s (up to %dpx)", "elementor")
 };
 
 // src/extensions/responsive/index.ts
-function init11() {
+function init12() {
   injectIntoResponsive({
     id: "responsive-breakpoints-switcher",
     component: BreakpointsSwitcher,
@@ -1404,10 +1555,10 @@ function init11() {
 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,
@@ -1423,24 +1574,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 useActiveDocument8,
   __useActiveDocumentActions as useActiveDocumentActions5
 } from "@elementor/editor-documents";
-import { Button as Button3, CircularProgress as CircularProgress2, Paper } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
+import { Button as Button4, CircularProgress as CircularProgress2, Paper } from "@elementor/ui";
+import { __ as __24 } from "@wordpress/i18n";
 function PrimaryAction2() {
   const document2 = useActiveDocument8();
   const { save } = useActiveDocumentActions5();
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(
     Paper,
     {
       sx: {
@@ -1450,8 +1601,8 @@ function PrimaryAction2() {
         borderColor: "divider"
       }
     },
-    /* @__PURE__ */ React25.createElement(
-      Button3,
+    /* @__PURE__ */ React27.createElement(
+      Button4,
       {
         variant: "contained",
         disabled: !document2 || !document2.isDirty,
@@ -1459,14 +1610,14 @@ function PrimaryAction2() {
         sx: { width: "100%" },
         onClick: () => document2 && !document2.isSaving ? save() : null
       },
-      document2?.isSaving ? /* @__PURE__ */ React25.createElement(CircularProgress2, null) : __21("Save Changes", "elementor")
+      document2?.isSaving ? /* @__PURE__ */ React27.createElement(CircularProgress2, null) : __24("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
@@ -1475,13 +1626,13 @@ import {
   __privateUseRouteStatus as useRouteStatus4
 } from "@elementor/editor-v1-adapters";
 import { SettingsIcon } from "@elementor/icons";
-import { __ as __22 } from "@wordpress/i18n";
-function useActionProps8() {
+import { __ as __25 } from "@wordpress/i18n";
+function useActionProps9() {
   const { isActive, isBlocked } = useRouteStatus4("panel/global", {
     blockOnKitRoutes: false
   });
   return {
-    title: __22("Site Settings", "elementor"),
+    title: __25("Site Settings", "elementor"),
     icon: SettingsIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1506,7 +1657,7 @@ function useActionProps8() {
 }
 
 // src/extensions/site-settings/index.ts
-function init12() {
+function init13() {
   injectIntoTop({
     id: "site-settings-primary-action-portal",
     component: PortalledPrimaryAction
@@ -1515,7 +1666,7 @@ function init12() {
     id: "toggle-site-settings",
     group: "default",
     priority: 1,
-    useProps: useActionProps8
+    useProps: useActionProps9
   });
 }
 
@@ -1525,11 +1676,11 @@ import {
   __privateUseRouteStatus as useRouteStatus5
 } from "@elementor/editor-v1-adapters";
 import { StructureIcon } from "@elementor/icons";
-import { __ as __23 } from "@wordpress/i18n";
-function useActionProps9() {
+import { __ as __26 } from "@wordpress/i18n";
+function useActionProps10() {
   const { isActive, isBlocked } = useRouteStatus5("navigator");
   return {
-    title: __23("Structure", "elementor"),
+    title: __26("Structure", "elementor"),
     icon: StructureIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1550,22 +1701,22 @@ function useActionProps9() {
 }
 
 // src/extensions/structure/index.ts
-function init13() {
+function init14() {
   utilitiesMenu.registerToggleAction({
     id: "toggle-structure-view",
     priority: 25,
-    useProps: useActionProps9
+    useProps: useActionProps10
   });
 }
 
 // src/extensions/theme-builder/hooks/use-action-props.ts
 import { __privateRunCommand as runCommand7 } from "@elementor/editor-v1-adapters";
 import { ThemeBuilderIcon } from "@elementor/icons";
-import { __ as __24 } from "@wordpress/i18n";
-function useActionProps10() {
+import { __ as __27 } from "@wordpress/i18n";
+function useActionProps11() {
   return {
     icon: ThemeBuilderIcon,
-    title: __24("Theme Builder", "elementor"),
+    title: __27("Theme Builder", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementorCommon?.eventsManager?.config;
@@ -1583,12 +1734,12 @@ function useActionProps10() {
 }
 
 // src/extensions/theme-builder/index.ts
-function init14() {
+function init15() {
   mainMenu.registerAction({
     id: "open-theme-builder",
     group: "default",
     priority: 10,
-    useProps: useActionProps10
+    useProps: useActionProps11
   });
 }
 
@@ -1598,12 +1749,12 @@ import {
   __privateUseRouteStatus as useRouteStatus6
 } from "@elementor/editor-v1-adapters";
 import { ToggleRightIcon } from "@elementor/icons";
-import { __ as __25 } from "@wordpress/i18n";
-function useActionProps11() {
+import { __ as __28 } from "@wordpress/i18n";
+function useActionProps12() {
   const { isActive, isBlocked } = useRouteStatus6("panel/editor-preferences");
   return {
     icon: ToggleRightIcon,
-    title: __25("User Preferences", "elementor"),
+    title: __28("User Preferences", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementorCommon?.eventsManager?.config;
@@ -1623,20 +1774,20 @@ function useActionProps11() {
 }
 
 // src/extensions/user-preferences/index.ts
-function init15() {
+function init16() {
   mainMenu.registerToggleAction({
     id: "open-user-preferences",
     group: "default",
     priority: 30,
-    useProps: useActionProps11
+    useProps: useActionProps12
   });
 }
 
 // src/extensions/wordpress/index.ts
 import { __useActiveDocument as useActiveDocument9 } from "@elementor/editor-documents";
 import { WordpressIcon } from "@elementor/icons";
-import { __ as __26 } from "@wordpress/i18n";
-function init16() {
+import { __ as __29 } from "@wordpress/i18n";
+function init17() {
   mainMenu.registerLink({
     id: "exit-to-wordpress",
     group: "exits",
@@ -1644,7 +1795,7 @@ function init16() {
     useProps: () => {
       const document2 = useActiveDocument9();
       return {
-        title: __26("Exit to WordPress", "elementor"),
+        title: __29("Exit to WordPress", "elementor"),
         href: document2?.links?.platformEdit,
         icon: WordpressIcon,
         onClick: () => {
@@ -1668,23 +1819,24 @@ function init16() {
 }
 
 // src/extensions/index.ts
-function init17() {
-  init2();
+function init18() {
+  init();
   init3();
   init4();
   init5();
-  init7();
+  init6();
   init8();
   init9();
   init10();
   init11();
   init12();
-  init6();
   init13();
+  init7();
   init14();
   init15();
   init16();
-  init();
+  init17();
+  init2();
 }
 
 // src/sync/redirect-old-menus.ts
@@ -1700,9 +1852,9 @@ function redirectOldMenus() {
 }
 
 // src/init.ts
-function init18() {
+function init19() {
   redirectOldMenus();
-  init17();
+  init18();
   injectIntoTop2({
     id: "app-bar",
     component: AppBar
@@ -1710,7 +1862,7 @@ function init18() {
 }
 export {
   documentOptionsMenu,
-  init18 as init,
+  init19 as init,
   injectIntoPageIndication,
   injectIntoPrimaryAction,
   injectIntoResponsive,