@elementor/editor-ui 4.0.0-539 → 4.0.0-540

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +7 -1
  2. package/dist/index.d.ts +7 -1
  3. package/dist/index.js +88 -50
  4. package/dist/index.mjs +70 -33
  5. package/package.json +2 -2
  6. package/src/components/promotion-alert.tsx +38 -0
  7. package/src/index.ts +1 -0
package/dist/index.d.mts CHANGED
@@ -125,6 +125,12 @@ declare const PromotionPopover: ({ children, open, placement, slotProps, ...card
125
125
 
126
126
  declare const PromotionChip: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLDivElement>>;
127
127
 
128
+ type PromotionAlertProps = {
129
+ message: string;
130
+ upgradeUrl: string;
131
+ };
132
+ declare const PromotionAlert: ({ message, upgradeUrl }: PromotionAlertProps) => React$1.JSX.Element;
133
+
128
134
  declare function FloatingActionsBar({ actions, children }: PropsWithChildren<{
129
135
  actions: ReactElement[];
130
136
  }>): React$1.JSX.Element;
@@ -258,4 +264,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
258
264
  };
259
265
  };
260
266
 
261
- export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useFloatingActionsBar, useSectionWidth };
267
+ export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useFloatingActionsBar, useSectionWidth };
package/dist/index.d.ts CHANGED
@@ -125,6 +125,12 @@ declare const PromotionPopover: ({ children, open, placement, slotProps, ...card
125
125
 
126
126
  declare const PromotionChip: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLDivElement>>;
127
127
 
128
+ type PromotionAlertProps = {
129
+ message: string;
130
+ upgradeUrl: string;
131
+ };
132
+ declare const PromotionAlert: ({ message, upgradeUrl }: PromotionAlertProps) => React$1.JSX.Element;
133
+
128
134
  declare function FloatingActionsBar({ actions, children }: PropsWithChildren<{
129
135
  actions: ReactElement[];
130
136
  }>): React$1.JSX.Element;
@@ -258,4 +264,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
258
264
  };
259
265
  };
260
266
 
261
- export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useFloatingActionsBar, useSectionWidth };
267
+ export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useFloatingActionsBar, useSectionWidth };
package/dist/index.js CHANGED
@@ -48,6 +48,7 @@ __export(index_exports, {
48
48
  PopoverBody: () => PopoverBody,
49
49
  PopoverHeader: () => PopoverHeader,
50
50
  PopoverMenuList: () => PopoverMenuList,
51
+ PromotionAlert: () => PromotionAlert,
51
52
  PromotionChip: () => PromotionChip,
52
53
  PromotionInfotip: () => PromotionInfotip,
53
54
  PromotionPopover: () => PromotionPopover,
@@ -584,11 +585,47 @@ var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
584
585
  );
585
586
  });
586
587
 
587
- // src/components/floating-bar.tsx
588
+ // src/components/promotion-alert.tsx
588
589
  var React16 = __toESM(require("react"));
589
- var import_react11 = require("react");
590
+ var import_icons7 = require("@elementor/icons");
590
591
  var import_ui16 = require("@elementor/ui");
591
- var FloatingBarContainer = (0, import_ui16.styled)("span")`
592
+ var import_i18n4 = require("@wordpress/i18n");
593
+ var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.createElement(
594
+ import_ui16.Alert,
595
+ {
596
+ variant: "standard",
597
+ color: "promotion",
598
+ icon: false,
599
+ role: "dialog",
600
+ "aria-label": "promotion-alert",
601
+ size: "small",
602
+ sx: { m: 2, mt: 1, mb: 1, pt: 0.25, pb: 1 }
603
+ },
604
+ message,
605
+ /* @__PURE__ */ React16.createElement(
606
+ import_ui16.Box,
607
+ {
608
+ component: "a",
609
+ href: upgradeUrl,
610
+ target: "_blank",
611
+ rel: "noopener noreferrer",
612
+ sx: {
613
+ display: "flex",
614
+ alignItems: "center",
615
+ gap: 0.5,
616
+ color: "promotion.main"
617
+ }
618
+ },
619
+ /* @__PURE__ */ React16.createElement(import_icons7.CrownFilledIcon, { fontSize: "tiny" }),
620
+ (0, import_i18n4.__)("Upgrade now", "elementor")
621
+ )
622
+ );
623
+
624
+ // src/components/floating-bar.tsx
625
+ var React17 = __toESM(require("react"));
626
+ var import_react11 = require("react");
627
+ var import_ui17 = require("@elementor/ui");
628
+ var FloatingBarContainer = (0, import_ui17.styled)("span")`
592
629
  display: contents;
