@elementor/editor-app-bar 0.14.0 → 0.14.2

package/dist/index.js

@@ -31,23 +31,632 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   documentOptionsMenu: () => documentOptionsMenu,
-  injectIntoPageIndication: () => import_editor_app_bar_ui17.__privateInjectIntoPageIndication,
-  injectIntoPrimaryAction: () => import_editor_app_bar_ui17.__privateInjectIntoPrimaryAction,
-  injectIntoResponsive: () => import_editor_app_bar_ui17.__privateInjectIntoResponsive,
-  integrationsMenu: () => import_editor_app_bar_ui17.__privateIntegrationsMenu,
-  mainMenu: () => import_editor_app_bar_ui17.__privateMainMenu,
-  toolsMenu: () => import_editor_app_bar_ui17.__privateToolsMenu,
-  utilitiesMenu: () => import_editor_app_bar_ui17.__privateUtilitiesMenu
+  injectIntoPageIndication: () => injectIntoPageIndication,
+  injectIntoPrimaryAction: () => injectIntoPrimaryAction,
+  injectIntoResponsive: () => injectIntoResponsive,
+  integrationsMenu: () => integrationsMenu,
+  mainMenu: () => mainMenu,
+  toolsMenu: () => toolsMenu,
+  utilitiesMenu: () => utilitiesMenu
 });
 module.exports = __toCommonJS(src_exports);
