@elementor/editor-ui 3.35.0-375 → 3.35.0-377

package/dist/index.d.mts

@@ -7,6 +7,7 @@ import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipP
 
 declare const CollapseIcon: _emotion_styled.StyledComponent<Omit<_mui_material.SvgIconProps, "ref"> & React$1.RefAttributes<SVGSVGElement> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     open: boolean;
+    disabled?: boolean;
 }, {}, {}>;
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
@@ -90,10 +91,20 @@ type Props = PropsWithChildren<{
 }>;
 declare const Form: ({ children, onSubmit }: Props) => React$1.JSX.Element;
 
-type UpgradeButtonProps = {
+type CtaButtonProps = {
     href: string;
 } & Omit<ButtonProps, 'href' | 'target' | 'startIcon' | 'color' | 'variant'>;
-declare const UpgradeButton: ({ href, children, ...props }: UpgradeButtonProps) => React$1.JSX.Element;
+declare const CtaButton: ({ href, children, ...props }: CtaButtonProps) => React$1.JSX.Element;
+
+type PromotionInfotipProps = React$1.PropsWithChildren<{
+    title: string;
+    content: string;
+    assetUrl: string;
+    ctaUrl: string;
+    open?: boolean;
+    setOpen: (open: boolean) => void;
+}>;
+declare const PromotionInfotip: ({ children, ...props }: PromotionInfotipProps) => React$1.JSX.Element;
 
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
@@ -191,4 +202,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { CollapseIcon, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, UpgradeButton, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+export { CollapseIcon, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionInfotip, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipP
 
 declare const CollapseIcon: _emotion_styled.StyledComponent<Omit<_mui_material.SvgIconProps, "ref"> & React$1.RefAttributes<SVGSVGElement> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     open: boolean;
+    disabled?: boolean;
 }, {}, {}>;
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
@@ -90,10 +91,20 @@ type Props = PropsWithChildren<{
 }>;
 declare const Form: ({ children, onSubmit }: Props) => React$1.JSX.Element;
 
-type UpgradeButtonProps = {
+type CtaButtonProps = {
     href: string;
 } & Omit<ButtonProps, 'href' | 'target' | 'startIcon' | 'color' | 'variant'>;
-declare const UpgradeButton: ({ href, children, ...props }: UpgradeButtonProps) => React$1.JSX.Element;
+declare const CtaButton: ({ href, children, ...props }: CtaButtonProps) => React$1.JSX.Element;
+
+type PromotionInfotipProps = React$1.PropsWithChildren<{
+    title: string;
+    content: string;
+    assetUrl: string;
+    ctaUrl: string;
+    open?: boolean;
+    setOpen: (open: boolean) => void;
+}>;
+declare const PromotionInfotip: ({ children, ...props }: PromotionInfotipProps) => React$1.JSX.Element;
 
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
@@ -191,4 +202,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { CollapseIcon, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, UpgradeButton, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+export { CollapseIcon, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionInfotip, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CollapseIcon: () => CollapseIcon,
+  CtaButton: () => CtaButton,
   EditableField: () => EditableField,
   EllipsisWithTooltip: () => EllipsisWithTooltip,
   Form: () => Form,
@@ -44,11 +45,11 @@ __export(index_exports, {
   PopoverBody: () => PopoverBody,
   PopoverHeader: () => PopoverHeader,
   PopoverMenuList: () => PopoverMenuList,
+  PromotionInfotip: () => PromotionInfotip,
   SaveChangesDialog: () => SaveChangesDialog,
   SearchField: () => SearchField,
   StyledMenuList: () => StyledMenuList,
   ThemeProvider: () => ThemeProvider,
-  UpgradeButton: () => UpgradeButton,
   WarningInfotip: () => WarningInfotip,
   closeDialog: () => closeDialog,
   openDialog: () => openDialog,
@@ -61,12 +62,13 @@ module.exports = __toCommonJS(index_exports);
 var import_icons = require("@elementor/icons");
 var import_ui = require("@elementor/ui");
 var CollapseIcon = (0, import_ui.styled)(import_icons.ChevronDownIcon, {
-  shouldForwardProp: (prop) => prop !== "open"
-})(({ theme, open }) => ({
+  shouldForwardProp: (prop) => prop !== "open" && prop !== "disabled"
+})(({ theme, open, disabled = false }) => ({
   transform: open ? "rotate(180deg)" : "rotate(0deg)",
   transition: theme.transitions.create("transform", {
     duration: theme.transitions.duration.standard
-  })
+  }),
+  opacity: disabled ? 0.4 : 1
 }));
 
 // src/components/ellipsis-with-tooltip.tsx
@@ -422,12 +424,12 @@ var Form = ({ children, onSubmit }) => {
   );
 };
 
-// src/components/upgrade-button.tsx
+// src/components/cta-button.tsx
 var React12 = __toESM(require("react"));
 var import_icons4 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
-var UpgradeButton = ({ href, children, ...props }) => /* @__PURE__ */ React12.createElement(
+var CtaButton = ({ href, children, ...props }) => /* @__PURE__ */ React12.createElement(
   import_ui12.Button,
   {
     variant: "contained",
@@ -440,15 +442,50 @@ var UpgradeButton = ({ href, children, ...props }) => /* @__PURE__ */ React12.cr
   children ?? (0, import_i18n3.__)("Upgrade Now", "elementor")
 );
 
-// src/components/popover/body.tsx
+// src/components/promotion-infotip.tsx
 var React13 = __toESM(require("react"));
 var import_ui13 = require("@elementor/ui");
+var PromotionInfotip = ({ children, ...props }) => {
+  return /* @__PURE__ */ React13.createElement(
+    import_ui13.Infotip,
+    {
+      placement: "right",
+      ...props,
+      content: /* @__PURE__ */ React13.createElement(
+        InfotipCard,
+        {
+          title: props.title,
+          content: props.content,
+          assetUrl: props.assetUrl,
+          ctaUrl: props.ctaUrl,
+          setOpen: props.setOpen
+        }
+      ),
+      open: props.open
+    },
+    children
+  );
+};
+function InfotipCard({ ...props }) {
+  const { title, content, assetUrl, ctaUrl, setOpen } = props;
+  return /* @__PURE__ */ React13.createElement(import_ui13.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
+    import_ui13.CardHeader,
+    {
+      title,
+      action: /* @__PURE__ */ React13.createElement(import_ui13.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: () => setOpen(false) })
+    }
+  ), /* @__PURE__ */ React13.createElement(import_ui13.CardMedia, { component: "img", image: assetUrl, alt: "", sx: { width: "100%", aspectRatio: "16 / 9" } }), /* @__PURE__ */ React13.createElement(import_ui13.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "body2", color: "text.secondary" }, content)), /* @__PURE__ */ React13.createElement(import_ui13.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React13.createElement(CtaButton, { href: ctaUrl })));
+}
+
+// src/components/popover/body.tsx
+var React14 = __toESM(require("react"));
+var import_ui14 = require("@elementor/ui");
 var SECTION_PADDING_INLINE = 32;
 var DEFAULT_POPOVER_HEIGHT = 348;
 var FALLBACK_POPOVER_WIDTH = 220;
 var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
-  return /* @__PURE__ */ React13.createElement(
-    import_ui13.Box,
+  return /* @__PURE__ */ React14.createElement(
+    import_ui14.Box,
     {
       display: "flex",
       flexDirection: "column",
@@ -465,8 +502,8 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/header.tsx
-var React14 = __toESM(require("react"));
-var import_ui14 = require("@elementor/ui");
+var React15 = __toESM(require("react"));
+var import_ui15 = require("@elementor/ui");
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
@@ -475,13 +512,13 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React14.createElement(import_ui14.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React14.createElement(import_ui14.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React14.createElement(import_ui14.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React14.createElement(import_ui14.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React15.createElement(import_ui15.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React15.createElement(import_ui15.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React15.createElement(import_ui15.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_react12 = require("react");
-var import_ui15 = require("@elementor/ui");
+var import_ui16 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/hooks/use-scroll-to-selected.ts
@@ -580,7 +617,7 @@ var PopoverMenuList = ({
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React15.createElement(import_ui15.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(import_ui16.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React16.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -598,8 +635,8 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React15.createElement(
-          import_ui15.MenuSubheader,
+        return /* @__PURE__ */ React16.createElement(
+          import_ui16.MenuSubheader,
           {
             key: virtualRow.key,
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -609,8 +646,8 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React15.createElement(
-        import_ui15.ListItem,
+      return /* @__PURE__ */ React16.createElement(
+        import_ui16.ListItem,
         {
           key: virtualRow.key,
           role: "option",
@@ -648,7 +685,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = (0, import_ui15.styled)(import_ui15.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui16.styled)(import_ui16.MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -679,14 +716,14 @@ var StyledMenuList = (0, import_ui15.styled)(import_ui15.MenuList)(({ theme }) =
 }));
 
 // src/components/save-changes-dialog.tsx
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_icons5 = require("@elementor/icons");
-var import_ui16 = require("@elementor/ui");
+var import_ui17 = require("@elementor/ui");
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React16.createElement(import_ui16.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React16.createElement(
-  import_ui16.DialogTitle,
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React17.createElement(import_ui17.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React17.createElement(
+  import_ui17.DialogTitle,
   {
     id: TITLE_ID,
     display: "flex",
@@ -694,11 +731,11 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React16.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React16.createElement(import_ui16.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(import_icons5.AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React16.createElement(import_ui16.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React16.createElement(import_icons5.XIcon, null))
+  /* @__PURE__ */ React17.createElement(import_ui17.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(import_icons5.AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React17.createElement(import_ui17.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React17.createElement(import_icons5.XIcon, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React16.createElement(import_ui16.DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React16.createElement(import_ui16.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React17.createElement(import_ui17.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React17.createElement(import_ui17.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = (0, import_react13.useState)(false);
   const { cancel, confirm, discard } = actions;
@@ -707,7 +744,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React16.createElement(import_ui16.DialogActions, null, cancel && /* @__PURE__ */ React16.createElement(import_ui16.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React16.createElement(import_ui16.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React16.createElement(import_ui16.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React17.createElement(import_ui17.DialogActions, null, cancel && /* @__PURE__ */ React17.createElement(import_ui17.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React17.createElement(import_ui17.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React17.createElement(import_ui17.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -827,6 +864,7 @@ var selectAll = (el) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CollapseIcon,
+  CtaButton,
   EditableField,
   EllipsisWithTooltip,
   Form,
@@ -840,11 +878,11 @@ var selectAll = (el) => {
   PopoverBody,
   PopoverHeader,
   PopoverMenuList,
+  PromotionInfotip,
   SaveChangesDialog,
   SearchField,
   StyledMenuList,
   ThemeProvider,
-  UpgradeButton,
   WarningInfotip,
   closeDialog,
   openDialog,

package/dist/index.mjs

@@ -2,12 +2,13 @@
 import { ChevronDownIcon } from "@elementor/icons";
 import { styled } from "@elementor/ui";
 var CollapseIcon = styled(ChevronDownIcon, {
-  shouldForwardProp: (prop) => prop !== "open"
-})(({ theme, open }) => ({
+  shouldForwardProp: (prop) => prop !== "open" && prop !== "disabled"
+})(({ theme, open, disabled = false }) => ({
   transform: open ? "rotate(180deg)" : "rotate(0deg)",
   transition: theme.transitions.create("transform", {
     duration: theme.transitions.duration.standard
-  })
+  }),
+  opacity: disabled ? 0.4 : 1
 }));
 
 // src/components/ellipsis-with-tooltip.tsx
@@ -381,12 +382,12 @@ var Form = ({ children, onSubmit }) => {
   );
 };
 
-// src/components/upgrade-button.tsx
+// src/components/cta-button.tsx
 import * as React12 from "react";
 import { CrownFilledIcon } from "@elementor/icons";
 import { Button as Button3 } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
-var UpgradeButton = ({ href, children, ...props }) => /* @__PURE__ */ React12.createElement(
+var CtaButton = ({ href, children, ...props }) => /* @__PURE__ */ React12.createElement(
   Button3,
   {
     variant: "contained",
@@ -399,14 +400,49 @@ var UpgradeButton = ({ href, children, ...props }) => /* @__PURE__ */ React12.cr
   children ?? __3("Upgrade Now", "elementor")
 );
 
-// src/components/popover/body.tsx
+// src/components/promotion-infotip.tsx
 import * as React13 from "react";
+import { Card as Card2, CardActions as CardActions2, CardContent as CardContent2, CardHeader, CardMedia, CloseButton, Infotip as Infotip3, Typography as Typography3 } from "@elementor/ui";
+var PromotionInfotip = ({ children, ...props }) => {
+  return /* @__PURE__ */ React13.createElement(
+    Infotip3,
+    {
+      placement: "right",
+      ...props,
+      content: /* @__PURE__ */ React13.createElement(
+        InfotipCard,
+        {
+          title: props.title,
+          content: props.content,
+          assetUrl: props.assetUrl,
+          ctaUrl: props.ctaUrl,
+          setOpen: props.setOpen
+        }
+      ),
+      open: props.open
+    },
+    children
+  );
+};
+function InfotipCard({ ...props }) {
+  const { title, content, assetUrl, ctaUrl, setOpen } = props;
+  return /* @__PURE__ */ React13.createElement(Card2, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
+    CardHeader,
+    {
+      title,
+      action: /* @__PURE__ */ React13.createElement(CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: () => setOpen(false) })
+    }
+  ), /* @__PURE__ */ React13.createElement(CardMedia, { component: "img", image: assetUrl, alt: "", sx: { width: "100%", aspectRatio: "16 / 9" } }), /* @__PURE__ */ React13.createElement(CardContent2, null, /* @__PURE__ */ React13.createElement(Typography3, { variant: "body2", color: "text.secondary" }, content)), /* @__PURE__ */ React13.createElement(CardActions2, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React13.createElement(CtaButton, { href: ctaUrl })));
+}
+
+// src/components/popover/body.tsx
+import * as React14 from "react";
 import { Box as Box5 } from "@elementor/ui";
 var SECTION_PADDING_INLINE = 32;
 var DEFAULT_POPOVER_HEIGHT = 348;
 var FALLBACK_POPOVER_WIDTH = 220;
 var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     Box5,
     {
       display: "flex",
@@ -424,8 +460,8 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/header.tsx
-import * as React14 from "react";
-import { CloseButton, Stack, Typography as Typography3 } from "@elementor/ui";
+import * as React15 from "react";
+import { CloseButton as CloseButton2, Stack, Typography as Typography4 } from "@elementor/ui";
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
@@ -434,11 +470,11 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React14.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React14.createElement(Typography3, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React14.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React14.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React15.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React15.createElement(Typography4, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React15.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React15.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { useMemo, useRef as useRef3 } from "react";
 import { Box as Box6, ListItem, MenuList, MenuSubheader, styled as styled3 } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -539,7 +575,7 @@ var PopoverMenuList = ({
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React15.createElement(Box6, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(Box6, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React16.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -557,7 +593,7 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           MenuSubheader,
           {
             key: virtualRow.key,
@@ -568,7 +604,7 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React15.createElement(
+      return /* @__PURE__ */ React16.createElement(
         ListItem,
         {
           key: virtualRow.key,
@@ -638,7 +674,7 @@ var StyledMenuList = styled3(MenuList)(({ theme }) => ({
 }));
 
 // src/components/save-changes-dialog.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import { useState as useState6 } from "react";
 import { AlertTriangleFilledIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
@@ -652,8 +688,8 @@ import {
   Stack as Stack2
 } from "@elementor/ui";
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React16.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React16.createElement(
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React17.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React17.createElement(
   DialogTitle2,
   {
     id: TITLE_ID,
@@ -662,11 +698,11 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React16.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React16.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React16.createElement(IconButton2, { onClick: onClose, size: "small" }, /* @__PURE__ */ React16.createElement(XIcon2, null))
+  /* @__PURE__ */ React17.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React17.createElement(IconButton2, { onClick: onClose, size: "small" }, /* @__PURE__ */ React17.createElement(XIcon2, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React16.createElement(DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React16.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React17.createElement(DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React17.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = useState6(false);
   const { cancel, confirm, discard } = actions;
@@ -675,7 +711,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React16.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React16.createElement(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React16.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React16.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React17.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React17.createElement(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React17.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React17.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -794,6 +830,7 @@ var selectAll = (el) => {
 };
 export {
   CollapseIcon,
+  CtaButton,
   EditableField,
   EllipsisWithTooltip,
   Form,
@@ -807,11 +844,11 @@ export {
   PopoverBody,
   PopoverHeader,
   PopoverMenuList,
+  PromotionInfotip,
   SaveChangesDialog,
   SearchField,
   StyledMenuList,
   ThemeProvider,
-  UpgradeButton,
   WarningInfotip,
   closeDialog,
   openDialog,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "3.35.0-375",
+  "version": "3.35.0-377",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,7 +37,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "3.35.0-375",
+    "@elementor/editor-v1-adapters": "3.35.0-377",
     "@elementor/icons": "^1.63.0",
     "@elementor/ui": "1.36.17",
     "@tanstack/react-virtual": "^3.13.3",

package/src/components/collapse-icon.tsx

@@ -3,10 +3,12 @@ import { styled } from '@elementor/ui';
 
 // TODO: Replace this with future Rotate component that will be implemented in elementor-ui
 export const CollapseIcon = styled( ChevronDownIcon, {
-	shouldForwardProp: ( prop ) => prop !== 'open',
-} )< { open: boolean } >( ( { theme, open } ) => ( {
+	shouldForwardProp: ( prop ) => prop !== 'open' && prop !== 'disabled',
+} )< { open: boolean; disabled?: boolean } >( ( { theme, open, disabled = false } ) => ( {
 	transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
 	transition: theme.transitions.create( 'transform', {
 		duration: theme.transitions.duration.standard,
 	} ),
+
+	opacity: disabled ? 0.4 : 1,
 } ) );

package/src/components/{upgrade-button.tsx → cta-button.tsx}

@@ -3,11 +3,11 @@ import { CrownFilledIcon } from '@elementor/icons';
 import { Button, type ButtonProps } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-type UpgradeButtonProps = {
+type CtaButtonProps = {
 	href: string;
 } & Omit< ButtonProps, 'href' | 'target' | 'startIcon' | 'color' | 'variant' >;
 
-export const UpgradeButton = ( { href, children, ...props }: UpgradeButtonProps ) => (
+export const CtaButton = ( { href, children, ...props }: CtaButtonProps ) => (
 	<Button
 		variant="contained"
 		color="promotion"

package/src/components/promotion-infotip.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Card, CardActions, CardContent, CardHeader, CardMedia, CloseButton, Infotip, Typography } from '@elementor/ui';
+
+import { CtaButton } from './cta-button';
+
+type PromotionInfotipProps = React.PropsWithChildren< {
+	title: string;
+	content: string;
+	assetUrl: string;
+	ctaUrl: string;
+	open?: boolean;
+	setOpen: ( open: boolean ) => void;
+} >;
+
+export const PromotionInfotip = ( { children, ...props }: PromotionInfotipProps ) => {
+	return (
+		<Infotip
+			placement="right"
+			{ ...props }
+			content={
+				<InfotipCard
+					title={ props.title }
+					content={ props.content }
+					assetUrl={ props.assetUrl }
+					ctaUrl={ props.ctaUrl }
+					setOpen={ props.setOpen }
+				/>
+			}
+			open={ props.open }
+		>
+			{ children }
+		</Infotip>
+	);
+};
+
+function InfotipCard( { ...props }: PromotionInfotipProps ) {
+	const { title, content, assetUrl, ctaUrl, setOpen } = props;
+
+	return (
+		<Card elevation={ 0 } sx={ { maxWidth: 296 } }>
+			<CardHeader
+				title={ title }
+				action={
+					<CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ () => setOpen( false ) } />
+				}
+			/>
+			<CardMedia component="img" image={ assetUrl } alt="" sx={ { width: '100%', aspectRatio: '16 / 9' } } />
+			<CardContent>
+				<Typography variant="body2" color="text.secondary">
+					{ content }
+				</Typography>
+			</CardContent>
+			<CardActions sx={ { justifyContent: 'flex-start' } }>
+				<CtaButton href={ ctaUrl } />
+			</CardActions>
+		</Card>
+	);
+}

package/src/index.ts

@@ -11,7 +11,8 @@ export { WarningInfotip } from './components/warning-infotip';
 export { GlobalDialog, openDialog, closeDialog } from './components/global-dialog';
 export { SearchField } from './components/search-field';
 export { Form } from './components/form';
-export { UpgradeButton } from './components/upgrade-button';
+export { CtaButton } from './components/cta-button';
+export { PromotionInfotip } from './components/promotion-infotip';
 
 export * from './components/popover';
 export * from './components/save-changes-dialog';