@elementor/editor-app-bar 0.6.8 → 0.7.0

package/dist/index.js

@@ -34,6 +34,7 @@ __export(src_exports, {
   injectIntoPageIndication: () => injectIntoPageIndication,
   injectIntoPrimaryAction: () => injectIntoPrimaryAction,
   injectIntoResponsive: () => injectIntoResponsive,
+  integrationsMenu: () => integrationsMenu,
   mainMenu: () => mainMenu,
   toolsMenu: () => toolsMenu,
   utilitiesMenu: () => utilitiesMenu
@@ -172,12 +173,12 @@ function createMenu(groups = []) {
       component: Component
     })
   );
-  const useMenuItems5 = createUseMenuItems(locations);
+  const useMenuItems6 = createUseMenuItems(locations);
   return {
     registerAction,
     registerToggleAction,
     registerLink,
-    useMenuItems: useMenuItems5
+    useMenuItems: useMenuItems6
   };
 }
 function createRegisterMenuItem({ locations, menuGroups, component }) {
@@ -187,13 +188,13 @@ function createRegisterMenuItem({ locations, menuGroups, component }) {
     }
     const useProps = "props" in args ? () => args.props : args.useProps;
     const Component = component;
-    const Filler = (props) => {
+    const InjectedComponent = (props) => {
       const componentProps = useProps();
       return /* @__PURE__ */ React8.createElement(Component, { ...props, ...componentProps });
     };
     locations[group].inject({
       id,
-      filler: Filler,
+      component: InjectedComponent,
       options: {
         priority,
         overwrite
@@ -208,7 +209,7 @@ function createUseMenuItems(locations) {
         (carry, [groupName, location]) => {
           const items = location.getInjections().map((injection) => ({
             id: injection.id,
-            MenuItem: injection.filler
+            MenuItem: injection.component
           }));
           return {
             ...carry,
@@ -238,15 +239,16 @@ var {
 var mainMenu = createMenu(["exits"]);
 var toolsMenu = createMenu();
 var utilitiesMenu = createMenu();
+var integrationsMenu = createMenu();
 var documentOptionsMenu = createMenu(["save"]);
 
 // src/components/app-bar.tsx
-var React19 = __toESM(require("react"));
-var import_ui10 = require("@elementor/ui");
+var React21 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
 
 // src/components/locations/main-menu-location.tsx
-var React11 = __toESM(require("react"));
-var import_ui6 = require("@elementor/ui");
+var React13 = __toESM(require("react"));
+var import_ui8 = require("@elementor/ui");
 
 // src/components/ui/popover-menu.tsx
 var React9 = __toESM(require("react"));
@@ -275,8 +277,8 @@ var import_ui5 = require("@elementor/ui");
 var ElementorLogo = (props) => {
   return /* @__PURE__ */ React10.createElement(import_ui5.SvgIcon, { viewBox: "0 0 32 32", ...props }, /* @__PURE__ */ React10.createElement("g", null, /* @__PURE__ */ React10.createElement("circle", { cx: "16", cy: "16", r: "16" }), /* @__PURE__ */ React10.createElement("path", { d: "M11.7 9H9V22.3H11.7V9Z" }), /* @__PURE__ */ React10.createElement("path", { d: "M22.4 9H9V11.7H22.4V9Z" }), /* @__PURE__ */ React10.createElement("path", { d: "M22.4 14.4004H9V17.1004H22.4V14.4004Z" }), /* @__PURE__ */ React10.createElement("path", { d: "M22.4 19.6992H9V22.3992H22.4V19.6992Z" })));
 };
-var StyledToggleButton = (0, import_ui5.styled)(import_ui5.ToggleButton)(() => ({
-  padding: 0,
+var StyledToggleButton = (0, import_ui5.styled)(import_ui5.ToggleButton)(({ theme }) => ({
+  paddingInline: theme.spacing(1),
   "&.MuiToggleButton-root:hover": {
     backgroundColor: "initial"
   },
@@ -328,113 +330,162 @@ function ToolbarLogo(props) {
   );
 }
 
+// src/components/locations/integrations-menu-location.tsx
+var React12 = __toESM(require("react"));
+var import_ui7 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+var import_icons2 = require("@elementor/icons");
+
+// src/components/ui/popover-sub-menu.tsx
+var React11 = __toESM(require("react"));
+var import_ui6 = require("@elementor/ui");
+function PopoverSubMenu({ children, ...props }) {
+  const theme = (0, import_ui6.useTheme)();
+  const isRTL = theme.direction === "rtl";
+  return /* @__PURE__ */ React11.createElement(
+    PopoverMenu,
+    {
+      sx: { pointerEvents: "none" },
+      PaperProps: {
+        sx: {
+          // This is a workaround to support RTL in PopoverMenu, since it doesn't support it yet.
+          ...isRTL ? { marginInlineEnd: -2 } : { marginInlineStart: 2 },
+          pointerEvents: "auto"
+        }
+      },
+      anchorOrigin: { vertical: "center", horizontal: isRTL ? "left" : "right" },
+      transformOrigin: { vertical: "center", horizontal: isRTL ? "right" : "left" },
+      ...props
+    },
+    children
+  );
+}
+
+// src/components/locations/integrations-menu-location.tsx
+var { useMenuItems } = integrationsMenu;
+var DirectionalChevronIcon = (0, import_ui7.withDirection)(import_icons2.ChevronRightIcon);
+function IntegrationsMenuLocation({ parentPopupState }) {
+  const menuItems = useMenuItems();
+  const popupState = (0, import_ui7.usePopupState)({
+    parentPopupState,
+    variant: "popover",
+    popupId: "elementor-v2-app-bar-integrations"
+  });
+  if (menuItems.default.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(import_ui7.Divider, null), /* @__PURE__ */ React12.createElement(
+    import_ui7.MenuItem,
+    {
+      ...(0, import_ui7.bindHover)(popupState),
+      ...(0, import_ui7.bindFocus)(popupState)
+    },
+    /* @__PURE__ */ React12.createElement(import_ui7.ListItemIcon, null, /* @__PURE__ */ React12.createElement(import_icons2.PlugIcon, null)),
+    /* @__PURE__ */ React12.createElement(import_ui7.ListItemText, { primary: (0, import_i18n2.__)("Integrations", "elementor") }),
+    /* @__PURE__ */ React12.createElement(DirectionalChevronIcon, null),
+    /* @__PURE__ */ React12.createElement(PopoverSubMenu, { ...(0, import_ui7.bindMenu)(popupState), onClick: popupState.close }, menuItems.default.map(
+      ({ MenuItem: IntegrationsMenuItem, id }) => /* @__PURE__ */ React12.createElement(IntegrationsMenuItem, { key: id })
+    ))
+  ));
+}
+
 // src/components/locations/main-menu-location.tsx
-var { useMenuItems } = mainMenu;
+var { useMenuItems: useMenuItems2 } = mainMenu;
 function MainMenuLocation() {
-  const menuItems = useMenuItems();
-  const orderedGroups = [
-    menuItems.default,
-    menuItems.exits
-  ];
-  const popupState = (0, import_ui6.usePopupState)({
+  const menuItems = useMenuItems2();
+  const popupState = (0, import_ui8.usePopupState)({
     variant: "popover",
     popupId: "elementor-v2-app-bar-main-menu"
   });
-  return /* @__PURE__ */ React11.createElement(import_ui6.Stack, { sx: { paddingInlineStart: 4 }, direction: "row", alignItems: "center" }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(import_ui8.Stack, { sx: { paddingInlineStart: 3 }, direction: "row", alignItems: "center" }, /* @__PURE__ */ React13.createElement(
     ToolbarLogo,
     {
-      ...(0, import_ui6.bindTrigger)(popupState),
+      ...(0, import_ui8.bindTrigger)(popupState),
       selected: popupState.isOpen
     }
-  ), /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React13.createElement(
     PopoverMenu,
     {
       onClick: popupState.close,
-      ...(0, import_ui6.bindMenu)(popupState),
-      PaperProps: {
-        sx: { mt: 4, marginInlineStart: -2 }
-      }
+      ...(0, import_ui8.bindMenu)(popupState),
+      marginThreshold: 8
     },
-    orderedGroups.filter((group) => group.length).map((group, index) => {
-      return [
-        index > 0 ? /* @__PURE__ */ React11.createElement(import_ui6.Divider, { key: index, orientation: "horizontal" }) : null,
-        ...group.map(
-          ({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React11.createElement(MenuItem2, { key: id })
-        )
-      ];
-    })
+    menuItems.default.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React13.createElement(MenuItem3, { key: id })),
+    /* @__PURE__ */ React13.createElement(IntegrationsMenuLocation, { key: "integrations-location", parentPopupState: popupState }),
+    menuItems.exits.length > 0 && /* @__PURE__ */ React13.createElement(import_ui8.Divider, null),
+    menuItems.exits.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React13.createElement(MenuItem3, { key: id }))
   ));
 }
 
 // src/components/locations/tools-menu-location.tsx
-var React14 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 
 // src/components/ui/toolbar-menu.tsx
-var React12 = __toESM(require("react"));
-var import_ui7 = require("@elementor/ui");
+var React14 = __toESM(require("react"));
+var import_ui9 = require("@elementor/ui");
 function ToolbarMenu({ children, ...props }) {
-  return /* @__PURE__ */ React12.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React12.createElement(import_ui7.Stack, { sx: { px: 4 }, spacing: 4, direction: "row", alignItems: "center", ...props }, children));
+  return /* @__PURE__ */ React14.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React14.createElement(import_ui9.Stack, { sx: { px: 4 }, spacing: 4, direction: "row", alignItems: "center", ...props }, children));
 }
 
 // src/components/ui/toolbar-menu-more.tsx
-var React13 = __toESM(require("react"));
-var import_ui8 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
-var import_icons2 = require("@elementor/icons");
+var React15 = __toESM(require("react"));
+var import_ui10 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+var import_icons3 = require("@elementor/icons");
 function ToolbarMenuMore({ children, id }) {
-  const popupState = (0, import_ui8.usePopupState)({
+  const popupState = (0, import_ui10.usePopupState)({
     variant: "popover",
     popupId: id
   });
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(ToolbarMenuItem, { ...(0, import_ui8.bindTrigger)(popupState), title: (0, import_i18n2.__)("More", "elementor") }, /* @__PURE__ */ React13.createElement(import_icons2.DotsVerticalIcon, null)), /* @__PURE__ */ React13.createElement(PopoverMenu, { onClick: popupState.close, ...(0, import_ui8.bindMenu)(popupState) }, children));
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(ToolbarMenuItem, { ...(0, import_ui10.bindTrigger)(popupState), title: (0, import_i18n3.__)("More", "elementor") }, /* @__PURE__ */ React15.createElement(import_icons3.DotsVerticalIcon, null)), /* @__PURE__ */ React15.createElement(PopoverMenu, { onClick: popupState.close, ...(0, import_ui10.bindMenu)(popupState) }, children));
 }
 
 // src/components/locations/tools-menu-location.tsx
 var MAX_TOOLBAR_ACTIONS = 5;
-var { useMenuItems: useMenuItems2 } = toolsMenu;
+var { useMenuItems: useMenuItems3 } = toolsMenu;
 function ToolsMenuLocation() {
-  const menuItems = useMenuItems2();
+  const menuItems = useMenuItems3();
   const toolbarMenuItems = menuItems.default.slice(0, MAX_TOOLBAR_ACTIONS);
   const popoverMenuItems = menuItems.default.slice(MAX_TOOLBAR_ACTIONS);
-  return /* @__PURE__ */ React14.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React14.createElement(MenuItem2, { key: id })), popoverMenuItems.length > 0 && /* @__PURE__ */ React14.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-tools-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React14.createElement(MenuItem2, { key: id }))));
+  return /* @__PURE__ */ React16.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React16.createElement(MenuItem3, { key: id })), popoverMenuItems.length > 0 && /* @__PURE__ */ React16.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-tools-more" }, popoverMenuItems.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React16.createElement(MenuItem3, { key: id }))));
 }
 
 // src/components/locations/utilities-menu-location.tsx
-var React15 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_react4 = require("react");
-var import_ui9 = require("@elementor/ui");
+var import_ui11 = require("@elementor/ui");
 var MAX_TOOLBAR_ACTIONS2 = 3;
-var { useMenuItems: useMenuItems3 } = utilitiesMenu;
+var { useMenuItems: useMenuItems4 } = utilitiesMenu;
 function UtilitiesMenuLocation() {
-  const menuItems = useMenuItems3();
+  const menuItems = useMenuItems4();
   const toolbarMenuItems = menuItems.default.slice(0, MAX_TOOLBAR_ACTIONS2);
   const popoverMenuItems = menuItems.default.slice(MAX_TOOLBAR_ACTIONS2);
-  return /* @__PURE__ */ React15.createElement(ToolbarMenu, null, toolbarMenuItems.map(
-    ({ MenuItem: MenuItem2, id }, index) => /* @__PURE__ */ React15.createElement(import_react4.Fragment, { key: id }, index === 0 && /* @__PURE__ */ React15.createElement(import_ui9.Divider, { orientation: "vertical" }), /* @__PURE__ */ React15.createElement(MenuItem2, null))
-  ), popoverMenuItems.length > 0 && /* @__PURE__ */ React15.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React15.createElement(MenuItem2, { key: id }))));
+  return /* @__PURE__ */ React17.createElement(ToolbarMenu, null, toolbarMenuItems.map(
+    ({ MenuItem: MenuItem3, id }, index) => /* @__PURE__ */ React17.createElement(import_react4.Fragment, { key: id }, index === 0 && /* @__PURE__ */ React17.createElement(import_ui11.Divider, { orientation: "vertical" }), /* @__PURE__ */ React17.createElement(MenuItem3, null))
+  ), popoverMenuItems.length > 0 && /* @__PURE__ */ React17.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React17.createElement(MenuItem3, { key: id }))));
 }
 
 // src/components/locations/primary-action-location.tsx
-var React16 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 function PrimaryActionLocation() {
-  return /* @__PURE__ */ React16.createElement(PrimaryActionSlot, null);
+  return /* @__PURE__ */ React18.createElement(PrimaryActionSlot, null);
 }
 
 // src/components/locations/page-indication-location.tsx
-var React17 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 function PageIndicationLocation() {
-  return /* @__PURE__ */ React17.createElement(PageIndicationSlot, null);
+  return /* @__PURE__ */ React19.createElement(PageIndicationSlot, null);
 }
 
 // src/components/locations/responsive-location.tsx
-var React18 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 function ResponsiveLocation() {
-  return /* @__PURE__ */ React18.createElement(ResponsiveSlot, null);
+  return /* @__PURE__ */ React20.createElement(ResponsiveSlot, null);
 }
 
 // src/components/app-bar.tsx
 function AppBar() {
-  return /* @__PURE__ */ React19.createElement(import_ui10.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React19.createElement(import_ui10.AppBar, { position: "sticky" }, /* @__PURE__ */ React19.createElement(import_ui10.Box, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }, /* @__PURE__ */ React19.createElement(import_ui10.Grid, { container: true }, /* @__PURE__ */ React19.createElement(MainMenuLocation, null), /* @__PURE__ */ React19.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React19.createElement(import_ui10.Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React19.createElement(ToolbarMenu, { spacing: 3 }, /* @__PURE__ */ React19.createElement(import_ui10.Divider, { orientation: "vertical" }), /* @__PURE__ */ React19.createElement(PageIndicationLocation, null), /* @__PURE__ */ React19.createElement(import_ui10.Divider, { orientation: "vertical" }), /* @__PURE__ */ React19.createElement(ResponsiveLocation, null), /* @__PURE__ */ React19.createElement(import_ui10.Divider, { orientation: "vertical" }))), /* @__PURE__ */ React19.createElement(import_ui10.Grid, { container: true, justifyContent: "flex-end" }, /* @__PURE__ */ React19.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React19.createElement(PrimaryActionLocation, null)))));
+  return /* @__PURE__ */ React21.createElement(import_ui12.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React21.createElement(import_ui12.AppBar, { position: "sticky" }, /* @__PURE__ */ React21.createElement(import_ui12.Box, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }, /* @__PURE__ */ React21.createElement(import_ui12.Grid, { container: true }, /* @__PURE__ */ React21.createElement(MainMenuLocation, null), /* @__PURE__ */ React21.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React21.createElement(import_ui12.Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React21.createElement(ToolbarMenu, { spacing: 3 }, /* @__PURE__ */ React21.createElement(import_ui12.Divider, { orientation: "vertical" }), /* @__PURE__ */ React21.createElement(PageIndicationLocation, null), /* @__PURE__ */ React21.createElement(import_ui12.Divider, { orientation: "vertical" }), /* @__PURE__ */ React21.createElement(ResponsiveLocation, null), /* @__PURE__ */ React21.createElement(import_ui12.Divider, { orientation: "vertical" }))), /* @__PURE__ */ React21.createElement(import_ui12.Grid, { container: true, justifyContent: "flex-end" }, /* @__PURE__ */ React21.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React21.createElement(PrimaryActionLocation, null)))));
 }
 
 // src/init.ts
@@ -449,11 +500,11 @@ function redirectOldMenus() {
 }
 
 // src/extensions/documents-indicator/components/settings-button.tsx
-var React20 = __toESM(require("react"));
-var import_ui11 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var React22 = __toESM(require("react"));
+var import_ui13 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_icons3 = require("@elementor/icons");
+var import_icons4 = require("@elementor/icons");
 var import_editor_documents = require("@elementor/editor-documents");
 function SettingsButton() {
   const activeDocument = (0, import_editor_documents.useActiveDocument)();
@@ -463,9 +514,9 @@ function SettingsButton() {
   if (!document2) {
     return null;
   }
-  const title = (0, import_i18n3.__)("%s Settings", "elementor").replace("%s", document2.type.label);
-  return /* @__PURE__ */ React20.createElement(import_ui11.Tooltip, { title }, /* @__PURE__ */ React20.createElement(import_ui11.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React20.createElement(
-    import_ui11.ToggleButton,
+  const title = (0, import_i18n4.__)("%s Settings", "elementor").replace("%s", document2.type.label);
+  return /* @__PURE__ */ React22.createElement(import_ui13.Tooltip, { title }, /* @__PURE__ */ React22.createElement(import_ui13.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React22.createElement(
+    import_ui13.ToggleButton,
     {
       value: "document-settings",
       selected: isActive,
@@ -474,7 +525,7 @@ function SettingsButton() {
       "aria-label": title,
       size: "small"
     },
-    /* @__PURE__ */ React20.createElement(import_icons3.SettingsIcon, null)
+    /* @__PURE__ */ React22.createElement(import_icons4.SettingsIcon, null)
   )));
 }
 
@@ -482,7 +533,7 @@ function SettingsButton() {
 function init() {
   injectIntoPageIndication({
     id: "document-settings-button",
-    filler: SettingsButton,
+    component: SettingsButton,
     options: {
       priority: 20
       // After document indicator.
@@ -491,15 +542,15 @@ function init() {
 }
 
 // src/extensions/documents-preview/hooks/use-action-props.ts
-var import_i18n4 = require("@wordpress/i18n");
-var import_icons4 = require("@elementor/icons");
+var import_i18n5 = require("@wordpress/i18n");
+var import_icons5 = require("@elementor/icons");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_editor_documents2 = require("@elementor/editor-documents");
 function useActionProps() {
   const document2 = (0, import_editor_documents2.useActiveDocument)();
   return {
-    icon: import_icons4.EyeIcon,
-    title: (0, import_i18n4.__)("Preview Changes", "elementor"),
+    icon: import_icons5.EyeIcon,
+    title: (0, import_i18n5.__)("Preview Changes", "elementor"),
     onClick: () => document2 && (0, import_editor_v1_adapters3.runCommand)("editor/documents/preview", {
       id: document2.id,
       force: true
@@ -518,42 +569,42 @@ function init2() {
 }
 
 // src/extensions/documents-save/hooks/use-document-save-draft-props.ts
-var import_i18n5 = require("@wordpress/i18n");
-var import_icons5 = require("@elementor/icons");
+var import_i18n6 = require("@wordpress/i18n");
+var import_icons6 = require("@elementor/icons");
 var import_editor_documents3 = require("@elementor/editor-documents");
 function useDocumentSaveDraftProps() {
   const document2 = (0, import_editor_documents3.useActiveDocument)();
   const { saveDraft } = (0, import_editor_documents3.useActiveDocumentActions)();
   return {
-    icon: import_icons5.FileReportIcon,
-    title: (0, import_i18n5.__)("Save Draft", "elementor"),
+    icon: import_icons6.FileReportIcon,
+    title: (0, import_i18n6.__)("Save Draft", "elementor"),
     onClick: saveDraft,
     disabled: !document2 || document2.isSaving || document2.isSavingDraft || !document2.isDirty
   };
 }
 
 // src/extensions/documents-save/hooks/use-document-save-template-props.ts
-var import_i18n6 = require("@wordpress/i18n");
-var import_icons6 = require("@elementor/icons");
+var import_i18n7 = require("@wordpress/i18n");
+var import_icons7 = require("@elementor/icons");
 var import_editor_documents4 = require("@elementor/editor-documents");
 function useDocumentSaveTemplateProps() {
   const { saveTemplate } = (0, import_editor_documents4.useActiveDocumentActions)();
   return {
-    icon: import_icons6.FolderIcon,
-    title: (0, import_i18n6.__)("Save as Template", "elementor"),
+    icon: import_icons7.FolderIcon,
+    title: (0, import_i18n7.__)("Save as Template", "elementor"),
     onClick: saveTemplate
   };
 }
 
 // src/extensions/documents-save/components/primary-action.tsx
-var React22 = __toESM(require("react"));
-var import_i18n7 = require("@wordpress/i18n");
+var React24 = __toESM(require("react"));
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/extensions/documents-save/components/primary-action-menu.tsx
-var React21 = __toESM(require("react"));
-var import_ui12 = require("@elementor/ui");
-var { useMenuItems: useMenuItems4 } = documentOptionsMenu;
-var StyledPopoverMenu = (0, import_ui12.styled)(PopoverMenu)`
+var React23 = __toESM(require("react"));
+var import_ui14 = require("@elementor/ui");
+var { useMenuItems: useMenuItems5 } = documentOptionsMenu;
+var StyledPopoverMenu = (0, import_ui14.styled)(PopoverMenu)`
 	& > .MuiPopover-paper > .MuiList-root > .MuiDivider-root {
 		&:only-child, /* A divider is being rendered lonely */
 		&:last-child, /* The last group renders empty but renders a divider */
@@ -563,8 +614,8 @@ var StyledPopoverMenu = (0, import_ui12.styled)(PopoverMenu)`
 	}
 `;
 function PrimaryActionMenu(props) {
-  const { save: saveActions, default: defaultActions } = useMenuItems4();
-  return /* @__PURE__ */ React21.createElement(
+  const { save: saveActions, default: defaultActions } = useMenuItems5();
+  return /* @__PURE__ */ React23.createElement(
     StyledPopoverMenu,
     {
       ...props,
@@ -576,27 +627,28 @@ function PrimaryActionMenu(props) {
         vertical: "top",
         horizontal: "right"
       },
+      marginThreshold: 8,
       PaperProps: {
-        sx: { mt: 2, ml: 3 }
+        sx: { mt: 2 }
       }
     },
-    saveActions.map(({ MenuItem: MenuItem2, id }, index) => [
-      index > 0 && /* @__PURE__ */ React21.createElement(import_ui12.Divider, { key: `${id}-divider` }),
-      /* @__PURE__ */ React21.createElement(MenuItem2, { key: id })
+    saveActions.map(({ MenuItem: MenuItem3, id }, index) => [
+      index > 0 && /* @__PURE__ */ React23.createElement(import_ui14.Divider, { key: `${id}-divider` }),
+      /* @__PURE__ */ React23.createElement(MenuItem3, { key: id })
     ]),
-    defaultActions.length > 0 && /* @__PURE__ */ React21.createElement(import_ui12.Divider, null),
-    defaultActions.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React21.createElement(MenuItem2, { key: id }))
+    defaultActions.length > 0 && /* @__PURE__ */ React23.createElement(import_ui14.Divider, null),
+    defaultActions.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React23.createElement(MenuItem3, { key: id }))
   );
 }
 
 // src/extensions/documents-save/components/primary-action.tsx
-var import_ui13 = require("@elementor/ui");
+var import_ui15 = require("@elementor/ui");
 var import_editor_documents5 = require("@elementor/editor-documents");
-var import_icons7 = require("@elementor/icons");
+var import_icons8 = require("@elementor/icons");
 function PrimaryAction() {
   const document2 = (0, import_editor_documents5.useActiveDocument)();
   const { save } = (0, import_editor_documents5.useActiveDocumentActions)();
-  const popupState = (0, import_ui13.usePopupState)({
+  const popupState = (0, import_ui15.usePopupState)({
     variant: "popover",
     popupId: "document-save-options"
   });
@@ -605,8 +657,8 @@ function PrimaryAction() {
   }
   const isDisabled = !isEnabled(document2);
   const shouldShowSpinner = document2.isSaving && !isDisabled;
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui13.ButtonGroup, { size: "medium", variant: "contained" }, /* @__PURE__ */ React22.createElement(
-    import_ui13.Button,
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(import_ui15.ButtonGroup, { size: "medium", variant: "contained" }, /* @__PURE__ */ React24.createElement(
+    import_ui15.Button,
     {
       onClick: () => !document2.isSaving && save(),
       sx: {
@@ -619,11 +671,11 @@ function PrimaryAction() {
       },
       disabled: isDisabled
     },
-    shouldShowSpinner ? /* @__PURE__ */ React22.createElement(import_ui13.CircularProgress, null) : getLabel(document2)
-  ), /* @__PURE__ */ React22.createElement(
-    import_ui13.Tooltip,
+    shouldShowSpinner ? /* @__PURE__ */ React24.createElement(import_ui15.CircularProgress, null) : getLabel(document2)
+  ), /* @__PURE__ */ React24.createElement(
+    import_ui15.Tooltip,
     {
-      title: (0, import_i18n7.__)("Save Options", "elementor"),
+      title: (0, import_i18n8.__)("Save Options", "elementor"),
       PopperProps: {
         sx: {
           "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
@@ -633,20 +685,20 @@ function PrimaryAction() {
         }
       }
     },
-    /* @__PURE__ */ React22.createElement(import_ui13.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React22.createElement(
-      import_ui13.Button,
+    /* @__PURE__ */ React24.createElement(import_ui15.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React24.createElement(
+      import_ui15.Button,
       {
-        ...(0, import_ui13.bindTrigger)(popupState),
+        ...(0, import_ui15.bindTrigger)(popupState),
         sx: { px: 0, height: "100%" },
         disabled: document2.type.value === "kit",
-        "aria-label": (0, import_i18n7.__)("Save Options", "elementor")
+        "aria-label": (0, import_i18n8.__)("Save Options", "elementor")
       },
-      /* @__PURE__ */ React22.createElement(import_icons7.ChevronDownIcon, null)
+      /* @__PURE__ */ React24.createElement(import_icons8.ChevronDownIcon, null)
     ))
-  )), /* @__PURE__ */ React22.createElement(PrimaryActionMenu, { ...(0, import_ui13.bindMenu)(popupState), onClick: popupState.close }));
+  )), /* @__PURE__ */ React24.createElement(PrimaryActionMenu, { ...(0, import_ui15.bindMenu)(popupState), onClick: popupState.close }));
 }
 function getLabel(document2) {
-  return document2.userCan.publish ? (0, import_i18n7.__)("Publish", "elementor") : (0, import_i18n7.__)("Submit", "elementor");
+  return document2.userCan.publish ? (0, import_i18n8.__)("Publish", "elementor") : (0, import_i18n8.__)("Submit", "elementor");
 }
 function isEnabled(document2) {
   if (document2.type.value === "kit") {
@@ -659,7 +711,7 @@ function isEnabled(document2) {
 function init3() {
   injectIntoPrimaryAction({
     id: "document-primary-action",
-    filler: PrimaryAction
+    component: PrimaryAction
   });
   documentOptionsMenu.registerAction({
     group: "save",
@@ -678,11 +730,11 @@ function init3() {
 }
 
 // src/extensions/elements/sync/sync-panel-title.ts
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 function syncPanelTitle() {
-  const panelTitle = (0, import_i18n8.__)("Elements", "elementor");
-  const tabTitle = (0, import_i18n8.__)("Widgets", "elementor");
+  const panelTitle = (0, import_i18n9.__)("Elements", "elementor");
+  const tabTitle = (0, import_i18n9.__)("Widgets", "elementor");
   (0, import_editor_v1_adapters4.listenTo)(
     (0, import_editor_v1_adapters4.routeOpenEvent)("panel/elements"),
     () => {
@@ -711,14 +763,14 @@ function setTabTitle(title) {
 }
 
 // src/extensions/elements/hooks/use-action-props.ts
-var import_icons8 = require("@elementor/icons");
-var import_i18n9 = require("@wordpress/i18n");
+var import_icons9 = require("@elementor/icons");
+var import_i18n10 = require("@wordpress/i18n");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 function useActionProps2() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters5.useRouteStatus)("panel/elements");
   return {
-    title: (0, import_i18n9.__)("Add Element", "elementor"),
-    icon: import_icons8.PlusIcon,
+    title: (0, import_i18n10.__)("Add Element", "elementor"),
+    icon: import_icons9.PlusIcon,
     onClick: () => (0, import_editor_v1_adapters5.openRoute)("panel/elements/categories"),
     selected: isActive,
     disabled: isBlocked
@@ -736,8 +788,8 @@ function init4() {
 }
 
 // src/extensions/finder/hooks/use-action-props.ts
-var import_i18n10 = require("@wordpress/i18n");
-var import_icons9 = require("@elementor/icons");
+var import_i18n11 = require("@wordpress/i18n");
+var import_icons10 = require("@elementor/icons");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 function useActionProps3() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters6.useRouteStatus)("finder", {
@@ -745,8 +797,8 @@ function useActionProps3() {
     blockOnPreviewMode: false
   });
   return {
-    title: (0, import_i18n10.__)("Finder", "elementor"),
-    icon: import_icons9.SearchIcon,
+    title: (0, import_i18n11.__)("Finder", "elementor"),
+    icon: import_icons10.SearchIcon,
     onClick: () => (0, import_editor_v1_adapters6.runCommand)("finder/toggle"),
     selected: isActive,
     disabled: isBlocked
@@ -764,8 +816,8 @@ function init5() {
 }
 
 // src/extensions/help/index.ts
-var import_i18n11 = require("@wordpress/i18n");
-var import_icons10 = require("@elementor/icons");
+var import_i18n12 = require("@wordpress/i18n");
+var import_icons11 = require("@elementor/icons");
 function init6() {
   utilitiesMenu.registerLink({
     id: "open-help-center",
@@ -773,9 +825,9 @@ function init6() {
     // After Finder.
     useProps: () => {
       return {
-        title: (0, import_i18n11.__)("Help", "elementor"),
+        title: (0, import_i18n12.__)("Help", "elementor"),
         href: "https://go.elementor.com/editor-top-bar-learn/",
-        icon: import_icons10.HelpIcon,
+        icon: import_icons11.HelpIcon,
         target: "_blank"
       };
     }
@@ -783,14 +835,14 @@ function init6() {
 }
 
 // src/extensions/history/hooks/use-action-props.ts
-var import_icons11 = require("@elementor/icons");
-var import_i18n12 = require("@wordpress/i18n");
+var import_icons12 = require("@elementor/icons");
+var import_i18n13 = require("@wordpress/i18n");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 function useActionProps4() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters7.useRouteStatus)("panel/history");
   return {
-    title: (0, import_i18n12.__)("History", "elementor"),
-    icon: import_icons11.HistoryIcon,
+    title: (0, import_i18n13.__)("History", "elementor"),
+    icon: import_icons12.HistoryIcon,
     onClick: () => (0, import_editor_v1_adapters7.openRoute)("panel/history/actions"),
     selected: isActive,
     disabled: isBlocked
@@ -807,13 +859,13 @@ function init7() {
 }
 
 // src/extensions/keyboard-shortcuts/hooks/use-action-props.ts
-var import_i18n13 = require("@wordpress/i18n");
-var import_icons12 = require("@elementor/icons");
+var import_i18n14 = require("@wordpress/i18n");
+var import_icons13 = require("@elementor/icons");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 function useActionProps5() {
   return {
-    icon: import_icons12.KeyboardIcon,
-    title: (0, import_i18n13.__)("Keyboard Shortcuts", "elementor"),
+    icon: import_icons13.KeyboardIcon,
+    title: (0, import_i18n14.__)("Keyboard Shortcuts", "elementor"),
     onClick: () => (0, import_editor_v1_adapters8.runCommand)("shortcuts/open")
   };
 }
@@ -833,11 +885,11 @@ function init8() {
 var import_editor = require("@elementor/editor");
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
-var React25 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 
 // src/extensions/site-settings/components/portal.tsx
-var React23 = __toESM(require("react"));
-var import_ui14 = require("@elementor/ui");
+var React25 = __toESM(require("react"));
+var import_ui16 = require("@elementor/ui");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 function Portal(props) {
   const containerRef = (0, import_editor_v1_adapters9.useListenTo)(
@@ -850,27 +902,27 @@ function Portal(props) {
   if (!containerRef.current) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(import_ui14.Portal, { container: containerRef.current, ...props });
+  return /* @__PURE__ */ React25.createElement(import_ui16.Portal, { container: containerRef.current, ...props });
 }
 function getContainerRef() {
   return (0, import_editor_v1_adapters9.isRouteActive)("panel/global") ? { current: document.querySelector("#elementor-panel-inner") } : { current: null };
 }
 
 // src/extensions/site-settings/components/primary-action.tsx
-var React24 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var import_editor_documents6 = require("@elementor/editor-documents");
-var import_ui15 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_ui17 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
 function PrimaryAction2() {
   const document2 = (0, import_editor_documents6.useActiveDocument)();
   const { save } = (0, import_editor_documents6.useActiveDocumentActions)();
-  return /* @__PURE__ */ React24.createElement(import_ui15.Paper, { sx: {
+  return /* @__PURE__ */ React26.createElement(import_ui17.Paper, { sx: {
     px: 5,
     py: 4,
     borderTop: 1,
     borderColor: "divider"
-  } }, /* @__PURE__ */ React24.createElement(
-    import_ui15.Button,
+  } }, /* @__PURE__ */ React26.createElement(
+    import_ui17.Button,
     {
       variant: "contained",
       disabled: !document2 || !document2.isDirty,
@@ -878,26 +930,26 @@ function PrimaryAction2() {
       sx: { width: "100%" },
       onClick: () => document2 && !document2.isSaving ? save() : null
     },
-    document2?.isSaving ? /* @__PURE__ */ React24.createElement(import_ui15.CircularProgress, null) : (0, import_i18n14.__)("Save Changes", "elementor")
+    document2?.isSaving ? /* @__PURE__ */ React26.createElement(import_ui17.CircularProgress, null) : (0, import_i18n15.__)("Save Changes", "elementor")
   ));
 }
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
 function PortalledPrimaryAction() {
-  return /* @__PURE__ */ React25.createElement(Portal, null, /* @__PURE__ */ React25.createElement(PrimaryAction2, null));
+  return /* @__PURE__ */ React27.createElement(Portal, null, /* @__PURE__ */ React27.createElement(PrimaryAction2, null));
 }
 
 // src/extensions/site-settings/hooks/use-action-props.ts
-var import_i18n15 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
-var import_icons13 = require("@elementor/icons");
+var import_icons14 = require("@elementor/icons");
 function useActionProps6() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters10.useRouteStatus)("panel/global", {
     blockOnKitRoutes: false
   });
   return {
-    title: (0, import_i18n15.__)("Site Settings", "elementor"),
-    icon: import_icons13.AdjustmentsHorizontalIcon,
+    title: (0, import_i18n16.__)("Site Settings", "elementor"),
+    icon: import_icons14.AdjustmentsHorizontalIcon,
     onClick: () => isActive ? (0, import_editor_v1_adapters10.runCommand)("panel/global/close") : (0, import_editor_v1_adapters10.runCommand)("panel/global/open"),
     selected: isActive,
     disabled: isBlocked
@@ -908,7 +960,7 @@ function useActionProps6() {
 function init9() {
   (0, import_editor.injectIntoTop)({
     id: "site-settings-primary-action-portal",
-    filler: PortalledPrimaryAction
+    component: PortalledPrimaryAction
   });
   toolsMenu.registerToggleAction({
     id: "toggle-site-settings",
@@ -918,14 +970,14 @@ function init9() {
 }
 
 // src/extensions/structure/hooks/use-action-props.ts
-var import_i18n16 = require("@wordpress/i18n");
+var import_i18n17 = require("@wordpress/i18n");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
-var import_icons14 = require("@elementor/icons");
+var import_icons15 = require("@elementor/icons");
 function useActionProps7() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters11.useRouteStatus)("navigator");
   return {
-    title: (0, import_i18n16.__)("Structure", "elementor"),
-    icon: import_icons14.StructureIcon,
+    title: (0, import_i18n17.__)("Structure", "elementor"),
+    icon: import_icons15.StructureIcon,
     onClick: () => (0, import_editor_v1_adapters11.runCommand)("navigator/toggle"),
     selected: isActive,
     disabled: isBlocked
@@ -942,13 +994,13 @@ function init10() {
 }
 
 // src/extensions/theme-builder/hooks/use-action-props.ts
-var import_i18n17 = require("@wordpress/i18n");
-var import_icons15 = require("@elementor/icons");
+var import_i18n18 = require("@wordpress/i18n");
+var import_icons16 = require("@elementor/icons");
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 function useActionProps8() {
   return {
-    icon: import_icons15.ThemeBuilderIcon,
-    title: (0, import_i18n17.__)("Theme Builder", "elementor"),
+    icon: import_icons16.ThemeBuilderIcon,
+    title: (0, import_i18n18.__)("Theme Builder", "elementor"),
     onClick: () => (0, import_editor_v1_adapters12.runCommand)("app/open")
   };
 }
@@ -962,14 +1014,14 @@ function init11() {
 }
 
 // src/extensions/user-preferences/hooks/use-action-props.ts
-var import_i18n18 = require("@wordpress/i18n");
-var import_icons16 = require("@elementor/icons");
+var import_i18n19 = require("@wordpress/i18n");
+var import_icons17 = require("@elementor/icons");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 function useActionProps9() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters13.useRouteStatus)("panel/editor-preferences");
   return {
-    icon: import_icons16.ToggleRightIcon,
-    title: (0, import_i18n18.__)("User Preferences", "elementor"),
+    icon: import_icons17.ToggleRightIcon,
+    title: (0, import_i18n19.__)("User Preferences", "elementor"),
     onClick: () => (0, import_editor_v1_adapters13.openRoute)("panel/editor-preferences"),
     selected: isActive,
     disabled: isBlocked
@@ -987,8 +1039,8 @@ function init12() {
 }
 
 // src/extensions/wordpress/index.ts
-var import_i18n19 = require("@wordpress/i18n");
-var import_icons17 = require("@elementor/icons");
+var import_i18n20 = require("@wordpress/i18n");
+var import_icons18 = require("@elementor/icons");
 var import_editor_documents7 = require("@elementor/editor-documents");
 function init13() {
   mainMenu.registerLink({
@@ -997,9 +1049,9 @@ function init13() {
     useProps: () => {
       const document2 = (0, import_editor_documents7.useActiveDocument)();
       return {
-        title: (0, import_i18n19.__)("Exit to WordPress", "elementor"),
+        title: (0, import_i18n20.__)("Exit to WordPress", "elementor"),
         href: document2?.links?.platformEdit,
-        icon: import_icons17.WordpressIcon
+        icon: import_icons18.WordpressIcon
       };
     }
   });
@@ -1028,7 +1080,7 @@ function init15() {
   init14();
   (0, import_editor2.injectIntoTop)({
     id: "app-bar",
-    filler: AppBar
+    component: AppBar
   });
 }
 
@@ -1040,6 +1092,7 @@ init15();
   injectIntoPageIndication,
   injectIntoPrimaryAction,
   injectIntoResponsive,
+  integrationsMenu,
   mainMenu,
   toolsMenu,
   utilitiesMenu