-var import_editor_app_bar_ui17 = require("@elementor/editor-app-bar-ui");
+
+// src/locations/menus.tsx
+var React11 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_locations = require("@elementor/locations");
+
+// src/components/actions/action.tsx
+var React4 = __toESM(require("react"));
+
+// src/contexts/menu-context.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var MenuContext = (0, import_react.createContext)({
+  type: "toolbar"
+});
+function MenuContextProvider({ type, popupState, children }) {
+  return /* @__PURE__ */ React.createElement(MenuContext.Provider, { value: { type, popupState } }, children);
+}
+function useMenuContext() {
+  return (0, import_react.useContext)(MenuContext);
+}
+
+// src/components/ui/toolbar-menu-item.tsx
+var React2 = __toESM(require("react"));
+var import_ui = require("@elementor/ui");
+function ToolbarMenuItem({ title, ...props }) {
+  return /* @__PURE__ */ React2.createElement(Tooltip, { title }, /* @__PURE__ */ React2.createElement(import_ui.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React2.createElement(
+    import_ui.IconButton,
+    {
+      ...props,
+      "aria-label": title,
+      size: "medium",
+      sx: {
+        "& svg": {
+          fontSize: "1.25rem",
+          height: "1em",
+          width: "1em"
+        },
+        "&:hover": {
+          color: "text.primary"
+        }
+      }
+    }
+  )));
+}
+function Tooltip(props) {
+  return /* @__PURE__ */ React2.createElement(
+    import_ui.Tooltip,
+    {
+      PopperProps: {
+        sx: {
+          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
+            mt: 2
+          }
+        }
+      },
+      ...props
+    }
+  );
+}
+
+// src/components/ui/popover-menu-item.tsx
+var React3 = __toESM(require("react"));
+var import_ui2 = require("@elementor/ui");
+var import_icons = require("@elementor/icons");
+var DirectionalArrowIcon = (0, import_ui2.withDirection)(import_icons.ArrowUpRightIcon);
+var DirectionalChevronIcon = (0, import_ui2.withDirection)(import_icons.ChevronRightIcon);
+function PopoverMenuItem({ text, icon, onClick, href, target, disabled, isGroupParent, ...props }) {
+  const isExternalLink = href && target === "_blank";
+  return /* @__PURE__ */ React3.createElement(
+    import_ui2.MenuItem,
+    {
+      ...props,
+      disabled,
+      onClick,
+      component: href ? "a" : "div",
+      href,
+      target,
+      sx: {
+        "&:hover": {
+          color: "text.primary"
+          // Overriding global CSS from the editor.
+        }
+      }
+    },
+    /* @__PURE__ */ React3.createElement(import_ui2.ListItemIcon, null, icon),
+    /* @__PURE__ */ React3.createElement(import_ui2.ListItemText, { primary: text }),
+    isExternalLink && /* @__PURE__ */ React3.createElement(DirectionalArrowIcon, null),
+    isGroupParent && /* @__PURE__ */ React3.createElement(DirectionalChevronIcon, null)
+  );
+}
+
+// src/components/actions/action.tsx
+function Action({ icon: Icon, title, visible = true, ...props }) {
+  const { type } = useMenuContext();
+  if (!visible) {
+    return null;
+  }
+  return type === "toolbar" ? /* @__PURE__ */ React4.createElement(ToolbarMenuItem, { title, ...props }, /* @__PURE__ */ React4.createElement(Icon, null)) : /* @__PURE__ */ React4.createElement(
+    PopoverMenuItem,
+    {
+      ...props,
+      text: title,
+      icon: /* @__PURE__ */ React4.createElement(Icon, null)
+    }
+  );
+}
+
+// src/components/actions/toggle-action.tsx
+var React6 = __toESM(require("react"));
+
+// src/components/ui/toolbar-menu-toggle-item.tsx
+var React5 = __toESM(require("react"));
+var import_ui3 = require("@elementor/ui");
+function ToolbarMenuToggleItem({ title, onClick, ...props }) {
+  return /* @__PURE__ */ React5.createElement(import_ui3.Tooltip, { title }, /* @__PURE__ */ React5.createElement(import_ui3.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React5.createElement(
+    import_ui3.ToggleButton,
+    {
+      ...props,
+      onChange: onClick,
+      "aria-label": title,
+      size: "small",
+      sx: {
+        border: 0,
+        // Temp fix until the style of the ToggleButton component will be decided.
+        "&.Mui-disabled": {
+          border: 0
+          // Temp fix until the style of the ToggleButton component will be decided.
+        },
+        "& svg": {
+          fontSize: "1.25rem",
+          height: "1em",
+          width: "1em"
+        }
+      }
+    }
+  )));
+}
+
+// src/components/actions/toggle-action.tsx
+function ToggleAction({ icon: Icon, title, value, visible = true, ...props }) {
+  const { type } = useMenuContext();
+  if (!visible) {
+    return null;
+  }
+  return type === "toolbar" ? /* @__PURE__ */ React6.createElement(ToolbarMenuToggleItem, { value: value || title, title, ...props }, /* @__PURE__ */ React6.createElement(Icon, null)) : /* @__PURE__ */ React6.createElement(
+    PopoverMenuItem,
+    {
+      ...props,
+      text: title,
+      icon: /* @__PURE__ */ React6.createElement(Icon, null)
+    }
+  );
+}
+
+// src/components/actions/link.tsx
+var React7 = __toESM(require("react"));
+function Link({ icon: Icon, title, visible = true, ...props }) {
+  const { type } = useMenuContext();
+  if (!visible) {
+    return null;
+  }
+  return type === "toolbar" ? /* @__PURE__ */ React7.createElement(ToolbarMenuItem, { title, ...props }, /* @__PURE__ */ React7.createElement(Icon, null)) : /* @__PURE__ */ React7.createElement(
+    PopoverMenuItem,
+    {
+      ...props,
+      text: title,
+      icon: /* @__PURE__ */ React7.createElement(Icon, null)
+    }
+  );
+}
+
+// src/components/actions/actions-group.tsx
+var React10 = __toESM(require("react"));
+var import_react2 = require("react");
+
+// src/components/ui/popover-sub-menu.tsx
+var React9 = __toESM(require("react"));
+
+// src/components/ui/popover-menu.tsx
+var React8 = __toESM(require("react"));
+var import_ui4 = require("@elementor/ui");
+function PopoverMenu({ children, popupState, ...props }) {
+  return /* @__PURE__ */ React8.createElement(MenuContextProvider, { type: "popover", popupState }, /* @__PURE__ */ React8.createElement(
+    import_ui4.Menu,
+    {
+      PaperProps: {
+        sx: { mt: 1.5 }
+      },
+      ...props,
+      MenuListProps: {
+        component: "div",
+        dense: true
+      }
+    },
+    children
+  ));
+}
+
+// src/components/ui/popover-sub-menu.tsx
+var import_ui5 = require("@elementor/ui");
+function PopoverSubMenu({ children, ...props }) {
+  const theme = (0, import_ui5.useTheme)();
+  const isRTL = theme.direction === "rtl";
+  return /* @__PURE__ */ React9.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: -1 } : { marginInlineStart: 1 },
+          pointerEvents: "auto"
+        }
+      },
+      anchorOrigin: { vertical: "center", horizontal: isRTL ? "left" : "right" },
+      transformOrigin: { vertical: "center", horizontal: isRTL ? "right" : "left" },
+      ...props
+    },
+    children
+  );
+}
+
+// src/components/actions/actions-group.tsx
+var import_ui6 = require("@elementor/ui");
+function ActionsGroup({ icon: Icon, title, visible = true, items, ...props }) {
+  const groupId = (0, import_react2.useId)();
+  const { type, popupState: parentPopupState } = useMenuContext();
+  const popupState = (0, import_ui6.usePopupState)({
+    parentPopupState,
+    variant: "popover",
+    popupId: "elementor-v2-app-bar-actions-group-" + groupId
+  });
+  if (!visible) {
+    return null;
+  }
+  if (type === "toolbar") {
+    return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(ToolbarMenuItem, { ...(0, import_ui6.bindTrigger)(popupState), title, ...props }, /* @__PURE__ */ React10.createElement(Icon, null)), /* @__PURE__ */ React10.createElement(
+      PopoverMenu,
+      {
+        onClick: popupState.close,
+        ...(0, import_ui6.bindMenu)(popupState),
+        marginThreshold: 8,
+        open: popupState.isOpen,
+        popupState
+      },
+      items.map(({ MenuItem: MenuItem2, id: key }) => /* @__PURE__ */ React10.createElement(MenuItem2, { key }))
+    ));
+  }
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+    PopoverMenuItem,
+    {
+      ...props,
+      ...(0, import_ui6.bindHover)(popupState),
+      ...(0, import_ui6.bindFocus)(popupState),
+      text: title,
+      icon: /* @__PURE__ */ React10.createElement(Icon, null),
+      isGroupParent: true
+    }
+  ), /* @__PURE__ */ React10.createElement(
+    PopoverSubMenu,
+    {
+      ...props,
+      ...(0, import_ui6.bindPopover)(popupState),
+      popupState
+    },
+    items.map(({ MenuItem: MenuItem2, id: key }) => /* @__PURE__ */ React10.createElement(MenuItem2, { key }))
+  ));
+}
+
+// src/locations/menus.tsx
+function createMenu(groups = []) {
+  const menuGroups = [
+    ...groups,
+    "default"
+  ];
+  const locations = menuGroups.reduce(
+    (carry, group) => ({
+      ...carry,
+      [group]: (0, import_locations.createLocation)()
+    }),
+    {}
+  );
+  const [
+    registerAction,
+    registerToggleAction,
+    registerLink
+  ] = [Action, ToggleAction, Link].map(
+    (Component) => createRegisterMenuItem({
+      locations,
+      menuGroups,
+      component: Component
+    })
+  );
+  const useMenuItems6 = createUseMenuItems(locations);
+  const registerSubMenu = createRegisterSubMenu({
+    locations,
+    menuGroups
+  });
+  return {
+    registerAction,
+    registerToggleAction,
+    registerLink,
+    registerSubMenu,
+    useMenuItems: useMenuItems6
+  };
+}
+function createRegisterMenuItem({ locations, menuGroups, component, useMenuItems: useMenuItems6 }) {
+  return ({ group = "default", id, overwrite, priority, ...args }) => {
+    if (!menuGroups.includes(group)) {
+      return;
+    }
+    const useProps = "props" in args ? () => args.props : args.useProps;
+    const Component = component;
+    const InjectedComponent = (props) => {
+      const componentProps = useProps();
+      const items = useMenuItems6?.();
+      if (items?.length) {
+        return /* @__PURE__ */ React11.createElement(
+          Component,
+          {
+            ...props,
+            ...componentProps,
+            items
+          }
+        );
+      }
+      return /* @__PURE__ */ React11.createElement(Component, { ...props, ...componentProps });
+    };
+    locations[group].inject({
+      id,
+      component: InjectedComponent,
+      options: {
+        priority,
+        overwrite
+      }
+    });
+  };
+}
+function createRegisterSubMenu({ locations, menuGroups }) {
+  return (args) => {
+    const menu = createMenu();
+    createRegisterMenuItem({
+      locations,
+      menuGroups,
+      component: ActionsGroup,
+      useMenuItems: () => menu.useMenuItems().default
+    })(args);
+    return menu;
+  };
+}
+function createUseMenuItems(locations) {
+  return () => {
+    return (0, import_react3.useMemo)(() => {
+      return Object.entries(locations).reduce(
+        (carry, [groupName, location]) => {
+          const items = location.getInjections().map((injection) => ({
+            id: injection.id,
+            MenuItem: injection.component
+          }));
+          return {
+            ...carry,
+            [groupName]: items
+          };
+        },
+        {}
+      );
+    }, []);
+  };
+}
+
+// src/locations/index.ts
+var import_locations2 = require("@elementor/locations");
+var {
+  inject: injectIntoPageIndication,
+  Slot: PageIndicationSlot
+} = (0, import_locations2.createLocation)();
+var {
+  inject: injectIntoResponsive,
+  Slot: ResponsiveSlot
+} = (0, import_locations2.createLocation)();
+var {
+  inject: injectIntoPrimaryAction,
+  Slot: PrimaryActionSlot
+} = (0, import_locations2.createLocation)();
+var mainMenu = createMenu(["exits"]);
+var toolsMenu = createMenu();
+var utilitiesMenu = createMenu();
+var integrationsMenu = createMenu();
 
 // src/extensions/documents-save/locations.ts