593
630
 
594
631
  .MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
@@ -602,7 +639,7 @@ var FloatingBarContainer = (0, import_ui16.styled)("span")`
602
639
  var FloatingActionsContext = (0, import_react11.createContext)(null);
603
640
  function FloatingActionsBar({ actions, children }) {
604
641
  const [open, setOpen] = (0, import_react11.useState)(false);
605
- return /* @__PURE__ */ React16.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React16.createElement(FloatingBarContainer, null, /* @__PURE__ */ React16.createElement(import_ui16.UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
642
+ return /* @__PURE__ */ React17.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React17.createElement(FloatingBarContainer, null, /* @__PURE__ */ React17.createElement(import_ui17.UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
606
643
  }
607
644
  function useFloatingActionsBar() {
608
645
  const context = (0, import_react11.useContext)(FloatingActionsContext);
@@ -613,14 +650,14 @@ function useFloatingActionsBar() {
613
650
  }
614
651
 
615
652
  // src/components/popover/body.tsx
616
- var React17 = __toESM(require("react"));
617
- var import_ui17 = require("@elementor/ui");
653
+ var React18 = __toESM(require("react"));
654
+ var import_ui18 = require("@elementor/ui");
618
655
  var SECTION_PADDING_INLINE = 32;
619
656
  var DEFAULT_POPOVER_HEIGHT = 348;
620
657
  var FALLBACK_POPOVER_WIDTH = 220;
621
658
  var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
622
- return /* @__PURE__ */ React17.createElement(
623
- import_ui17.Box,
659
+ return /* @__PURE__ */ React18.createElement(
660
+ import_ui18.Box,
624
661
  {
625
662
  display: "flex",
626
663
  flexDirection: "column",
@@ -637,7 +674,7 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
637
674
  };
638
675
 
639
676
  // src/components/popover/section-popover-body.tsx
640
- var React18 = __toESM(require("react"));
677
+ var React19 = __toESM(require("react"));
641
678
 
642
679
  // src/contexts/section-context.tsx
643
680
  var import_react12 = require("react");
@@ -652,12 +689,12 @@ var useSectionWidth = () => {
652
689
  // src/components/popover/section-popover-body.tsx
653
690
  var SectionPopoverBody = (props) => {
654
691
  const sectionWidth = useSectionWidth();
655
- return /* @__PURE__ */ React18.createElement(PopoverBody, { ...props, width: sectionWidth });
692
+ return /* @__PURE__ */ React19.createElement(PopoverBody, { ...props, width: sectionWidth });
656
693
  };
657
694
 
658
695
  // src/components/popover/header.tsx
659
- var React19 = __toESM(require("react"));
660
- var import_ui18 = require("@elementor/ui");
696
+ var React20 = __toESM(require("react"));
697
+ var import_ui19 = require("@elementor/ui");
661
698
  var SIZE2 = "tiny";
662
699
  var PopoverHeader = ({ title, onClose, icon, actions }) => {
663
700
  const paddingAndSizing = {
@@ -666,13 +703,13 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
666
703
  py: 1.5,
667
704
  maxHeight: 36
668
705
  };
669
- return /* @__PURE__ */ React19.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React19.createElement(import_ui18.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React19.createElement(import_ui18.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React19.createElement(import_ui18.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
706
+ return /* @__PURE__ */ React20.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React20.createElement(import_ui19.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React20.createElement(import_ui19.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React20.createElement(import_ui19.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
670
707
  };
671
708
 
672
709
  // src/components/popover/menu-list.tsx
673
- var React20 = __toESM(require("react"));
710
+ var React21 = __toESM(require("react"));
674
711
  var import_react15 = require("react");
675
- var import_ui19 = require("@elementor/ui");
712
+ var import_ui20 = require("@elementor/ui");
676
713
  var import_react_virtual = require("@tanstack/react-virtual");
677
714
 
678
715
  // src/hooks/use-scroll-to-selected.ts
@@ -739,7 +776,7 @@ var PopoverMenuList = ({
739
776
  }) => {
740
777
  const containerRef = (0, import_react15.useRef)(null);
741
778
  const scrollTop = useScrollTop({ containerRef });
742
- const theme = (0, import_ui19.useTheme)();
779
+ const theme = (0, import_ui20.useTheme)();
743
780
  const MenuListComponent = CustomMenuList || StyledMenuList;
744
781
  const stickyIndices = (0, import_react15.useMemo)(
745
782
  () => items.reduce((categoryIndices, item, index) => {
@@ -780,7 +817,7 @@ var PopoverMenuList = ({
780
817
  }, [items]);
781
818
  useScrollToSelected({ selectedValue, items, virtualizer });
782
819
  const virtualItems = virtualizer.getVirtualItems();
783
- return /* @__PURE__ */ React20.createElement(import_ui19.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React20.createElement(
820
+ return /* @__PURE__ */ React21.createElement(import_ui20.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React21.createElement(
784
821
  MenuListComponent,
785
822
  {
786
823
  role: "listbox",
@@ -798,8 +835,8 @@ var PopoverMenuList = ({
798
835
  }
799
836
  if (item.type === "category") {
800
837
  const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
801
- return /* @__PURE__ */ React20.createElement(
802
- import_ui19.MenuSubheader,
838
+ return /* @__PURE__ */ React21.createElement(
839
+ import_ui20.MenuSubheader,
803
840
  {
804
841
  key: virtualRow.key,
805
842
  style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -809,8 +846,8 @@ var PopoverMenuList = ({
809
846
  );
810
847
  }
811
848
  const isDisabled = item.disabled;
812
- return /* @__PURE__ */ React20.createElement(
813
- import_ui19.ListItem,
849
+ return /* @__PURE__ */ React21.createElement(
850
+ import_ui20.ListItem,
814
851
  {
815
852
  key: virtualRow.key,
816
853
  role: "option",
@@ -849,7 +886,7 @@ var PopoverMenuList = ({
849
886
  })
850
887
  ));
851
888
  };
852
- var StyledMenuList = (0, import_ui19.styled)(import_ui19.MenuList)(({ theme }) => ({
889
+ var StyledMenuList = (0, import_ui20.styled)(import_ui20.MenuList)(({ theme }) => ({
853
890
  "& > li": {
854
891
  height: ITEM_HEIGHT,
855
892
  width: "100%",
@@ -879,16 +916,16 @@ var StyledMenuList = (0, import_ui19.styled)(import_ui19.MenuList)(({ theme }) =
879
916
  }));
880
917
 
881
918
  // src/components/popover/popover-action.tsx
882
- var React21 = __toESM(require("react"));
883
- var import_ui20 = require("@elementor/ui");
919
+ var React22 = __toESM(require("react"));
920
+ var import_ui21 = require("@elementor/ui");
884
921
  var SIZE3 = "tiny";
885
922
  function PopoverAction({ title, visible = true, icon: Icon, content: PopoverContent }) {
886
923
  const { popupState, triggerProps, popoverProps } = useFloatingActionsPopover();
887
924
  if (!visible) {
888
925
  return null;
889
926
  }
890
- return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui20.Tooltip, { placement: "top", title }, /* @__PURE__ */ React21.createElement(import_ui20.IconButton, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React21.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React21.createElement(
891
- import_ui20.Popover,
927
+ return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui21.Tooltip, { placement: "top", title }, /* @__PURE__ */ React22.createElement(import_ui21.IconButton, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React22.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React22.createElement(
928
+ import_ui21.Popover,
892
929
  {
893
930
  disableScrollLock: true,
894
931
  anchorOrigin: {
@@ -904,14 +941,14 @@ function PopoverAction({ title, visible = true, icon: Icon, content: PopoverCont
904
941
  },
905
942
  ...popoverProps
906
943
  },
907
- /* @__PURE__ */ React21.createElement(PopoverContent, { close: popupState.close })
944
+ /* @__PURE__ */ React22.createElement(PopoverContent, { close: popupState.close })
908
945
  ));
909
946
  }
910
947
  function useFloatingActionsPopover() {
911
948
  const { setOpen } = useFloatingActionsBar();
912
- const popupState = (0, import_ui20.usePopupState)({ variant: "popover" });
913
- const triggerProps = (0, import_ui20.bindTrigger)(popupState);
914
- const popoverProps = (0, import_ui20.bindPopover)(popupState);
949
+ const popupState = (0, import_ui21.usePopupState)({ variant: "popover" });
950
+ const triggerProps = (0, import_ui21.bindTrigger)(popupState);
951
+ const popoverProps = (0, import_ui21.bindPopover)(popupState);
915
952
  const onClick = (e) => {
916
953
  triggerProps.onClick(e);
917
954
  setOpen(true);
@@ -932,14 +969,14 @@ function useFloatingActionsPopover() {
932
969
  }
933
970
 
934
971
  // src/components/save-changes-dialog.tsx
935
- var React22 = __toESM(require("react"));
972
+ var React23 = __toESM(require("react"));
936
973
  var import_react16 = require("react");
937
- var import_icons7 = require("@elementor/icons");
938
- var import_ui21 = require("@elementor/ui");
974
+ var import_icons8 = require("@elementor/icons");
975
+ var import_ui22 = require("@elementor/ui");
939
976
  var TITLE_ID = "save-changes-dialog";
940
- var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React22.createElement(import_ui21.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
941
- var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React22.createElement(
942
- import_ui21.DialogTitle,
977
+ var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React23.createElement(import_ui22.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
978
+ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React23.createElement(
979
+ import_ui22.DialogTitle,
943
980
  {
944
981
  id: TITLE_ID,
945
982
  display: "flex",
@@ -947,11 +984,11 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React22.
947
984
  gap: 1,
948
985
  sx: { lineHeight: 1, justifyContent: "space-between" }
949
986
  },
950
- /* @__PURE__ */ React22.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), children),
951
- onClose && /* @__PURE__ */ React22.createElement(import_ui21.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React22.createElement(import_icons7.XIcon, null))
987
+ /* @__PURE__ */ React23.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(import_icons8.AlertTriangleFilledIcon, { color: "secondary" }), children),
988
+ onClose && /* @__PURE__ */ React23.createElement(import_ui22.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React23.createElement(import_icons8.XIcon, null))
952
989
  );
953
- var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React22.createElement(import_ui21.DialogContent, null, children);
954
- var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React22.createElement(import_ui21.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
990
+ var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React23.createElement(import_ui22.DialogContent, null, children);
991
+ var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React23.createElement(import_ui22.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
955
992
  var SaveChangesDialogActions = ({ actions }) => {
956
993
  const [isConfirming, setIsConfirming] = (0, import_react16.useState)(false);
957
994
  const { cancel, confirm, discard } = actions;
@@ -960,7 +997,7 @@ var SaveChangesDialogActions = ({ actions }) => {
960
997
  await confirm.action();
961
998
  setIsConfirming(false);
962
999
  };
963
- return /* @__PURE__ */ React22.createElement(import_ui21.DialogActions, null, cancel && /* @__PURE__ */ React22.createElement(import_ui21.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React22.createElement(import_ui21.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React22.createElement(import_ui21.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
1000
+ return /* @__PURE__ */ React23.createElement(import_ui22.DialogActions, null, cancel && /* @__PURE__ */ React23.createElement(import_ui22.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React23.createElement(import_ui22.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React23.createElement(import_ui22.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
964
1001
  };
965
1002
  SaveChangesDialog.Title = SaveChangesDialogTitle;
966
1003
  SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -974,21 +1011,21 @@ var useDialog = () => {
974
1011
  };
975
1012
 
976
1013
  // src/components/confirmation-dialog.tsx
977
- var React23 = __toESM(require("react"));
978
- var import_icons8 = require("@elementor/icons");
979
- var import_ui22 = require("@elementor/ui");
980
- var import_i18n4 = require("@wordpress/i18n");
1014
+ var React24 = __toESM(require("react"));
1015
+ var import_icons9 = require("@elementor/icons");
1016
+ var import_ui23 = require("@elementor/ui");
1017
+ var import_i18n5 = require("@wordpress/i18n");
981
1018
  var TITLE_ID2 = "confirmation-dialog";
982
- var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React23.createElement(import_ui22.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
983
- var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React23.createElement(import_ui22.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React23.createElement(import_icons8.AlertOctagonFilledIcon, { color: "error" }), children);
984
- var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React23.createElement(import_ui22.DialogContent, null, children);
985
- var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React23.createElement(import_ui22.DialogContentText, { variant: "body2", color: "textPrimary", ...props });
1019
+ var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React24.createElement(import_ui23.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
1020
+ var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React24.createElement(import_ui23.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React24.createElement(import_icons9.AlertOctagonFilledIcon, { color: "error" }), children);
1021
+ var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React24.createElement(import_ui23.DialogContent, null, children);
1022
+ var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React24.createElement(import_ui23.DialogContentText, { variant: "body2", color: "textPrimary", ...props });
986
1023
  var ConfirmationDialogActions = ({
987
1024
  onClose,
988
1025
  onConfirm,
989
1026
  cancelLabel,
990
1027
  confirmLabel
991
- }) => /* @__PURE__ */ React23.createElement(import_ui22.DialogActions, null, /* @__PURE__ */ React23.createElement(import_ui22.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n4.__)("Not now", "elementor")), /* @__PURE__ */ React23.createElement(import_ui22.Button, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? (0, import_i18n4.__)("Delete", "elementor")));
1028
+ }) => /* @__PURE__ */ React24.createElement(import_ui23.DialogActions, null, /* @__PURE__ */ React24.createElement(import_ui23.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n5.__)("Not now", "elementor")), /* @__PURE__ */ React24.createElement(import_ui23.Button, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? (0, import_i18n5.__)("Delete", "elementor")));
992
1029
  ConfirmationDialog.Title = ConfirmationDialogTitle;
993
1030
  ConfirmationDialog.Content = ConfirmationDialogContent;
994
1031
  ConfirmationDialog.ContentText = ConfirmationDialogContentText;
@@ -1118,6 +1155,7 @@ var selectAll = (el) => {
1118
1155
  PopoverBody,
1119
1156
  PopoverHeader,
1120
1157
  PopoverMenuList,
1158
+ PromotionAlert,
1121
1159
  PromotionChip,
1122
1160
  PromotionInfotip,
1123
1161
  PromotionPopover,
package/dist/index.mjs CHANGED
@@ -551,8 +551,44 @@ var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
551
551
  );
552
552
  });
553
553
 
554
- // src/components/floating-bar.tsx
554
+ // src/components/promotion-alert.tsx
555
555
  import * as React16 from "react";
556
+ import { CrownFilledIcon as CrownFilledIcon4 } from "@elementor/icons";
557
+ import { Alert as Alert4, Box as Box6 } from "@elementor/ui";
558
+ import { __ as __4 } from "@wordpress/i18n";
559
+ var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.createElement(
560
+ Alert4,
561
+ {
562
+ variant: "standard",
563
+ color: "promotion",
564
+ icon: false,
565
+ role: "dialog",
566
+ "aria-label": "promotion-alert",
567
+ size: "small",
568
+ sx: { m: 2, mt: 1, mb: 1, pt: 0.25, pb: 1 }
569
+ },
570
+ message,
571
+ /* @__PURE__ */ React16.createElement(
572
+ Box6,
573
+ {
574
+ component: "a",
575
+ href: upgradeUrl,
576
+ target: "_blank",
577
+ rel: "noopener noreferrer",
578
+ sx: {
579
+ display: "flex",
580
+ alignItems: "center",
581
+ gap: 0.5,
582
+ color: "promotion.main"
583
+ }
584
+ },
585
+ /* @__PURE__ */ React16.createElement(CrownFilledIcon4, { fontSize: "tiny" }),
586
+ __4("Upgrade now", "elementor")
587
+ )
588
+ );
589
+
590
+ // src/components/floating-bar.tsx
591
+ import * as React17 from "react";
556
592
  import { createContext, useContext, useState as useState5 } from "react";
557
593
  import { styled as styled3, UnstableFloatingActionBar } from "@elementor/ui";
558
594
  var FloatingBarContainer = styled3("span")`