-var import_editor_app_bar_ui = require("@elementor/editor-app-bar-ui");
-var documentOptionsMenu = (0, import_editor_app_bar_ui.__privateCreateMenu)(["save"]);
+var documentOptionsMenu = createMenu(["save"]);
+
+// src/components/app-bar.tsx
+var React22 = __toESM(require("react"));
+var import_ui13 = require("@elementor/ui");
+
+// src/components/locations/main-menu-location.tsx
+var React13 = __toESM(require("react"));
+var import_ui8 = require("@elementor/ui");
+
+// src/components/ui/toolbar-logo.tsx
+var React12 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_i18n = require("@wordpress/i18n");
+var import_ui7 = require("@elementor/ui");
+var ElementorLogo = (props) => {
+  return /* @__PURE__ */ React12.createElement(import_ui7.SvgIcon, { viewBox: "0 0 32 32", ...props }, /* @__PURE__ */ React12.createElement("g", null, /* @__PURE__ */ React12.createElement("circle", { cx: "16", cy: "16", r: "16" }), /* @__PURE__ */ React12.createElement("path", { d: "M11.7 9H9V22.3H11.7V9Z" }), /* @__PURE__ */ React12.createElement("path", { d: "M22.4 9H9V11.7H22.4V9Z" }), /* @__PURE__ */ React12.createElement("path", { d: "M22.4 14.4004H9V17.1004H22.4V14.4004Z" }), /* @__PURE__ */ React12.createElement("path", { d: "M22.4 19.6992H9V22.3992H22.4V19.6992Z" })));
+};
+var StyledToggleButton = (0, import_ui7.styled)(import_ui7.ToggleButton)(({ theme }) => ({
+  padding: 0,
+  border: 0,
+  color: theme.palette.text.primary,
+  "&.MuiToggleButton-root:hover": {
+    backgroundColor: "initial"
+  },
+  "&.MuiToggleButton-root.Mui-selected": {
+    backgroundColor: "initial"
+  }
+}));
+var StyledElementorLogo = (0, import_ui7.styled)(ElementorLogo, {
+  shouldForwardProp: (prop) => prop !== "showMenuIcon"
+})(({ theme, showMenuIcon }) => ({
+  "& path": {
+    fill: theme.palette.background.default,
+    transition: "all 0.2s linear",
+    transformOrigin: "bottom left",
+    "&:first-of-type": {
+      transitionDelay: !showMenuIcon && "0.2s",
+      transform: showMenuIcon && "translateY(-9px) scaleY(0)"
+    },
+    "&:not(:first-of-type)": {
+      // Emotion automatically change 4 to -4 in RTL moode.
+      transform: !showMenuIcon && `translateX(${theme.direction === "rtl" ? "4" : "9"}px) scaleX(0.6)`
+    },
+    "&:nth-of-type(2)": {
+      transitionDelay: showMenuIcon ? "0" : "0.2s"
+    },
+    "&:nth-of-type(3)": {
+      transitionDelay: "0.1s"
+    },
+    "&:nth-of-type(4)": {
+      transitionDelay: showMenuIcon ? "0.2s" : "0"
+    }
+  }
+}));
+function ToolbarLogo(props) {
+  const [isHoverState, setIsHoverState] = (0, import_react4.useState)(false);
+  const showMenuIcon = props.selected || isHoverState;
+  return /* @__PURE__ */ React12.createElement(
+    StyledToggleButton,
+    {
+      ...props,
+      value: "selected",
+      size: "large",
+      onMouseEnter: () => setIsHoverState(true),
+      onMouseLeave: () => setIsHoverState(false)
+    },
+    /* @__PURE__ */ React12.createElement(
+      StyledElementorLogo,
+      {
+        fontSize: "large",
+        showMenuIcon,
+        titleAccess: (0, import_i18n.__)("Elementor Logo", "elementor")
+      }
+    )
+  );
+}
+
+// src/components/locations/main-menu-location.tsx
+var { useMenuItems } = mainMenu;
+function MainMenuLocation() {
+  const menuItems = useMenuItems();
+  const popupState = (0, import_ui8.usePopupState)({
+    variant: "popover",
+    popupId: "elementor-v2-app-bar-main-menu"
+  });
+  const toolbarLogoProps = (0, import_ui8.bindTrigger)(popupState);
+  const onToolbarClick = (e) => {
+    const extendedWindow = window;
+    const config = extendedWindow?.elementor?.editorEvents?.config;
+    if (config) {
+      extendedWindow.elementor.editorEvents.dispatchEvent(
+        config.names.topBar.elementorLogoDropdown,
+        {
+          location: config.locations.topBar,
+          secondaryLocation: config.secondaryLocations.elementorLogo,
+          trigger: config.triggers.dropdownClick,
+          element: config.elements.buttonIcon
+        }
+      );
+    }
+    toolbarLogoProps.onClick(e);
+  };
+  return /* @__PURE__ */ React13.createElement(import_ui8.Stack, { sx: { paddingInlineStart: 3 }, direction: "row", alignItems: "center" }, /* @__PURE__ */ React13.createElement(
+    ToolbarLogo,
+    {
+      ...toolbarLogoProps,
+      onClick: onToolbarClick,
+      selected: popupState.isOpen
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    PopoverMenu,
+    {
+      onClick: popupState.close,
+      ...(0, import_ui8.bindMenu)(popupState),
+      marginThreshold: 8
+    },
+    menuItems.default.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React13.createElement(MenuItem2, { key: id })),
+    menuItems.exits.length > 0 && /* @__PURE__ */ React13.createElement(import_ui8.Divider, null),
+    menuItems.exits.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React13.createElement(MenuItem2, { key: id }))
+  ));
+}
+
+// src/components/locations/tools-menu-location.tsx
+var React17 = __toESM(require("react"));
+
+// src/components/ui/toolbar-menu.tsx
+var React14 = __toESM(require("react"));
+var import_ui9 = require("@elementor/ui");
+function ToolbarMenu({ children, ...props }) {
+  return /* @__PURE__ */ React14.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React14.createElement(import_ui9.Stack, { sx: { px: 1.5 }, spacing: 1.5, direction: "row", alignItems: "center", ...props }, children));
+}
+
+// src/components/ui/toolbar-menu-more.tsx
+var React15 = __toESM(require("react"));
+var import_ui10 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+var import_icons2 = require("@elementor/icons");
+function ToolbarMenuMore({ children, id }) {
+  const popupState = (0, import_ui10.usePopupState)({
+    variant: "popover",
+    popupId: id
+  });
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(ToolbarMenuItem, { ...(0, import_ui10.bindTrigger)(popupState), title: (0, import_i18n2.__)("More", "elementor") }, /* @__PURE__ */ React15.createElement(import_icons2.DotsVerticalIcon, null)), /* @__PURE__ */ React15.createElement(PopoverMenu, { onClick: popupState.close, ...(0, import_ui10.bindMenu)(popupState) }, children));
+}
+
+// src/components/locations/integrations-menu-location.tsx
+var React16 = __toESM(require("react"));
+var import_ui11 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+var import_icons3 = require("@elementor/icons");
+var { useMenuItems: useMenuItems2 } = integrationsMenu;
+function IntegrationsMenuLocation() {
+  const menuItems = useMenuItems2();
+  const popupState = (0, import_ui11.usePopupState)({
+    variant: "popover",
+    popupId: "elementor-v2-app-bar-integrations"
+  });
+  if (menuItems.default.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(ToolbarMenuItem, { ...(0, import_ui11.bindTrigger)(popupState), title: (0, import_i18n3.__)("Integrations", "elementor") }, /* @__PURE__ */ React16.createElement(import_icons3.PlugIcon, null)), /* @__PURE__ */ React16.createElement(
+    PopoverMenu,
+    {
+      onClick: popupState.close,
+      ...(0, import_ui11.bindMenu)(popupState),
+      marginThreshold: 8,
+      open: popupState.isOpen
+    },
+    menuItems.default.map(
+      ({ MenuItem: IntegrationsMenuItem, id }) => /* @__PURE__ */ React16.createElement(IntegrationsMenuItem, { key: id })
+    )
+  ));
+}
+
+// src/components/locations/tools-menu-location.tsx
+var MAX_TOOLBAR_ACTIONS = 5;
+var { useMenuItems: useMenuItems3 } = toolsMenu;
+function ToolsMenuLocation() {
+  const menuItems = useMenuItems3();
+  const toolbarMenuItems = menuItems.default.slice(0, MAX_TOOLBAR_ACTIONS);
+  const popoverMenuItems = menuItems.default.slice(MAX_TOOLBAR_ACTIONS);
+  return /* @__PURE__ */ React17.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React17.createElement(MenuItem2, { key: id })), /* @__PURE__ */ React17.createElement(IntegrationsMenuLocation, null), popoverMenuItems.length > 0 && /* @__PURE__ */ React17.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-tools-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React17.createElement(MenuItem2, { key: id }))));
+}
+
+// src/components/locations/utilities-menu-location.tsx
+var React18 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_ui12 = require("@elementor/ui");
+var MAX_TOOLBAR_ACTIONS2 = 4;
+var { useMenuItems: useMenuItems4 } = utilitiesMenu;
+function UtilitiesMenuLocation() {
+  const menuItems = useMenuItems4();
+  const toolbarMenuItems = menuItems.default.slice(0, MAX_TOOLBAR_ACTIONS2);
+  const popoverMenuItems = menuItems.default.slice(MAX_TOOLBAR_ACTIONS2);
+  return /* @__PURE__ */ React18.createElement(ToolbarMenu, null, toolbarMenuItems.map(
+    ({ MenuItem: MenuItem2, id }, index) => /* @__PURE__ */ React18.createElement(import_react5.Fragment, { key: id }, index === 0 && /* @__PURE__ */ React18.createElement(import_ui12.Divider, { orientation: "vertical" }), /* @__PURE__ */ React18.createElement(MenuItem2, null))
+  ), popoverMenuItems.length > 0 && /* @__PURE__ */ React18.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React18.createElement(MenuItem2, { key: id }))));
+}
+
+// src/components/locations/primary-action-location.tsx
+var React19 = __toESM(require("react"));
+function PrimaryActionLocation() {
+  return /* @__PURE__ */ React19.createElement(PrimaryActionSlot, null);
+}
+
+// src/components/locations/page-indication-location.tsx
+var React20 = __toESM(require("react"));
+function PageIndicationLocation() {
+  return /* @__PURE__ */ React20.createElement(PageIndicationSlot, null);
+}
+
+// src/components/locations/responsive-location.tsx
+var React21 = __toESM(require("react"));
+function ResponsiveLocation() {
+  return /* @__PURE__ */ React21.createElement(ResponsiveSlot, null);
+}
+
+// src/components/app-bar.tsx
+var import_editor_documents = require("@elementor/editor-documents");
+function AppBar() {
+  const document2 = (0, import_editor_documents.__useActiveDocument)();
+  return /* @__PURE__ */ React22.createElement(import_ui13.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React22.createElement(import_ui13.AppBar, { position: "sticky" }, /* @__PURE__ */ React22.createElement(import_ui13.Toolbar, { disableGutters: true, variant: "dense" }, /* @__PURE__ */ React22.createElement(import_ui13.Box, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", flexGrow: 1 }, /* @__PURE__ */ React22.createElement(import_ui13.Grid, { container: true }, /* @__PURE__ */ React22.createElement(MainMenuLocation, null), document2?.permissions?.allowAddingWidgets && /* @__PURE__ */ React22.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React22.createElement(import_ui13.Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React22.createElement(ToolbarMenu, { spacing: 1.5 }, /* @__PURE__ */ React22.createElement(import_ui13.Divider, { orientation: "vertical" }), /* @__PURE__ */ React22.createElement(PageIndicationLocation, null), /* @__PURE__ */ React22.createElement(import_ui13.Divider, { orientation: "vertical" }), /* @__PURE__ */ React22.createElement(ResponsiveLocation, null), /* @__PURE__ */ React22.createElement(import_ui13.Divider, { orientation: "vertical" }))), /* @__PURE__ */ React22.createElement(import_ui13.Grid, { container: true, justifyContent: "flex-end" }, /* @__PURE__ */ React22.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React22.createElement(PrimaryActionLocation, null))))));
+}
 
 // src/init.ts
-var import_editor_app_bar_ui16 = require("@elementor/editor-app-bar-ui");
 var import_editor2 = require("@elementor/editor");
 
 // src/sync/redirect-old-menus.ts
@@ -58,27 +667,24 @@ function redirectOldMenus() {
   });
 }
 
-// src/extensions/documents-indicator/index.ts
-var import_editor_app_bar_ui2 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/documents-indicator/components/settings-button.tsx
-var React = __toESM(require("react"));
-var import_ui = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
+var React23 = __toESM(require("react"));
+var import_ui14 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_icons = require("@elementor/icons");
-var import_editor_documents = require("@elementor/editor-documents");
+var import_icons4 = require("@elementor/icons");
+var import_editor_documents2 = require("@elementor/editor-documents");
 function SettingsButton() {
-  const activeDocument = (0, import_editor_documents.__useActiveDocument)();
-  const hostDocument = (0, import_editor_documents.__useHostDocument)();
+  const activeDocument = (0, import_editor_documents2.__useActiveDocument)();
+  const hostDocument = (0, import_editor_documents2.__useHostDocument)();
   const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
   const { isActive, isBlocked } = (0, import_editor_v1_adapters2.__privateUseRouteStatus)("panel/page-settings");
   if (!document2) {
     return null;
   }
-  const title = (0, import_i18n.__)("%s Settings", "elementor").replace("%s", document2.type.label);
-  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(import_ui.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React.createElement(
-    import_ui.ToggleButton,
+  const title = (0, import_i18n4.__)("%s Settings", "elementor").replace("%s", document2.type.label);
+  return /* @__PURE__ */ React23.createElement(Tooltip3, { title }, /* @__PURE__ */ React23.createElement(import_ui14.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React23.createElement(
+    import_ui14.ToggleButton,
     {
       value: "document-settings",
       selected: isActive,
@@ -110,12 +716,12 @@ function SettingsButton() {
         }
       }
     },
-    /* @__PURE__ */ React.createElement(import_icons.SettingsIcon, { fontSize: "small" })
+    /* @__PURE__ */ React23.createElement(import_icons4.SettingsIcon, { fontSize: "small" })
   )));
 }
-function Tooltip(props) {
-  return /* @__PURE__ */ React.createElement(
-    import_ui.Tooltip,
+function Tooltip3(props) {
+  return /* @__PURE__ */ React23.createElement(
+    import_ui14.Tooltip,
     {
       PopperProps: {
         sx: {
@@ -131,7 +737,7 @@ function Tooltip(props) {
 
 // src/extensions/documents-indicator/index.ts
 function init() {
-  (0, import_editor_app_bar_ui2.__privateInjectIntoPageIndication)({
+  injectIntoPageIndication({
     id: "document-settings-button",
     component: SettingsButton,
     options: {
@@ -141,19 +747,16 @@ function init() {
   });
 }
 
-// src/extensions/documents-preview/index.ts
-var import_editor_app_bar_ui3 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/documents-preview/hooks/use-action-props.ts
-var import_i18n2 = require("@wordpress/i18n");
-var import_icons2 = 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");
+var import_editor_documents3 = require("@elementor/editor-documents");
 function useActionProps() {
-  const document2 = (0, import_editor_documents2.__useActiveDocument)();
+  const document2 = (0, import_editor_documents3.__useActiveDocument)();
   return {
-    icon: import_icons2.EyeIcon,
-    title: (0, import_i18n2.__)("Preview Changes", "elementor"),
+    icon: import_icons5.EyeIcon,
+    title: (0, import_i18n5.__)("Preview Changes", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -180,7 +783,7 @@ function useActionProps() {
 
 // src/extensions/documents-preview/index.ts
 function init2() {
-  import_editor_app_bar_ui3.__privateUtilitiesMenu.registerAction({
+  utilitiesMenu.registerAction({
     id: "document-preview-button",
     priority: 30,
     // After help.
@@ -188,47 +791,44 @@ function init2() {
   });
 }
 
-// src/extensions/documents-save/index.ts
-var import_editor_app_bar_ui5 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/documents-save/hooks/use-document-save-draft-props.ts
-var import_i18n3 = require("@wordpress/i18n");
-var import_icons3 = require("@elementor/icons");
-var import_editor_documents3 = require("@elementor/editor-documents");
+var import_i18n6 = require("@wordpress/i18n");
+var import_icons6 = require("@elementor/icons");
+var import_editor_documents4 = require("@elementor/editor-documents");
 function useDocumentSaveDraftProps() {
-  const document2 = (0, import_editor_documents3.__useActiveDocument)();
-  const { saveDraft } = (0, import_editor_documents3.__useActiveDocumentActions)();
+  const document2 = (0, import_editor_documents4.__useActiveDocument)();
+  const { saveDraft } = (0, import_editor_documents4.__useActiveDocumentActions)();
   return {
-    icon: import_icons3.FileReportIcon,
-    title: (0, import_i18n3.__)("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_i18n4 = require("@wordpress/i18n");
-var import_icons4 = require("@elementor/icons");
-var import_editor_documents4 = require("@elementor/editor-documents");
+var import_i18n7 = require("@wordpress/i18n");
+var import_icons7 = require("@elementor/icons");
+var import_editor_documents5 = require("@elementor/editor-documents");
 function useDocumentSaveTemplateProps() {
-  const { saveTemplate } = (0, import_editor_documents4.__useActiveDocumentActions)();
+  const { saveTemplate } = (0, import_editor_documents5.__useActiveDocumentActions)();
   return {
-    icon: import_icons4.FolderIcon,
-    title: (0, import_i18n4.__)("Save as Template", "elementor"),
+    icon: import_icons7.FolderIcon,
+    title: (0, import_i18n7.__)("Save as Template", "elementor"),
     onClick: saveTemplate
   };
 }
 
 // src/extensions/documents-save/hooks/use-document-view-page-props.ts
-var import_i18n5 = require("@wordpress/i18n");
-var import_icons5 = require("@elementor/icons");
-var import_editor_documents5 = require("@elementor/editor-documents");
+var import_i18n8 = require("@wordpress/i18n");
+var import_icons8 = require("@elementor/icons");
+var import_editor_documents6 = require("@elementor/editor-documents");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 function useDocumentViewPageProps() {
-  const document2 = (0, import_editor_documents5.__useActiveDocument)();
+  const document2 = (0, import_editor_documents6.__useActiveDocument)();
   return {
-    icon: import_icons5.EyeIcon,
-    title: (0, import_i18n5.__)("View Page", "elementor"),
+    icon: import_icons8.EyeIcon,
+    title: (0, import_i18n8.__)("View Page", "elementor"),
     onClick: () => document2?.id && (0, import_editor_v1_adapters4.__privateRunCommand)("editor/documents/view", {
       id: document2.id
     })
@@ -236,15 +836,14 @@ function useDocumentViewPageProps() {
 }
 
 // src/extensions/documents-save/components/primary-action.tsx
-var React3 = __toESM(require("react"));
-var import_i18n6 = require("@wordpress/i18n");
+var React25 = __toESM(require("react"));
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/extensions/documents-save/components/primary-action-menu.tsx
-var React2 = __toESM(require("react"));
-var import_ui2 = require("@elementor/ui");
-var import_editor_app_bar_ui4 = require("@elementor/editor-app-bar-ui");
-var { useMenuItems } = documentOptionsMenu;
-var StyledPopoverMenu = (0, import_ui2.styled)(import_editor_app_bar_ui4.__privatePopoverMenu)`
+var React24 = __toESM(require("react"));
+var import_ui15 = require("@elementor/ui");
+var { useMenuItems: useMenuItems5 } = documentOptionsMenu;
+var StyledPopoverMenu = (0, import_ui15.styled)(PopoverMenu)`
 	& > .MuiPopover-paper > .MuiList-root {
 		& > .MuiDivider-root {
 			display: none;
@@ -256,8 +855,8 @@ var StyledPopoverMenu = (0, import_ui2.styled)(import_editor_app_bar_ui4.__priva
 	}
 `;
 function PrimaryActionMenu(props) {
-  const { save: saveActions, default: defaultActions } = useMenuItems();
-  return /* @__PURE__ */ React2.createElement(
+  const { save: saveActions, default: defaultActions } = useMenuItems5();
+  return /* @__PURE__ */ React24.createElement(
     StyledPopoverMenu,
     {
       ...props,
@@ -274,28 +873,28 @@ function PrimaryActionMenu(props) {
         sx: { mt: 0.5 }
       }
     },
-    saveActions.map(({ MenuItem, id }, index) => [
-      index > 0 && /* @__PURE__ */ React2.createElement(import_ui2.Divider, { key: `${id}-divider` }),
-      /* @__PURE__ */ React2.createElement(MenuItem, { key: id })
+    saveActions.map(({ MenuItem: MenuItem2, id }, index) => [
+      index > 0 && /* @__PURE__ */ React24.createElement(import_ui15.Divider, { key: `${id}-divider` }),
+      /* @__PURE__ */ React24.createElement(MenuItem2, { key: id })
     ]),
-    saveActions.length > 0 && defaultActions.length > 0 && /* @__PURE__ */ React2.createElement(import_ui2.Divider, null),
-    defaultActions.map(({ MenuItem, id }, index) => [
-      index > 0 && /* @__PURE__ */ React2.createElement(import_ui2.Divider, { key: `${id}-divider` }),
-      /* @__PURE__ */ React2.createElement(MenuItem, { key: id })
+    saveActions.length > 0 && defaultActions.length > 0 && /* @__PURE__ */ React24.createElement(import_ui15.Divider, null),
+    defaultActions.map(({ MenuItem: MenuItem2, id }, index) => [
+      index > 0 && /* @__PURE__ */ React24.createElement(import_ui15.Divider, { key: `${id}-divider` }),
+      /* @__PURE__ */ React24.createElement(MenuItem2, { key: id })
     ])
   );
 }
 
 // src/extensions/documents-save/components/primary-action.tsx
-var import_ui3 = require("@elementor/ui");
-var import_editor_documents6 = require("@elementor/editor-documents");
-var import_icons6 = require("@elementor/icons");
+var import_ui16 = require("@elementor/ui");
+var import_editor_documents7 = require("@elementor/editor-documents");
+var import_icons9 = require("@elementor/icons");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 function PrimaryAction() {
-  const document2 = (0, import_editor_documents6.__useActiveDocument)();
-  const { save } = (0, import_editor_documents6.__useActiveDocumentActions)();
+  const document2 = (0, import_editor_documents7.__useActiveDocument)();
+  const { save } = (0, import_editor_documents7.__useActiveDocumentActions)();
   const isPreviewMode = (0, import_editor_v1_adapters5.__privateUseIsPreviewMode)();
-  const popupState = (0, import_ui3.usePopupState)({
+  const popupState = (0, import_ui16.usePopupState)({
     variant: "popover",
     popupId: "document-save-options"
   });
@@ -305,8 +904,8 @@ function PrimaryAction() {
   const isPublishDisabled = isPreviewMode || !isPublishEnabled(document2);
   const isSaveOptionsDisabled = isPreviewMode || document2.type.value === "kit";
   const shouldShowSpinner = document2.isSaving && !isPublishDisabled;
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(import_ui3.ButtonGroup, { size: "large", variant: "contained" }, /* @__PURE__ */ React3.createElement(
-    import_ui3.Button,
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_ui16.ButtonGroup, { size: "large", variant: "contained" }, /* @__PURE__ */ React25.createElement(
+    import_ui16.Button,
     {
       onClick: () => {
         const extendedWindow = window;
@@ -336,11 +935,11 @@ function PrimaryAction() {
       },
       disabled: isPublishDisabled
     },
-    shouldShowSpinner ? /* @__PURE__ */ React3.createElement(import_ui3.CircularProgress, { color: "inherit", size: "1.5em" }) : getLabel(document2)
-  ), /* @__PURE__ */ React3.createElement(
-    import_ui3.Tooltip,
+    shouldShowSpinner ? /* @__PURE__ */ React25.createElement(import_ui16.CircularProgress, { color: "inherit", size: "1.5em" }) : getLabel(document2)
+  ), /* @__PURE__ */ React25.createElement(
+    import_ui16.Tooltip,
     {
-      title: (0, import_i18n6.__)("Save Options", "elementor"),
+      title: (0, import_i18n9.__)("Save Options", "elementor"),
       PopperProps: {
         sx: {
           "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
@@ -350,21 +949,21 @@ function PrimaryAction() {
         }
       }
     },
-    /* @__PURE__ */ React3.createElement(import_ui3.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React3.createElement(
-      import_ui3.Button,
+    /* @__PURE__ */ React25.createElement(import_ui16.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React25.createElement(
+      import_ui16.Button,
       {
         size: "small",
-        ...(0, import_ui3.bindTrigger)(popupState),
+        ...(0, import_ui16.bindTrigger)(popupState),
         sx: { px: 0, height: "100%", borderRadius: 0 },
         disabled: isSaveOptionsDisabled,
-        "aria-label": (0, import_i18n6.__)("Save Options", "elementor")
+        "aria-label": (0, import_i18n9.__)("Save Options", "elementor")
       },
-      /* @__PURE__ */ React3.createElement(import_icons6.ChevronDownIcon, null)
+      /* @__PURE__ */ React25.createElement(import_icons9.ChevronDownIcon, null)
     ))
-  )), /* @__PURE__ */ React3.createElement(PrimaryActionMenu, { ...(0, import_ui3.bindMenu)(popupState), onClick: popupState.close }));
+  )), /* @__PURE__ */ React25.createElement(PrimaryActionMenu, { ...(0, import_ui16.bindMenu)(popupState), onClick: popupState.close }));
 }
 function getLabel(document2) {
-  return document2.userCan.publish ? (0, import_i18n6.__)("Publish", "elementor") : (0, import_i18n6.__)("Submit", "elementor");
+  return document2.userCan.publish ? (0, import_i18n9.__)("Publish", "elementor") : (0, import_i18n9.__)("Submit", "elementor");
 }
 function isPublishEnabled(document2) {
   if (document2.type.value === "kit") {
@@ -374,15 +973,15 @@ function isPublishEnabled(document2) {
 }
 
 // src/extensions/documents-save/hooks/use-document-copy-and-share-props.ts
-var import_i18n7 = require("@wordpress/i18n");
-var import_icons7 = require("@elementor/icons");
-var import_editor_documents7 = require("@elementor/editor-documents");
+var import_i18n10 = require("@wordpress/i18n");
+var import_icons10 = require("@elementor/icons");
+var import_editor_documents8 = require("@elementor/editor-documents");
 function useDocumentCopyAndShareProps() {
-  const document2 = (0, import_editor_documents7.__useActiveDocument)();
-  const { copyAndShare } = (0, import_editor_documents7.__useActiveDocumentActions)();
+  const document2 = (0, import_editor_documents8.__useActiveDocument)();
+  const { copyAndShare } = (0, import_editor_documents8.__useActiveDocumentActions)();
   return {
-    icon: import_icons7.LinkIcon,
-    title: (0, import_i18n7.__)("Copy and Share", "elementor"),
+    icon: import_icons10.LinkIcon,
+    title: (0, import_i18n10.__)("Copy and Share", "elementor"),
     onClick: copyAndShare,
     disabled: !document2 || document2.isSaving || document2.isSavingDraft || !("publish" === document2.status.value),
     visible: document2?.permissions?.showCopyAndShare
@@ -391,7 +990,7 @@ function useDocumentCopyAndShareProps() {
 
 // src/extensions/documents-save/index.ts
 function init3() {
-  (0, import_editor_app_bar_ui5.__privateInjectIntoPrimaryAction)({
+  injectIntoPrimaryAction({
     id: "document-primary-action",
     component: PrimaryAction
   });
@@ -420,11 +1019,11 @@ function init3() {
 }
 
 // src/extensions/elements/sync/sync-panel-title.ts
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 var import_editor_v1_adapters6 = 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_i18n11.__)("Elements", "elementor");
+  const tabTitle = (0, import_i18n11.__)("Widgets", "elementor");
   (0, import_editor_v1_adapters6.__privateListenTo)(
     (0, import_editor_v1_adapters6.routeOpenEvent)("panel/elements"),
     () => {
@@ -452,18 +1051,15 @@ function setTabTitle(title) {
   }
 }
 
-// src/extensions/elements/index.ts
-var import_editor_app_bar_ui6 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/elements/hooks/use-action-props.ts
-var import_icons8 = require("@elementor/icons");
-var import_i18n9 = require("@wordpress/i18n");
+var import_icons11 = require("@elementor/icons");
+var import_i18n12 = require("@wordpress/i18n");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 function useActionProps2() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters7.__privateUseRouteStatus)("panel/elements");
   return {
-    title: (0, import_i18n9.__)("Add Element", "elementor"),
-    icon: import_icons8.PlusIcon,
+    title: (0, import_i18n12.__)("Add Element", "elementor"),
+    icon: import_icons11.PlusIcon,
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -488,19 +1084,16 @@ function useActionProps2() {
 // src/extensions/elements/index.ts
 function init4() {
   syncPanelTitle();
-  import_editor_app_bar_ui6.__privateToolsMenu.registerToggleAction({
+  toolsMenu.registerToggleAction({
     id: "open-elements-panel",
     priority: 1,
     useProps: useActionProps2
   });
 }
 
-// src/extensions/finder/index.ts
-var import_editor_app_bar_ui7 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/finder/hooks/use-action-props.ts
-var import_i18n10 = require("@wordpress/i18n");
-var import_icons9 = require("@elementor/icons");
+var import_i18n13 = require("@wordpress/i18n");
+var import_icons12 = require("@elementor/icons");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 function useActionProps3() {
   const { isBlocked } = (0, import_editor_v1_adapters8.__privateUseRouteStatus)("finder", {
@@ -508,8 +1101,8 @@ function useActionProps3() {
     blockOnPreviewMode: false
   });
   return {
-    title: (0, import_i18n10.__)("Finder", "elementor"),
-    icon: import_icons9.SearchIcon,
+    title: (0, import_i18n13.__)("Finder", "elementor"),
+    icon: import_icons12.SearchIcon,
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -532,7 +1125,7 @@ function useActionProps3() {
 
 // src/extensions/finder/index.ts
 function init5() {
-  import_editor_app_bar_ui7.__privateUtilitiesMenu.registerAction({
+  utilitiesMenu.registerAction({
     id: "toggle-finder",
     priority: 10,
     // Before help.
@@ -541,19 +1134,18 @@ function init5() {
 }
 
 // src/extensions/help/index.ts
-var import_editor_app_bar_ui8 = require("@elementor/editor-app-bar-ui");
-var import_i18n11 = require("@wordpress/i18n");
-var import_icons10 = require("@elementor/icons");
+var import_i18n14 = require("@wordpress/i18n");
+var import_icons13 = require("@elementor/icons");
 function init6() {
-  import_editor_app_bar_ui8.__privateUtilitiesMenu.registerLink({
+  utilitiesMenu.registerLink({
     id: "open-help-center",
     priority: 20,
     // After Finder.
     useProps: () => {
       return {
-        title: (0, import_i18n11.__)("Help", "elementor"),
+        title: (0, import_i18n14.__)("Help", "elementor"),
         href: "https://go.elementor.com/editor-top-bar-learn/",
-        icon: import_icons10.HelpIcon,
+        icon: import_icons13.HelpIcon,
         target: "_blank",
         onClick: () => {
           const extendedWindow = window;
@@ -575,18 +1167,15 @@ function init6() {
   });
 }
 
-// src/extensions/history/index.ts
-var import_editor_app_bar_ui9 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/history/hooks/use-action-props.ts
-var import_icons11 = require("@elementor/icons");
-var import_i18n12 = require("@wordpress/i18n");
+var import_icons14 = require("@elementor/icons");
+var import_i18n15 = require("@wordpress/i18n");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 function useActionProps4() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters9.__privateUseRouteStatus)("panel/history");
   return {
-    title: (0, import_i18n12.__)("History", "elementor"),
-    icon: import_icons11.HistoryIcon,
+    title: (0, import_i18n15.__)("History", "elementor"),
+    icon: import_icons14.HistoryIcon,
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -610,24 +1199,21 @@ function useActionProps4() {
 
 // src/extensions/history/index.ts
 function init7() {
-  import_editor_app_bar_ui9.__privateMainMenu.registerToggleAction({
+  mainMenu.registerToggleAction({
     id: "open-history",
     priority: 20,
     useProps: useActionProps4
   });
 }
 
-// src/extensions/keyboard-shortcuts/index.ts
-var import_editor_app_bar_ui10 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/keyboard-shortcuts/hooks/use-action-props.ts
-var import_i18n13 = require("@wordpress/i18n");
-var import_icons12 = require("@elementor/icons");
+var import_i18n16 = require("@wordpress/i18n");
+var import_icons15 = require("@elementor/icons");
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 function useActionProps5() {
   return {
-    icon: import_icons12.KeyboardIcon,
-    title: (0, import_i18n13.__)("Keyboard Shortcuts", "elementor"),
+    icon: import_icons15.KeyboardIcon,
+    title: (0, import_i18n16.__)("Keyboard Shortcuts", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -649,7 +1235,7 @@ function useActionProps5() {
 
 // src/extensions/keyboard-shortcuts/index.ts
 function init8() {
-  import_editor_app_bar_ui10.__privateMainMenu.registerAction({
+  mainMenu.registerAction({
     id: "open-keyboard-shortcuts",
     group: "default",
     priority: 40,
@@ -662,11 +1248,11 @@ function init8() {
 var import_editor = require("@elementor/editor");
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
-var React6 = __toESM(require("react"));
+var React28 = __toESM(require("react"));
 
 // src/extensions/site-settings/components/portal.tsx
-var React4 = __toESM(require("react"));
-var import_ui4 = require("@elementor/ui");
+var React26 = __toESM(require("react"));
+var import_ui17 = require("@elementor/ui");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 function Portal(props) {
   const containerRef = (0, import_editor_v1_adapters11.__privateUseListenTo)(
@@ -679,27 +1265,27 @@ function Portal(props) {
   if (!containerRef.current) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(import_ui4.Portal, { container: containerRef.current, ...props });
+  return /* @__PURE__ */ React26.createElement(import_ui17.Portal, { container: containerRef.current, ...props });
 }
 function getContainerRef() {
   return (0, import_editor_v1_adapters11.__privateIsRouteActive)("panel/global") ? { current: document.querySelector("#elementor-panel-inner") } : { current: null };
 }
 
 // src/extensions/site-settings/components/primary-action.tsx
-var React5 = __toESM(require("react"));
-var import_editor_documents8 = require("@elementor/editor-documents");
-var import_ui5 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var React27 = __toESM(require("react"));
+var import_editor_documents9 = require("@elementor/editor-documents");
+var import_ui18 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
 function PrimaryAction2() {
-  const document2 = (0, import_editor_documents8.__useActiveDocument)();
-  const { save } = (0, import_editor_documents8.__useActiveDocumentActions)();
-  return /* @__PURE__ */ React5.createElement(import_ui5.Paper, { sx: {
+  const document2 = (0, import_editor_documents9.__useActiveDocument)();
+  const { save } = (0, import_editor_documents9.__useActiveDocumentActions)();
+  return /* @__PURE__ */ React27.createElement(import_ui18.Paper, { sx: {
     px: 5,
     py: 4,
     borderTop: 1,
     borderColor: "divider"
-  } }, /* @__PURE__ */ React5.createElement(
-    import_ui5.Button,
+  } }, /* @__PURE__ */ React27.createElement(
+    import_ui18.Button,
     {
       variant: "contained",
       disabled: !document2 || !document2.isDirty,
@@ -707,29 +1293,26 @@ function PrimaryAction2() {
       sx: { width: "100%" },
       onClick: () => document2 && !document2.isSaving ? save() : null
     },
-    document2?.isSaving ? /* @__PURE__ */ React5.createElement(import_ui5.CircularProgress, null) : (0, import_i18n14.__)("Save Changes", "elementor")
+    document2?.isSaving ? /* @__PURE__ */ React27.createElement(import_ui18.CircularProgress, null) : (0, import_i18n17.__)("Save Changes", "elementor")
   ));
 }
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
 function PortalledPrimaryAction() {
-  return /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(PrimaryAction2, null));
+  return /* @__PURE__ */ React28.createElement(Portal, null, /* @__PURE__ */ React28.createElement(PrimaryAction2, null));
 }
 
-// src/extensions/site-settings/index.ts
-var import_editor_app_bar_ui11 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/site-settings/hooks/use-action-props.ts
-var import_i18n15 = require("@wordpress/i18n");
+var import_i18n18 = require("@wordpress/i18n");
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
-var import_icons13 = require("@elementor/icons");
+var import_icons16 = require("@elementor/icons");
 function useActionProps6() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters12.__privateUseRouteStatus)("panel/global", {
     blockOnKitRoutes: false
   });
   return {
-    title: (0, import_i18n15.__)("Site Settings", "elementor"),
-    icon: import_icons13.AdjustmentsHorizontalIcon,
+    title: (0, import_i18n18.__)("Site Settings", "elementor"),
+    icon: import_icons16.AdjustmentsHorizontalIcon,
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -761,25 +1344,22 @@ function init9() {
     id: "site-settings-primary-action-portal",
     component: PortalledPrimaryAction
   });
-  import_editor_app_bar_ui11.__privateToolsMenu.registerToggleAction({
+  toolsMenu.registerToggleAction({
     id: "toggle-site-settings",
     priority: 2,
     useProps: useActionProps6
   });
 }
 
-// src/extensions/structure/index.ts
-var import_editor_app_bar_ui12 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/structure/hooks/use-action-props.ts
-var import_i18n16 = require("@wordpress/i18n");
+var import_i18n19 = require("@wordpress/i18n");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
-var import_icons14 = require("@elementor/icons");
+var import_icons17 = require("@elementor/icons");
 function useActionProps7() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters13.__privateUseRouteStatus)("navigator");
   return {
-    title: (0, import_i18n16.__)("Structure", "elementor"),
-    icon: import_icons14.StructureIcon,
+    title: (0, import_i18n19.__)("Structure", "elementor"),
+    icon: import_icons17.StructureIcon,
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -803,24 +1383,21 @@ function useActionProps7() {
 
 // src/extensions/structure/index.ts
 function init10() {
-  import_editor_app_bar_ui12.__privateToolsMenu.registerToggleAction({
+  toolsMenu.registerToggleAction({
     id: "toggle-structure-view",
     priority: 3,
     useProps: useActionProps7
   });
 }
 
-// src/extensions/theme-builder/index.ts
-var import_editor_app_bar_ui13 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/theme-builder/hooks/use-action-props.ts
-var import_i18n17 = require("@wordpress/i18n");
-var import_icons15 = require("@elementor/icons");
+var import_i18n20 = require("@wordpress/i18n");
+var import_icons18 = require("@elementor/icons");
 var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
 function useActionProps8() {
   return {
-    icon: import_icons15.ThemeBuilderIcon,
-    title: (0, import_i18n17.__)("Theme Builder", "elementor"),
+    icon: import_icons18.ThemeBuilderIcon,
+    title: (0, import_i18n20.__)("Theme Builder", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -842,24 +1419,21 @@ function useActionProps8() {
 
 // src/extensions/theme-builder/index.ts
 function init11() {
-  import_editor_app_bar_ui13.__privateMainMenu.registerAction({
+  mainMenu.registerAction({
     id: "open-theme-builder",
     useProps: useActionProps8
   });
 }
 
-// src/extensions/user-preferences/index.ts
-var import_editor_app_bar_ui14 = require("@elementor/editor-app-bar-ui");
-
 // src/extensions/user-preferences/hooks/use-action-props.ts
-var import_i18n18 = require("@wordpress/i18n");
-var import_icons16 = require("@elementor/icons");
+var import_i18n21 = require("@wordpress/i18n");
+var import_icons19 = require("@elementor/icons");
 var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
 function useActionProps9() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters15.__privateUseRouteStatus)("panel/editor-preferences");
   return {
-    icon: import_icons16.ToggleRightIcon,
-    title: (0, import_i18n18.__)("User Preferences", "elementor"),
+    icon: import_icons19.ToggleRightIcon,
+    title: (0, import_i18n21.__)("User Preferences", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -883,7 +1457,7 @@ function useActionProps9() {
 
 // src/extensions/user-preferences/index.ts
 function init12() {
-  import_editor_app_bar_ui14.__privateMainMenu.registerToggleAction({
+  mainMenu.registerToggleAction({
     id: "open-user-preferences",
     priority: 30,
     // After history.
@@ -892,20 +1466,19 @@ function init12() {
 }
 
 // src/extensions/wordpress/index.ts
-var import_editor_app_bar_ui15 = require("@elementor/editor-app-bar-ui");
-var import_i18n19 = require("@wordpress/i18n");
-var import_icons17 = require("@elementor/icons");
-var import_editor_documents9 = require("@elementor/editor-documents");
+var import_i18n22 = require("@wordpress/i18n");
+var import_icons20 = require("@elementor/icons");
+var import_editor_documents10 = require("@elementor/editor-documents");
 function init13() {
-  import_editor_app_bar_ui15.__privateMainMenu.registerLink({
+  mainMenu.registerLink({
     id: "exit-to-wordpress",
     group: "exits",
     useProps: () => {
-      const document2 = (0, import_editor_documents9.__useActiveDocument)();
+      const document2 = (0, import_editor_documents10.__useActiveDocument)();
       return {
-        title: (0, import_i18n19.__)("Exit to WordPress", "elementor"),
+        title: (0, import_i18n22.__)("Exit to WordPress", "elementor"),
         href: document2?.links?.platformEdit,
-        icon: import_icons17.WordpressIcon,
+        icon: import_icons20.WordpressIcon,
         onClick: () => {
           const extendedWindow = window;
           const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -949,7 +1522,7 @@ function init15() {
   init14();
   (0, import_editor2.injectIntoTop)({
     id: "app-bar",
-    component: import_editor_app_bar_ui16.__privateAppBar
+    component: AppBar
   });
 }