@@ -569,7 +605,7 @@ var FloatingBarContainer = styled3("span")`
569
605
  var FloatingActionsContext = createContext(null);
570
606
  function FloatingActionsBar({ actions, children }) {
571
607
  const [open, setOpen] = useState5(false);
572
- return /* @__PURE__ */ React16.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React16.createElement(FloatingBarContainer, null, /* @__PURE__ */ React16.createElement(UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
608
+ return /* @__PURE__ */ React17.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React17.createElement(FloatingBarContainer, null, /* @__PURE__ */ React17.createElement(UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
573
609
  }
574
610
  function useFloatingActionsBar() {
575
611
  const context = useContext(FloatingActionsContext);
@@ -580,14 +616,14 @@ function useFloatingActionsBar() {
580
616
  }
581
617
 
582
618
  // src/components/popover/body.tsx
583
- import * as React17 from "react";
584
- import { Box as Box6 } from "@elementor/ui";
619
+ import * as React18 from "react";
620
+ import { Box as Box7 } from "@elementor/ui";
585
621
  var SECTION_PADDING_INLINE = 32;
586
622
  var DEFAULT_POPOVER_HEIGHT = 348;
587
623
  var FALLBACK_POPOVER_WIDTH = 220;
588
624
  var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
589
- return /* @__PURE__ */ React17.createElement(
590
- Box6,
625
+ return /* @__PURE__ */ React18.createElement(
626
+ Box7,
591
627
  {
592
628
  display: "flex",
593
629
  flexDirection: "column",
@@ -604,7 +640,7 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
604
640
  };
605
641
 
606
642
  // src/components/popover/section-popover-body.tsx
607
- import * as React18 from "react";
643
+ import * as React19 from "react";
608
644
 
609
645
  // src/contexts/section-context.tsx
610
646
  import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -619,11 +655,11 @@ var useSectionWidth = () => {
619
655
  // src/components/popover/section-popover-body.tsx
620
656
  var SectionPopoverBody = (props) => {
621
657
  const sectionWidth = useSectionWidth();
622
- return /* @__PURE__ */ React18.createElement(PopoverBody, { ...props, width: sectionWidth });
658
+ return /* @__PURE__ */ React19.createElement(PopoverBody, { ...props, width: sectionWidth });
623
659
  };
624
660
 
625
661
  // src/components/popover/header.tsx
626
- import * as React19 from "react";
662
+ import * as React20 from "react";
627
663
  import { CloseButton as CloseButton2, Stack, Typography as Typography5 } from "@elementor/ui";
628
664
  var SIZE2 = "tiny";
629
665
  var PopoverHeader = ({ title, onClose, icon, actions }) => {
@@ -633,13 +669,13 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
633
669
  py: 1.5,
634
670
  maxHeight: 36
635
671
  };
636
- return /* @__PURE__ */ React19.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React19.createElement(Typography5, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React19.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React19.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
672
+ return /* @__PURE__ */ React20.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React20.createElement(Typography5, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React20.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React20.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
637
673
  };
638
674
 
639
675
  // src/components/popover/menu-list.tsx
640
- import * as React20 from "react";
676
+ import * as React21 from "react";
641
677
  import { useEffect as useEffect7, useMemo, useRef as useRef3 } from "react";
642
- import { Box as Box7, ListItem, MenuList, MenuSubheader, styled as styled4, useTheme } from "@elementor/ui";
678
+ import { Box as Box8, ListItem, MenuList, MenuSubheader, styled as styled4, useTheme } from "@elementor/ui";
643
679
  import { useVirtualizer } from "@tanstack/react-virtual";
644
680
 
645
681
  // src/hooks/use-scroll-to-selected.ts
@@ -747,7 +783,7 @@ var PopoverMenuList = ({
747
783
  }, [items]);
748
784
  useScrollToSelected({ selectedValue, items, virtualizer });
749
785
  const virtualItems = virtualizer.getVirtualItems();
750
- return /* @__PURE__ */ React20.createElement(Box7, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React20.createElement(
786
+ return /* @__PURE__ */ React21.createElement(Box8, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React21.createElement(
751
787
  MenuListComponent,
752
788
  {
753
789
  role: "listbox",
@@ -765,7 +801,7 @@ var PopoverMenuList = ({
765
801
  }
766
802
  if (item.type === "category") {
767
803
  const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
768
- return /* @__PURE__ */ React20.createElement(
804
+ return /* @__PURE__ */ React21.createElement(
769
805
  MenuSubheader,
770
806
  {
771
807
  key: virtualRow.key,
@@ -776,7 +812,7 @@ var PopoverMenuList = ({
776
812
  );
777
813
  }
778
814
  const isDisabled = item.disabled;
779
- return /* @__PURE__ */ React20.createElement(
815
+ return /* @__PURE__ */ React21.createElement(
780
816
  ListItem,
781
817
  {
782
818
  key: virtualRow.key,
@@ -846,7 +882,7 @@ var StyledMenuList = styled4(MenuList)(({ theme }) => ({
846
882
  }));
847
883
 
848
884
  // src/components/popover/popover-action.tsx
849
- import * as React21 from "react";
885
+ import * as React22 from "react";
850
886
  import { bindPopover, bindTrigger, IconButton as IconButton2, Popover, Tooltip as Tooltip3, usePopupState } from "@elementor/ui";
851
887
  var SIZE3 = "tiny";
852
888
  function PopoverAction({ title, visible = true, icon: Icon, content: PopoverContent }) {
@@ -854,7 +890,7 @@ function PopoverAction({ title, visible = true, icon: Icon, content: PopoverCont
854
890
  if (!visible) {
855
891
  return null;
856
892
  }
857
- return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Tooltip3, { placement: "top", title }, /* @__PURE__ */ React21.createElement(IconButton2, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React21.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React21.createElement(
893
+ return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Tooltip3, { placement: "top", title }, /* @__PURE__ */ React22.createElement(IconButton2, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React22.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React22.createElement(
858
894
  Popover,
859
895
  {
860
896
  disableScrollLock: true,
@@ -871,7 +907,7 @@ function PopoverAction({ title, visible = true, icon: Icon, content: PopoverCont
871
907
  },
872
908
  ...popoverProps
873
909
  },
874
- /* @__PURE__ */ React21.createElement(PopoverContent, { close: popupState.close })
910
+ /* @__PURE__ */ React22.createElement(PopoverContent, { close: popupState.close })
875
911
  ));
876
912
  }
877
913
  function useFloatingActionsPopover() {
@@ -899,7 +935,7 @@ function useFloatingActionsPopover() {
899
935
  }
900
936
 
901
937
  // src/components/save-changes-dialog.tsx
902
- import * as React22 from "react";
938
+ import * as React23 from "react";
903
939
  import { useState as useState7 } from "react";
904
940
  import { AlertTriangleFilledIcon, XIcon as XIcon2 } from "@elementor/icons";
905
941
  import {
@@ -913,8 +949,8 @@ import {
913
949
  Stack as Stack2
914
950
  } from "@elementor/ui";
915
951
  var TITLE_ID = "save-changes-dialog";
916
- var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React22.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
917
- var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React22.createElement(
952
+ var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React23.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
953
+ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React23.createElement(
918
954
  DialogTitle2,
919
955
  {
920
956
  id: TITLE_ID,
@@ -923,11 +959,11 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React22.
923
959
  gap: 1,
924
960
  sx: { lineHeight: 1, justifyContent: "space-between" }
925
961
  },
926
- /* @__PURE__ */ React22.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
927
- onClose && /* @__PURE__ */ React22.createElement(IconButton3, { onClick: onClose, size: "small" }, /* @__PURE__ */ React22.createElement(XIcon2, null))
962
+ /* @__PURE__ */ React23.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
963
+ onClose && /* @__PURE__ */ React23.createElement(IconButton3, { onClick: onClose, size: "small" }, /* @__PURE__ */ React23.createElement(XIcon2, null))
928
964
  );
929
- var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React22.createElement(DialogContent, null, children);
930
- var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React22.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
965
+ var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React23.createElement(DialogContent, null, children);
966
+ var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React23.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
931
967
  var SaveChangesDialogActions = ({ actions }) => {
932
968
  const [isConfirming, setIsConfirming] = useState7(false);
933
969
  const { cancel, confirm, discard } = actions;
@@ -936,7 +972,7 @@ var SaveChangesDialogActions = ({ actions }) => {
936
972
  await confirm.action();
937
973
  setIsConfirming(false);
938
974
  };
939
- return /* @__PURE__ */ React22.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React22.createElement(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React22.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React22.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
975
+ return /* @__PURE__ */ React23.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React23.createElement(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React23.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React23.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
940
976
  };
941
977
  SaveChangesDialog.Title = SaveChangesDialogTitle;
942
978
  SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -950,7 +986,7 @@ var useDialog = () => {
950
986
  };
951
987
 
952
988
  // src/components/confirmation-dialog.tsx
953
- import * as React23 from "react";
989
+ import * as React24 from "react";
954
990
  import { AlertOctagonFilledIcon } from "@elementor/icons";
955
991
  import {
956
992
  Button as Button5,
@@ -960,18 +996,18 @@ import {
960
996
  DialogContentText as DialogContentText2,
961
997
  DialogTitle as DialogTitle3
962
998
  } from "@elementor/ui";
963
- import { __ as __4 } from "@wordpress/i18n";
999
+ import { __ as __5 } from "@wordpress/i18n";
964
1000
  var TITLE_ID2 = "confirmation-dialog";
965
- var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React23.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
966
- var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React23.createElement(DialogTitle3, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React23.createElement(AlertOctagonFilledIcon, { color: "error" }), children);
967
- var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React23.createElement(DialogContent2, null, children);
968
- var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React23.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", ...props });
1001
+ var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React24.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
1002
+ var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React24.createElement(DialogTitle3, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React24.createElement(AlertOctagonFilledIcon, { color: "error" }), children);
1003
+ var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React24.createElement(DialogContent2, null, children);
1004
+ var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React24.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", ...props });
969
1005
  var ConfirmationDialogActions = ({
970
1006
  onClose,
971
1007
  onConfirm,
972
1008
  cancelLabel,
973
1009
  confirmLabel
974
- }) => /* @__PURE__ */ React23.createElement(DialogActions3, null, /* @__PURE__ */ React23.createElement(Button5, { color: "secondary", onClick: onClose }, cancelLabel ?? __4("Not now", "elementor")), /* @__PURE__ */ React23.createElement(Button5, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? __4("Delete", "elementor")));
1010
+ }) => /* @__PURE__ */ React24.createElement(DialogActions3, null, /* @__PURE__ */ React24.createElement(Button5, { color: "secondary", onClick: onClose }, cancelLabel ?? __5("Not now", "elementor")), /* @__PURE__ */ React24.createElement(Button5, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? __5("Delete", "elementor")));
975
1011
  ConfirmationDialog.Title = ConfirmationDialogTitle;
976
1012
  ConfirmationDialog.Content = ConfirmationDialogContent;
977
1013
  ConfirmationDialog.ContentText = ConfirmationDialogContentText;
@@ -1100,6 +1136,7 @@ export {
1100
1136
  PopoverBody,
1101
1137
  PopoverHeader,
1102
1138
  PopoverMenuList,
1139
+ PromotionAlert,
1103
1140
  PromotionChip,
1104
1141
  PromotionInfotip,
1105
1142
  PromotionPopover,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor-ui",
3
3
  "description": "Elementor Editor UI",
4
- "version": "4.0.0-539",
4
+ "version": "4.0.0-540",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -37,7 +37,7 @@
37
37
  "react-dom": "^18.3.1"
38
38
  },
39
39
  "dependencies": {
40
- "@elementor/editor-v1-adapters": "4.0.0-539",
40
+ "@elementor/editor-v1-adapters": "4.0.0-540",
41
41
  "@elementor/icons": "^1.63.0",
42
42
  "@elementor/ui": "1.36.17",
43
43
  "@tanstack/react-virtual": "^3.13.3",
package/src/components/promotion-alert.tsx ADDED
@@ -0,0 +1,38 @@
1
+ import * as React from 'react';
2
+ import { CrownFilledIcon } from '@elementor/icons';
3
+ import { Alert, Box } from '@elementor/ui';
4
+ import { __ } from '@wordpress/i18n';
5
+
6
+ type PromotionAlertProps = {
7
+ message: string;
8
+ upgradeUrl: string;
9
+ };
10
+
11
+ export const PromotionAlert = ( { message, upgradeUrl }: PromotionAlertProps ) => (
12
+ <Alert
13
+ variant="standard"
14
+ color="promotion"
15
+ icon={ false }
16
+ role="dialog"
17
+ aria-label="promotion-alert"
18
+ size="small"
19
+ sx={ { m: 2, mt: 1, mb: 1, pt: 0.25, pb: 1 } }
20
+ >
21
+ { message }
22
+ <Box
23
+ component="a"
24
+ href={ upgradeUrl }
25
+ target="_blank"
26
+ rel="noopener noreferrer"
27
+ sx={ {
28
+ display: 'flex',
29
+ alignItems: 'center',
30
+ gap: 0.5,
31
+ color: 'promotion.main',
32
+ } }
33
+ >
34
+ <CrownFilledIcon fontSize="tiny" />
35
+ { __( 'Upgrade now', 'elementor' ) }
36
+ </Box>
37
+ </Alert>
38
+ );
package/src/index.ts CHANGED
@@ -15,6 +15,7 @@ export { CtaButton } from './components/cta-button';
15
15
  export { PromotionInfotip } from './components/promotion-infotip';
16
16
  export { PromotionPopover } from './components/promotion-popover';
17
17
  export { PromotionChip } from './components/promotion-chip';
18
+ export { PromotionAlert } from './components/promotion-alert';
18
19
  export { FloatingActionsBar, useFloatingActionsBar } from './components/floating-bar';
19
20
 
20
21
  export * from './components/popover';